页面结构
语义标签
HTML 标签都有具体语义，非然技术上可以使用 div 标签表示大部分内容，但选择清晰的语义标签更容易让人看明白。比如 h1表示标题、p标签表示内容、强调内容使用em标签。
html
<article>
<h1>THELIUWEI</h1>
<p>THELIUWEI</p>
</article>嵌套关系
元素可以互相嵌套包裹，即元素存在父子级关系。
html
<article>
<h1>THELIUWEI</h1>
<div>
<p>THELIUWEI</p>
<span>THELIUWEI</span>
</div>
</article>基本结构
下买呢是HTML文档的基本组成部分
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>| 标签 | 说明 |
|---|---|
| DOCTYPE | 声明为 HTML 文档 |
| html | lang:网页的语言，如 en/zh 等，非必选项目 |
| head | 文档说明部分，对搜索引擎提供信息或加载 CSS、JS 等 |
| title | 网页标题 |
| keyword | 向搜索引擎说明你的网页的关键词 |
| description | 向搜索引擎描述网页内容的摘要信息 |
| body | 页面主体内容 |
内容标题
标题使用 h1 ~ h6 来定义，用于突出显示文档内容。
- 从 h1 到 h6 对搜索引擎来说权重会越来越小
- 页面中最好只有一个 h1 标签
- 标题最好不要嵌套如 h1 内部包含 h2
下面是使用默认样式的标题效果，掌握 CSS 后我们就可以随意美化了。
html
<h1>THELIUWEI</h1>
<h2>THELIUWEI.com</h2>
<h3>THELIUWEI.com</h3>
<h4>THELIUWEI.com</h4>
<h5>dTHELIUWEI.com</h5>
<h6>www.THELIUWEI.com</h6>页眉和页脚
header
header标签用于定义文档的页眉
html
<header></header>footer
Footer标签定义文档或节点的页脚，页脚通常包含文档的作者、版权信息、使用条款、备案号等信息
html
<footer></footer>导航元素
nav
在HTML中使用nav设置导航链接
html
<nav>
<ul>
<li>
<a href="">系统学习</a>
</li>
</ul>
</nav>主要区域
main
HTML5中使用main 标签标识页面主要区域，一个页面main元素最好只出现一次
html
<main>
主要区域内容
</main>内容区域
article
使用article标签规定独立的自包含内容区域，不要被单词的表面意义所局限。artice标签标识一个独立的内容容器。
html
<main>
<article>
<h2>THELIUWEI</h2>
<ul>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
</article>
</main>区块定义
section
使用section定义一个区块，一般是一组相似内容的排列组合。
html
<main>
<article>
<section>
<h2>锁机制</h2>
</section>
<section>
<h2>事物处理</h2>
</section>
</article>
</main>附加区域
aside
使用aside用于设置与主要区域无关的内容，比如侧面栏的广告。
html
<body>
<main>
<article>
...
</article>
</main>
<aside>
<h2>THELIUWEI</h2>
<p>THELIUWEI</p>
</aside>
</main>
</body>通用容器
div
div通用容器标签是较早出现的，也是前端程序员使用最多的通用容器。我们应该趋向于有语义化标签。
有些区域不好使用语义容器不好表达，可以采用div标签。
html
<div>
<p>
THELIUWEI
</p>
</div>