HTML网页设计基础笔记 • 【第2章 排列页面内容】

全部章节   >>>>

---

本章目录

2.1 音频标签和视频标签

2.1.1 音频标签

2.1.2 视频标签

2.2 列表、div 以及 span 标签

2.2.1 列表标签

2.2.2 div 标签和 span 标签

2.3 表格标签

2.3.1 创建表格

2.3.2 创建不规则表格

2.3.3 表格相关的其他标签

2.4 表格的美化修饰和布局

2.4.2 表格布局

总结：

---

2.1 音频标签和视频标签

2.1.1 音频标签

HTML5 提供了一个标准的方式来播放 Web 中的音频文件，用户不再为浏览器播放插件如 Adobe Flash、Apple QuickTime 的升级而烦恼，只需使用现代浏览器就可以欣赏任何可以发出声音的Web 网站。

语法：

HTML5 定义了一个新的元素，用来指定标准的方式来插入音频文件到 Web 页面中：audio 标签。

语法：

注意：目前支持 audio 标签的浏览器有 IE9、Firefox、Opera、Chrome 和 Safari。IE8 和更早的版本，不支持 audio 标签。

音频标签的属性：

主要控制音频的播放与停止，循环播放与播放次数设置以及播放位置等

属性	值	描述
autoplay	autoplay	如果是 autoplay，则音频在就绪后马上播放
controls	controls	如果是 controls，则向用户显示控件，如播放按钮
end	数字值	定义播放器在音频流中的何处停止播放。默认声音会播放到结尾
loopend	数字值	定义在音频流中循环播放停止的位置，默认是end 属性的值
loopstart	数字值	定义在音频流中循环播放的开始位置。默认是start 属性的值
playcount	数字值	定义音频片断播放多少次，默认是 1
src	url地址	所播放音频的 url地址
start	数字值	定义播放器在音频流中开始播放的位置。默认声音在开头进行播放

2.1.2 视频标签

许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

语法：

语法：

视频标签的属性：

属性	值	描述
autoplay	autoplay	如果是 autoplay，则视频在就绪后马上播放
src	url地址	所播放视频的 url地址
perload	none | metadata | auto	用于指定视频或音频数据是否预加载：none （不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频）
loop	loop	用于指定是否循环播放视频或音频
poster	url地址	视频加载时显示的图像，或者在用户点击播放按钮前显示的图像
controls	controls	如果是 controls，则向用户显示控件，如播放按钮
width	数字值	用于指定视频的宽度
height	数字值	用于指定视频的高度

示例：

视频标签支持的视频类型：

2.2 列表、div 以及 span 标签

2.2.1 列表标签

列表是网页中常见的内容组织和表现效果。使用列表标签可以制作导航栏、新闻标题列表以及排行榜等。

HTML5 中常见的列表标签包括：无序列表、有序列表、自定义列表

一、无序列表

ul 是无序列表的起始标签，英文全称 unordered list。无序列表中的项目符号是几何图形，即在每一项之前添加符号，故又称为符号列表。在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表的特征在于提供一种不编号的列表方式，而在每个项目文字之前，以符号作为分项标记。

语法：

 第 1 项 
 第 2 项 
……

解释：在该语法中，使用

……

标记表示这一个无序列表的开始和结束，而

则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。无序列表的 type 属性用于设置列表项开始的符号，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）。

示例：

	
 程序员的习惯：
	

		
 讲代码 
		
 写博客 
		
 看女神 
		
 嗑瓜子 
	

二、有序列表

有序列表使用编号来编排项目，而不是项目符号。列表中的项目采用数字或英文字母开头，通常各项目间有先后顺序。在有序列表中，主要使用 <ol> 和

两个标记以及 type 和 start 两个属性。

ol 是有序列表的起始标签，英文全称 ordered list。有序列表中的项目符号是数字或字母序列，即在每一项之前添加 1,2,3... 等数字，又称为编号列表。

语法：

 第一项 
 第二项 
……

解释：在该语法中，

和

标签标志着有序列表的开始和结束，而

标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。

有序列表的 type 属性用于设置有序列表的序号类型，取值为：1、a、A、i 和 I，分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字学号以及大写罗马数字序列。

示例：

	
测试：你懂得享受生活吗？
家里装修完毕，又新添置一套高级音响，你会把豪华漂亮的音响放在哪里?

	

		
卧室
    		
客厅
   	 ......
	
	

	

		
卧室:喜欢拥有自己的私人空间，生活的快乐更多来自于内心世界
    		
客厅:喜欢热闹，异性缘佳
    	......
	

三、自定义列表

