当前位置：首页 > news >正文

【web前端开发】HTML排版标签、HTML语义化标签、常用的文本标签

news 来源：原创 2025/5/17 22:58:43

1、HTML排版标签

标签名标签含义单/双标签

h1~h6 标题双

p 段落双

div 没有任何含义，用于整体布局双

效果：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML排版标签</title>
</head>

<body>
    <h1>与时俱进</h1>
    <h2>当务之急</h2>
    <h3>久久为功</h3>
    <h4>辩证思维</h4>
    <h5>一张蓝图绘到底</h5>
    <h6>坚持长期奋斗</h6>
    <p>长风破浪会有时，直挂云帆济沧海</p>
    <div>长风破浪会有时，直挂云帆济沧海</div>
</body>

</html>

结果：

总结：

（1）h1最好写一个，h2~h6能适当多写

（2）h1~h6不能互相嵌套；例如：h1标签最好不要写h2标签。

（3）p标签很特殊，，它里面不能有h1~h6，p,div标签。

2、HTML语义化标签

标签的默认效果可以通过CSS去随便的改。

用特定的标签表达特定的内容。

语义即含义。

例如：

h1~h6 语义：标题

p 语义：段落

div 没有语义

简单的说，语义化就是该标签的含义是什么，就如上面所说的那样，h1~h6就是标题。

总结：

（1）概念：用特定的标签，去表达特定的含义。

（2）原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要。

（4）语义化优势：

1))代码结构清晰，可读性强。

2))有利于SEO（搜索引擎优化）

3))方便设备解析（如：屏幕阅读器，盲人阅读器等）

3、常用的文本标签

（1）文本标签用于包裹：词汇、短语等

（2）通常写在排版标签（p、h1~h6、div）里面

（3）文本标签通常都是行内元素。

常用的标签：

标签名效果单/双标签

em 让包裹的词汇等变为斜体双

strong 让包裹的词汇等加粗双

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML常用的文本标签</title>
</head>

<body>
    <em>一带一路</em>
    <strong>时代接班人</strong>
</body>

</html>

结果：