HTML中列表、表格与媒体元素

《列表、表格与媒体元素》
一、列表的使用
1.列表是信息资源的一种展现形式，它可以使信息更加结构化条理化，便于阅读
2.列表（List）的分类：
a.有序列表
b.无序列表
c.定义列表
3.无序列表：
a.使用ul标签包裹(unsorted list的简写)
b.里面包含li表示列表项（list item)
c.每一项独占一行
d.每一项前面默认使一个实心小圆点
举例：

<!-- 无序列表-->
<ul><li>aaaaa</li><li>bbbb</li><li>ccccc</li>
</ul>

4.有序列表：
a.使用ol标签包裹（order list的简写)
b.里面包含li
c.每一项默认有阿拉伯数字编号
举例：

<!-- 有序列表-->
<ol><li>aaaaa</li><li>bbbb</li><li>ccccc</li>
</ol>

5.定义列表：
a.是一种标题和列表的结合
b.dl作为外层标签（define list)
c.dt表示一个标题（标题可以有多个，也可以没有）
d.dd表示一个列表项
举例：

<!--定义列表-->
<dl><dt>aaaa</dt><dd>bbbb</dd><dd>ccccc</dd><dd>dddd</dd><dt>国内水果</dt><dd>苹果</dd><dd>香蕉</dd><dd>葡萄</dd>
<dl>
<!--  定义列表-->
<dl><dd>布林</dd><dd>车厘子</dd><dd>牛油果</dd>
</dl>

6.列表样式
a.list-style-type属性设置列表项标记的类型
常用属性值说明
none 无标记符号
disc 实心圆，默认类型
circle 空心圆
square 实心正方形
decimal 数字
b.list-style:表示在一个声明中设置所有列表的属性。
按照list-style-type——>list-style-position——>list-style-image的顺序设置属性值。
可是实际中会直接使用list-style来设置列表无标记符。
二、表格的使用
1.表格在现实生活中非常常用，行列整齐，格局方正，数据清晰，word文档中也有表格
2.表格由行列组成，数据使存放在每一个单元格里面的
3.表格的语法结构如下：

<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>22</td></tr>
</table>

4.table表示表格
5.tr表示行（row)
6.td表示列(column)，即单元格
7.th表示表头(table head)，或者叫列标题，会默认居中且粗体显示
8.table标签的border属性可以给表格设置边框：border=“1”（已经废弃不建议使用）
9.表格的跨列（合并列）:colspan=“跨的列数”
10.表格的跨行（合并行）：rowspan=“跨的行数”

11.table的常用属性：
width属性设置表格的宽度，
height设置表格的高度，
border设置表格的边框宽度(粗细)，像素值默认为0
align设置表格在网页中的水平对齐方式，如left,center,right
cellspacing设置单元格与单元格边框之间的空白间距宽度，像素值默认为2
cellpadding设置单元格内容与边框线之间的空白间距宽度，像素值默认为1
bgcolor设置表格的背景色
background设定表格的背景图
bordercolor设定表格边框线的颜色

标题标签<caption>:标题标记是成对出现的，用于表示一个表格的“标题文字”(看起来在表格线的外面)，写在table标签中
表头标签<th>:成对出现，有特殊效果：自动加粗并居中
表格行标签<tr>:成对出现，一组<tr>标记表示表格中的一行，要在<table>中使用。

12.单元格标签:又称为列标记，一个标记中可以嵌套若干个标记。
width属性设置表格的宽度，
height设置表格的高度，
align设置表格在网页中的水平对齐方式，如left,center居中对齐,right右对齐
valign设置单元格中的内容的垂直对齐方式，如top顶部对齐,middle居中对齐,bottom底部对齐
rowspan设置要跨行（纵向）合并的单元格数
colspan设置要跨列（横向）合并的单元格数
bgckground设定表格的背景图
bordercolor设定表格边框线的颜色
三.媒体元素中的视频元素
1.video元素的基本语法：
<video src="视频路径"controls=“controls”>此处当浏览器不支持video元素时，进行内容提示
2.src是指视频的存放路径，可以是相对或绝对路径
2.controls属性：
a.controls属于boolean类型的属性，表示是否显示控制按钮（播放、全屏、进度）
b.只要出现这个属性就表示true，与属性值的内容没有关系
c.值可以是任意字符串，通常可以写成跟属性名词，或者写true，即便写false也表示true
d.还有一种规范写法是只写属性名
3.video标签一定要用容器标签的写法，即双标签写法，否则后续元素无法解析显示
4.可以通过width、height来控制video的宽度和高度
5.autoplay属性可以用于设置自动播放，boolean类型的属性
如：

 <video autoplay><source src="video/video.webm"/><source src="video/video.mp4"/>您的浏览器不支持video</video>

