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>
结果: