html5中的一些标签学习总结
html5 contenteditable="true"
html5内容可编辑属性
html5 hgroup
hgroup字面意思是头部的组,可以将其分拆为h和group来理解。在html5中的作用是用于对网页和区块的标题进行组合。(网页是一个最大的区块,所以可以认为hgroup是区块的标题的组合)
前面的文章有提到header元素,貌似这个元素跟hgroup有非常相似的功能,那么它们之间有什么不同呢?
继续从hgroup的定义来看,它是对“标题"的组合,html中的标题有h1,h2,h3,h4,h5,h6。hgroup只能是对这六种h的组合,不能包含其他元素,这就是跟header的区别,header可以包含其他元素,而且header可以包含hgroup。
下面是hgroup的一些示例:
情景一
1
2
3
4
5
6
7
8
9
10
|
<!doctype html>
< title >html5 hgroup 示例一 html5zhan.com</ title >
< section >
< hgroup >
< h1 >我爱我母亲</ h1 >
< h2 >给全世界母亲的一封信</ h2 >
</ hgroup >
< p >又到了5月的第二个星期天.....</ p >
</ section >
|
情景二
1
2
3
4
5
6
7
8
9
10
11
12
|
<!doctype html>
< title >html5 hgroup 示例二 html5zhan.com</ title >
< section >
< header >
< hgroup >
< h1 >我爱我母亲</ h1 >
< h2 >给全世界母亲的一封信</ h2 >
</ hgroup >
< p >添加时间:2012-5-10</ p >
</ header >
< p >又到了5月的第二个星期天.....</ p >
</ section >
|
注
除非有两个或者以上的h标签,否则请不要使用hgroup。
html5 section
section 字面上理解为“块”,“部分”。在html5网页中表现的意思跟字面理解差不多,即部分,块,模块,主要作用为对页面的内容进行分块或者对文章的内容进行分段。
页面分块示例
可直接查看html5zhan.com的首页,主要由六部分组成,html5新元素,html5新api,html5最新动态,html5文章导航,html5最新文章以及html5作品。
这些内容彼此都是一个独立的模块,这个时候就可以使用section包裹他们。
文章分段示例
这里直接给出一个介绍文章分段的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!doctype html>
< article >
< h1 >Web编程语言比较</ h1 >
< p >web编程语言常用的有asp,asp.net,php,jsp...</ p >
< section >
< h2 >asp</ h2 >
< p >asp全称Active Server Page</ p >
</ section >
< section >
< h2 >asp.net</ h2 >
< p >asp的颠覆版本</ p >
</ section >
< section >
< h2 >php</ h2 >
< p >草根动态语言,免费,强大</ p >
</ section >
</ article >
|
article与section的异同
section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。
感觉上使用都差不多,都可以有h1,h2,h3,都有一个主体,那应该怎么来区分它们的不同?其实很简单,只要从字面上理解它们就可以足够了:
1、article是文章,文章就是一段完整的独立的内容。
2、section就是块,某种意义上可以理解为div,但是比div的意思更加明确一点。
section和div的异同
1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。
2、section内部必须有标题,标题也代表了section的意义所在。
其他说明
1、section做为"块",理论上可以用于很多地方,例如一个同字型的网页,可以用于包裹两边的内容,但是实际上,html5中定义了更加有意义的aside标记,完全可以用aside来替代section,因此在使用的时候应尽量使用更有意义的标记。
2、html5与css3权威指南中提到一个检查轮廓的工具,这里提供一下:http://gsnedders.html5.org/outliner/
html5 article
article 字面意思为“文章”。在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式。这其中包括两方面,一为整个页面的主旨内容,另外就是一些辅助内容。
article可以嵌套,即article里面还可以包含article,此时内article应该跟外article有一定的关联性,如同情景二,其中主内容的评论。
1
2
3
4
|
< article id = "demo" >
< h1 >内容标题(选用)</ h1 >
< p >内容</ p >
</ article >
|
article既然是独立的内容,那么内容的主题是必不可少,标题则为选用内容。
情景一
整个页面的主旨内容
1
2
3
4
5
6
7
8
9
10
11
|
<!doctype html>
< title >html5站案例</ title >
< body >
< article >
< h1 ></ h1 >
< p >主内容</ p >
</ article >
< aside >
侧边内容
</ aside >
</ body >
|
情景二
内容的评论
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
< title >html5站案例</ title >
< body >
< article >
主内容省略....
< section >
< h1 >评论</ h1 >
< ul >
< li >
< article >评论1</ article >
</ li >
< li >
< article >评论2</ article >
</ li >
</ ul >
</ section >
</ article >
< aside >
侧边内容
</ aside >
</ body >
|
情景三
辅助内容
1
2
3
4
5
6
7
8
9
10
11
|
<!doctype html>
< title >html5站案例</ title >
< body >
主内容省略...
< aside >
< article >
< p >作者:kspig</ p >
< p >文章编写时间:2012年4月</ p >
</ article >
</ aside >
</ body >
|
html5 address
address字面理解为“地址”,在html5中,它用于文档或者文章作者或拥有者的联系信息。注意,这里放的不是字面上理解的“地址”,而是指“联系信息”,可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。
address一般放在footer中,有时也放在header中,视情况而定。
情景
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!doctype html>
< title >html5 address 示例 html5zhan.com</ title >
< header >< h1 >html5 address 示例 html5zhan.com</ h1 ></ header >
< p >这里是主体...</ p >
< footer >
作者:html5zhan
< address >
< ul >
< li >网址:http://www.html5zhan.com</ li >
< li >QQ:10000</ li >
< li >邮件:web@daojia100.com</ li >
</ ul >
</ address >
</ footer >
|
转载于:https://www.cnblogs.com/javawebstudy/p/3765416.html
html5中的一些标签学习总结相关推荐
- web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
- html5中还有div吗,关于html5中的section标签与div标签的区别(内有实例)
摘要 腾兴网为您分享:关于html5中的section标签与div标签的区别(内有实例),周公解梦,智学网,学习计时,完美root等软件知识,以及网上预约医院软件,字体预览软件,铁血联盟卷土重来,海量 ...
- [html] html5中的meta标签http-equiv属性有什么作用?
[html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...
- [html] html5中的meta标签renderer有什么作用?
[html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
- [html] html5中的meta标签robots有什么作用?
[html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
- html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此 标签加入到你的页面中: content属性 ...
- ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在 里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
- html去掉nav的圆点,web前端分享HTML5中的nav标签
web前端分享HTML5中的nav标签,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a page that l ...
- html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型 语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
最新文章
- tornado学习笔记day05-访问数据库
- golang自带的rpc 服务端
- 一加7 Pro将首发搭载UFS 3.0闪存:较UFS2.1闪存提升明显
- elasticsearch 清理数据后硬盘不释放_电脑C盘正确的5种清理方法,你还不知道?学会后轻松释放20G空间...
- 5.2.3 配置SQL Server代理
- 边缘计算(二)边缘计算与智能制造
- epoint:TreeView
- python 自己选择excel保存的位置
- unreal4 源码引言
- 计算机主机电池馈电,电脑主板电池没电了表现 电脑主板电池没电了解决方法【详解】...
- JSP开发--MVC模式(三)
- ESP8266 WIFI ARDUINO单芯片 APP/微信远程控制继电器等 设备源码及说明
- 红米5a android 版本,【红米5A安卓7.1.2线刷包】MIUI V9.5.3.0.NCKCNFA稳定版 精简线刷包...
- 域名解析服务器类型(四类)
- 详谈C++11新特性之future及开源项目ananas(folly,std c++11和ananas的future各自的区别是?)
- 介绍基于ARM的移动视频监控系统
- C++第3次实验:【项目三】定期存款利息计算器
- 报错:Could not connect to any X display
- collector是什么意思中文翻译_collector是什么意思_ collector的翻译_音标_读音_用法_例句_爱词霸在线词典...
- 嵌入式Linux-IMX6ULL-U-BOOT移植学习总结(二)