html5⽹页的整体结构,HTML5基本⽹页结构
⼀、HTML5崭新的页⾯布局：
1.传统的HTML页⾯布局：
2.HTML5布局：
3.HTML5布局使⽤的标签：
(1)header元素：header元素表⽰页⾯总的⼀个内容区块或者整个页⾯的标题；
(2)nav元素：nav元素表⽰页⾯中的导航链接部分；
(3)article元素：article元素表⽰页⾯中的⼀块与上下⽂不相关的独⽴内容；
(4)section元素：section表⽰页⾯中的⼀块内容区块，⽐如章节的页眉、页脚等，也可以和hn(h1、h2...)等⼀起使⽤，标⽰出⽂档的结构；
(5)aside元素：aside元素表⽰article元素内容之外的，和内容相关的辅助信息；
(6)footer元素：footer元素表⽰页⾯或者页⾯中的⼀块区域的页脚；
⼆、HTML5中新增的主体结构元素：article元素、section元素、aside元素、nav元素、time元素、pubdate元素html frame
1.article元素：article元素表⽰页⾯中的⼀块与上下⽂不相关的独⽴内容；
2.section元素：section表⽰页⾯中的⼀块内容区块，⽐如章节的页眉、页脚等，也可以和hn(h1、h2...)等⼀起使⽤，标⽰出⽂档的结构；
3.aside元素：aside元素表⽰article元素内容之外的，和内容相关的辅助信息；
4.nav元素：nav元素表⽰页⾯中的导航链接部分；
5.time元素：time元素表⽰24⼩时中的某个时间或者⽇期，表⽰时间时允许带时差，其可以定义的格式如下：
6.pubdate元素：pubdate元素可以⽤在article元素中的time元素上⾯表⽰当前⽂章的发布时间；
三、HTML5中新增的⾮主体结构元素：header元素、hgroup元素、footer元素、address元素
1.header元素：header元素是⼀种具有引导和导航作⽤的结构元素，通常⽤来放置整个页⾯或者页⾯
内的⼀个内容块的标题，但也可以包含其他的内容，⽐如在header⾥⾯放置logo图⽚、搜索表单等。注意：⼀个页⾯内并没有限制header的出现次数，也就是说我们可以在同⼀个页⾯内，不同的内容区块分别加上⼀个header元素。在HTML5中，⼀个header元素⾄少可以包含⼀个heading元素(h1-h6)，也可以包括hgroup元素，还可以包含其他的元素，在W3C标准中，我们还可以把nav包含进去。
2.hgroup元素：hgroup元素是将标题和他的⼦标题进⾏分组的元素。hgroup元素⼀般会把h1-h6的元素进⾏分组，⽐如在⼀个内容区块的标题和他的⼦标题算是⼀组。通常情况下，⽂章只有⼀个主标题时，不需要hgroup元素的。
3.footer元素：footer元素可以作为他的上层⽗级内容域或是⼀个根区块的注脚。footer元素⼀般情况下包括与它相关的区块的注脚信息，⽐如作者、版权信息等。注意：footer元素和header元素⼀样，并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。
4.address元素⽤来在页⾯中呈现联系信息，包括⽂档的作者、邮箱、地址、电话信息等。address元素还⽤来展⽰和⽂章中的相关联系⼈的所有联系信息。
四、HTML5新增元素：figure元素与figcaption元素、details元素和summary元素、mark元素、progress元素、meter元素
1.figure元素与figcaption元素：
(1)figure元素是⼀种元素的组合，带有可选标题。figure元素⽤来表⽰页⾯上⼀块独⽴的内容，如果将他从⽹页上删除不会⽹页造成影响。
(2)figcaption元素表⽰figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前⾯或者后⾯。⼀个figure元素最多只允许放置⼀个figcaption元素。
2.details元素和summary元素：
(1)details元素是⼀种⽤于标识该元素内部的⼦元素可以被展开、收缩显⽰的元素。details元素具有⼀个布尔类型的open属性，当该值为true时，该元素内部的⼦元素应该被展开显⽰，当该属性值为false时，其内部的⼦元素应该被收缩起来不展⽰。该属性的默认值为false，当页⾯打开时其内部的⼦元素应该处于收缩状态。
(2)summary元素从属于details元素，⽤⿏标点击summary元素中的内容⽂字时，details元素中的其他所有从属元素将会被展开或者收缩。如果details元素内没有summary元素，浏览器会提供默认的⽂字以供点击，例如“details”。注意：⽬前只有⾕歌的chrome浏览器⽀持！
3.mark元素：mark元素表⽰页⾯中需要突出或者⾼亮显⽰的，对于当前⽤户具有参考作⽤的⼀段⽂字。
通常在引⽤原⽂时使⽤mark元素，⽬的是引起读者的注意。mark元素是对原⽂内容有补充作⽤的⼀个元素，他应该⽤在⼀段原⽂作者不认为重要的，但是现在为了与原⽂作者不相关的其他⽬的⽽需要突出显⽰或者⾼亮显⽰的⽂字上⾯。mark元素最主要的⽬的就是吸引当前⽤户的注意。mark元素除了⾼亮显⽰之外，还有⼀个作⽤就是在引⽤原⽂时，为了某种特殊的⽬的⽽把作者没有表⽰出来的内容重点表⽰出来。
4.progress元素：progress元素代表⼀个任务的完成进度，这个进度可以是不确定的，表⽰进度z正在进⾏，但不清楚这个还有多少⼯作量没有完成，也可以⽤0到某个最⼤的数字(⽐如100)之间的s数字来表⽰准确的进度情况(⽐如百分⽐)该元素具有两个表⽰当前任务完成情况的属性，value属性表⽰已经完成了多少⼯作量，max属性表⽰总共有多少⼯作量。⼯作量的单位是随意的，不指定的。在设置属性的时候，value属性和max属性只能指定为有效的浮点数，value属性必须⼤于0且⼩于或等于max属性，max属性必须⼤于0.
<元素：meter元素表⽰规定范围内的数量值，其有6个属性：
(1)value属性：在元素中特地的表⽰出来的实际值，该属性值默认为0，可以为该属性制定⼀个浮点⼩数值；
(2)min属性：指定规定范围时允许实⽤的最⼩值，默认0，在设定该属性时所设定的值不能⼩于0；
(3)max属性：指定规定的范围时允许使⽤的最⼤值，如果设定时该属性值⼩于min的值，那么把min属性的值视为最⼤值。max属性的默认值1；
(4)low属性：规定范围的下限值，必须⼩于或者等于high的值；
(5)high属性：规定范围的上限值。如果该属性值⼩于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值⼤于max 的值，那么把max属性的值视为high的值；
(6)optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以⼤于high属性值。
五、HTML5废除的元素：
1.能使⽤CSS代替的元素：basefont、big、center、font、s、strike、tt、u；
2.不在使⽤frame框架：对于frameset元素、frame元素与noframe元素，由于frame框架对页⾯可⽤性存在负⾯影响，在HTML5中已经不⽀持frame框架，只⽀持iframe框架，同时废除以上三个元素；
3.对于部分浏览器⽀持的元素：对于applet、bgsound、blink、marquee元素，特别是bgsound元素以及marquee元素只能被IE浏览器⽀持，所以在HTML5中被废除。⽽applet元素可以由embed元素或者object元素替代，bgsound元素由audio元素代替，marquee可以使⽤JavaScript来代替；
4.其他被废除的元素：
(1)废除rb元素，使⽤ruby元素代替；
(2)废除acronym元素，使⽤abbr元素代替；
(3)废除dir元素，使⽤ul元素代替；
(4)废除inindex元素，使⽤form与input元素相结合的⽅式代替；
(5)废除listing元素，使⽤pre元素代替；
(6)废除xmp元素，使⽤code元素代替；
(7)废除nextid元素，使⽤GUIDS代替；
(8)废除plaintext元素，使⽤"text/plian"MIME类型代替；
六、ol序列表新增start属性和reversed属性：
1.可以通过start属性来定义标号的开始值，注意：start属性值只有number；
2.可以通过reversed属性来进⾏反向编号；
七、重新定义含义的dl元素：
1.dl元素在HTML4中是⼀个专门⽤来定义术语的列表；
2.dl元素在HTML5中进⾏了重定义，即每⼀项包含⼀条或者多条带名字的dt元素⽤来表⽰术语，dt元素后⾯紧跟⼀个或者多个dd元素⽤来表⽰定义。重定义后的dl列表包含多个带名字的列表项。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。