HTML常用标签

2、链接标签（link）

<!-- tag图片 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<!-- 外联样式表 -->
<link rel="stylesheet" type="text/css" href="style.css" />

 

3、样式标签（style）

<!-- 内联样式表 -->
<style></style>

 

4、脚本标签（script）

<script type="text/javascript"></script>

 

五、常用标签

1、无语义标签

<!-- div 最常用标签 -->
<div><div>

<!-- span 最常用的纯文本标签 -->
<span></span>

 

2、常用语义标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文

<!-- 换行 -->
<br>haode<br>

<!-- 加入分割线 -->
<hr>1<hr>2<hr>

 

3、文本标签

<!-- i 很常用的标签，一般不作文斜体文本使用，作文字体图片使用 -->
<i>斜体</i>
<em>以斜体方式强调</em>   

<b>加粗</b> 
<strong>以加粗方式强调</strong>

<!-- p 段落标签具有具体区域，成段出现，段落之前崔仔段落间距 -->
<p>段落标签</p>
<p>段落标签</p>

<!-- pre 原样文本标签,保留所有字符，原样输出 -->
<pre>123   456                7</pre>

<!-- ins样式具有下划线 -->
<ins>插入的文本</ins>

<!-- del样式具有中划线 -->
<del>删除的文本</del>

<!-- sup上标，下面效果10的平方 -->
<span>10<sup>2</sup></span>

<!-- sub是下标，下面效果水分子 -->
<span>H<sub>2</sub>O</span>

<!-- small小号字体，下面效果右边小号字体 -->
<span>你好<small>好</small></span>

<!-- ruby与rt组合，拼音 -->
<ruby>
    牛皮<rt>niupi</rt>
</ruby>

<!-- 块 -->
<section></section>

 

六、标签分类

1、单标签 / 双标签

单标签：单标签在本身标签标识结束，主要应用场景为功能性标签,结束标志可省略
双标签：双标签有成对的结束标识，主要应用场景为内容性标签,结束标志可省略（不建议）

<!-- 单标签 -->
<meta charset="UTF-8" />
<meta charset="UTF-8">

<!-- 双标签 -->
<div>div1</div>

 

2、行标签 / 块标签

行标签：内联标签，内联标签本身不具备宽度，通常同行显示
块标签：块级标签，块标签拥有本身宽度，通常独自占据一行

<!-- 行标签 -->
<span>span1</span>
<span>span2</span>

<!-- 块标签 -->
<div>div1</div>
<div>div2</div>

 

3、单一 / 组合标签

单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使用，才能产生相应的内容与效果

<!-- 组合标签必须组合出现，协同下才能显示产生相应的内容和效果 -->
<ruby>
    号<<rt>hao</rt>
</ruby>

2、链接标签（link）

<!-- tag图片 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<!-- 外联样式表 -->
<link rel="stylesheet" type="text/css" href="style.css" />

 

3、样式标签（style）

<!-- 内联样式表 -->
<style></style>

 

4、脚本标签（script）

<script type="text/javascript"></script>

 

五、常用标签

1、无语义标签

<!-- div 最常用标签 -->
<div><div>

<!-- span 最常用的纯文本标签 -->
<span></span>

 

2、常用语义标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文

<!-- 换行 -->
<br>haode<br>

<!-- 加入分割线 -->
<hr>1<hr>2<hr>

 

3、文本标签

<!-- i 很常用的标签，一般不作文斜体文本使用，作文字体图片使用 -->
<i>斜体</i>
<em>以斜体方式强调</em>   

<b>加粗</b> 
<strong>以加粗方式强调</strong>

<!-- p 段落标签具有具体区域，成段出现，段落之前崔仔段落间距 -->
<p>段落标签</p>
<p>段落标签</p>

<!-- pre 原样文本标签,保留所有字符，原样输出 -->
<pre>123   456                7</pre>

<!-- ins样式具有下划线 -->
<ins>插入的文本</ins>

<!-- del样式具有中划线 -->
<del>删除的文本</del>

<!-- sup上标，下面效果10的平方 -->
<span>10<sup>2</sup></span>

<!-- sub是下标，下面效果水分子 -->
<span>H<sub>2</sub>O</span>

<!-- small小号字体，下面效果右边小号字体 -->
<span>你好<small>好</small></span>

<!-- ruby与rt组合，拼音 -->
<ruby>
    牛皮<rt>niupi</rt>
</ruby>

<!-- 块 -->
<section></section>

 

六、标签分类

1、单标签 / 双标签

单标签：单标签在本身标签标识结束，主要应用场景为功能性标签,结束标志可省略
双标签：双标签有成对的结束标识，主要应用场景为内容性标签,结束标志可省略（不建议）

<!-- 单标签 -->
<meta charset="UTF-8" />
<meta charset="UTF-8">

<!-- 双标签 -->
<div>div1</div>

 

2、行标签 / 块标签

行标签：内联标签，内联标签本身不具备宽度，通常同行显示
块标签：块级标签，块标签拥有本身宽度，通常独自占据一行

<!-- 行标签 -->
<span>span1</span>
<span>span2</span>

<!-- 块标签 -->
<div>div1</div>
<div>div2</div>

 

3、单一 / 组合标签

单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使用，才能产生相应的内容与效果

<!-- 组合标签必须组合出现，协同下才能显示产生相应的内容和效果 -->
<ruby>
    号<<rt>hao</rt>
</ruby>