HTML标签学习

1.标题标签

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

1.2 标题：（Heading）是通过 <h1> - <h6> 标签进行定义的。

                    <h1> 定义最大的标题。 <h6> 定义最小的标题。

                     代码：h系列标签

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

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

 1.4 特点： 

• 独占一行
• 文字加粗
• 文字变大，h1->h6 文字逐渐变小

  1.5 效果展示： 

 

 

 2.段落标签

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

 2.2 代码：

<p>内容</p>

  2.3 特点：

• 段落之间存在间隙
• 独占一行

  2.4 效果展示：

 

3.换行标签

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

 3.2 代码：

第一行文本<br />第二行文本

 3.3 语义：换行

 3.4 特点

• 单标签
• 让文字强制换行

4.水平线标签 

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

 4.2 代码：

<hr>

  4.3 语义：主题的分割转换

  4.4 特点：

• 单标签
• 在页面显示一条水平线

  4.5 效果展示

 

5.文本格式化标签

  5.1 场景：

  5.2 代码：

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

  5.3 效果展示

6.媒体标签和路径

  6.1.1 图片标签

  6.1.2 代码：

<img
  src="图片地址"
  alt="替换文本"
  title="提示文本"
  width="宽度"
  height="高度"
/>

  6.1.3 结构图

   6.1.4 标记属性

   6.1.5 注意

• 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

   6.2.1 路径

• 相对路径
• 绝对路径

   1.绝对路径

    是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

   2.相对路径 

    以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

 （1）当前路径

<img src="image.png" />

<!-- 推荐使用./ -->
<img src="./image.png" />

 （2）下级路径

<img src="./img/image.png" />

 （3）上级路径

<img src="../image.png" />

7. 音频标签

   7.1 代码展示

<audio
  src="音频地址"
  controls 显示播放控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
</audio>

  支持的格式 mp3 wav

8.视频标签

   8.1 代码展示

<video src="视频地址"
  controls 显示播放控件
  autoplay 自动播放（谷歌浏览器需要配合muted静音播放）
  muted 静音播放
  loop 循环播放
</video>

9.链接标签 

 9.1 链接（超链接）

     HTML使用标签 <a>来设置超文本链接。

     超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

9.2 语法

<a href="url">链接文本</a>

9.3 实例

<a href="目标地址">文字内容</a>

<!-- eg: -->
<a href="https://www.baidu.com/">百度</a>

9.4 属性 

• target: _self 当前窗口打开（默认） / _blank 新窗口打开
• href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
• target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。