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弹性盒模型实例介绍
May 27 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
layui表格数据重载
2019/07/27 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python中super的用法实例
2015/05/28 Python
Python argv用法详解
2016/01/08 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
董事长助理工作职责
2014/06/08 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS