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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP 无限级分类
2017/05/04 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
业务部经理岗位职责
2014/01/04 职场文书
《长相思》听课反思
2014/04/10 职场文书
水浒传读书笔记
2015/06/25 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书