本文详细解读了HTML标签的语义应用，包括无序与有序列表、表格结构、内嵌框架、表单元素（如input、select、textarea）和表单语义化，以及label标签的使用。掌握这些元素有助于提升网页结构的清晰度和可访问性。
用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）
列表标签
1. 无序列表 <ul>
- ul：unordered list 无序列表
- li：list item 列表项
li不能单独存在，必须包裹在ul里面,ul里面也只能有li<li>之间相当于一个容器，可以容纳所有元素ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的<ul><li>标签都有type属性, 后者很少见- disc(实心原点，默认)
- square(实心方点)
- circle(空心圆)
type="square"
- 列表之间可以嵌套,
li里面是ul li ul标签实际应用场景
2. 有序列表 <ol>
- ol, Ordered List
- 属性:
type="属性值", 属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始 ol里面只能有li，li必须被ol包裹。li是容器级
3. 定义列表 <dl>
-
常用于对术语或名词进行解释和描述，前面没有任何项目符号
-
<dl>英文单词：definition list，没有属性, dl的子元素只能是dt和dd<dt>：definition title 列表的标题，这个标签是必须的<dd>：definition description 列表的列表项，是用于描述dt的, 如果不需要它，可以不加
-
dt、dd都是容器级标签，想放什么都可以
表格标签
表格标签用<table>表示。 一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的
<table>的属性:
- border：边框。像素为单位
- style=“border-collapse:collapse;”：单元格的线和表格的边框线合并（表格的两边框合并为一条）
- width：宽度。像素为单位
- height：高度。像素为单位
- bordercolor：表格的边框颜色
- align：表格的水平对齐方式, 并不是设置表格里内容的对齐方式
- left
- right
- center
- cellpadding：单元格内容到边的距离，像素为单位, 默认情况下的值为0
- cellspacing：单元格和单元格之间的距离（外边距），像素为单位, 默认情况下的值为0
<tr>属性:
- dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
- ltr：从左到右（left to right，默认）
- rtl：从右到左（right to left）
- bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。 height：一行的高度
- align=“center”：一行的内容水平居中显示，取值：left、center、right
- valign=“center”：一行的内容垂直居中，取值：top、middle、bottom
<td>的属性:
- align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
- valign：内容的纵向对齐方式。属性值可以填：top middle bottom
- width：绝对值或者相对值(%)
- height：单元格的高度
- bgcolor：设置这个单元格的背景色。
- background：设置这个单元格的背景图片。
<th>: 相当于<td> + <b>, 属性同<td>
单元格合并:
- 确定跨行还是跨列
- 跨行, 横向合并,
colspan, 最上侧单元格为目标单元格, 写合并代码 - 跨列, 横向合并,
rowspan, 最左侧单元格为目标单元格, 写合并代码
- 跨行, 横向合并,
- 找到目标单元格, 写上合并方式=合并单元格的数量
- 删除多余的单元格
<thead>标签、<tbody>标签、<tfoot>标签:
<thead>内部必须具有<tr>标签- 如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照t
head、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示 - 当表格非常大内容非常多的时候，如果用
thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来
内嵌框架
内嵌框架用<iframe>表示, <iframe>是<body>的子标记
属性:
- src=“subframe/the_second.html”：内嵌的那个页面
- width=800：宽度
- height=“150：高度
- scrolling=“no”：是否需要滚动条。默认值是true
- name=“mainFrame”：窗口名称。公有属性
表单标签
表单域
是一个包含表单元素的区域，用<form>表示, 用于与服务器进行交互
属性:
- name：表单的名称，用于JS来操作或控制表单时使用；
- id：表单的名称，用于JS来操作或控制表单时使用；
- action：url地址，用于指定接受并处理表单数据的服务器程序的url地址，指定表单数据的处理程序，也就是表单要提交到哪里，一般是PHP，如：action=“login.php”
- method：表单数据的提交方式，一般取值：get(默认)和post
- Enctype： 表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用
- Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：上传附件时，必须使用这种编码方式
<form action="demo.php" method="POST" name="name1">
</form>
GET方式： 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用 “?” 隔开，每一个表单的 “name=value” 间用 “&” 号隔开。 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式： 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
表单元素
1. input输入表单元素
<input type="text" />
属性:
- name: 定义input元素的名称，区别表单元素
- value=“内容”：文本框里的默认内容（已经被填好了的）
- checked：规定此input元素首次加载时应当被选中
- size=“50”：表示文本框内可以显示五十个字符
- readonly：文本框只读，不能编辑, 属性值可以不写
- disabled：文本框只读，不能编辑，光标点不进去, 属性值可以不写
- maxlength：规定字段中的字符的最大长度，较少使用
- type=“属性值”：文本类型
- text（默认）
- password：密码类型
- radio：单选按钮，名字相同的按钮作为一组进行单选
- checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择
- checked：将单选按钮或多选按钮默认处于选中状态
- hidden：隐藏框，在表单中包含不希望用户看见的信息
- button：普通按钮
- submit：提交按钮，传送当前表单的数据给服务器或其他程序处理
- reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
- image：图片按钮，和提交按钮的功能完全一致
- file：文件选择框
name表单元素的名字，要求 单选按钮和复选框 要有相同的name值
2. select 下拉表单元素
<select>标签里面的每一项用<option>表示
select标签和ul、ol、dl一样，都是组标签
<select>标签属性:
- multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple=“multiple”
- size=“3”：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图
<option>标签属性:
- selected：预选中。没有属性值。selected=“selected”
3. textarea 文本域元素
属性：
- rows=“4”：指定文本区域的行数
- cols=“20”：指定文本区域的列数
- readonly：只读
4. 表单语义化
<form>
<fieldset>
<legend>账号信息</legend>
姓名：<input value="呵呵" >逗比<br>
密码：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
label标签
扫一扫
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