6.loop属性可以用于指定是否循环播放，boolean类型的属性
7.poster属性用于指定播放前的展示封面，指向一张图片的路径
8.HTML5支持的常见视频格式：
a.Ogg
b.MP4/MPEG4（用的最多）（MPEG4文件使用H264视频编解码器和AAC音频编解码器）
c.WebM
9.兼容各种浏览器的写法：
src属性只能链接一种格式的视频，很难让每种浏览器都支持这种格式，所以用source元素。
source元素嵌套在video元素里，并且可以出现多次，每个source元素对应于一种格式的视频。
两种写法：
第一种：
如：

     <video controls><source src="视频路径.webm" type="video/webm"/><source src="视频路径.mp4" type="video/mp4"/>你的浏览器不支持video标签</video>
上面两个视频路径指的同一视频的不同格式，type指的是类型
第二种：
如：<video controls><source src="video/video.webm"/><source src="video/video.mp4"/>你的浏览器不支持video标签</video>

10.也可以下载视频格式转换器来进行格式转换。
11.可以在标签之间放置文本内容，这样不支持此元素的浏览器就可以显示出该友好信息。

四.音频元素
1.网页中也可以播放音频
2.现在有HTML5的audio标签支持播放音频文件。
3.audio元素的基本语法
<audio src="音频路径"controls=“controls”>你的浏览器不支持audio标签
注意：让主流浏览器都支持视频和音频文件的方法如下：
通过source引入的视频文件的格式至少包括WebM和MPEG4或Ogg和MPEG4
通过source引入的音频文件的格式至少包括WAV和MP3或Ogg和MP3
4.歌曲播放失败原因：
a.文件路径写错了，或者文件本身就不存在
b.文件本身的格式不对，或者文件本身就被破坏了
c.文件名有中文，而又没有处理中文乱码
5.兼容写法：

<audio controls><source src="video/video.webm"/><source src="video/video.mp4"/>你的浏览器不支持video标签
</audio>

6.主流浏览器支持的音频格式
音频格式/浏览器 IE Firefox Opera Chrome Sfari
Ogg 不支持 3.5+ 10.5+ 3.0+ 不支持
MP3 9.0+ 不支持不支持 3.0+ 3.0+
WAV 不支持 4.0+ 10.6+ 不支持 3.0+

五.HTML5新增的页面结构元素
1.页面的大体布局分析
a.绘制网页的时候要先布局
b.页头
c.导航
d.主体
e.页脚（页尾）
2.页面布局的常用语义化标签
header:头部
footer:脚部，尾部
section:区域，独立的一部分
article:文章内容
aside:侧边栏
nav:导航
3.使用语义化标签，使得代码的语义更清晰，可读性更好，且便于搜索引擎读取分析

<body><header>这里是头部</header><nav>页面导航写在这里</nav><section>这里是网页主体</section><footer>这里是页脚</footer>
</body>

六.iframe框架
1.如果页面中的部分内容想要引用别的页面来呈现，可以使用内嵌框架iframe
2.iframe的语法:

<iframe src="嵌入页面的url"name="框架的名称"></iframe>

3.src是需要嵌入的页面url，可以是相对路径，绝对路径，包括外站路径
4.iframe相当于在页面中再次嵌入一个小的浏览器窗口
5.一个页面可以又多个内嵌框架
6.通过width和height调整宽高
7.frameborder="0"可以关闭边框
8.通过设置超链接的target指向iframe的name,可以让内嵌框架的页面内容发送跳转
<a herf="login.html"target=“frameName”>登录

七.通过W3Cscholl网页查看相关文档

HTML中列表、表格与媒体元素相关推荐

列表表格以及媒体元素
一.列表信息资源的一种展现形式二.列表的分类 1.有序列表 <ol> <li/>内容1</li> <li>内容2</li> </o ...
HTML列表、表格和媒体元素
列表.表格和媒体元素一.列表:信息资源的一种展示形式二.列表的分类:有序列表1.例子:<ol><li>内容</li></ol>2.特性:有顺序,每个 ...
列表、表格与媒体元素
一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> ...
html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
html 列表、表格与媒体元素
HTML5列表分为三种类型: 1:无序列表 <ul></ul> 无序列表由<ul>和<li>标签组成,<ul>标签表示无序列表的声明 & ...
HTML学习03之列表，表格，媒体元素
一.列表是什么? 列表就是信息资源的一种展示形式.它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息列表的分类: 无序列表有序列表定义列表 <!DOCT ...
html5列表表格媒体元素,列表、表格与媒体元素
北冥复习html(二) 一.表格的具体组成单位由行和列组成的单元格结构: row1,cell1 row1,cell2 table ==> 定义表格: border ==> 设置表格边粗 ...
HTML5-列表、表格、媒体元素、页面结构分析
目录 1.列表标签 2.表格标签 3.媒体元素 1.列表标签 1)什么是列表列表就是信息资源的一种展现形式.它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息 2 ...
前端(二)——HTML之列表、表格、媒体元素
文章目录 1. 列表 2. 表格 3.音频.视频 3.1 音频 audio 3.2 视频 video 4. 网页结构分析 5. 内联框架 1. 列表 (1)无序列表 ul-li :应用于导航.侧边栏新 ...

HTML中列表、表格与媒体元素

HTML中列表、表格与媒体元素相关推荐

最新文章

热门文章