1、第2章 排列网页内容,回顾,HTML的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两部分，网页的标题用标签表示，网页的主要内容用标签表示。 在HTML中，使用标签来实现超链接，超链接标签可以实现页面间的链接、页面内的锚点链接以及发送电子邮件链接等功能。 HTML文档中的路径分为绝对路径和相对路径，绝对路径是文件的完整路径，相对路径是指相对于该HTML文档的路径。,理论内容,列表标签 表格标签 表格布局与美化修饰 div标签和span标签,2.1 列表标签,列表标签是HTML中非常重要的标签，通过使用各种列表类标签，能很好地排列网页中的内容。 常见的列表标签包括有序列表
2、、无序列表和定义列表。,无序列表, 列表项内容 列表项内容 列表项内容 ,有序列表, 列表项 列表项 列表项 ,定义列表,标题描述 ,定义列表的常见应用,商品名称：三星N7108系统：Android网络：移动2G/联通2G（GSM），移动3G（TD-SCDMA）,2.2 表格标签,使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。,表格的基本结构,表格至少由标签、标签和标签这3种标签组成 表示表格，表示行，表示一列单元格,使用步骤： 创建表格标签。 在表格标签中创建行标签。 在行标签中创建单元格标签。,表格的语法,第1行第1个单元格的内容 第1行第2个单元格的内容 第2行第1个单元格的
3、内容 第2行第2个单元格的内容 ,使用表格,排名产品型号价格1联想Y400N-IS￥70002联想Y480N-IF￥54003华硕VivoBook￥51504联想Y500NT-I￥9800,合并单元格,1. 跨列单元格内容2. 跨行单元格内容,合并行与列,表格的高级标签,表格标题标签，用于描述整个表格的标题。 表格表头，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。 表格数据的分组标签、和，这三个标签通常配合使用，主要对表格数据进行逻辑分组。对应表格的表头部分，对应表格的数据主体部分，对应表格的底部页脚部分，各分组标签内由多行组成。,高级标签的使用,2.3 表格的美化
4、与布局,表格的美化修饰即从多方面对表格属性进行设置，使表格更漂亮、更美观、更合理。表格需要修饰的内容如下： 表格的高度、宽度和边框。 表格的行与列的背景。 表格内容的对齐方式。 表格单元格的填充、间距的设置。,设置表格的尺寸与边框, ,设置表格相关元素的背景,（1）表格背景。（2）行背景色。 （3）单元格背景色。 ,表格的填充与间距, ,综合练习：表格布局,2.4 容器标签,在排列网页内容时，我们有时会将某些标签放在一起进行排列，这样就需要使用一个标签将他们组成一个区块。 在HTML中，可以通过和将HTML元素组合起来，div标签和span标签均为容器类标签。,其他标签或者内容,DIV标签,元素没有特定的含义，是用于组合其他HTML元素的容器。 其为块级元素，浏览器会在块级元素的起始和结束处换行。,总结,常见的列表标签包括有序列表、无序列表和定义列表。 表格的基本标签包括：标签用于定义表格，标签用于定义表格的行，标签用于定义表格的列。 表格的常用属性有： background：定义表格的背景图像。 width：定义表格的宽。 height：定义表格的高。 border：定义表格的边框的宽度。 常见的容器标签有和,
