1.列表
列表分为有序列表、无序列表和自定义列表
1:有序列表 用ol标签创建,li表示列表项
2:无序列表 用ul标签创建,li表示列表项
3:定义列表 用dl标签创建,使用dd对内容进行解释说明
注意:列表之间是可以互相嵌套的
ol ul dl li 都是块元素
通过type属性更改列表的项目符号
有序列表
项目符号:1(默认值)、a、A、i、I
无序列表
项目符号:
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
例子
<!DOCTYPE html>
<html>
<body>
<h2>有序列表</h2>
<ol >
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<ol type="I">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
</body>
</html>
2.超链接
超链接(Hyperlink)是网页中最常见的元素之一,整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成,超链接使得网页之间不再独立,它就像一根线,把网页连接在一起,形成一个网状结构。互联网之所以能够称之为“网”,就是因为有超链接的存在。
创建空链接的几种方法:
1.<a href="#"></a>
2.<a href="javascript:;"></a>
<!--超链接例子-->
<a href="https://www.jd.com/"> 全球 </a> -->
<a href="./04.列表.html" target="_blank">全球</a> -->
<a href="./img/img/2.gif">图片</a>
<a href="../测试/01.html">测试</a>
3. img标签
<img> 标签定义 HTML 页面中的图像。 <img> 标签有两个必需的属性:src 和 alt。 注释: 从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签
img这种元素属于行内块元素(基于块和行内元素之间,具有两种元素的特点)
4个属性
src 引入图片的地址
alt 图片引入不成的时候,文字提示 更重要的作业,浏览器会根据alt值来区分推荐图片
width 控制图片的宽度
height 控制图片的高度度
注意:width和height一般不会同时设置,可能会导致图片的变形
-->
<img src="./img/png/w.gif" alt="11111" height="500px" >
图片格式分为JPEG (JPG),PNG,GIF
JPEG(JPG)格式的图片:
JPEG(JPG)格式的图片支持的颜色比较多,图片可以压缩,不支持透明
一般使用JPEG(JPG)格式来保存颜色比较丰富的照片
GIF格式的图片:
GIF格式的图片支持的颜色比较少,只支持简单的透明(直线型区域的透明),支持动态图
图片颜色但一,或者是动态图时用GIF格式的图片
PNG格式的图片:
PNG支持的颜色比较多,且支持复杂的透明
可以用来显示颜色复杂的透明图片(实际中使用频率最高)
图片的使用原则:
效果不一致,使用效果好的。效果一致用小的。
3.音视频
<!-- audio标签 用来向页面中引入一个外部的音频文件
src 引入音视频路径地址
controls 是否允许用户控制音视频的播放 ,默认是不允许
loop 循环播放
autoplay 自动播放 很多浏览器废弃
-->
<audio src="./source/反击.mp3" controls loop autoplay></audio>
<!-- video标签来向页面中引入一个视频,使用方式跟音频基本上一样的 -->
<video src="./source/如何.mp4" controls></video>