HTML5与CSS3权威指南2019-7-15晚学习笔记

HTML新增加的结构区块

• article：代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
• section:对网站或应用程序中页面上的内容进行分块

两者的区别：article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。section元素强调分段或分块，而article强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素进行分段。

关于section元素的使用禁忌总结：

• 不要将section元素用作设置样式的页面容器，因为那是div元素的工作
• 如果article元素、aside元素或nav元素更符合状况，不要使用section元素
• 不要为没有标题的内容区块使用section元素

个人感觉，这两个元素的使用还是有点混淆的，用的话可以类似于理解描述事物的排比句，如果是描述某个事物的排比句，就是article里面包含section的结构，因为section代表的每一个部分都是这个整体里面的内容，刚好符合article强调的独立性

如果是描述多个事物的排比句，就是section里面包含article的结构，因为描述的是多个事物，这些事物之间是没有联系的。

其实无论什么结构，虽然对于浏览者没有区别，对于编写者也能够理解清晰，但是对于分析器，拥有一个好的结构可以加快识别的速度

• nav:作为页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
• aside：当前页面或文章的附属信息部分，可以包括主要内容相关的引用、侧边栏、广告、导航条，以及其他类似地方的有区于主要内容的部分
• time元素与微格式：学的时候感觉没什么用处，而且我看time里面的datetime属性，所有的主流浏览器都不支持，百度了下，然后看到了一个比较信服的解释：具体解释其实一句话概括就是写代码不仅仅是让浏览者清晰结构，也需要让解析器去理解代码结构。
• pubdate:一个可选的Boolean值属性，可以应用于article元素中的time元素上，代表了文章或整个页面的发布日期，如果文章中有多个日期，可以指定其中一个日期加上pubdate属性，代表着文章的xx的发布日期

新增的非主体结构元素

• header元素：具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，也可以存放数据表格、搜索表单或相关的LOGO图片
• footer元素：可以作为上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
• address元素：用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、文档作者或文档维护者的网站链接、电子邮箱、真实地址、电话号码等。
• main元素：表示页面的主要内容。主内容区域与网页标题或应用程序中本页面主要宫嗯那个直接相关联或进行扩展的内容。该区域应该为每一个网页中所特有的内容，不能包含整个网页的导航条、版权信息、网站LOGO、公共搜索表单等整个网站内部的共同内容。
  • 每个网页内部只能放置一个main元素。不能将main元素放置在任何article、aside、footer、header或nav元素内部。main元素不会对下文所要描述的网页大纲产生任何影响。

HTML5中网页结构

• HTML5中的大纲：使用各种元素所描述出来的整个网页的层次结构，码一个验证网站 (将需要解析的网页提交便能看到整个网页的结构，我提交了好几个，发现自己写的代码结构不是很清除啊！)

今日份个人总结：其实之前就接触过有关HTML5的概念，但是一直没有时间好好的琢磨一些元素，今天开始看这本书之后，理解了一个概念就是：现在写代码不仅仅是为了展示个用户，也是为了展示给解析器，让解析器也能够理解写的代码的层级结构，不仅仅单纯的依靠div+css去用于页面的布局而失去页面整体的一个结构。虽然之前一直都是这样去布局，但是希望自己还是注意用结构性更加清晰的元素去进行布局。