html5语义化1. 语义是什么？语义是某些事物的含义，特别是语言的组成部分。语义化的html是关于描述内容类型的html元素。它关注的是某一个HTML元素里包含内容后的含义，以及和其他元素的比较。它也是关于为特定内容使用合适的元素，也就是HTML标准的准则。WHATWG HTML标准： HTML的元素，属性和属性值都定义（在标准里）了某种含义（语义）。例如，ol元素代表有序列表，lang属性代表内容的语言。作者不能以它们本身合理的语义目的之外的方式来使用元素，属性和属性值。 开发的过程中，可能我们可以不会根据html语义来构建文档，但是与html标准来比较会有细微的差别，目的是为了是页面具有逻辑性的结构（页面裸奔的时候），容易维护，并且对数据挖掘服务（比如搜索引擎）更加友好。 2. 用大纲思考一个设计优良的网罩要是信息可以被高效的传达和获取。设计的目标是建立一套信息层级；页面的一些部分应该首先吸引用户的注意力，然后再去设计后面的内容等等。如果实现没有将所有内容组织为一套层级，那么在设计过程中，可能会不断发现这条或那条信息的重要性，并且不断的更改设计。所以，当我们设计页面的时候，暂时离开设计，拿出纸笔，写下网站的主要内容，为每一条思考一个标签，以及它和页面其他那内容的关系。现在我们先忘掉详细的内容，而是关注于主要内容块的相互联系。 例如，可能我们会想到一个如下的图：  把这个列表想象成网站内容的目录或者地点地图，内容的先后顺序，以及还有哪些内容从属于更大的区块。这里不是页面设计，只是内容的先后顺序。 那么上面的例子中，网站的标题（Site title）是高于所有其他内容的信息。在往下面是其他页面的主导航（main navigation），然后是主页的主要内容（featured content），其中包含推荐文章（an article) 和摘要（Article Synopsis）。最后主页的其他内容放在Other News区块。 这样的列表有助于组织以及可视化网站的信息层级，但是好像没有什么方法可寻，下一节学习HTML5大纲算法。 3. HTML5 大纲算法作为HTML5标准的一部分，HTML5大纲算法提供了将内容拆解成嵌套区块的规则，每一个区块有一个标题。通过标准的算法来就理解和解析网页结构，以为这每一个结构完备的网页自动带有一个目录，这也是当我们的页面css裸奔的时候可以看到明确的页面层级结构。大纲算法： 1. 将body元素作为根区块，所有其他页面区块都组织在下面。 2. 把第一个标题内容元素作为body的标题。 3. 对剩下的区块内容，定义并添加新的区块和子块区到大纲。 4. 将每一个子区块的第一个标题内容元素作为那个区块的标题。 上面提到的两个内容模型：标题内容（h标题元素以及hgroup元素）和区块内容（article，aside, nav, section）。注意这里没有div元素。上面的规则在于形成之前我们说的内容结构目录。4. 用区块内容创建大纲4.1 用区块内容创建大纲在四个区块内元素中，section元素是最通用的。他提供了一个和主题相关的内容分组。在代码增加区块元素后，我们可以明显的展示区块出现的地方。对于之前上面的例子： 说明： 第一个h1不需要区块，因为body就是他的区块。但是body不属于区块元素，而是属于区块根元素（sectioning roots）。在w3c标准中有这样一句话：区块根元素可以有自己的轮廓，但这些元素中的部分和标题并不会影响祖先的轮廓。本节中提到的是区块内容创建大纲，那么区块根元素有大纲吗？ 区块根元素我认为也是具有区块元素的行为的，只是特殊点，就像上面提到的区块根元素可以有自己的轮廓，但这些元素中的部分和标题并不会影响祖先的轮廓。它们的内部可能含有大纲，但是如果它们被包含在另一个大纲里，那么它们的大纲就会隐藏。就像我们说到的body因为它并没有包含在另一个大纲里，所以body就是我们的第一个大纲规范，如果其他的区块根元素（details, fieldset，figure, 和td元素）包含在body中，那么就会形成自己的大纲，如果包含在了section中，那么内部的大纲就会隐藏。 这里其实有一个问题，因为所有的元素包含在body中，那岂不是说其他的区块根元素都是将自己的大纲隐藏了？ 我其实有一个疑惑，是不是如果其他的区块根元素只是包含在body中，就还有自己的大纲，如果包含在section（显示定义的大纲）中就不存在，我猜想应该是这样，因为没有找到具体的明确规定，所以这里说明一下。 因为这里我们使用的区块内容创建大纲，所以标题元素的排名就不需要了。为什么呢？因为其实还有一种创建大纲的说法叫做用标题内容隐形的创建大纲，那里用到的就是依靠标题的排名来创建大纲的（针对老式编码风格的兼容方案）。但是我们现在是区块内容创建大纲，所以看中的就不是标题元素的排名了。 那么对于标题的使用我们应该怎么处理呢？ 标准： 强烈建议开发者只用h1元素，或者为区块的器那套就别使用合适的排名标题元素。 为什么这样说呢？从两个方面说：第一呢，如果页面内部的标题元素具有一定自己的排名，那么如果页面结果改变了，我们还需要更新标题的排名情况。如果全是h1元素的话，那就不需要了。第二呢，目前搜索引擎优化只考虑h1元素作为标题。如果我们的页面中有多个h1标签，岂不是提高了SEO。但是这个问题很复杂，因为对于h1标签的使用，在某一个页面中只应该使用一个h1。如果使用多个h1标签可能会被搜索引擎认为是作弊行为，所以对于h1的处理。需要对于我们的目标引擎是否支持多个h1标签相当重要。目前，可能我们还是要给标题标签进行排名。 假如说我们的目标搜索引擎允许多个h1标签的出现，那么针对于标题嵌套的默认大小相同也是问题。我们知道浏览器对于标签的页面展示有着一定的默认行为，本人测试过，在最新的chorme/firefox/IE中，如果存在h1标签的区块层级嵌套，那么嵌套在其他区块总的标题元素的尺寸会减少。由于没哟设备，对于safari和Opera没有测试。假如我们需要支持的浏览器默认的尺寸相同，那么我们应该使用css去操作这些尺寸上的问题。 4.2 提高大纲的语义上面的HTML代码是全部使用section创建大纲的。其实区块元素还有其他的元素，现在我们来学习一下。nav元素 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。注意这里指的是主要导航部分，不是主要的不要使用。那么上面的Main Navigation就可以封装进来。 section元素 section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。 section通常还带标题，虽然html5中section会自动给标题h1-h6降级（就是上面我们说的嵌套标题的尺寸问题），但是最好手动给他们降级。 article元素 article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section） aside元素 aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section） 在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。 通过上面的介绍我们可以看到article独立的模块，section是一个于上下文有关系的元素，所以上面的Featured Content是一个section，An article是一个article， Article Synopsis是一个aside。现在我们的html改写成下面的样子。 在上面的例子中aside是嵌套在article中的。如果aside是直接嵌套在body元素里，那么它将和整个页面关联，而不仅仅是一部分，对于页面内容很少的情况下，这种方式可行，但是对于一个信息量很大的页面上，将aside和 它们相关的内容分组是必要的。 最后附上一张图：
5. 头和尾每一个区块可以增加可选的头和尾。header元素 header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。 整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素 现在我们应该给已有的代码加上header吗？当然可以，但是不需要，因为header元素是用来将引导内容分组在一起。现在我们的每一个区块都有 一个标题元素。但是如果我们在现有的标题下面加上子标题Site Slogan，那么我们就需要使用header了。 hgroup元素 hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合 hgroup元素可以将一组标题元素放在一起，HTML5大纲算法只会处理其中排名更高的。那么我们这里我们又要更改页面的内容了。 现在似乎页面已经ok了，但是还有一点还有页面的尾部，还有两个元素footer和address footer元素 footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。 address元素 address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。 但是对于这两个元素还有一个注意点：再除了article和body的元素外使用address元素，是不合适的。所以，一个section元素可能有一个footer元素，但是不能含有address元素。而且address元素不能是不能直接联系到作者的信息（虽然这类信息也会出现在尾部），如果是在article的离，则是这篇文章的作者，如果是body，则是整个页面的作者。现在我们在加上尾部信息。 6. 查看HTML5 大纲http://gsnedders./outliner/ 可以使用这个网址输入url，上床文件，或者直接输入html代码得到HTML5 大纲。7. div 和 span过时了吗说到现在，一直没有提到过div，难道div过时了吗？好吧，并没有，div本身是没哟语义的，在和语义无关，整个大纲不涉及到的地方。对于css匹配或者javacript获取内容的时候div还是很有效的。span和div的地位等同，只是一个用于文档流，一个用于语句。如果有些元素不能适配大纲中的任何元素，那么我们可以使用下面两个规则： *标签是不是只是用了css匹配和javascript获取内容。 *内容是不是仅仅有一个class或者id来描述。 当然二者的基本还是不涉及到语义，就好像整个大框架是HTML5大纲操控，但是每一个区块内部的东西还是用的到div和span的。 |
|
|
