设计师学习HTML/CSS之路-03

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第3章 认识标签（第二部分）

3-1 ul无序列表标签

语法：

<ul>

<li>列表</li>

<li>列表</li>

</ul>

解释：

unordered list 无序列表

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

3-2 ol有序列表标签

语法：

<ol>

<li>列表</li>

<li>列表</li>

</ol>

解释：

ordered list有序列表

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

3-3 div在排版中的作用

语法：

<div>标签内容</div>

解释：

division <div>相当于一个容器，划分网页中的各个逻辑部分

3-4 给div命名

image

语法:

<div id="cats">..</div>

3-5 table标签

创建表格的四个要素

<table>...</table> 开始与结束标签

<tbody>...</tbody> 优先显示表格结构，也可以将表格一部分一部分分开

<tr>...</tr> 表格的一行

<td>...</td> 表格的一个单元格（单元格的数量决定了表格有多少列）


<th></th>表格的头部单元格，表格表头

<table>
 <tbody>
   <tr>
     <th>标题一</th>
     <th>标题二</th>
     <th>标题三</th>
   </tr>
   <tr>
     <td>单元格1</td>
     <td>单元格2</td>
     <td>单元格3</td>
   </tr>
   <tr>
     <td>单元格1</td>
     <td>单元格2</td>
     <td>单元格3</td>
   </tr>
 </tbody>
</table>

<table>
<tbody>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>

3-6 用css样式，加入边框

Table 表格在没有添加 css 样式之前，是没有边框的.

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

3-7 caption标签，为表格添加标题和摘要

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

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

语法：

<table summary="表格简介">

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

语法：
<caption>标题文本</caption>

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

<table>
<caption>这是表格的标题</caption>
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
… <tr>
<td>内容一</td>
<td>内容二</td>
</table>