HTML基础标签(一)

一、排版标签

1.标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签

 <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

特点：

文字加粗

文字都有变大，并且从h1~h6文字逐渐递减

独占一行

2.段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：

<p>我是一段文字</p>

语义：段落

特点：

段落之间存在间隙

独占一行

3.换行标签

场景：让文字强制换行显示

代码：

<br>

特点：

单标签

让文字强制换行

4.水平线标签

场景：分割不同主题内容的水平线

代码：

<hr>

语义：主题的分割转换

特点：

单标签

在页面中显示一条水平线

二、文本格化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：突出重要性的强调语境

标签语义化

实际项目开发中选择标签的原则：标签语义化

即：根据语义选择对应正确的标签

如：需要写标题，就使用h系列标签

如：需要写段落，就使用p标签

好处：

对人：好理解，好记忆

对机器：有利于机器解析，对搜素引擎(SEO)有帮助

推荐：strong、ins、em、del，表示的强调语义更强烈！

三、媒体标签

3.1 图片标签的介绍

场景：在网页中显示图片

代码：

<img src="" alt="">

特点：

单标签

img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性注意点：

标签的属性写在开始标签内部

标签上可以同时存在多个属性

属性之间以空格隔开

标签名与属性之间必须以空格隔开

属性之间没有顺序之分

3.1.2 图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)

路径的情况有很多，稍后会详细介绍

3.1.3 图片标签的alt属性

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本

当图片加成功时，不会显示alt的文本

3.1.4 图片标签的title属性

属性名：title

属性值：提示文本

当鼠标悬停时，才显示的文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

3.1.5 图片标签的width和height属性

属性名：width和height

属性值：宽度和高度(数字)

注意：

如果只设置width或height中的一个，另一个没有设置的会自动等比例缩放(此时图片不会变形)

如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.2 路径

场景：页面需要加载图片，需要先找到对应的图片

路径可分为：

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

盘符开头：D:\test\1.png

完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif

相对路径：从当前文件开始出发找到目标文件的过程

概念普及：

当前文件：当前的html网页

目标文件：要找到的图片

相对路径的分类：

同级目录

下级目录

上级目录

3.3 音频标签

场景：在页面上插入音频

代码：

<audio src="" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放(部分浏览器不支持)
loop	循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

3.4 视频标签

场景：在页面中插入视频

代码：

<video src="" controls></video>

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放(谷歌浏览器中需配合muted实现静音播放)
loop	循环播放

注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

4.链接标签

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：

<a href="./目标网页.html">超链接</a>

特点：

双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转(覆盖原网页)
_blank	在新窗口中跳转(保留原网页)