html常用标签
一 概念
# html常用标签
#### 1、无语义标签
```html
<div></div>
<span></span>
```
#### 2、常用语义标签
```html
<hn></hn> 标题
<p></p> 段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线
```
#### 3、文本标签
```html
<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语气更强)
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
```
#### 4、其他标签
```html
<section></section> 块
<small></small> 小号字体
```
###### v_test：熟悉常用标签
二 代码示范
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
<!-- 1.无语义标签 -->
<!-- div:最常用的标签,没有之一 -->
<!-- span:最常用的纯文本标签 -->
<div></div>
<span></span>
<!-- 2.常用语义标签 -->
<!-- 标题:h1~h6 -->
<!-- h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文
<!-- br:换行 | hr分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>
<!-- 3.文本标签 -->
<!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
<i>斜体</i>
<em>以斜体方式强调</em>
<b>加粗</b>
<strong>以加粗方式强调</strong>
<!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>123 456 789</p>
<!-- 原样文本标签:会保留所有字符,原样显示 -->
<pre>123 456 789</pre>
<!-- 样式具有下划线 -->
<ins>插入的文本</ins>
<!-- 样式具有中划线 -->
<del>删除的文本</del>
<!-- eg -->
¥988 <del>98888</del>
<!-- 10的平方 -->
<span>10<sup>2</sup></span>
<!-- 水分子 -->
<span>H<sub>2</sub>O</span>
<!-- 右标:小号字体 -->
<span>你很帅<small>谁信</small></span>
<!-- pinyin -->
<ruby>
牛掰<rt>niubai</rt>
</ruby>
</body>
</html>
