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截图_动力节点Java学院整理
Jul 11 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
详解flex:1什么意思
Jul 23 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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[19:15]DK战队纪录片
2014/09/02 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python梯度下降法的简单示例
2018/08/31 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
配件采购员岗位职责
2013/12/03 职场文书
同学聚会策划方案
2014/06/06 职场文书
三八节活动主持词
2015/07/04 职场文书