在 HTML 中还有一种列表标签，称为自定义列表。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第 1 层次是需要解释的名词，第 2 层次是具体的解释。

语法：

 名词 1
 解释 1
 名词 2
 解释 2
 名词 3
 解释 3
……

解释：在该语法中，

标签和

标签分别定义了定义列表的开始和结束，

后面就是要解释的名称，而在

后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。

示例：

......


	
A:穿越时光术
	
你的时间都浪费在发呆、胡思乱想、做白日梦：这类型的人个性很被动，想法天马行空，可是都只限于想而不实际行动。
	

   	
B:隐形透明术
	
你的时间都浪费在看电视、上网瞎看一通：这类型的人个性内向不喜欢跟人有实际上的接触，凡事都跟人保持距离，不喜欢成为注目的焦点，宁愿躲在一边自己做自己的事情，但是都跟正事无关。
	

   	 ......
 
......

2.2.2 div 标签和 span 标签

在排列网页内容时，我们有时会将某些标签放在一起进行排列，这样就需要一个标签将它们组成一个区块。在HTML 中，可以通过 div 标签和 span 标签将 HTML 元素组合起来，div 标签和 span 标签均为容器类标签，可以在其中存放其他标签，但两者之间也存在区别。

一、div标签

div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。

语法：

其他标签或内容

示例：

	
-- 顶部：菜单部分 --
	
-- 中部：内容部分 --
	
-- 底部：版权声明以及友情链接部分 --

注意：一般div标签使用id属性来命名，id 是 HTML5 标签的属性，页面中的每个标签都存在 id，且不能相同。在对页面布局时经常会在 div 标签中添加 id 属性，用于表明当前 div 标签对应于页面中哪个区域或部分。

二、span 标签

span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。

语法：

 文本 

示例：

	

		 新闻    图片  
		军事   |  
		 视频    热剧   
		综艺 
	
	

		……
	

2.3 表格标签

2.3.1 创建表格

当我们浏览网页时，看到许多页面的内容排列整齐有序，如淘宝论坛页面和阿里巴巴校园讲座安排页面，在这些页面中都使用了表格，使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。

表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是使用表格进行排版的。在HTML的语法中，表格主要由表格标签、行标签以及单元格标签构成。

…… 标签中包括所有表格元素，表格元素主要有行、列和单元格等。

     

标签	描述
……	表格标签
<tr>……tr>	行标签
	……	单元格标签

语法：

		……
	
		……
	

	

		
单元格内的文字
		
单元格内的文字

	

		
单元格内的文字
		
单元格内的文字

解释：

和 标签分别标志着一个表格的开始和结束；而 和 标签则分别表示表格中一行的开始和结束，在表格中包含几组 ……，就表示该表格为几行； 和 标签表示一个单元格的起始和结束，也可以说表示一行中包含了几列。

创建表格步骤

在 HTML 中创建表格，通常分为以下 3 步：

1. 创建表格标签 ……。
2. 在表格标签 …… 中创建行标签 <tr>……tr>，可以有多行。
3. 在行标签 <tr>……tr> 中创建单元格标签 ……，可以有多个单元格。

注意：为了显示表格的轮廓，通常还需要设置 table 标签的 border 属性，通过 border 属性来设置表格边框的宽度

示例：

本周畅销笔记本排名TOP3

	......
	

	

		
排名
品牌
型号
		
图片
价格
	
	

		
1
联想
		
拯救者R720
		

		
¥5799
	

2.3.2 创建不规则表格

表格可以实现行列合并，只需在 td 中加入 rowspan 或 colspan 属性，colspan 表示跨越的列数，rowspan 表示跨越的行数。

跨列：跨列是指单元格的横向合并，实现单元格在水平方向上跨多列。

语法：

​

	

		
 单元格内容 
	


​

说明：col 为 column（列）的缩写，span 为跨度，所以 colspan 意思为跨列。

示例：

手机频道

	......

跨行：单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨行是指单元格在垂直方向上合并。

语法：

	

		
 单元格内容 
	

说明：row 为行的意思，rowspan 即跨行。

示例1：

示例2：

表格跨行与跨列的应用思路要清晰，可以参考以下步骤：

（1）根据需求设计出完整的表格。

（2）根据需求选择要合并的单元格，设置合并单元格中的第一个单元格的跨行或跨列属性，如 colspan=“2”或 rowspan=“3”等。

（3）删除被合并的其他单元格，跨列则水平删除其他多余的单元格，跨行则垂直删除其他多余的单元格。

2.3.3 表格相关的其他标签

除了设置表格跨行和跨列外，还可以为整个表格添加标题（caption）、对表格数据进行分组等，从而实现企业中常见的年度统计报表等复杂表格。

