HTML常用的标签

 1、标题标签，一共有六个标题标签。(h1-h6) 块元素

性质：

①随着h1→h6，语义逐步变小，h1语义最重要，所以一个页面一般仅仅出现一次；

②标题标签也是辅助推广部门做推广的重要性仅次于title标签；

③标题标签是块元素，会独占一行；

<h1></h1>一级标题

<h2></h2>二级标题

<h3>H3</h3>三级标题

<h4>H4<h4>四级标题

<h5></h5>五级标题

<h6></h6>六级标题

从上到下字体会逐级减小，都是占据一行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>劝君莫惜金缕衣，劝君更惜少年时</h1>
    <h2>劝君莫惜金缕衣，劝君更惜少年时</h2>
    <h3>劝君莫惜金缕衣，劝君更惜少年时</h3>
    <h4>劝君莫惜金缕衣，劝君更惜少年时</h4>
    <h5>劝君莫惜金缕衣，劝君更惜少年时</h5>
    <h6>劝君莫惜金缕衣，劝君更惜少年时</h6>
</body>

</html>

效果如下图1网页所示

图1

2、段落标签  块元素

①<p></p>也是块元素，会独占一行，但是它不能包裹块元素

②从样式上看，段落与段落之间有间距，一般用来包裹文字或者图片

③<p>段落的文本内容</p> 标识一个段落(段落与段落之间有间距)

<br/>换行，是一个空标记(强制换行)

<hr/>空标记

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   
    <p>有花堪折直须折，<br>莫待无花空折枝</p>
    <hr />
    
</body>

</html>

效果如下图2网页所示

 图2

3、<hgroup></hgroup>标题分组 块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hgroup>
        <h1>将进酒</h1>
        <h2>李白</h2>
    </hgroup>
</body>
</html>

如下图3所示

图3

4、强调标签：加粗标记(有两个，这里行业内推荐使用<strong>文本内容</strong>) 行内元素

<b>文本内容</b> 仅仅让文本字体显示加粗效果

<strong>文本内容</strong>突出文本内容，强调内容重要性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   
    <b>云想衣裳花想容，</b> <br/>
    <strong> 春风拂槛露华浓。</strong>
    

</body>

</html>

效果如下图4网页所示

图4

5、强调标签：倾斜标记(同样的有两个，这里行业内推荐使用<em>强调的文本内容</em>)

<em>强调的文本内容，强调的是语音、语调</em>

<i>强调的文本内容</i>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <em>醉后不知天在水，</em> <br />
    <i> 满船清梦压星河。</i>

</body>

</html>

效果如下图5网页所示

 图5

(注：em:强调的是语音、语调

        strong:强调的是内容)

5、删除线标记(有两个标记，推荐使用<del></del>) 

<s>文本内容</s>

<del>文本内容</del>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p>清仓大处理不要<s style="yellow">9998</s> <br />
    <p>不要<del style="yellow">998</del></p>
    <p>只要<strong style="color:red; ">9.98</strong>，快乐带回家</p>

</body>

</html>

效果如下图6网页所示

 图6

6、扩展标记

<u>文本内容</u>(下划线)

<sup>文本内容</sup>上标

<sub>文本内容</sub>下标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p> <u> 清仓大处理不要</u><s style="yellow">9998</s> <br />
    <p>不要<sub><del style="yellow">998</del></sub></p>
    <p>只要<sup><strong style="color:red; ">9.98</strong></sup>，快乐带回家</p>

</body>

</html>

效果如下图7网页所示

图7

7、HTML常规语法

①、<常规标记></常规标记>也叫双标记

②、<空标记/>也叫单标记

<单标记 属性=“属性值”/>

有个典型的单标记<br/>强制换行、<hr/>水平线

br标签可以写成<br>、</br>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hgroup>
        <h1>将进酒</h1>
        <h4>李白</h4>
        君不见黄河之水天上来<br>
        奔流到海不复回<br>
        君不见高堂明镜悲白发<br/>
        朝如青丝暮成雪
    </hgroup>
</body>

</html>

效果如下图8网页所示

 图8

水平分割线线：<hr 属性=“属性值”> 自结束标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr color="red" width="520">
    <hr color="green" width="1314">
    <hr color="red" width="520">
    <hr color="green" width="1314">
    <hr color="red" width="520">
    <hr color="green" width="1314">
</body>

</html>

效果如下图9网页所示

图9

8、居中效果标签<center></center>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hgroup>
        <center>
            <h1>将进酒</h1>
            <h4>李白</h4>
            君不见黄河之水天上来<br>
            奔流到海不复回<br>
            君不见高堂明镜悲白发<br />
            朝如青丝暮成雪
            <hr>
        </center>
    </hgroup>
</body>

</html>

如下图10所示

图10 

9、盒子标签<div></div>,只表示一个块元素，独占一行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hgroup>
        <center>
            <h1>将进酒</h1>
            <h4>李白</h4>
            君不见黄河之水天上来<br>
            奔流到海不复回<br>
            君不见高堂明镜悲白发<br />
            朝如青丝暮成雪
            <hr>
        </center>
    </hgroup>
    <div>天生我材必有用</div>
    <div>千金散尽还复来</div>
</body>

</html>

如下图11所示：

 图11

10、span标签，没有任何语义，只表示一个行内元素，一般用来包裹文字。(行内元素)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hgroup>
        <span> 君不见黄河之水天上来</span>
        <span>奔流到海不复回</span>
        <span>君不见高堂明镜悲白发</span>
        <span>朝如青丝暮成雪</span>
</body>

</html>

如下图12所示：

图12

11、删除线标签del  

<del></del>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center> 原价：<del>998</del> <br>
        现价：9.98
    </center>
</body>

</html>

如下图13所示：

图13

(注：

1、html 不区分大小写，但是习惯用小写；

2、注释不能嵌套；

3、浏览器的纠错一定要避免；

4、html标签规范，要么成双成对，要么自然结束；

5、标签可以嵌套，但不能交叉。

) 

版权声明：本文为Abner_原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。