HTML5文档结构标签


Posted in HTML / CSS onApril 21, 2017

1.文档结构标签

1.1为什么引入文档结构标签?

让标签更具语义化,结构更加清晰。搜索引擎具有更好的支持

1.2文档结构标签

header:头部。网页结构的头部,文章的头部内容,可包含标题等。

nav:导航。头部,底部以及侧边栏。

section:对网页的内容进行分块。里面可以包含:①article:表示这一个分块包含了多篇文章。②section:包含子分块。

article:表示的是独立的完整的文章。①header:表示文章的头部。里面包含了标题等。②section:表示不同的段落和分区。③article:表示文章所包含的评论及回复等。

aside:侧边栏。通常渲染成侧边栏的样式。

footer:底部。可包含①nav:表示底部的导航栏。

1.3section、article、div区别

section:对网页内容进行分块。意义明确的分区。

article:当网页中出现文章内容的时候,使用article

div:没有什么实际意义的容器。

2.语义相关元素

mark:标注。标注的是我们需要重点关注的内容。浏览器会渲染成 背景颜色为黄色、字体为黑色的内容。

time:时间、日期。datetime属性:属性值为标准化的时间日期。浏览器并不会特别的去渲染,与div相同。

details:表示的是细节内容或者某一个主体的文章。浏览器会把他隐藏。

summary:摘要信息。嵌套在details标签内使用,会显示出来,点击后显示details内容。默认值为:详细信息。

3.应用程序元素

meter:计数仪表。①value 目前的读数②max 最大值。默认值为1③min 最小值。④high 高值。⑤low 低值。⑥optimum 最佳值。越靠近越好。

颜色显示规律:越靠近最佳值,颜色越舒适。

HTML5文档结构标签

progress:进度条。显示的是进度完成的比例。①value:现在已完成的值。②max:最后完成后的值。总量。默认值也是1。

以上所述是小编给大家介绍的HTML5文档结构标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
html5的localstorage详解
May 09 #HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 #HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 #HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 #HTML / CSS
详解H5本地储存Web Storage
Jul 03 #HTML / CSS
H5仿微信界面教程(一)
Jul 05 #HTML / CSS
You might like
聊天室php&mysql(二)
2006/10/09 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP文件与目录操作示例
2016/12/24 PHP
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python感知机实现代码
2019/01/18 Python
什么是Python中的匿名函数
2020/06/02 Python
python中tab键是什么意思
2020/06/18 Python
Django多数据库联用实现方法解析
2020/11/12 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
新学期决心书
2014/03/11 职场文书
教师求职信
2014/06/17 职场文书
考试作弊检讨
2015/01/27 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
书法社团活动总结
2015/05/07 职场文书
导游词之上饶龟峰
2019/10/25 职场文书