HTML学习笔记（超详细）（二）

超爱慢

已于 2023-05-11 17:16:02 修改

阅读量532

点赞数

文章标签：学习笔记 html5 html

于 2023-05-11 17:13:16 首次发布

本文链接：https://blog.csdn.net/jojo_oulaoula/article/details/130605358

版权

本文介绍了HTML5中的三种列表类型——无序列表、有序列表和定义列表，以及它们的特性和应用场景。接着，详细讲解了HTML表格的创建、跨列和跨行的方法。此外，还探讨了HTML5的媒体元素，如video和audio标签，及其在网页中播放音频和视频的功能。最后，提到了HTML5的结构元素，如header、section和footer，对网页布局的重要性。

摘要由CSDN通过智能技术生成

一、HTML5 列表

1、列表定义

列表定义：列表是一种特别的对象集合
集合定义：集合在一起，再合二为一（聚集）
聚集定义：多个列（信息资源）排在一起
信息资源定义：一堆的数据，可能是字符，可能是图片
HTML5如何实现列表：3种方式：

1、无序列表 2、有序列表 3、（自）定义列表

2、无序列表

定义：没有顺序

HTML5（H5）（代码结构）：

<body>
		<ul>
			<li>中国</li>
			<li>美国</li>
			<li>日本</li>
			
			<li>奇犽</li>
			<li>小杰</li>
			<li>西索</li>
		</ul>
	</body>

3、无序列表特性

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
应用场景：常应用在导航功能中

4、有序列表

定义：有顺序

代码结构：

<ol>
	<li>苹果</li>
	<li>香蕉</li>
	<li>菠萝</li>
</ol>

5、有序列表特性

1.有顺序，每个<li>标签独占一行（块元素）

2.默认<li>标签项前面有个数字标签

3.应用场景：一般用于排序类型，如试卷、问卷选项等

6、定义列表

定义：定义某种关系（包含和被包含的关系）
代码结构：

<dl>
			<dt>水果</dt>
            <dd>苹果</dd><dd>香蕉</dd><dd>菠萝</dd>
            <dt>水果2</dt>
            <dd>苹果2</dd><dd>香蕉2</dd><dd>菠萝2</dd>
</dl>

7、定义列表特性

1.没有顺序，每个<dt><dd>标签独占一行（块元素）

2.默认没有标记

3.如果存在包含和被包含的关系就可以使用定义列表

8、三种类型的列表区别

二、HTML 表格

1、表格

表格定义：有行有列，多个单元格组成
表格缘由：可以清晰地将多个信息资源组成在一起（如果没有表格就会导致网站中的信息资源杂乱）

2、表格语法结构

table：表格标签名称（元素）

Border：边界 1px：1像素

tr：表格中的行标签

td：表格中的单元格标签（列标签）

3、表格的跨列

<table>
	<tr><td colspan="2">姓名</td></tr>
	<tr><td>库洛洛</td><td>西索</td></tr>
</table>

跨列与行的多少没有关系

4、表格的跨行

<table border="1px">
	    <tr><td rowspan="2">姓名</td><td>库洛洛</td></tr>
		<tr><td>西索</td></tr>
</table>

同理跨行与列的多少没有关系

5、表格的跨行和跨列

<table border="1px">
		<tr><td colspan="3">学生成绩</td></tr>
		<tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr>
		<tr><td>数学</td><td>98</td></tr>
		<tr><td rowspan="2">李四</td><td>语文</td><td>98</td></tr>
		<tr><td>数学</td><td>98</td></tr>
</table>

三、HTML5媒体元素

1、HTML媒体元素应用场景

一般是应用于网络中的音乐文件或视频文件

2、HTML5媒体元素标签

a).video视频元素（标签）

若缺少controls属性则会丢失图像和播放按钮

<video controls = "control">
	 <source src = "video/atm.mp4" type = "video/mp4"/>
</video>
<--或-->
<video controls = "control" src = "video/atm.mp4" type = "video/mp4"/>

b).audio音频元素（标签）

若缺少controls则会丢失页面效果

<audio controls = "controls">
		<source src = "music/departure!.mp3" type="audio/mp3"/>
</audio>
<--或-->
<audio controls = "controls" src = "music/music.ogg" type="audio/ogg"></audio>