2019-7-22 [HTML] 列表 有序与无序的对比 表格 跨行与跨列 音频与视频标签 网页布局
文章目录
- 0.HTML网页技术(中级)
- 1.列表
- 1.1 列表
- 1.1.1 什么是列表?
- 1.1.2 列表的分类
- 无序列表的特性
- 有序列表的特性
- 1.1.3 有序列表和无序列表对比
- 1.1.4 课堂练习 : 模拟百度新闻制作新闻列表
- 2 表格
- 2.1 课堂练习 : 构建一个简单的表格用于保存地区信息
- 2.2 跨行与 跨列 合并单元格问题
- 2.2.1 跨行 : 在td中添加colspan属性即可
- 2.2.2 跨列 : 在td上添加rowspan是修改呢即可
- 2.3 综合练习 : 表格的跨行与跨列
- 3 音频和视频
- 3.1 video 与 audio 标签的使用
- 3.2 自制网页视频播放器
- 4.网页布局
- 5.总结
0.HTML网页技术(中级)
1.列表
1.1 列表
1.1.1 什么是列表?
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
1.1.2 列表的分类
a) 无序列表
无序列表的特性
u 没有顺序，每个
- 标签独占一行（块元素）
u 默认 - 标签项前面有个实心小圆点
u 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
b) 有序列表
-
有序列表的特性
u 有顺序，每个
- 标签独占一行（块元素）
u 默认 - 标签项前面有顺序标记
u 一般用于排序类型的列表，如试卷、问卷选项等 -
1.1.3 有序列表和无序列表对比
1.1.4 课堂练习 : 模拟百度新闻制作新闻列表
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><h1>搜索热点h1><ol><a href="https://www.baidu.com/s?wd=空姐集体睡地板"><li>空姐集体睡地板li>a><a href="https://www.baidu.com/s?wd=许家印告贾跃亭"><li>许家印告贾跃亭li>a><a href="https://www.baidu.com/s?wd=吴亦凡专辑回榜首"><li>吴亦凡专辑回榜首li>a><a href="https://www.baidu.com/s?wd=合肥一化肥厂爆炸"><li>合肥一化肥厂爆炸li>a><a href="https://www.baidu.com/s?wd=公交八条防盗暗语"><li>公交八条防盗暗语li>a>ol>body> html>
2 表格
为什么使用表格?
简单通用
结构稳定
HTML 表格
表格由标签来定义。
每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的构造:
实例<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><table border="1"><tr><td>row 1, cell 1td><td>row 1, cell 2td>tr><tr><td>row 2, cell 1td><td>row 2, cell 2td>tr>table>body> html>
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
Row 1, cell 1 Row 1, cell 2 HTML 表格表头
表格的表头使用标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本：
<table border="1"><tr><th>Header 1th><th>Header 2th>tr><tr><td>row 1, cell 1td><td>row 1, cell 2td>tr><tr><td>row 2, cell 1td><td>row 2, cell 2td>tr> table>2.1 课堂练习 : 构建一个简单的表格用于保存地区信息
2017年北京人口数量排名情况
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><table border="1"><tr><th>排名th><th>地区名称th><th>人口总数(万)th>tr><tr><td>1td><td>朝阳区td><td>395.5td>tr><tr><td>2td><td>海淀区td><td>369.4td>tr><tr><td>3td><td>丰台区td><td>232.4td>tr><tr><td>4td><td>昌平区td><td>196.3td>tr><tr><td>5td><td>大兴区td><td>156.2td>tr><tr><td>6td><td>西城区td><td>129.8td>tr>table>body> html>
2.2 跨行与 跨列 合并单元格问题
2.2.1 跨行 : 在td中添加colspan属性即可
当N等于2的时候
代码实现 :<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><table border="1"><tr><td colspan="2">学生成绩td>tr><tr><td>语文td><td>98td>tr><tr><td>数学td><td>95td>tr>table>body> html>
2.2.2 跨列 : 在td上添加rowspan是修改呢即可
案例效果
代码实现:<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例</title></head><body><table border="1"><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body> </html>2.3 综合练习 : 表格的跨行与跨列
代码实现 :<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><table border="1"><tr><td colspan="3">学生成绩td>tr><tr><td rowspan="2">张三td><td>语文td><td>98td>tr><tr><td>数学td><td>95td>tr><tr><td rowspan="2">李四td><td>语文td><td>88td>tr><tr><td>数学td><td>91td>tr>table>body> html>3 音频和视频
3.1 video 与 audio 标签的使用
学了这么多标签之后我们能不能用网页播放音频和视频呢?答案是可以的,我们可以使用 audio标签播放音频用video标签来播放视频,下面我们来看下语法:
视频播放设置
音频播放设置
3.2 自制网页视频播放器
在项目中创建audio文件夹,把文件放入audiao文件夹里面
audio标签的属性 :
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><h1>音频播放器h1><audio src="audio/Scott%20Bradley%20-%20Pecos%20Pest.mp3" controls="controls">您的浏览器不支持音频播放audio><h1>视频播放器h1><video src="video/猫和老鼠杰瑞与金鱼.mp4" muted="muted" autoplay="autoplay" controls="controls">video>body> html>代码说明 :
- controls=“controls”
代表播放器带有控制选项(音量控制,全屏控制等) - muted=“muted” autoplay=“autoplay”
muted表示静音 autoplay 表示自动播放
注意 : 新版谷歌浏览器自动播放视频的前提必须是静音视频(可能是怕突然播放一个视频再把人家吓着了,还得赔钱)
而且谷歌不是所有的mp4都支持所以此次我们选择的IE作为测试
需要说明的是 : 网页播放媒体文件有很多文件类型限制,不是说你想播放啥就播放啥的,所以视频播放器该下还是得下;
4.网页布局
我们已经学习了很多个标签,并且我们也能绘制出自己想要的一些内容,但是有一个问题也非常明显,就是网页内容变多之后网页会非常混乱,那么这个时候就需要网页布局来帮忙了,在学网页布局之前我们先来看一下网页布局的重要性:下面这个是京东的网站
内容虽然多,但是很有条理,这个就是网页布局的功效;那么一般网页都怎么布局呢?
一般情况一个网页都会有上 左 下 右 中的布局风格,那么这种风格在HTML中对应如下属性:
代码编写 :<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML案例title>head><body><header><h2>网页头部h2> header><section><h2>网页主体部分1h2>section><section><h2>网页主体部分2h2>section><section><h2>网页主体部分3h2>section><section><h2>网页主体部分Nh2>section><footer><h2>网页底部h2>footer>body> html>
5.总结
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！ - controls=“controls”
