HTML网页设计基础笔记 • 【第2章 排列页面内容】
全部章节 >>>>
本章目录
2.1 音频标签和视频标签
2.1.1 音频标签
HTML5 提供了一个标准的方式来播放 Web 中的音频文件,用户不再为浏览器播放插件如 Adobe Flash、Apple QuickTime 的升级而烦恼,只需使用现代浏览器就可以欣赏任何可以发出声音的Web 网站。
语法:
<audio width=“640”height=“360”src=“music.mp3”controls=“true”>
您的浏览器不支持 audio 元素!
</ audio >
HTML5 定义了一个新的元素,用来指定标准的方式来插入音频文件到 Web 页面中:audio 标签。
语法:
<audio width=“640” height=“360”>
<source src="music.ogg" />
<source src="music.mp3" />
<source src="music.wav" />
</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 元素来包含视频的标准方法。
语法:
<video width=“640”height=“360”src=“video .mp4”controls=“controls”>
您的浏览器不支持 video 元素!
</ video >
语法:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 audio 元素!
</video>
视频标签的属性:
属性 |
值 |
描述 |
autoplay |
autoplay |
如果是 autoplay,则视频在就绪后马上播放 |
src |
url地址 |
所播放视频的 url地址 |
perload |
none | metadata | auto |
用于指定视频或音频数据是否预加载:none (不进行预加载)、metadata(只预加载媒体的元数据)和 auto(预加载全部视频或音频) |
loop |
loop |
用于指定是否循环播放视频或音频 |
poster |
url地址 |
视频加载时显示的图像,或者在用户点击播放按钮前显示的图像 |
controls |
controls |
如果是 controls,则向用户显示控件,如播放按钮 |
width |
数字值 |
用于指定视频的宽度 |
height |
数字值 |
用于指定视频的高度 |
示例:
<body>
<video poster="http://media.w3.org/2010/05/sintel/poster.png" controls="controls"
preload="metadata"
loop="loop"
width="900" height="240">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" />
</video>
</body>
视频标签支持的视频类型:
2.2 列表、div 以及 span 标签
2.2.1 列表标签
列表是网页中常见的内容组织和表现效果。使用列表标签可以制作导航栏、新闻标题列表以及排行榜等。
HTML5 中常见的列表标签包括:无序列表、有序列表、自定义列表
一、无序列表
ul 是无序列表的起始标签,英文全称 unordered list。无序列表中的项目符号是几何图形,即在每一项之前添加符号,故又称为符号列表。在无序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表的特征在于提供一种不编号的列表方式,而在每个项目文字之前,以符号作为分项标记。
语法:
<ul type=“项目符号类”>
<li> 第 1 项 </li>
<li> 第 2 项 </li>
……
</ul>
解释:在该语法中,使用 <ul>……</ul> 标记表示这一个无序列表的开始和结束,而 <li> 则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。无序列表的 type 属性用于设置列表项开始的符号,取值为 disc(默认值,实心圆)、circle(空心圆环)和 square(正方形)。
示例:
<body>
<h2> 程序员的习惯:</h2>
<ul type="square">
<li> 讲代码 </li>
<li> 写博客 </li>
<li> 看女神 </li>
<li> 嗑瓜子 </li>
</ul>
</body>
二、有序列表
有序列表使用编号来编排项目,而不是项目符号。列表中的项目采用数字或英文字母开头,通常各项目间有先后顺序。在有序列表中,主要使用 <ol> 和 <li> 两个标记以及 type 和 start 两个属性。
ol 是有序列表的起始标签,英文全称 ordered list。有序列表中的项目符号是数字或字母序列,即在每一项之前添加 1,2,3... 等数字,又称为编号列表。
语法:
<ol type=“序列类型” start=“序号起始值”>
<li> 第一项 </li>
<li> 第二项 </li>
……
</ol>
解释:在该语法中,<ol> 和 </ol> 标签标志着有序列表的开始和结束,而 <li> 标记表示这是一个列表项的开始,默认情况下,采用数字序号进行排列。
有序列表的 type 属性用于设置有序列表的序号类型,取值为:1、a、A、i 和 I,分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字学号以及大写罗马数字序列。
示例:
<body>
<h2>测试:你懂得享受生活吗?</h2>
家里装修完毕,又新添置一套高级音响,你会把豪华漂亮的音响放在哪里?<br />
<ol type="A">
<li>卧室</li>
<li>客厅</li>
......
</ol>
<hr size="2" color="#0099FF">
<ol type="I">
<li>卧室:喜欢拥有自己的私人空间,生活的快乐更多来自于内心世界</li>
<li>客厅:喜欢热闹,异性缘佳</li>
......
</ol>
</body>
三、自定义列表
在 HTML 中还有一种列表标签,称为自定义列表。不同于前两种列表,它主要用于解释名词,包含两个层次的列表,第 1 层次是需要解释的名词,第 2 层次是具体的解释。
语法:
<dl>
<dt> 名词 1<dd> 解释 1
<dt> 名词 2<dd> 解释 2
<dt> 名词 3<dd> 解释 3
……
</dl>
解释:在该语法中,<dl> 标签和 </dl> 标签分别定义了定义列表的开始和结束,<dt> 后面就是要解释的名称,而在<dd> 后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进,有些像字典中的词语解释。
示例:
......
<hr color="#00FFCC" size="3"/>
<dl>
<dt>A:穿越时光术</dt>
<dd>你的时间都浪费在发呆、胡思乱想、做白日梦:这类型的人个性很被动,想法天马行空,可是都只限于想而不实际行动。</dd>
<br />
<dt>B:隐形透明术</dt>
<dd>你的时间都浪费在看电视、上网瞎看一通:这类型的人个性内向不喜欢跟人有实际上的接触,凡事都跟人保持距离,不喜欢成为注目的焦点,宁愿躲在一边自己做自己的事情,但是都跟正事无关。</dd>
<br />
......
</dl>
......
2.2.2 div 标签和 span 标签
在排列网页内容时,我们有时会将某些标签放在一起进行排列,这样就需要一个标签将它们组成一个区块。在HTML 中,可以通过 div 标签和 span 标签将 HTML 元素组合起来,div 标签和 span 标签均为容器类标签,可以在其中存放其他标签,但两者之间也存在区别。
一、div标签
div标签没有特定的含义,只是作为组合其他 HTML 元素的容器,默认情况下,div标签将占满一行,当存在多个div标签时,将按照从上到下的方式排列。
语法:
<div>
其他标签或内容
</div>
示例:
<body>
<div id=“header”>-- 顶部:菜单部分 --</div>
<div id=“section”>-- 中部:内容部分 --</div>
<div id=“footer”>-- 底部:版权声明以及友情链接部分 --</div>
</body>
注意:一般div标签使用id属性来命名,id 是 HTML5 标签的属性,页面中的每个标签都存在 id,且不能相同。在对页面布局时经常会在 div 标签中添加 id 属性,用于表明当前 div 标签对应于页面中哪个区域或部分。
二、span 标签
span 标签也没有特定的含义,可作为文本的容器。span 标签与 div 标签不同,默认情况下,多个 span 标签可以存在于同一行,将按照从左到右的方式进行排列。
语法:
<span> 文本 </span>
示例:
<body>
<div>
<span><b> 新闻 </b></span> <span> 图片</span> <span>
军事 </span> |
<span><b> 视频 </b></span> <span> 热剧 </span> <span>
综艺 </span>
</div>
<div>
……
</div>
</body>
2.3 表格标签
2.3.1 创建表格
当我们浏览网页时,看到许多页面的内容排列整齐有序,如淘宝论坛页面和阿里巴巴校园讲座安排页面,在这些页面中都使用了表格,使用表格可以使排列的内容简洁、整齐,便于用户浏览网页信息。
表格是用于排列内容的最佳手段,在HTML页面中,绝大多数页面都是使用表格进行排版的。在HTML的语法中,表格主要由表格标签、行标签以及单元格标签构成。
<table>……</table> 标签中包括所有表格元素,表格元素主要有行、列和单元格等。
标签 |
描述 |
<table>……</table> |
表格标签 |
<tr>……</tr> |
行标签 |
<td>……</td> |
单元格标签 |
语法:
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
<tr>
</table>
解释:<table> 和 </table> 标签分别标志着一个表格的开始和结束;而 <tr> 和 </tr> 标签则分别表示表格中一行的开始和结束,在表格中包含几组 <tr>……</tr>,就表示该表格为几行;<td> 和 </td> 标签表示一个单元格的起始和结束,也可以说表示一行中包含了几列。
创建表格步骤
在 HTML 中创建表格,通常分为以下 3 步:
- 创建表格标签 <table>……</table>。
- 在表格标签 <table>……</table> 中创建行标签 <tr>……</tr>,可以有多行。
- 在行标签 <tr>……</tr> 中创建单元格标签 <td>……</td>,可以有多个单元格。
注意:为了显示表格的轮廓,通常还需要设置 table 标签的 border 属性,通过 border 属性来设置表格边框的宽度
示例:
<h4>本周畅销笔记本排名TOP3</h4>
<table border="1">
<tr>
<td>排名</td><td>品牌</td><td>型号</td>
<td>图片</td><td>价格</td>
</tr>
<tr>
<td>1</td><td>联想</td>
<td>拯救者R720</td>
<td><img src="Images/lenovo_R720.jpg" width="150px" height="150px"/></td>
<td>¥5799</td>
</tr>
......
</tr>
</table>
2.3.2 创建不规则表格
表格可以实现行列合并,只需在 td 中加入 rowspan 或 colspan 属性,colspan 表示跨越的列数,rowspan 表示跨越的行数。
跨列:跨列是指单元格的横向合并,实现单元格在水平方向上跨多列。
语法:
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
说明:col 为 column(列)的缩写,span 为跨度,所以 colspan 意思为跨列。
示例:
<h2>手机频道</h2>
<table>
<tr>
<td colspan="2"><a href="#"><img src="Images/phone_1.jpg"/></a></td>
<td colspan="2"><a href="#"><img src="Images/phone_2.png"/></a></td>
</tr>
<tr>
<td><a href="#"><img src="Images/apple_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/mi_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/honor_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/huawei_phone.jpg"/></a></td>
</tr>
......
</table>
跨行:单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行,跨行是指单元格在垂直方向上合并。
语法:
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
说明:row 为行的意思,rowspan 即跨行。
示例1:
<body>
<table>
<tr>
<td rowspan="3"><img src="Images/adv_1.jpg"/></td>
<td><img src="Images/adv_2.png"/></td>
</tr>
<tr>
<td><img src="Images/adv_3.jpg"/></td>
</tr>
<tr>
<td><img src="Images/adv_4.jpg"/></td>
</tr>
</table>
</body>
示例2:
<body>
<table border="1">
<tr>
<td rowspan="2"><img src="Images/T_1.jpg" /></td>
<td><img src="Images/T_2.jpg" /></td>
<td><img src="Images/T_3.jpg" /></td>
</tr>
<tr>
<td colspan="2"><img src="Images/T_4.jpg" /></td>
</tr>
</table>
</body>
表格跨行与跨列的应用思路要清晰,可以参考以下步骤:
(1)根据需求设计出完整的表格。
(2)根据需求选择要合并的单元格,设置合并单元格中的第一个单元格的跨行或跨列属性,如 colspan=“2”或 rowspan=“3”等。
(3)删除被合并的其他单元格,跨列则水平删除其他多余的单元格,跨行则垂直删除其他多余的单元格。
2.3.3 表格相关的其他标签
除了设置表格跨行和跨列外,还可以为整个表格添加标题(caption)、对表格数据进行分组等,从而实现企业中常见的年度统计报表等复杂表格。
设计这些表格需要一些表格的高级标签。表格标签除了前面所学习到的基本标签外,还有如下高级标签:
- 表格标题标签 caption,用于描述整个表格的标题。
- 表格表头 th,用于定义表格的表头,通常是表格的第一行数据,以粗体、居中的样式显示数据。
- 表格数据的分组标签 thead、tbody 和 tfoot,这 3 个标签通常配合使用,主要对表格数据进行逻辑分组。
thead 对应表格的表头部分,tbody 对应表格的数据主体部分,tfoot 对应表格的底部页脚部分,各分组标签内由多行 tr 组成。
示例:
<table border="1">
<caption>本周畅销笔记本排名TOP3</caption>
<thead>
<tr>
<th>排名</th><th>品牌</th> ......
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>联想</td> ......
</tr>
......
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">总销售量:</td>
<td>737</td>
</tr>
</tfoot>
</table>
2.4 表格的美化修饰和布局
表格的美化修饰即从多方面对表格属性进行设置,使表格看起来更漂亮、更美观、更合理。
一般主要修饰内容:
- 表格的宽度、高度与边框
- 表格的背景颜色和图片
- 表格以及单元格内容的对齐方式
- 单元格的填充以及间距
一、表格的宽度、高度与边框
如果不指定表格的高度和宽度,浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格边框的宽度,则浏览器将不显示表格边框。
若需要手动设置表格的宽度、高度以及边框,则可以设置表格的 width、height 以及 border 属性实现。
语法:
<table width=“宽度” height=“高度” border=“边框宽度”>
……
<table>
解释:width 属性和 height 属性用于设置表格的宽度和高度,可以用像素表示,也可以用百分比(与浏览器窗口相比的大小比例)表示。其中,width 属性不仅能够设置表格的宽度,也可以设置 td 的宽度,height 属性border 属性用于设置表格边框的宽度,只能使用像素表示。
二、表格的背景颜色和图片
表格的背景包括表格的背景颜色和背景图片的设置,表格的背景颜色属性 bgcolor 针对整个表格,表格的背景图片属性 background 属性同样针对整个表格,设置背景会使得表格更加美观。
语法:
<table bgcolor=“背景颜色” background=“背景图片的地址”>
……
<table>
说明:通过以上两个属性不仅能够设置表格的背景,还可以设置行、单元格的背景。
三、表格以及单元格内容的对齐方式
为了使表格美观大方,表格中的内容通常需要设置对齐方式,设置表格、行或列的对齐方式可使用 align 属性,其取值可以为 right(右对齐)、center(居中)和 left(左对齐),默认为 left。在使用 align 属性时需要注意的是,当在 table 标签中使用,则表示表格的对齐方式,当在 tr 标签或 td 标签中使用,则表示内容的对齐方式。
四、单元格的填充以及间距
在表格中,单元格之间是存在距离的,我们称之为单元格的间距,单元格中的内容与单元格的边框之间也有距离,我们称之为填充。
设置单元格的间距与填充可使用 cellspacing 属性和 cellpadding 属性
语法:
<table cellspacing=“单元格间距” cellspadding=“单元格填充”>
……
<table>
解释:在设置单元格的填充以及间距时,需要注意的是,默认情况下单元格的填充和间距不为 0,若要消除单元格的填充和间距,则手动设置 cellspacing 属性和 cellpadding 属性均为 0 即可。
示例:
<table border="0" width="395" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="Images/title_bg.jpg" height="50" colspan="4">
<font color="white">
<b> 本周畅销笔记本排名TOP3</b></font></td>
</tr>
<tr>
<td width="50" align="center">1</td>
<td><img src="Images/lenovo_R720.jpg" width="80px" height="80px"/></td>
......
</tr>
<tr>
<td colspan="4"><hr color="lightgray"/></td>
</tr>
......
</table>
2.4.2 表格布局
表格在网页中的布局很常见,使用表格布局可以整齐地排列网页的内容,网页结构也比较清晰。
表格布局实现步骤
(1)根据需求创建表格
通过观察需要实现的页面效果图,能够看出该效果图中氛围三个部分,即左、中、右。因此,可以先添加一个一行三列的表格。
在左侧部分对应的单元格中,嵌套添加一个三行两列的表格,其中,第一行和第二行均跨两列显示。
在中部对应的单元格中,嵌套添加一个三行三列的表格,其中,第一行和第二行均跨三列显示。
在右侧部分对应的单元格中,不需要添加表格。
(2)为表格添加内容
(3)美化表格,设置相关属性
<table bgcolor="#E0DBDC" height="420" cellspacing="10">
<tr>
<td bgcolor="white">
<table height="100%" cellspacing="10">
<tr><td colspan="2">京东超市</td></tr>
<tr><td colspan="2"><img src="Images/oil_1.jpg"/></td></tr>
<tr> ….. </tr>
</table>
</td>
<td bgcolor="white">
<table height="100%" cellspacing="10">
<tr><td colspan="3">中国特产•远安馆</td></tr>
<tr><td colspan="3"><img src="Images/food_1.jpg"/></td></tr>
<tr> ….. </tr>
</table>
</td>
<td><img src="Images/adv.jpg"/></td>
</tr>
</table>
总结:
- 在 HTML5 中提供了 audio 标签和 video 标签用于支持在页面中播放音频和视频文件,在使用这些标签时,可以通过设置标签的 src 属性或内部的 source 标签指定要播放的文件路径。
- HTML5 中常见的列表标签包括无序列表、有序列表和定义列表。
- div 标签作为组合其他 HTML 元素的容器,默认情况下,div 元素将占满一行,当存在多个 div 元素时,将按照从上到下的方式排列。
- span 标签可作为文本的容器。默认情况下,多个 span 标签可以存在于同一行,将按照从左到右的方式进行排列。
- 在这些页面中都使用了表格,使用表格可以使排列的内容简洁、整齐,便于用户浏览网页信息。
- 表格的美化修饰即从多方面对表格属性进行设置,使表格看起来更漂亮、更美观、更合理。
HTML网页设计基础笔记 • 【第2章 排列页面内容】的更多相关文章
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- HTML网页设计基础笔记 • 【第5章 常用的样式属性】
全部章节 >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...
- HTML网页设计基础笔记 • 【第8章 页面布局与规划】
全部章节 >>>> 本章目录 8.1 表格布局 8.1.1 表格布局 8.2 流式布局 8.2.1 瀑布流布局 8.2.2 masonry 实现瀑布流布局 8.3 div ...
- HTML网页设计基础笔记 • 【第7章 盒子模型】
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...
- HTML网页设计基础笔记 • 【第6章 背景和阴影】
全部章节 >>>> 本章目录 6.1 背景属性 6.1.1 背景颜色 6.1.2 背景图片 6.1.3 背景图片的重复方式 6.2 背景图片的定位 6.2.1 backg ...
- HTML网页设计基础笔记 • 【第4章 CSS3基础】
全部章节 >>>> 本章目录 4.1 CSS 概述 4.1.1 CSS 简介 4.1.2 CSS3 基本语法 4.1.3 样式表的分类 4.2 CSS 基本选择器 4.2. ...
- HTML网页设计基础笔记 • 【第3章 表单】
全部章节 >>>> 本章目录 3.1 表单 3.1.1 表单概述 3.1.1 表单概述(续) 3.1.2 表单标签 3.1.3 表单数据的提交方式 3.2 输入框和按钮 3 ...
- HTML网页设计基础笔记 • 【第1章 HTML5基础】
全部章节 >>>> 本章目录 1.1 HTML介绍及开发工具 1.1.1 HTML 的基本概念 1.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互 ...
- [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像
[HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...
随机推荐
- 【Go】【Basic】MacOS上搭建GO开发环境
1. GO下载 1.1. 下载地址:https://www.golangtc.com/download (需要科学上网) 1.1.1. PKG安装: 下载这个包:go1.9.2.darwin-amd6 ...
- Function Overloading in C++
In C++, following function declarations cannot be overloaded. (1)Function declarations that differ o ...
- Dubbo服务调用超时
服务降级的发生,其实是由于消费者调用服务超时引起的,即从发出调用请求到获取到提供者的响应结果这个时间超出了设定的时限.默认服务调用超时时限为1秒.可以在消费者端与提供者端设置超时时限. 一.创建提供者 ...
- C语言编辑链接
库函数(Library Files)库函数就是函数的仓库,它们都经过编译,重用性不错.通常,库函数相互合作,来完成特定的任务.比如操控屏幕的库函数(cursers和ncursers库函数),数据库读取 ...
- 【Java 8】方法引用
一.概述 在学习lambda表达式之后,我们通常使用lambda表达式来创建匿名方法.然而,有时候我们仅仅是调用了一个已存在的方法.如下: Arrays.sort(stringsArray,(s1,s ...
- 【Java 基础】java 创建对象时重写方法
TransactionLock mockLock = new TransactionLock() { public boolean lock(String id) { return true; } p ...
- C# 获取当前目录的父级目录
Directory.GetParent(System.Environment.CurrentDirectory).FullName
- selenium: where to get ChromeDriver?
address: http://npm.taobao.org/mirrors/chromedriver
- Nginx SERVER块配置
1 Listen 指令 Example Configuration Directives 2 server_name指令 2.1 规则 指令后可以跟多个域名,第一个是主域名 *泛域名:进支持在最前或最 ...
- Linux进程操作
查看进程启动时间 ps -eo pid,lstart | grep PID 查看进程的运行多久 ps -eo pid,etime |grep PID 查看进程中启动了哪些线程 top -H -p pi ...