文档布局
一个网页中，常见的布局为：
- 页眉
- 导航栏
- 主内容
- 侧边栏
- 页脚
在HTML中，分别对应五个元素：
<header>:页眉<nav>：导航栏<main>：主内容，通常可以包括<div>,<section>,<article>等等<aside>:侧边栏，经常嵌套在<main>中<footer>:页脚
标签的选择，最好按照语义来，比如章节使用
<section>，文章使用<article>，没有语义的时候可以使用<div>（块级无语义元素）及<span>（内联无语义元素）
依旧是MDN的一段栗子（没有设置样式）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次元俱乐部</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header> <!-- 本站所有网页的统一主标题 -->
<h1>聆听电子天籁之音</h1>
</header>
<nav> <!-- 本站统一的导航栏 -->
<ul>
<li><a href="#">主页</a></li>
<!-- 共n个导航栏项目，省略…… -->
</ul>
<form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
<input type="search" name="q" placeholder="要搜索的内容">
<input type="submit" value="搜索">
</form>
</nav>
<main> <!-- 网页主体内容 -->
<article>
<!-- 此处包含一个 article（一篇文章），内容略…… -->
</article>
<aside> <!-- 侧边栏在主内容右侧 -->
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
<!-- 侧边栏有n个超链接，略略略…… -->
</ul>
</aside>
</main>
<footer> <!-- 本站所有网页的统一页脚 -->
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>
br换行，hr水平分割线
<p>白日依山尽<br>
黄河入海流<br>
欲穷千里目<br>
更上一层楼</p>
白日依山尽
黄河入海流
欲穷千里目
更上一层楼
<p>真是闲处光阴易过，倏忽又是元宵佳节。士隐令家人霍启抱了英莲，去看社火花灯。半夜中霍启因要小解，便将英莲放在一家门槛上坐着。待他小解完了来抱时，那有英莲的踪影？急的霍启直寻了半夜。至天明不见，那霍启也不敢回来见主人，便逃往他乡去了。那士隐夫妇见女儿一夜不归，便知有些不好；再使几人去找寻，回来皆云影响全无。夫妻二人半世只生此女，一旦失去，何等烦恼，因此昼夜啼哭，几乎不顾性命。</p>
<hr>
<p>丰盈的花朵竟簌簌地凋落，一片片轻盈地落在水面上的花瓣，舞出大大小小的水晕，一圈一圈地散开来。花瓣小舟随着风的指示，摇曳着，伴着那份花香渐渐消逝远去……只剩下两颗小小的花芯孤零零地伫立与水面上。</p>
真是闲处光阴易过，倏忽又是元宵佳节。士隐令家人霍启抱了英莲，去看社火花灯。半夜中霍启因要小解，便将英莲放在一家门槛上坐着。待他小解完了来抱时，那有英莲的踪影？急的霍启直寻了半夜。至天明不见，那霍启也不敢回来见主人，便逃往他乡去了。那士隐夫妇见女儿一夜不归，便知有些不好；再使几人去找寻，回来皆云影响全无。夫妻二人半世只生此女，一旦失去，何等烦恼，因此昼夜啼哭，几乎不顾性命。
丰盈的花朵竟簌簌地凋落，一片片轻盈地落在水面上的花瓣，舞出大大小小的水晕，一圈一圈地散开来。花瓣小舟随着风的指示，摇曳着，伴着那份花香渐渐消逝远去……只剩下两颗小小的花芯孤零零地伫立与水面上。
2139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
