HTM复习

阅读目录

• 无序列表(重点)
• 有序列表
• 自定义列表
• 核心标签
• 表格相关属性(了解，提前熟悉单词，后面会用到)
• 辅助标签(了解)
• 合并单元格
• 标签
• 表单元素其他属性

主要内容

1. 列表

2. 表格

3. 表单

4. 语义化标签

5. 字符实体

列表

应用场景：新闻列表、商品列表、导航菜单...

回到顶部

无序列表(重点)

标签

• ul 无序列表整体 双标签 独占一行 子级 只能 放li

• li 表示一个列表项 双标签 独占一行 内部可以放任意内容

• <!-- ul>li   快速得到 嵌套结构的两个标签 -->
      <!-- ul表示无序列表整体，li表示一个列表项 -->
      <ul>
        <li>电脑</li>
        <li>
          手机
          <ul>
            <li>华为手机</li>
            <li>小米手机</li>
            <li>苹果手机</li>
          </ul>
        </li>
        <li>投影仪</li>
      </ul>

  回到顶部

  有序列表

  标签

  • ol 有序列表整体 双标签 独占一行 子级 只能 放li

  • li 表示一个列表项 双标签 独占一行 内部可以放任意内容 li外部必须被ul或ol包裹

  <ol>
       <li>800分</li>
       <li>1000分</li>
       <li>900分</li>
  </ol>

  回到顶部

  自定义列表

  标签

  • dl 自定义列表整体 双标签 独占一行 子级 只能 放dt及dd

  • dt 自定义列表中的 定义标题 后面通常跟多个dd 独占一行

  • dd 用于描述dt 独占一行

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
    <dl>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>

    表格

    应用场景：用表格方式展示数据时，如成绩表、课程表...

    回到顶部

    核心标签

    • table 表示表格整体 独占一行 内部只能放 tr td caption 等相关标签

    • tr 表示 表格中的一行 必须包裹在table中

    • td 表示行中的一个单元格 必须被包裹在tr中，td中可放任意内容

      <table border="10" align="" width="400" height="100" cellspacing="0" cellpadding="20">
           <tr>
               <td width="200" align="center">姓    名</td>
               <td>年龄</td>
               <td>性别</td>
           </tr>
           <tr>
               <td>张三</td>
               <td>20</td>
               <td>男</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>30</td>
               <td>男</td>
           </tr>
      </table>

      回到顶部

      表格相关属性(了解，提前熟悉单词，后面会用到)

      • border 设置表格边框 属性值 为 正整数 表示边框宽度

      • align 用于设置表格的水平对齐方式 属性值为 left center right

      • width 用于设置表格的宽度 属性值 为 正整数

      • height 用于设置表格高度 属性值 为 正整数

      • cellspacing 用于设置相邻单元格之间的间距 属性值 为 正整数

      • cellpadding 用于设置单元格边缘与内容之间的间距 属性值 为 正整数

      回到顶部

      辅助标签(了解)

      • caption 用于定义表格标题 需作为table的子级 内容默认会水平居中

      • th 表示表头单元格 内容默认 居中加粗 实际应用较多

      • thead 表示表格头部

      • tbody 表示表格主体

      • tfoot表示表格底部 通常用于显示 汇总数据

      回到顶部

      合并单元格

      操作步骤：

      1. 根据左上原则(若为列合并则以最左边单元格为准，若为行合并则以最上面单元格为准) 确定目标单元格

      2. 在目标单元格中书写 xxxspan="合并的个数" 列合并时为 colspan 行合并时为 rowspan

      3. 删除多余单元格

      注意：不能跨结构(thead tbody tfoot)合并单元格

      <table  border="1" width="400" height="400" >
           <tr>
               <!--跨列合并3个单元格-->
               <td colspan="3"></td>
               <!-- <td></td>
      <td></td> -->
               <td></td>
           </tr>
           <tr>
               <!--跨行合并两个单元格，同时跨列合并两个单元格-->
               <td colspan="2" rowspan="2"></td>
               <!-- <td></td> -->
               <td rowspan="3"></td>
               <td></td>
           </tr>
           <tr>
               <!-- <td></td>
      <td></td> -->
               <!-- <td></td> -->
               <td></td>
           </tr>
           <tr>
               <td></td>
               <td></td>
               <!-- <td></td> -->
               <td></td>
           </tr>
      </table>

      表单

      应用场景:注册、登录、搜索框

      回到顶部

      标签

      • form 表示 表单域 用于 包裹 各种表单元素 会独占一行 通过action属性设置数据提交的目标文件路径

      • input 表示 输入控件 当type属性不同时会有不同的形态 不一定要被form包裹

        • type = "text" 单行文本框

        • type = "password" 密码框

        • type = "radio" 单选框

        • type = "checkbox" 复选框

        • type= "file" 文件域

        • type = "submit" 提交按钮

        • type = "reset" 重置按钮

        • type = "button" 普通按钮

      • button 表示按钮

        • type = "button" 普通按钮

        • type = "submit" 提交按钮

        • type = "reset" 重置按钮

      • select 表示下拉列表 option 表示下拉列表中的一项 必须被包裹在 select中

      • textarea 表示 文本域 可以输入多行文字 注意：内部的空格及换行会被完整解析

      • label 用于包裹 表单元素提示文字或图片 可通过for属性结合表单元素的id 与表单元素关联起来，提升用户体验。也可以同时将文字/图片及表单元素都包裹起来(非标准，不推荐)

        回到顶部

        表单元素其他属性

        属性名	作用	注意
        name	表示表单元素是什么信息	多个单选框的name属性值必须一致，不然没有单选效果；实际应用中必须有name才能成功提交数据，name值通常由程序员设定
        value	表示表单元素信息的值	value值通常由用户决定
        checked	决定单选框及复选框是否被选中
        placeholder	用于设置表单元素的提示信息	又被称为 占位符
        multiple	用于设置文件域多文件选择
        selected	可设置默认下拉列表项	用在option上
        for	可用于关联label及表单元素	用在label上

   

  用于布局的无语义标签

  标签名	作用	特点
  div	作为 通用容器 可存放 任意内容	独占一行
  span	通常用于存放文字	不会独占一行

  H5新增的语义化标签(IE9及以上浏览器支持，常用于移动端)

  标签名	作用
  header	网页头部
  nav	网页导航
  footer	网页底部
  aside	网页侧边栏
  article	网页文章
  section	网页区块

  以上标签其实都相当于div，只是增加了具体的语义而已

  字符实体

  某些特殊符号(如 < > 空格 )因为有特殊含义，不能直接显示在网页里面，要显示的话需要用字符实体

  字符实体	作用
   	英文空格（重点）
  &lt;	<
  &gt;	>
  &emsp;	中文空格

   

 

 

 

 

 

21:34:00