前端HTML知识详解（下）

前端HTML内容详解（下）

5.表格标签：

• 表格的完整语法格式:

<table>
    <thead>              （表格头部区域）
     <tr></tr>           （<tr></tr>标签定义表格的行）
      <th></th>   
      <th></th>          （<th></th>定义HTML表格的表头部分，文本内容加粗居中显示）
     </tr>
    </thead>
    <tbody>              （表格主题区域）
     <tr>         
      <td></td> 
      <td></td>          （<td</td>单元格内的文字）
     </tr>
    </tbody>
</table>

• 表格相关属性的使用：

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

• 合并单元格方式：
  1. 跨行合并：rowspan="合并单元格的个数"
  2. 跨列合并：colspan="合并单元格的个数"
  3. 合并单元格的三个基本步骤：
  • 先确定跨行还是跨列合并；
  • 找到目标单元格 （如< td colspan=“2”>,合并方式=合并的单元格数量）；
  • 删除多余的单元格；

6.列表标签：

1. 无序列表的语法格式：

   <ul>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
   </ul>
   

2. 有序列表的语法格式：

   <ol>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
   </ol>
   

3. (重点)自定义列表的语法格式（案例：天猫底部栏制作）：

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

   7.表单标签：

   • 表单的含义：在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息三个部分构成。

   • 表单的语法格式：

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

   • 表单控件（表单元素）：

   1. < input >表单元素：

      语法格式：

      <input type="属性值"/>
      

      • < input/>为单标签。

      • type属性设置不同的属性值用来指定不同的控件类型（文本、字段、复选框、按钮等）。

      • type属性的属性值及描述：

        属性值	描述
        button	按钮
        checkbox	复选框
        file	定义输入字段和"浏览"按钮，供文件上传
        hidden	定义隐藏的输入字段
        password	定义密码字段
        radio	定义单选按钮
        reset	定义重置按钮
        submit	定义提交按钮
        text	定义每行的输入字段

        • < input>表单元素的其他属性：

          属性	属性值	描述
          name	用户自定义	定义input元素名称
          value	用户自定义	规定input的值
          checked	checked	规定首次加载被选中
          maxlength	正整数	规定字符最大长度

   2. < select>表单元素：

      • 语法格式：

      <select>
          <option>选项1</option>
          <option>选项2</option>
          ......
      </select>
      

      注意：在< option>中定义selected="selected"时，当前项即为默认选中项。

   3. < textarea>表单元素（用户输入内容过多时使用文本域表单元素）：

      语法格式：

      <textarea rows="行数" cols="每行中的字符数"></textarea>
      

      8.< lable>标签：

      • < lable>标签的作用：用于绑定一个表单元素，点击< lable>标签内文本，浏览器会自动将焦点放到选择对应的表单上。

      • 语法格式：

        <lable for="sex">女</lable>
        <input type="radio" name="sex" id="sex"/>
        
        核心：<lable>标签的for属性应当与相关元素的id属性相同。