HTML——HTML标签解析和常用标签①开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

一：HTML文件内标签解析

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

看不懂？上代码


<!DOCTYPE html> <!--HTML5的专门的声明-->
<html lang="en">        <!--根元素头-->
<head>     //页面头部头   （放置link外部引入文件和meta设置）

<meta charset="UTF-8">
<!--    1.定义字符编码
        2.定义搜索关键字
        3.定义页面整体内容的描述
-->

<title>HTML基础</title>   //页面标题
    
</head>    //页面头部尾

<body>    //页面身体（内容）头

</body>   //页面身体（内容）尾


</html>      <!--根元素尾-->

二：常用标签

1. HTML 标题

HTML 标题（Heading）是通过<h1> - <h6>标签来定义的。


<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>
....
<h6>这是一个标题</h6>

2. HTML 段落

HTML 段落是通过标签 <p> 来定义的。


<p>这是一个段落。</p> 
<p>这是另外一个段落。</p>

3. HTML 链接

HTML 链接是通过标签 <a> 来定义的。


<a href="https://https://juejin.cn/user/726106186459070">这是一个链接</a>

4.HTML 图像

HTML 图像是通过标签 <img> 来定义的.


<img decoding="async" src="/images/logo.png" width="258" height="39" />

** 元素举个栗子🌰


<!DOCTYPE html> <!--HTML5的专门的声明-->
<html lang="en"><!--根元素-->
<head>
    <meta charset="UTF-8">
<!--    1.定义字符编码
        2.定义搜索关键字
        3.定义页面整体内容的描述-->
    <title>HTML基础</title>
</head>
<body>

<h1>大家好</h1>

<h2>大家好</h2>

<h3>大家好</h3>

大家好
大家好

<h4>大家好</h4>

<h5>大家好</h5>

<h6>大家好</h6>

<h1>咏鹅</h1>

<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>


<a name="imgprint"></a>
<img src="img/img01.jpg" alt="加载失败图片" title="运动品牌" width="600" height="500">


</body>
</html>

5. HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr元素可用于分隔内容。


<p>这是一个段落。</p> 
<hr> 
<p>这是一个段落。</p> 
<hr> 
<p>这是一个段落。</p>

6.HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

7.HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

<p>
这个
<br>
段落
<br>
演示了分行的效果
</p>

8.HTML 文本格式化标签

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义_下标字
`<sup>`	定义^上标字
`<ins>`	定义插入字
`<del>`	定义删除字

** 元素举个栗子🌰


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em和i是斜体标签，strong和b是加粗标签</title>
</head>
<body>

<b>从军行</b>
<hr/>

<em>青海长云</em>暗<i>雪山</i> <br>

<strong>孤城遥望</strong>玉<small>门关</small> <br>
黄沙百<sub>100</sub>战穿金<sup>99</sup>甲 <br>
不破<ins>楼兰</ins>终<del>不</del>还 <br>

</body>
</html>