设计这些表格需要一些表格的高级标签。表格标签除了前面所学习到的基本标签外，还有如下高级标签：

• 表格标题标签 caption，用于描述整个表格的标题。
• 表格表头 th，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
• 表格数据的分组标签 thead、tbody 和 tfoot，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。

thead 对应表格的表头部分，tbody 对应表格的数据主体部分，tfoot 对应表格的底部页脚部分，各分组标签内由多行 tr 组成。

示例：

	......
		 ......
		
		......
	

本周畅销笔记本排名TOP3
	

		

			
排名
品牌
	
	

		

			
1
联想
	

		

			
总销售量：
			
737
		
	

2.4 表格的美化修饰和布局

表格的美化修饰即从多方面对表格属性进行设置，使表格看起来更漂亮、更美观、更合理。

一般主要修饰内容：

• 表格的宽度、高度与边框
• 表格的背景颜色和图片
• 表格以及单元格内容的对齐方式
• 单元格的填充以及间距

一、表格的宽度、高度与边框

如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格边框的宽度，则浏览器将不显示表格边框。

若需要手动设置表格的宽度、高度以及边框，则可以设置表格的 width、height 以及 border 属性实现。

语法：

……
 
   
解释：width 属性和 height 属性用于设置表格的宽度和高度，可以用像素表示，也可以用百分比（与浏览器窗口相比的大小比例）表示。其中，width 属性不仅能够设置表格的宽度，也可以设置 td 的宽度，height 属性border 属性用于设置表格边框的宽度，只能使用像素表示。
 
  
二、表格的背景颜色和图片
表格的背景包括表格的背景颜色和背景图片的设置，表格的背景颜色属性 bgcolor 针对整个表格，表格的背景图片属性 background 属性同样针对整个表格，设置背景会使得表格更加美观。
语法：

……
 
   
说明：通过以上两个属性不仅能够设置表格的背景，还可以设置行、单元格的背景。
 
  
三、表格以及单元格内容的对齐方式
为了使表格美观大方，表格中的内容通常需要设置对齐方式，设置表格、行或列的对齐方式可使用 align 属性，其取值可以为 right（右对齐）、center（居中）和 left（左对齐），默认为 left。在使用 align 属性时需要注意的是，当在 table 标签中使用，则表示表格的对齐方式，当在 tr 标签或 td 标签中使用，则表示内容的对齐方式。
四、单元格的填充以及间距
在表格中，单元格之间是存在距离的，我们称之为单元格的间距，单元格中的内容与单元格的边框之间也有距离，我们称之为填充。
设置单元格的间距与填充可使用 cellspacing 属性和 cellpadding 属性
语法：

……
 
   
解释：在设置单元格的填充以及间距时，需要注意的是，默认情况下单元格的填充和间距不为 0，若要消除单元格的填充和间距，则手动设置 cellspacing 属性和 cellpadding 属性均为 0 即可。
 
  
示例：

        ......
    
	......

	

    	

		
		    本周畅销笔记本排名TOP3
    
    

    	
1
        

    

    	

    

2.4.2 表格布局

表格在网页中的布局很常见，使用表格布局可以整齐地排列网页的内容，网页结构也比较清晰。

表格布局实现步骤

（1）根据需求创建表格

通过观察需要实现的页面效果图，能够看出该效果图中氛围三个部分，即左、中、右。因此，可以先添加一个一行三列的表格。

在左侧部分对应的单元格中，嵌套添加一个三行两列的表格，其中，第一行和第二行均跨两列显示。

在中部对应的单元格中，嵌套添加一个三行三列的表格，其中，第一行和第二行均跨三列显示。

在右侧部分对应的单元格中，不需要添加表格。

（2）为表格添加内容

（3）美化表格，设置相关属性

	

		

			  …..  

			
京东超市
			

			

			
		
		

			     ….. 	

			
中国特产•远安馆
			

			

			
		
		

	

总结：

• 在 HTML5 中提供了 audio 标签和 video 标签用于支持在页面中播放音频和视频文件，在使用这些标签时，可以通过设置标签的 src 属性或内部的 source 标签指定要播放的文件路径。
• HTML5 中常见的列表标签包括无序列表、有序列表和定义列表。
• div 标签作为组合其他 HTML 元素的容器，默认情况下，div 元素将占满一行，当存在多个 div 元素时，将按照从上到下的方式排列。
• span 标签可作为文本的容器。默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
• 在这些页面中都使用了表格，使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。
• 表格的美化修饰即从多方面对表格属性进行设置，使表格看起来更漂亮、更美观、更合理。