ch03 -- HTML 标签第二部分

HTML 标签

---

<ul> 标签

---

用于添加信息列表。

列表可以使用 <ul>-<li> 标签来完成，`

• -
• 表示没有前后顺序的信息列表。

<ul>-<li> 标签在网页中显示的默认样式一般为：每项

• ` 前都自带一个圆点，

• 语法：

  <ul>
    <li>信息</li>
    <li>信息</li>
     ......
  </ul>
  

  
  

  <ol> 标签

  ---

  可以使用 <ol>-<li> 标签来制作有序列表，在网页中展示有前后顺序的信息列表。

  <ol> 在网页中显示的默认样式一般为：每项 <li> 前都自带一个序号，序号默认从 1 开始。

  语法：

  <ol>
     <li>信息</li>
     <li>信息</li>
     ......
  </ol>
  

  
  

  <div> 标签

  ---

  可以使用 <div> 标签排版。

  在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个 <div> 标签中。这个 <div> 标签的作用就相当于一个容器。

  语法：

  <div>…</div>
  

  确定逻辑部分：逻辑部分是页面上相互关联的一组元素。如网页中的独立的栏目版块。逻辑部分可以使用 <div> 标签作为容器。给 <div> 命名，使逻辑更加清晰。

  把一些标签放进 <div> 里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为 <div> 提供唯一的名称，名称必须唯一的。

  语法：

  <div  id="版块名称">…</div>
  

  
  

  <table> 标签

  ---

  <table> 标签用于在网页上绘制表格。

  创建表格的四个元素：<table> 、<tbody> 、<tr> 、<th> 、<td> 。

  1. <table>...</table>：整个表格以 <table> 标记开始、</table> 标记结束。
  2. <tbody>...</tbody>：如果不加 <thead> <tbody> <tfooter> ，<table> 表格加载完后才显示。加上这些表格结构，<tbody> 包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用 <tbody> 分段，可以一部分一部分地显示。简单来说，<table> 可以按结构一块块的显示，不在等整个表格加载完后显示。
  3. <tr>...</tr>：表格的一行，所以有几对 <tr> 表格就有几行。
  4. <td>...</td>：表格的一个单元格，一行中包含几对 <td>...</td> ，说明一行中就有几列。
  5. <th>...</th>：表格的头部的一个单元格，表格表头。
  6. 表格中列的个数，取决于一行中数据单元格的个数。

  总结：

  1. <table> 表格在没有添加 css 样式之前，在浏览器中显示是没有表格线的。
  2. 表头，也就是 <th> 标签中的文本默认为粗体并且居中显示。

  <table> 表格在没有添加 css 样式之前，是没有边框的。使用 css 样式可以为表格加入边框

  <style type="text/css">
  table tr td,th{border:1px solid #000;}
  </style>
  <!--上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。 -->
  

  
  

  <caption> 标签

  ---

  表格需要添加一些标签进行优化，可以添加标题和摘要。

  • 摘要
    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性 (语义化) ，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

    语法：

    <table summary="表格简介文本">
    

  • 标题
    用以描述表格内容，标题的显示位置：表格上方。

    语法：

    <table>
        <caption>标题文本</caption>
        <tr>
            <td>…</td>
            <td>…</td>
            …
        </tr>
    …
    </table>