html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签，一个典型的html5页面结构可以如下安排
一、使用案例
1. 头部——header和nav标签
header头部，body下的直接子元素header一般用于放页面的介绍性的信息如网站名称、logo或者导航栏nav。
html5语义化标签
导航
- 章节标签
- 标题标签
使用html5的header和nav标签
html5语义化标签
导航
- 章节标签
- 标题标签
传统的头部
注意到上面用了两个h1标签，在传统的html4里面，h1标题一般只能用一个，用于表示页面的大标题。但是在html5标签里面，所有的标题标签h1~h6都可用于不同的章节里。如上，第二个h1标签隶属于nav标签，与第一个h1是不同级别的。在Chrome里面第二个h1的样式字体小于第一个：
2. 主体部分——main和section
章节标签
为页面区分不同的章节
标题标签
为不同的章节定义标题
main标签表示页面的主体部份，section标签给页面区分不同的章节。section是一个章节标签，构建页面的大纲(outline)。除此外还有nav、artical和aside三个标签能够勾勒页面的轮廓。章节标签通常会带上h1~h6的标题标签。不同的章节标题是独立的，嵌套的章节标题也跟着嵌套。另外多个标题可以用hgroup包括起来，在页面提纲里成为独立的一条内容。
注意上面的main标签是后来出的标签，所有IE浏览器都不支持该标签，会把其子元素标签变成相邻的标签，从而页面错乱。解决办法是，IE8及以下用document.createElement("main")的办法让其识别，而IE9及以上设置css: main{display: block}即可。
3. 尾部——footer
copyright © hello, world
footer和header一样，用在不同的章节里，可以显示该章节(如body整个页面)相关的外链、版权等信息。
二、页面的轮廓(outline)
上面已提多次提到outline和section章节，有一个在线工具HTML 5 Outliner可以抽象出页面的提纲，上面的demo用这个工具提炼的大纲如下：
页面的outline w3c有规定一个算法提取。
之所以要考虑大纲的问题主要有两个好处：第一个是搜索引擎优化(SEO)，第二个是屏幕阅读器可以快速地提取内容概要。这也是html5语义化标签的生命力所在，也是本文讨论的意义所在，同时也是和html4一个很大区别的地方。
页面的大纲是通过上面提到的四个章节元素section、article、aside、nav和章节的根元素body区分不同的章节，而章节的大纲内容或者说标题通过h1等标题标签定义。相反地，header/footer/div等元素并不会有outline的作用，在里面定义的h1等标题标签属于该header/footer所在标签的章节。同时注意有几个标签定义的标题不会给该标签所在的章节贡献轮廓作用：blockquote body details dialog fieldset figure td。如下示例：
一级大纲
blockquote内的标题
div内的标题
blockquote里面的h2标签并不会给页面的大纲增加内容
三、如何使用
1. div和section、section和article的区别
div是一个普通的容器，而section不能当作一个普通的容器使用，使用section要让其起outline的作用，而article比section的章节概念更强。article适用于独立性强的内容，如本身就是一篇文章、博客，或者用户的评论等，article比section更加强调需要包含一个标题标签h1~h6。如果使用article的语义性更好的时候，就不用section。或者，内容可再继续细分章节的也应使用article。
2. 章节的内容是独立的，并且可以嵌套
独立是指每个章节都可以有自己的标题标签、header、footer和nav，并且章节可以相互嵌套，例如：
html标签
html5标签
标题标签
章节标签
html4标签
3. 其它一些常用标签
(1)figure和figcaption
figure用作照片及其注释的容器
(2)aside
aside的内容与页面的主体内容相切，可用作侧边栏
(3)更多标签
参考：
HTML5语义化标签重构页面
在HTML5未出现之前我们都用div+css来构建页面,比如
Html5语义化标签详解及其兼容性处理
页眉 主要用于页面的头部的信息介绍,也可用于板块头部 页面上的一个标题组合 一个 ...
html5语义化标签——回顾
html5 头部结构 页眉 ...
第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能.
转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
HTML5语义化标签总结
1.语义化标签总结 基础布局标签 < ...
HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位)
html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
随机推荐
深入super，看Python如何解决钻石继承难题 【转】
原文地址 http://www.cnblogs.com/testview/p/4651198.html 1. Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通 ...
使用SQL脚本删除冗余的视图和表
使用SQL脚本删除冗余的视图和表 SQL脚本删除视图信息 USE DatabaseGOIF OBJECT_ID('ViewName')IS NOT NULLBEGINDROP VIEW ViewNam ...
YPreLoad
Javascript库 发布我的控件系列:图片预加载控件YPreLoad v1.0 摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad.它可以帮助您预加载图片,并且能显示加载的 ...
OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)和varying,uniform,attribute修饰范围
OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章) 所有变量和函数在使用前必须声明.变量和函数名是标识符. 没有默认类型,所有变量和函数声明必须包含一个声明类型以及可选的修饰符. ...
Maven项目构建管理
一.Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...
如何在Centos 7上用Logrotate管理日志文件
何为Logrotate? Logrotate是一个实用的日志管理工具,旨在简化对系统上生成大量的日志文件进行管理. Logrotate允许自动旋转压缩,删除和邮寄日志文件,从而节省宝贵的磁盘空间. L ...
uiautomator2 使用Python测试 Android应用
GitHub地址:https://github.com/openatx/uiautomator2 介绍 uiautomator2 是一个可以使用Python对Android设备进行UI自动化的库.其底 ...
RocketMQ实现事务消息
在RocketMQ4.3.0版本后,开放了事务消息这一特性,对于分布式事务而言,最常说的还是二阶段提交协议,那么RocketMQ的事务消息又是怎么一回事呢,这里主要带着以下几个问题来探究一下Rocke ...
Java第11章笔记
什么是类,什么是对象 举例说明什么是类,什么是对象? 一句话:万物皆对象 类的概念:类是具有相同属性和服务的一组对象的集合. 1.为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和服务两个部分 ...
asp.net 重写URL方法和封装好的DLL
.net 重写URL方法和封装好的DLL URL重写方法DLL(2.0)
html5语义化规范,html5语义化标签使用规范相关推荐
- html5语义化 兼容,HTML5语义化标签，兼容性问题
HTML5不仅仅作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准,成为第一个将web做为应用开发平台的HTML语言. HTML5定义了一系列的新元素,如新语义化标签,智 ...
- HTML语义化：HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- html什么是语义化,什么是html语义化，HTML5新增标签有哪些
1.什么是语义化标签?(就是用合理.正确的使用标签来展示内容) 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标 ...
- html5语义化边框,Html5、Css3、ES6的新特性
html5的新特性 1.语义化标签有利于seo,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构 方 ...
- （九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师 文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...
- html标签语义化的好处,什么是HTML语义化？html语义化的好处（总结）
本章给大家介绍什么是HTML语义化?html语义化的好处(总结),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(H1~ ...
- HTML5文档结构主体结构 语义结构,html5组织文档结构.pdf
html5组织文档结构 1 / 10 html5 组织文档结构 文档部分,即 body 部分,包含了访问者可以看到的内容.传统的 HTML 文档通常通过 div 元素来组织文档结构,再配 上适当的样式 ...
- 论文：CVPR2020 | Strip Pooling：语义分割新trick，条纹池化取代空间池化
论文链接:https://arxiv.org/abs/2003.13328v1 代码链接:https://github.com/Andrew-Qibin/SPNet 从之前语义分割的研究事实证明,空间 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
最新文章
- 如何使用 DBCC MEMORYSTATUS 命令来监视 SQL Server 2005 中的内存使用情况
- eclipse svn异常：RA layer request failed 的解决方案
- Python2/3 list set性能测试
- MongoDB数据库设计中6条重要的经验法则
- linux标准I/O——流的打开和关闭
- linux read命令详解
- 用qpst修复手机服务器禁用,QPST工具包没有qfil怎么办？
- vbs 解析 json jsonp 方法
- 2.对memcached进行curd操作
- 计算机实验室建设论证报告,计算机实验室实习报告-报告.doc
- Linux指令部分（一）
- magicbookpro做php开发,近乎完美！荣耀MagicBook Pro优缺点解读
- 华硕路由器官改/梅林 设置外置USB-JFFS解救NAND
- mac 重置 android手机系统,Mac OS X下Android系统华为手机无法连接问题之解决方案
- “开宝五子棋陪练”-首款开放智能的五子棋习题练习安卓应用
- api数据接口文档_接口文档示例（Taobao/jd/pinduoduo/开放接口调用）
- [SOLVED]Manjaro内核更新后，Nvidia驱动无法链接的问题
- 【CGAL_网格处理】坐标变换
- java项目-第155期ssm班级同学录网站-java毕业设计_计算机毕业设计
- 用内网服务器对接微信公众号服务