文章目录
第3章 基本HTML结构
3.1 开始编写网页
1.编写HTML5页面开头的步骤
1.输入<!DOCTYPE html>
,声明页面为HTML5文档
2.输入<html lang=“language-code”>
language-code
:页面内容默认语言的代码<html lang="es">
:表示西班牙语<html lang="fr">
:表示法语<html lang="en-US">
:表示美国英语<html lang="en-GB">
:表示英国英语
3.输入<head>
,开始网页文档的头部
4.输入<meta charset=“UTF-8” />
5.输入<title></title>
,包含页面的标题
6.输入</head>
,结束页面文档的头部
7.输入<body></body>
8.输入</html>
,结束页面
在
head
部分,通常要页面标题,方便SEO,加载样式表、JavaScript文件 (不过,出于性能考虑,多数时候在页面底部</body>
标签结束前加载JavaScript会是更好的选择)
搜索引擎可能会根据
lang
属性指定的语言区分搜索结果,从而仅显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。
3.2 创建页面标题
页面标题通常是Google等搜索引擎的搜索结果中链接的文字,它也是判断搜索结果中页面相关度的重要因素。
总之,要让每个页面的title是唯一的,从而提升搜索引擎结果排名,并让访问者获得更好的体验。
提示 title元素是必需的
提示 title中不能包含任何格式、HTML、图像或指向其他页面的链接。
作为一种最佳实践,选择能简要概括文档内容的文字作为title文字。这些文字既要对屏幕阅读器用户友好,又要有利于搜索引擎排名。
其次,将网站名称放入title(这不是必需的)。常见的做法是将网站名称放在title的开头,不过将页面特有的文字放在开头更好。
3.3 创建分级标题
- HTML提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5或h6元素对各级标题进行标记
1.分级标题的重要性
对搜索引擎而言,如果标题与搜索词匹配,这些标题就会被赋予很高的权重,尤其是等级最高的h1(这并不是说页面中的h1越多越好,搜索引擎还是足够聪明的)。
2.使用标题对网页进行组织的步骤
提示 创建分级标题时,要避免跳过某些级别,如从h3直接跳到h5。不过,允许从低级别跳到高级别的标题。
提示 不要使用h1~h6标记副标题、标语以及无法成为独立标题的子标题。例如,假设有一篇新闻报道,它的主标题后面紧跟着一个副标题,这时,这个副标题就应该使用段落
3.5 创建页面
- 如果页面中有一块包含一组介绍性或导航性内容的区域,应该用
header
元素对其进行标记。
提示 只在必要时使用header。大多数情况下,如果使用h1~h6能满足需求,就没有必要用header将它包起来。
header与h1~h6元素中的标题(参见3.3节)是不能互换的。它们都有各自的语义目的。
不能在header里嵌套footer元素或另一个header,也不能在footer或address元素里嵌套header。
3.6 标记导航
nav
可以明确表示主导航连接的区域(集合链接群)。
<nav>
<ul>
<li><a href="#guadi">Barcelona's Architect</a></li>
<li lang="es"><a href="$sagrada- familia">La Sagrada Família</a></li>
<li><a href="#park-guell">Park Guell</a></li>
</ul>
</nav>
使用
ul
或ol
元素对链接进行结构化。在HTML5中,nav
并没有取代这种最佳实践
HTML5不允许将nav嵌套在
address
元素中。
HTML5规范不推荐对辅助性的页脚链接(如“使用条款”、“隐私政策”等)使用
nav
,这不难理解。不过,有时页脚会再次显示顶级全局导航,或者包含“商店位置”、“招聘信息”等重要链接。在大多数情况下,我们推荐将页脚中的此类链接放入nav
中。
如何判断是否对一组链接使用nav呢?归根结底,这取决于内容的组织情况。至少,应该将网站全局导航(让用户可以跳至网站各个主要部分的导航)标记为
nav
。这种nav
通常(但并不总是)出现在页面级的header
元素里面
3.7 标记页面的主要区域
- 一个页面只有一个部分代表其主要内容。可以将这样的内容包在
main
元素中,该元素在一个页面仅使用一次
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect </h1>
<p>Antoni Gaudí's incredible buildings bring millions ...</p>
... [页面主要区域的其他内容] ...
</article>
</main>
3.8 创建文章
- HTML5对
article
的定义如下:
article元素表示文档、页面、应用或网站中一个独立的容器,原则上是可独立分配或可再用的,就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具,或者任何其他独立的内容项。
提示 可以将
article
嵌套在另一个article
中,只要里面的article
与外面的article
是部分与整体的关系。
提示 一个页面可以有多个
article
元素(也可以没有)。例如,博客的主页通常包括几篇最新的文章,其中每一篇都是其自身的article。
提示 一个
article
可以包含一个或多个section
元素。在article
里包含独立的h1~h6
也是很好的做法
3.9 定义区块
section
定义:section元素代表文档或应用的一个一般的区块。在这里,section是具有相似主题的一组内容,通常包含一个标题。
section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
- 区别
section
和div
:从语义上讲,section标记的是页面中的特定区域,而div则不传达任何语义。
3.10 指定附注栏
- 指定附注栏的步骤
- 输入
<aside>
。 - 输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
- 输入
</aside>
。
- 输入
提示 在HTML中,应该将附注栏内容放在main的内容之后。出于SEO和可访问性的目的,最好将重要的内容放在前面。可以通过CSS改变它们在浏览器中的显示顺序。
提示 对于与内容有关的图像(如图表、图形或带有说明文字的插图),使用figure(参见第4章)而非aside。
提示 HTML5不允许将aside嵌套在address元素内。
3.11 创建页脚
- 当你想到页脚的时候,你大概想的是页面底部的页脚(通常包括版权声明,可能还包括指向隐私政策页面的链接以及其他类似的内容)。HTML5的
footer
元素可以用在这样的地方,但它同header
一样,还可以用在其他的地方。
footer
元素代表嵌套它的最近的article
、aside
、blockquote
、body
、details
、fieldset
、figure
、nav
、section
或td
元素的页脚。只有当它最近的祖先是body
时,它才是整个页面的页脚
提示 页脚并不一定要位于所在元素的末尾,不过通常是这样的。
提示 不能在footer里嵌套header或另一个footer。同时,也不能将footer嵌套在header或address元素里。
注意只有页面级页脚有role=“contentinfo”
3.12 创建通用容器
div
(来自division):一个完全没有任何语义、含义的通用容器。
div
并不是唯一没有语义价值的元素。span
是与div
对应的一个元素:div
是块级内容的无语义容器,而span
(写作<span>
这里是内容</span>
)则是短语内容的无语义容器,例如它可以放在段落元素p
之内
div
应该作为最后一个备用容器,因为它没有任何语义价值。大多数时候,使用header
、footer
、main
(仅使用一次)、article
、section
、aside
甚至nav
代替div
会更合适。但是,如果语义上不合适,也不必为了刻意避免使用div而使用上述元素。有用得上div
的地方,只是需要限制其使用。
3.14 为元素指定类别或ID名称
- 可以给HTML元素分配唯一的标识符(ID),或指定其属于某个(或某几个)类别,也可以同时指定标识符和类别
3.15 为元素添加title
属性
- 添加
title
属性的好处- 提升无障碍阅读
- 鼠标移到某元素时会显示其title属性的值
<body>
<p title="Nice to meet you!">Hello World!</p>
</body>
3.16 添加注释
- 在HTML页面中添加注释的步骤
- 在HTML文档中希望插入注释的位置,输入
<!--
- 输入注释。
- 输入
-->
结束注释文本。
- 在HTML文档中希望插入注释的位置,输入
提示 注释不能嵌套在其他注释里。