web前端开发HTML排版标签HTML语义化标签常用的文本标签
【web前端开发】HTML排版标签、HTML语义化标签、常用的文本标签
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>结果：
