第3章 基本HTML结构
《HTML5与CSS3基础教程(第8版)》 第3章读书笔记
-
2020/03/01
-
标题h1~h6: (p35 - 36)
-
标题在SEO中会赋予很高的权重,尤其是等级最高的h1(并不是说页面中h1越多越好);
-
要正确的使用h1~h6,正确的处理层级关系,即使标题的默认大小不合适,也不要为了样式使用不正确层次的标题,通过更改标题样式使正确层级的标题样式正确;
-
使用标题时避免跳过某些标题(如用完h3直接用h5);
-
不要使用h1~h6标记副标题、标语以及无法成为独立标题的子标题,它们应该使用p标签。
-
-
header: 不能在header里面嵌套footer元素或另一个header;也不能咋子footer或address元素里面嵌套header。(p39)
-
nav: H5不允许将nav嵌套在address中。(p40)
-
main: (p41 - 42)
- main元素时H5新添加的元素,在一个页面中只允许使用一次;
- 在web应用中,应该使用main元素包围重要内容;
- 不能将main元素放置在article、aside、footer、header或nav中;
-
article: article元素表示文档、页面、应用或网站中一个独立的容器(不单只文章),原则上可以独立分配或可再用的。(p43)
-
section: (p45 - 46)
-
section元素代表文档或应用的一个一般的区块,是具有相似主题的一组内容,通常包含一个标题;
-
如果只是出于样式的原因要添加一个容器,应该使用div而不是section;
-
section和article的区别在于,section是在本质上组织性和结构性更强,而article代表的是自包含的容器。
-
-
aside: (p46 - 48)
- 当有部分内容与主体内容相关性没有那么强时,考虑使用aside元素(不单单用于侧边导航等);
- 在HTML中,应该将附注栏内容放在main内容之后(出于SEO和可访问性的目的);
- 对于与内容有关的图像,使用figure而非aside。
-
ARIA的地标角色role: (p56 - 58)
- WAI-ARIA,无障碍网页倡议-无障碍的富互联网应用:
- ARIA中的地标角色:role属性,用于标记元素,赋予元素更完整的语义,不会添加样式或其他功能;
- 一些可用的地标角色:p57 表3.13.1;
- 但是不要过多的使用地标角色,否则会造成累赘,降低地标的作用,从而影响体验;
- 可以在css选择器中使用ARIA角色属性,从而添加样式。
-
关于title: IE7之前,会将img的alt属性作为提示框文本。不过img元素同时包含title和alt属性时,则会提示title的内容。(p61)