HTML标签语义（下）

10.表格标签：用来展示数据的

• 基本语法：
  ​ table：用于定义表格
  ​ tr：定义表格中的行
  ​ td：定义表格中的单元格（td指table data，即单元格的内容）
  ​ th：表头单元格标签，table head 表格第一行，加粗居中

11.表格结构标签

为了更好地表示表格的语义，将表格分割为表格头部和表格主体两大部分

• 基本语法：
  thead：表格头部区域
  tbody：表格主体区域

• 表格属性（不提倡 一般用css来设置）：这些属性要写到table里

  属性名	属性值	描述
  align	left\center\right	规定表格相对周围元素的对齐方式
  border	1\""	规定表格单元是否拥有边框，默认为“”，表示没有边框
  cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
  cellspacing	像素值	规定单元格之间的空白，默认2像素
  width	像素值或百分比	规定表格的宽度

• 合并单元格：把多个单元格合并为一个单元格

  • 方式：
    跨行合并：rowspan=“合并单元格的个数
    跨列合并：colspan=“合并单元格的个数”

  • 目标单元格：（写合并代码）
    ​ 跨行：最上侧单元格为目标单元格，写合并代码
    ​ 跨列：最左侧单元格为目标单元格，写合并代码

  • 三步曲：

  1. 跨行/跨列
  2. 找到目标单元格
  3. 删除多余单元格

12.列表标签：用来布局的 整齐整洁有序

• 无序列表

  无序列表有自己的样式属性，用css来设置

  • li相当于一个容器，可以容纳所有元素
  • ul中只能放li，不能放其他标签或者文字

  	<ul>
          <li>列表项</li>
  	</ul>
  

• 有序列表

  有序列表有自己的样式属性，用css来设置

  • ol中只能放li，不能放其他标签或者文字
  • 选项间有一定顺序

  	<ol>
      	<li>列表项</li>
  	</ol>
  

• 自定义列表

  常用对术语或者名词进行解释和描述，定义列表项前没有任何项目符号

  • dl只能包含dt dd
  • dt dd个数没有限制，一般是一个dt对多个dd
  • dt dd可以放任何标签

  <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
  </dl>
  

13.表单标签：收集用户信息

• 组成：表单域(包含表单元素的区域 )+表单控件+提示信息

  ​ form会把它范围内的表单元素信息提交给服务器

  <form action="url地址" method="提交方式" name="表单域名称">
      各种表单控件
  </form>
  

• 表单控件：input / select / textarea

  • input：输入表单元素，用于收集用户信息

    属性	描述
    type	可以指定不同表单控件
    name	是表单元素的名字，单选按钮必须有相同的名字才能实现多选一，复选框要有相同的name值
    value	规定input元素的值
    checked	单选按钮或复选框可以设置，当页面打开时默认选中这个按钮
    maxlength	用得少，规定输入字段中的字符的最大长度

    其中type：

    属性type的值	描述
    text	文本，默认宽度为20个字符
    password	密码
    radio	单选按钮，可以实现多选一
    checkbox	复选框，可以实现多选
    submit	提交按钮，把表单域里的表单数据发送到服务器
    reset	重置按钮，清除表单中的所有数据
    button	可点击按钮，多数情况用于通过javascript启动脚本
    file	供文件上传

    label标签：用于绑定一个表单元素，当点击label标签内文本时，浏览器会自动将光标转到/选择对应的表单元素上，用来增加用户体验

    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex">
    

    核心：label标签的for属性应当与相关元素的id属性相同

  • select表单元素：下拉列表，有多个选项，并且想节省页面空间

    <select>
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
    

    属性：selected=“selected” 默认为选中

  • textarea文本域元素：输入内容较多，用于定义多行文本输入的控件，如留言板，评论区

    <textarea row="3" cols="20">
        文本内容
    </textarea>
    

    属性：cols=“每行中的字符数” rows=“显示的行数” 在实际开发不会使用，都是用css来改变大小

传送门:D
HTML标签语义（上）：https://blog.csdn.net/Y_ooo/article/details/121111270