html5代码了解,了解HTML5大纲算法(示例代码)

实战前的准备工作：了解HTML5大纲算法

在html5中有一个很重要的概念，叫做html5大纲算法(HTML5 Outliner)，它的用途为用户提供一份页面的信息结构目录。合理的使用HTML5元素标签，可以生成一个非常清晰的文档大纲。

HTML5大纲算法

我们可以通过各种工具去查看当前页面，这里推荐使用一个测试工具：HTML5 Outliner，网址如下：https://gsnedders.html5.org/outliner/

1. 了解一个 section 和 div 的区别

①div元素在html5之前是最常用的最流行的标签，但他本身是没有任何语义的，它只不过是用来布局页面和css样式以及js样式。

②在html5中 section 标签并不是用来取代 div 的。他是具有语义的文档标签，在大纲规范中规定 session 至少要包含一个标题。也就是 section 标签内至少包含一个h1~h6。

③如果是页面布局，且不是 header、footer之类的专属区域都应该使用div。

2. body\nav\section 都是需要有标题才规范，header和div则是不需要标题的。

3. section 和 nav 元素大纲要求有标题h1~h6，暗示 section 必须有才规范，而 nav 如果没有标题，也是合理的。给他添加了标题会让大纲更好看，所以我们可以添加完了再隐藏，就不会破坏布局了。(通过display:none;将其隐藏)

html5代码了解,了解HTML5大纲算法(示例代码)相关推荐

c 语言奇数幻方代码,【C】——幻方算法(示例代码)
一.幻方按照阶数可分成了三类,即奇数阶幻方.双偶阶幻方.单偶阶幻方. 二.奇数阶幻方(劳伯法) 奇数阶幻方最经典的填法是罗伯法.填写的方法是: 把1(或最小的数)放在第一行正中:按以下规律排列剩下的( ...
cart算法示例代码
以下是基于sklearn库的CART算法示例代码.通过构建决策树(采用Gini作为指标)对随机生成(通过np.random.randint方法)的数字进行分类,自变量X为100×4的矩阵,随机生成的数 ...
java学习类变量类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(static) 类变量是该类的所有对象共 ...
fifo算法c语言程序代码,c语言实现fifo算法及代码
C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. 尽管C语言提供了许多低级处理的功 ...
ajax异步传输代码,Ajax同步与异步传输的示例代码
这篇文章主要是对Ajax同步与异步传输的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助代码如下: //同步传输模式 function RequestByGet(nProductte ...
微软一站式示例代码库 2012 年2月示例代码更新。8个全新示例为您的开发保驾护航...
微软一站式示例代码库2012年2月新代码示例发布.我们发布了8个全新的示例代码,内容包含Windows Azure, Directory Services, Hyper-V, TFS, WDK和Win ...
图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
下雪html特效代码,JavaScript 实现下雪特效的示例代码
直接上代码下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...

html5代码了解,了解HTML5大纲算法(示例代码)

html5代码了解,了解HTML5大纲算法(示例代码)相关推荐

最新文章

热门文章