2021-05-09

  7.列表

列表(list)

        在HTML中也可以创建列表，HTML列表一共有三种

            1.有序列表

                使用ol标签来创建有序列表

                使用li表示列表项

            2.无序列表

                使用ul标签来创建无序列表

                使用li表示列表项

            3.定义列表

                使用dl标签来创建一个定义列表

                使用dt来表示定义的内容

                使用dd来对内容进行解释说明

            

            列表之间可以相互嵌套

	 <ol>
		 <li>结构</li>
		 <li>表现</li>
		 <li>行为</li>
	 </ol>

	 <ul>
		 <li>结构</li>
		 <li>表现</li>
		 <li>行为</li>
	 </ul>

	 <dl>
		 <dt>结构</dt>
		 <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
	 </dl>

	 <ul>
		 <li>
			aa
			<ul>
				<li>aa-1</li>
				<li>aa-2</li>
			</ul>
		 </li>
	 </ul>

  8.图片标签

        图片标签用于向当前页面中引入一个外部图片

            使用img标签来引入外部图片，img标签是一个自结束标签

            img这种元素属于替换元素(基于块和行内元素，具有两种元素的特点)，不独占一行

            属性：

                src属性 指定的是 外部图片的路径(路径规则和超链接一致)

                alt属性 指定的是 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示

                                搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

                title属性 指定的是 提示文本(鼠标移动于图片上，会有文本显示)

 

                width属性 指定的是 图片的宽度，单位是像素

                height属性 指定的是 图片的高度，单位是像素

                    宽度和高度中如果只修改其中一个，则另一个会等比例缩放

            注意：

                一般情况下，在pc端，不建议修改图片的大小，需要多大就裁剪多大

                但在移动端，经常要对图片进行缩放(大图缩小)

            

            图片的格式：

                JPEG(jpg):支持的颜色比较丰富，不支持透明效果，不支持动图

                           一般用来显示图片

                gif：支持的颜色比较少，支持简单透明，支持动图

                            颜色单一的图片，动图

                png：支持的颜色丰富，支持复杂透明，不支持动图

                            颜色丰富，复杂透明图片(专为网页而生)

                webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

                            它具备了其他图片格式的所有优点(支持动图)，而且文件还特别小

                            缺点：兼容性不好

                base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片

                        一般都是一些需要和网页一起加载的图片才使用base64

 

            图片属于网页中的外部资源，外部资源都需要浏览器单独发送 请求加载，

            浏览器加载外部资源是 按需加载的 ，用则加载，不用则不加载

            最先浏览器会请求加载网页！！！然后再请求其它资源！！！

            请求加载其它资源时会有一个时间差，会导致图片闪烁。

<img src="./source/esp.jpg" alt="雷克萨斯发布">
<img src="./source/es.jpg" alt="雷克萨斯">

  9.音视频

        audio标签 用来向页面中引入一个外部的音频文件

        音视频文件引入时，默认情况下不允许用户自己控制播放停止

 

        属性：

            controls 是否允许用户控制播放

            autoplay 音频文件是否自动播放

                如果设置了autoplay 则音乐在打开页面时会自动播放

                但是目前大部分浏览器都不会自动播放音乐(基于用户体验)

            loop 音乐是否循环播放

<audio src="./秦霄贤、刘筱亭 - 中文歌曲串烧 (Live).mp3" controls autoplay></audio>

 

         除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

         embed标签：供IE8以下使用。type前面先写大类型，然后再写文件的后缀。

<audio controls>
		<source src="./source/秦霄贤、刘筱亭 - 中文歌曲串烧 (Live).mp3">
		<embed src="./source/秦霄贤、刘筱亭 - 中文歌曲串烧 (Live).mp3" type="audio/mp3">
		<!--(兼容了其他版本，就无须这段话了) 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
</audio>

10.内联框架

       内联框架：用于向当前页面中引入一个其他页面 

            属性：

                src 指定要引入的网页的路径

                frameborder 指定内联框架的边框

<iframe src="https://www.baidu.com" frameborder="0"></iframe>