2025/3/28
向全栈工程师迈进!
一、网页基本的组成部分
网页的外观多种多样,但是除了全屏视频或游戏,或艺术作品页面,或只是结构不当的页面以外,都倾向于使用类似的标准组件。
1.1页眉
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息,通常存在于所有网页。
1.2导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏,导航栏通常应在所有网页之间保持一致,否则会让用户感到疑惑,甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分,而不是独立的组件,但这并非绝对;还有人认为,两者独立可以提供更好的无障碍访问特性,因为屏幕阅读器可以更清晰地分辨二者。
1.3 主内容
中心的大部分区域是当前网页大多数的独有内容,例如视频、文章、地图、新闻等。这些内容是网站的一部分,且会因页面而异。
1.4 页脚
横跨页面底部的狭长区域。和标题一样,页脚放置公共信息(比如版权声明或联系方式)的,一般使用较小字体,且通常为次要内容。还可以通过提供快速访问链接来进行
一个比较典型的web网页布局如下:

二、区域段的专用标签
为了实现语义化标记,在HTML中提供了明确的区域段的专用标记,如下
- <header> 页眉
- <nav> 导航栏
- <main> 主体内容 主内容中还可以有各种子内容区段,可用<article>、<section> 和 <div> 等元素表示。
- <aside> 侧边栏
- <footer> 页脚
三、编写一个较为规范的网页
视觉效果并不是一切,敬畏语义!全球约9.4亿人存在视力问题。
html
<!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>
<li><a href="#">音乐</a></li>
<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>
四、其他规范
4.1 标记联系方式
html
<address>
<p>
Chris Mills<br />
Manchester<br />
The Grim North<br />
UK
</p>
<ul>
<li>Tel: 01234 567 890</li>
<li>Email: [email protected]</li>
</ul>
</address>
4.2 上标和下标
- <sub> 下标
- <sup> 上标
html
<p>我的生日是在 2021 年 5 月 25 日(译者注:英文原文为 25<sup>th</sup>)</p>
<p>
咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9,那么 x 的值必为 3 或 -3。</p>
4.3 标记时间和日期
html
<time datetime="2016-01-20">2016 年 1 月 20 日</time>
为什么需要这样做?因为世界上有许多种书写日期的格式,上边的日期可能被写成:
- 20 January 2016
- 20th January 2016
- Jan 20 2016
- 20/06/16
- 等等
但是这些不同的格式不容易被电脑识别------假如你想自动抓取页面上所有事件的日期并将它们插入到日历中,<time>元素允许你附上清晰的、可被机器识别的时间或日期来实现这种需求。
标准如下:
html
<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间,小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00"
>7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>
慢下来,慢下来,慢下来,慢下来 ......
2025/3/28 12:02
