HTML5与CSS3基础教程-第3章 基本HTML结构

第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）