⛷️序言

HTML 标签那么多，记不住，怎么办？哎呀，这里该用什么标签，赶紧去查，好麻烦😰。实际上，每个标签看似毫无逻辑，其实都有它的 语义 。我将介绍 HTML 中的常用标签，并且带大家去了解这些标签的 语义 ，不仅便于记忆，而且能让你时刻想起什么地方该用什么标签，让我们开始吧！

🗺️一、标签元素

先从三种元素的类型说起 ↓

1. 三种元素类型

（1）内联元素（行内元素）

代码

display: inline;

特点

每个内联元素不独占一行，和兄弟元素同在一行。
宽高只由内容的宽高决定。
宽高以及到页面顶部和页面底部边距都不可设置，即垂直间距不能设置。
只能通过设置其内边距，边框，外边距，行高来调整它们的水平距离。
只能容纳内联元素和文本。

常用内联元素

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

（2）块状元素（块级元素）

代码

display：block;

特点

每个块级元素独占一行，之后的元素只能另起一行 。
宽高以及到页面顶部和页面底部边距都可以设置。
宽度如果不设置，默认为父元素的宽度。
可以容纳内联元素和其他块状元素。

常用块状元素

<div>、<p>、<h1> ~ <h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

（3）内联块状元素（行内块级元素）

代码

display：inline-block;

特点

和相邻内联块状元素在一行上,之间会有空白缝隙。
默认宽度为本身内容的宽度。
宽高，行高、外边距以及内边距都可以控制。

常用内联块状元素

<br> 、 <hr>、 <img> 、 <input> 、 <td>

（4）额外小特性

当元素不设置为display:none;时，设置以下语句中的任意一个

position: absolute; 或 position: fixed;
float: left; 或 float: right;

元素将会以内联块状元素的方式显示。

2. 图解

在这里插入图片描述相信你已经了解了这三类元素的特点，下面我将分成八大类型的标签，详细介绍各种标签的作用，以及如何根据标签的 语义化 去记忆它们，Go,Go,Go🏃🏻

🍂二、排版标签

1. 标题标签：h1~h6

  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

h语义：headline（标题）
字体大小从h1~h6依次递减，重要程度依次递减

2. 段落标签：p

<p></p>

p语义：paragraph（段落）

3. 换行标签：br

<br>

br语义：break（打断（break）了这一行，意为换行）

4. 水平线标签：hr

<hr>

hr语义：horizontal rules（水平线）

🍊三、文本格式化标签

1. 加粗：strong/b

1）strong

<strong></strong>

strong语义：strong（语义更强烈）

2）b

<b></b>

b语义：bold（粗体）

2. 倾斜：em/i

1）em

<em></em>

em语义：emphasize（语义更强烈）

2）i

<i></i>

i语义：incline/italic（斜体）

3. 删除线：del/s

1）del

<del></del>

del语义：delete（语义更强烈）

2）s

<s></s>

s语义：strikethrough（删除线）

4. 下划线：ins/u

1）ins

<ins></ins>

ins语义：insert（语义更强烈）

2）u

<u></u>

u语义：underline（下划线）

👻四、媒体标签

1. 图片标签：img

img语义：image（图像）

<img src="" alt="">: 表示这是一个图像

<img src="" alt="" title="" weight="" width="">

属性↓

src: 路径

alt: 图片加载失败时显示的内容

title: 鼠标停留在图片上显示的内容

height: 图片长度

width: 图片宽度

2. 路径

（1）绝对路径

1. 从盘符开始的路径

如：C:\Program Files 在这里插入图片描述

2. 整个网址

如：www.csdn.net 在这里插入图片描述

（2）相对路径

1. 同级目录

1）直接输入文件名（文件名需要带后缀） 2）./+文件名，需要带后缀

2. 下级目录

1）文件夹名/文件名（文件名需要带后缀）

3. 上级目录

1）../文件名（文件名需要带后缀）

3. 音频标签：audio

audio语义：audio（音频）

<audio src=""></audio>: 表示这是一个音频

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

属性↓

src: 路径

controls: 显示播放组件

autoplay: 自动播放（需要浏览器支持）

loop: 循环播放

4. 视频标签：video

video语义：video（视频）

<video src=""></video>: 表示这是一个视频

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

属性↓

src: 路径

controls: 显示播放组件

