前端 -- HTML块级标签

顺晟科技

2022-09-15 20:34:18

199

块级标签

1. 标题标签

占满一整行,自带换行效果

标题标签: h1 -- h6 ( 1-6是指标题等级,大小不同)

2. 列表标签

列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。

<!--无序列表-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--属性type:disc(默认实心圆)\square(实心方形)\circle(空心圆)\none(不显示样式)-->
<ul type="disc">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<ul type="square">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<ul type="circle">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<ul type="none">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
</body>
</html>

<!--dl定义列表-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>巴塞罗那</dt>  <!--表示标题-->
    <dd>里奥梅西</dd>  <!--表示内容-->
    <dd>伊涅斯塔</dd>
    <dd>苏亚雷斯</dd>
</dl>
</body>
</html>

<!--有序列表-->

属性type:1(默认)\a(小写字母)\A(大写字母)\I(大写罗马数字)\i(小写罗马数字)
属性start:设置开始位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--默认显示1,2,3序号,可以指定开始的值-->
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<!--设置根据a,b,c显示,可以指定开始的值-->
<ol type="a" start="c">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<!--设置根据A,B,C显示,可以指定开始的值-->
<ol type="A">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<!--设置根据大写罗马数字,可以指定开始的值-->
<ol type="I">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<!--设置根据小写罗马数字,可以指定开始的值-->
<ol type="i">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
</body>
</html>

3. 表格标签

表格标签用<table>表示。一个表格<table>是由表头<thead>和表格内容<tbody>组成的。其中的每一行又是由<tr>组成的，每行中的每一格是由<td>组成的

border="1":加边框,数值越大,外边框越粗
cellpadding="10px":元素与边框之间的距离
cellspacing="20px":边框与边框之间的距离
colspan：横向合并。colspan="2"表示当前单元格在水平方向占据两个单元格的位置(数字表示合并单元格个数)
rowspan：纵向合并。rowspan="2"表示当前单元格在垂直方向占据两个单元格的位置(合并必须删掉其中一个单元格的值)
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
<!--表头可以省略-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellpadding="10px" cellspacing="20">
    <thead>
    <tr>
        <th>第一列</th>  <!--表头标题-->
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    </thead>
    <tbody>
    <tr>  <!--第一行-->
        <td rowspan="2">1-1</td> 合并第一列的前两个单元格
        <td>2-1</td>
        <td>3-1</td>
    </tr>
    <tr>  <!--第二行-->
        <!--<td>1-2</td>--> 删除这个数据,将第一列的前两个单元格合并
        <td>2-2</td>
        <td>3-2</td>
    </tr>
    <tr>  <!--第三行-->
        <td>1-3</td>
        <td rowspan="2">2-3</td>
        <!--<td>3-3</td>--> 删除这个数据,将第二列的最后一个单元与第三列的最后一个单元合并
    </tr>
    </tbody>
</table>
</body>
</html>

4. 排版标签

p:段落标签,会自动在段落上下加上空白来分开段落,p标签是一个文本级标签,内部不可以再嵌套块级元素

div:什么样式都没有的块级标签 -- 用的最多

hr:单闭合边前,显示一条分割线

center:居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>这是第一段的内容</p>  <!--上下有空白部分-->
<p>这是第二段的内容</p>
<center>居中在分割线上方</center>
<hr>
<div>我在上面</div>
<div>中间没有空白</div>
<div>我在下面</div>
</body>
</html>

5. form表单

作用:

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

基本概念：　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

<input>：输入标签（文本框）（内联标签）

text 单行输入文本 <input type=text" /> password 密码输入框（不显示明文） <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" name=\'x\' /> radio 单选框 <input type="radio" name=\'x\' /> submit 提交按钮 <input type="submit" value="提交" /> 发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 reset 重置按钮 <input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空 button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" />

type属性值	表现形式	对应代码

<!--form:表单标签-->
    action:提交到的地址,把表单中的数据提交到对应的地址上
input:
    type种类:text,password,radio,checkbox,submit,reset,hidden,button,file,date
    name\value:把数据提交到后台的,提交的是input标签的name值和value值
对于选择框: 
    checked :表示默认选中
    readonly :对于输入框的禁止修改 可以提交
    disabled :对于所有元素不能修改 也不能提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9000">
    <input type="text" name="username" placeholder="手机号/邮箱">
    <input type="password" name="password">
<!--    注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,可以提交-->
<!--    注意:如果设置了disabled,可以给索引的表单元素设置,那么不能修改,也不能提交-->
    <input type="radio" name="sex" value="1" checked>男
    <input type="radio" name="sex" value="2">女
    <input type="checkbox" name="hobby" value="a">音乐
    <input type="checkbox" name="hobby" value="b" checked>足球
    <input type="checkbox" name="hobby" value="c">电影
    <input type="submit" value="点我提交">
    <button>提交按钮</button>
<!-- 注意:如果input的submit和button放在form表单中都表示提交-->
    <hr>
    <input type="hidden">
    <input type="reset">
    <input type="button" value="我只一个小按钮">
    <input type="file">
    <input type="date">
</form>

<input type="submit">
<button>提交按钮</button>
<!--注意:如果submit和button放在form表单外面,就是普通的按钮-->
</body>
</html>

<!--label-->
    for属性,点击lable中的内容,让for标示的id对应的元素获得焦点
    <label for="user">姓名:</label>
    <input type="text" name="username" id="user">

<!--textarea-->:文本框
    <textarea name="" id="" cols="30" rows="10"></textarea>

<!--select-->
select选择框:
    multiple:设置多选框
    size:选择框显示大小
option选项:
    selected:默认选中
    <select name="city" id="" size="3">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
    </select>

    <select name="" id="" multiple>
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">天津</option>
    </select>
<!--注意:默认是单选-->
<!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选-->

网站建设

Html