自学Web前端开发2（HTML）

 一、HTML标签学习

1.1排版标签

1.1.1标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

有且只有六个，独占一行，逐个减小

1.1.2段落标签

用于分段表示

<p>段落</p>

独占一行

落文字会根据浏览器视窗的大小而自动换行

两个段落间默认产生间隙

1.1.3换行标签

注意是单标签

<br>

在文本中添加<br>会让文字强制产生换行

1.1.4水平线标签

<hr>

在相应位置添加水平线效果

独占一行

1.2文本格式化标签

1.2.1文本格式化标签的介绍

加粗
<b></b>
<strong></strong>
下划线
<u></u>
<ins></ins>
倾斜
<i></i>
<em></em>
删除
<s></s>
<del></del>

单词版的标签是为了突出强调作用，实际上两者的效果是相同的

1.2.2标签语义化

1.3媒体标签

1.3.1图片标签

图片标签是单标签

<img src="" alt="">

其中src/alt是属性名，" "内的是属性值

第一个属性值中是图片路径

第二个属性值中是当图片异常无法显示时要展示的替换文本

title属性

<ing src="路径" alt="替代文本" title="提示文本">

提示文字是鼠标悬停时显示的文字

注意这个tltle标签不止可以用于图片标签

width/height属性

设置图片的尺寸，只设置一个时会按比例缩放

1.3.2路径

页面加载媒体资源需要先通过路径找到相应的媒体资源

路径分为绝对路径（从盘符开始直接到达目标位置or完整的网络地址）（局限性强，不常用）和相对路径（从当前文件开始找目标文件，包括同级目录、下级目录和上级目录）

同级目录
<img src="picture.jpg">
或
<img src="./picture.jpg">

下级目录（html文件与图片所在的文件夹处于同一级）
<img src="images/picture.ipg">

上级目录（图片与html文件所在文件夹在同一级）
<img src="../picture.jpg">

代码顺序与实际操作顺序相同，下面代码的意义就是先前往上一级，然后进入images文件夹，打开picture.jpg文件

<img src="../images/picture.jpg>

1.3.3音频标签

注意音频标签是个双标签

<audio src="路径"></audio>

controls属性：音频控件

autoplay属性：自动播放（部分浏览器不支持）

loop属性：循环播放

目前音频标签支持的格式：.mp3/.wav/,ogg

1.3.4视频标签

也是个双标签

<video src="路径"></video>

视频标签的属性与音频标签的属性相同

controls属性：视频控件

autoplay属性：自动播放（google浏览器需要配合muted属性进行静音播放）

loop属性：循环播放

1.4链接标签

点击后从一个页面跳转到另一个界面

<a href="网页路径or网址">连接对应的文本</a>

若暂时不知道应该跳转的网址，则先在路径中填充"#"（空链接）

链接标签的属性

target属性 控制目标网页的打开形式

_self（默认状态）覆盖原网页在当前窗口跳转
<a href="https://www.baidu.com/" target="_self">百度</a>
_blank 在新窗口跳转
<a href="https://www.baidu.com/" target="_blank">百度</a>