HTML 合集
1. 如何理解 HTML 语义化
语义化的背景
所谓语义化，就是构成 HTML 结构的标签要有意义，能够见名知意。
如果 HTML 结构都由 DIV + CSS 构成，那么 DIV 本身没有明确的语义和样式，全靠 CSS 来显示页面的样式，代码可读性较差，也不利于搜索引擎（SEO）优化。
例如：
<div class="header">顶部</div>
<div class="nav">导航</div>
<div class="main">
<div class="left">左边栏</div>
<div class="content">主体内容</div>
<div class="right">右边栏</div>
</div>
<div class="footer">底部</div>
常见标签语义
| 标签 | 语义 |
|---|---|
<p> | 段落 |
<h1> ... <h6> | 标题 |
<ul> | 无序列表 |
<ol> | 有序列表 |
<strong> | 为重要内容而加粗 |
<em> | 为强调内容而倾斜 |
<header> | 文档头部区域（HTML5） |
<nav> | 导航链接部分（HTML5） |
<section> | 文档中的节、区域、部分（HTML5） |
<aside> | 侧边栏区域（HTML5） |
<footer> | 页脚区域（HTML5） |
更多语义化标签，参考 HTML 标签列表（字母排序）
对上例使用语义化标签：
<header>顶部</header>
<nav>导航</nav>
<section>
<aside>左边栏</aside>
<section>页面主体</section>
<aside>右边栏</aside>
</section>
<footer>底部</footer>
语义化的作用
- 增强代码的可读性
- 便于搜索引擎（SEO）优化
2. HTML 标签中块级元素和内联元素（行内元素）有哪些
块级元素（display: block / table）
块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度。
例如：
用法：
- 块级元素只能出现在
<body>元素内 - 一般块级元素可以包含行内元素和其他块级元素
- 默认情况下，在块级元素前后会另起一行
常用的块级元素：
<div><h1>...<h6><table><ul><ol><p>...
更多块级元素，参考 块级元素 - HTML（超文本标记语言）
行内元素（display: inline / inline-block）
行内元素只占据它对应标签的边框所包含的空间。
例如：
用法：
- 一般情况下，行内元素只能包含数据和其他行内元素
- 默认情况下，行内元素不会以新的一行开始
常用的行内元素：
<span><img><input><button><strong><a>...
更多行内元素，参考 行内元素 - HTML（超文本标记语言）
3. HTML 中默认的 block、inline、inline-block 元素
block 元素
<div><p><ul><ol><h1>...<h6><form><hr>...
inline 元素
<a><b><span><img>...
inline-block 元素
<input><button>...
