怎么使用html5不常用标签
怎么使用html5不常用标签?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
目前成都创新互联已为上千余家的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、建安网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
作为一个前端开发,在浏览别人家的页面时总是会习惯性的查看他们页面的源码,发现大多数网站的页面,包括我自己写的页面中用到的最多的布局元素无外乎就是div
、p
、span
、ul
、dl
、ol
、li
、dt
、dd
、strong
、b
,不管是什么样的效果都是由这些元素组成。
现在都已经是9102年了,html5已经相当成熟标准了,为什么在布局的时候不用写html5提供的具有语义化的标签进行布局呢?我个人觉得是因为我们刚开始学习布局的时候用的最多就是上面的这些标签,而当html5新标签出来的时候我们已经使用div布局很久了,并且可能由于工作忙的原因没有很认真的去了解这些标签的应用场景,久而久之我们还是在使用div布局。
1、fieldset
标签
标签为表单分组标签,它可以将内容相关联的一组表单进行分组。
1.1、应用场景1 - 表单分组
如果一个表单上有很多信息需要填写,可以使用标签将相关的表单项组合在一起,使表单更容易理解,表单越容易理解,访问者就越有可能正确的填写表单。
基本使用及默认效果:
美化后的表单
1.2、应用场景2 - 其他分组
2、figure
标签
用于对元素进行组合,一般用于图片、视频、图表、代码等。
2.1 、应用场景1 -figure
标签与图片混合使用
2.2、应用场景2 -figure
标签与dt
、dd
标签结合使用
2.3、应用场景3 -figure
标签单独结合figurecaption
标签使用
figure
标签单独结合figurecaption
标签使用时可以实现类似下面的这种对某一块内容的说明。
3、section
标签
标签用于对网站或应用程序中页面上的内容进行分块
一个section元素通常由内容及标题组成
但当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。
section元素强调分段或分块,一块内容分为几段或几块;
article元素强调独立性,一块内容独立完整;
没有标题内容区域块,不要用section,即section中应有h2-h7标签
可以用来呈现论坛的一个帖子,评论列表,可互动的页面模块挂件,杂志或报纸中的一篇文章,国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块等就可以使用section。
4、aside
标签
标签一般表示网站当前页面或者文章的附属信息部分,可以包含
与当前页面主要内容相关的广告、导航条、引用、侧边栏评语部分
,以及其他区别与主要内容的部分
5、address
标签
元素可以让作者为它最近的
或者 祖先元素提供联系信息。在后一种情况下,它应用于整个文档
- 当表示一个和联系信息无关的任意的地址时,应使用
元素
- 这个元素不能包含除了联系信息之外的任何信息,比如出版日期
- 通常
的
元素中,如果存在的话
6、menu
标签
标签可以用来定义页面的菜单
7、time
标签
标签用来表现时间或日期
我们在每天早上 开始营业。
我在 有个约会。
8、mark
标签
标签定义带有记号的文本。出于引用的目的,对与另一个上下文相关的文本进行突出显示
美女
四大美女
杨玉环是美女
凤姐也是美女
9、details
标签
标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。
一般情况下,
用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多
。
什么是html?
HTML称为超文本标记语言,是一种标识性的语言。
10、meter
标签
标签用来定义已知范围或分数值内的标量测量,meter标签的效果很像进度条,但是它不作为进度条来使用。如果要表示进度条,通常使用progress标签。
66%
11、ruby
标签
标签是使用来定义ruby注释(中文注音或字符),如果在东亚使用,显示的是东亚字符的发音。
标签通常和
标签和
标签一起使用,
标签用来提供注释信息(如:拼音),
标签用来定义浏览器不支持ruby标签时所显示的内容。
李
12、blockquote
标签
用于对长文本的引用,用来定义一段引语,默认效果标签内的内容会自动有缩进;
如这篇文章的开头就用了标签
关于怎么使用html5不常用标签问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
网站题目:怎么使用html5不常用标签
标题链接:http://pwwzsj.com/article/gejcdh.html