HTML5-基础

一、列表标签

• 目标：能够使用 无序列表、有序列表、自定义列表 标签，实现网页中列表结构的搭建

• 学习路径：

   1.列表的应用场景
   2.无序列表
   3.有序列表
   4.自定义列表
  

1. 列表的应用场景

• 场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
• 特点：按照行的方式，整齐显示内容
• 种类：无序列表、有序列表、自定义列表
• 示例图：
  
  
  

2. 无序列表

• 场景：在网页中表示一组无顺序之分的列表，如：新闻列表

• 标签组成：

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每行的内容

• 显示特点：列表的每一项前默认显示圆点标识

• 注意：
  -ul标签中只允许包含li标签
  -li标签可以包含任意内容

• 代码：

<ul>
 	<li>苹果</li>
 	<li>香蕉</li>
 	<li>葡萄</li>
</ul>

• 运行结果：
  

3. 有序列表

• 场景：在网页中表示一组有顺序之分的列表，如：排行榜
• 标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

• 显示特点：列表的每一项前默认显示序号标识

• 注意点：
  -ol标签中只允许包含li标签
  -li标签可以包含任意内容

• 代码：

<ol>
	<li>张三：100</li>
	<li>李四：80</li>
	<li>王五：60<li>
</ol>

• 运行结果：
  

4. 自定义列表

• 场景：在网页的底部导航中通常会使用自定义列表实现
• 标签组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

• 显示特点：dd前会默认显示缩进效果

• 注意点：
  -dl标签中只允许包含dt/dd标签
  -dt/dd标签可以包含任意内容

• 代码：

 <dl>
 	<dt>帮助中心</dt>
	<dd>账户管理</dd>
	<dd>购物指南</dd>	
 </dl>	

运行结果：

二、表格标签

目标：能够使用 表格相关标签和属性，实现网页中表格结构的搭建
学习路径：

	1.表格的基本标签
	2.表格相关属性
	3.表格标题和表头单元格标签
	4.表格的结构标签（了解）
	5.合并单元格

1. 表格的基本标签

• 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
• 基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

• 注意点【标签的嵌套关系：table > tr > td】
• 代码：

 <table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>