muted: 静音播放

autoplay+muted: 自动播放并静音（如果单独使用autoplay，需要浏览器支持）

loop: 循环播放

5. 链接标签：a

a语义：anchor（锚点，意为"扎"到一个地方去，即超链接）

<a href=""></a>: 表示这是一个超链接

<a href="" target=""></a>

属性↓

href: 超链接地址

target: 超链接打开在哪个窗口↓

_self: 在当前界面跳转(默认)

_blank: 在新页面跳转

🏮五、列表标签

1. 无序列表：ul li

ul语义：unordered list（无序列表）
li语义：list item（列表项）

<ul></ul>: 表示这是一个无序列表标签

<li></li>: 表示列表的每一项

<ul>
   <li></li>
</ul>

2. 有序列表：ol li

ol语义：ordered list（有序列表）
li语义：list item（列表项）

<ol></ol>: 表示这是一个有序列表标签

<li></li>: 表示列表的每一项

<ol>
   <li></li>
</ol>

3. 自定义列表：dl dt dd

dl语义：defined list（自定义列表）
dt语义：defined title（自定义标题）
dd语义：defined detail（自定义详情）

<dl></dl>: 表示这是一个自定义标签

<dt></dt>: 表示自定义标签的主题

<dd></dd>: 表示自定义标签的内容

<dl>
     <dt></dt>
     <dd></dd>
     <dd></dd>
</dl>

⚡六、表格标签

1. 表格的基本标签：table tr td

table语义：table（表格）
tr语义：table row（表格行）
td语义：table data（表格数据单元格）

<table></table>:表示这是一个表格

<tr></tr>:表示表格的行

<td></td>:表示表格每一列的内容

<table border="" width="" height="">
 <tr>
   <td>
   </td>
 </tr>
</table>

属性↓

border: 表示边框宽度

width: 表示表格宽度

height: 表示表格长度

2. 表格标题和表头单元格：caption th

caption语义：caption（标题）
th语义：table header（表头，默认加粗）

<caption></caption>: 表示这是表格的标题

<th></th>: 表示这是表头

<table>
 <caption></caption>
 <tr>
   <th></th>
 </tr>
 <tr>
   <td></td>
 </tr>
</table>

3.表格的结构标签：thead tbody tfoot

thead语义：table head（表格头部）
tbody语义：table body（表格主体）
tfoot语义：table foot（表格底部）

<thead></thead>: 表示这是表格头部

<tbody></tbody>: 表示这是表格主体

<tfoot></tfoot>: 表示这是表格底部

<table>
   <thead></thead>
   <tbody></tbody>
   <tfoot></tfoot>
 </table>

4. 合并单元格 rowspan colspan

rowspan语义：row span（跨行）
colspan语义：column span（跨列）

<table border="1px">
   <tr>
     <td rowspan="2">1</td>
     <td>2</td>
     <td>3</td>
   </tr>
   <tr>
     <td colspan="2">4</td>
   </tr>
 </table>

显示结果在这里插入图片描述

属性↓

rowspan: 跨行合并（上下合并）保留上面，删除其他

colspan: 跨列合并（左右合并）保留左边，删除其他

🌕七、表单标签

1. input标签

input语义：input（输入）

<form action="">
    <input type="text/password/radio/checkbox
    /file/submit/reset/button" placeholder="">
</form>

属性↓

action: 规定当提交表单时，向何处发送表单数据

type: 输入的类型↓

text: 文本框

password: 密码

radio: 单选框，使用 checked 属性默认选中，相同 name 属性为一组，同一组只能有一个相同名称的单选框被选中

checkbox: 多选框，使用 checked 属性默认选中，可选中多个

file: 选择文件，添加 multiple 可选中多个文件

submit: 提交按钮，添加 value 设置按钮显示的内容

reset: 重置按钮，添加 value 设置按钮显示的内容

button: 普通按钮，默认无功能，可用 JS 添加功能，添加 value 设置按钮显示的内容

2. 下拉选项标签 select

select语义：select（选择，意为可以选择下拉选项）

<select name="" id="">
    <option value=""></option>
    <option value="" selected></option>
</select>

属性↓

name: 用于对提交到服务器后的表单数据进行标识

id: 规定id，具有唯一性

value: 可以设置每个选项显示的内容

selected: 在其中一个选项中加入 selected 可以默认选中该选项

3. 文本域标签 textarea

textarea语义：textarea（文本领域）

<textarea name="" id="" cols="30" rows="10"></textarea>

属性↓

name: 用于对提交到服务器后的表单数据进行标识

id: 规定id，具有唯一性

cols: 设定列数

rows: 设定行数

4. label标签

label语义：label（标签）没错☑️它就是标签的意思

  <label>
  <input type="radio" name="sex" id="male">Male
  </label>

  <label>
  <input type="radio" name="sex" id="male">Female
  </label>

具体效果：为鼠标用户改进了可用性，单击文本也能触发此控件。如上面的：Male和Female 在这里插入图片描述

👾八、语义化标签

首先先看看什么是没有语义的标签

1. 没有语义的标签 div span

<div></div>
<span></span>

div: 块级元素，它的内容自动地开始一个新行

span: 行内元素，用来组合行内元素，不换行

这两个标签以后会经常看到，不用记忆（是真的很常见🤭）

2. 几个简单的语义化标签

下面介绍的几个 语义化 标签，都没有实际的效果，用于文档的描述，但是可以在实际开发中更便于阅读。

header: 表示该区域是网页的头部
nav: 可在nav标签中定义网页的导航
footer: 表示该区域是网页的底部
aside: 表示该区域是网页的侧边栏
section: 表示该区域是网页的一个区块
article: 表示该区域是网页中的一篇文章

🎯九、字符实体

1. 空格 &nbsp

在 HTML 中，当你试图在一句话中输入多个空格，你会发现只生效一个空格↓

<p>(        )</p>

实际效果如下↓ 在这里插入图片描述

那么，我们该怎么办呢，输入 &nbsp 即可正确表示你想要的空格，一个 &nbsp 表示一个空格。

<p>(&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp)</p>

实际效果如下↓ 在这里插入图片描述

2. 其他字符实体

在这里插入图片描述

这里附上一张字符实体表，实际除了空格基本很少用到，等到要用的时候再查看📑就好啦~

🎱十、结束语

至此，关于 HTML 的几个常用标签以及这些标签能用到的一些属性，标签的 语义 ，标签的用法等等，已经介绍完啦，但是我想说的是，这只是前端三件套中的冰山一角，在之后的学习中，配合着 CSS 和 JS 才能发挥 HTML 的性能，希望读者有所收获~

⭐Extra

指路作者的 CSDN 👉三角冻干咖啡的博客

「从零入门HTML」从语义化角度探索HTML常用标签

⛷️序言

🗺️一、标签元素

1. 三种元素类型

（1）内联元素（行内元素）

代码

特点

常用内联元素

（2）块状元素（块级元素）

代码

特点

常用块状元素

（3）内联块状元素（行内块级元素）

代码

特点

常用内联块状元素

（4）额外小特性

2. 图解

🍂二、排版标签

1. 标题标签：h1~h6

2. 段落标签：p

3. 换行标签 ：br

4. 水平线标签 ：hr

🍊三、文本格式化标签

1. 加粗：strong/b

1）strong

2）b

2. 倾斜：em/i

1）em

2）i

3. 删除线：del/s

1）del

2）s

4. 下划线：ins/u

1）ins

2）u

👻四、媒体标签

1. 图片标签：img

2. 路径

（1）绝对路径

1. 从盘符开始的路径

2. 整个网址

（2）相对路径

1. 同级目录

2. 下级目录

3. 上级目录

3. 音频标签：audio

4. 视频标签：video

5. 链接标签：a

🏮五、列表标签

1. 无序列表：ul li

2. 有序列表：ol li

3. 自定义列表：dl dt dd

⚡六、表格标签

1. 表格的基本标签：table tr td

2. 表格标题和表头单元格：caption th

3.表格的结构标签：thead tbody tfoot

4. 合并单元格 rowspan colspan

🌕七、表单标签

1. input标签

2. 下拉选项标签 select

3. 文本域标签 textarea

4. label标签

👾八、语义化标签

1. 没有语义的标签 div span

2. 几个简单的语义化标签

🎯九、字符实体

1. 空格 &nbsp

2. 其他字符实体

🎱十 、结束语

⭐Extra

3. 换行标签：br

4. 水平线标签：hr

🎱十、结束语