• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5中新标签和常用标签详解_html5教程技巧

HTML5中新标签和常用标签详解_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5标签,html5新标签,html5常用标签等相关知识,匿名希望在学习及工作中可以帮助到您
今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户,我也是这么认为的,但作为一个重构仔,我们还是得专业点,再考虑到无障碍这块,那么 html5 标签的作用就更明显了。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。

HTML5 新增结构元素分为主体结构元素和非主体结构元素

1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:

通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。


用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。

注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。


通常作为页面导航的链接组
侧边栏导航
使用频率高。


在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。






  • 老赵的博客

  • 鬼哥的博客

  • 彪叔的博客





time
time 标签,从语义化上看为时间,其用法如下:

代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。

一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。


作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。


一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。


用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。

希望本文对大家在 html5 结构标签上的运用有一定的指导,如果发现内容有错误的地方,欢迎大家指正~

您可能想查找下面的文章:

  • Html5新增标签有哪些
  • HTML5标签大全
  • HTML5进阶段内联标签汇总(小篇)
  • HTML5标签使用方法详解
  • HTML5中新标签和常用标签详解
  • HTML5标签与HTML4标签的区别示例介绍
  • html5的新增的标签和废除的标签简要概述
  • 几个解决兼容IE6\7\8不支持html5标签的几个方法
  • 在IE6系列等老式浏览器中使用HTML5的新标签实现方案
  • HTML5的标签的代码的简单介绍 HTML5标签的简介

相关文章

  • 2018-12-03HTML5教程之html 5 本地数据库(Web Sql Database)
  • 2018-12-03 HTML5自定义日历控件的示例代码详解
  • 2017-08-06canvas需要在标签里直接定义宽高
  • 2018-12-03为什么优酷坚持使用flash,而不用html5?
  • 2018-12-03如何用canvas画出一个路线图(代码)
  • 2018-12-03HTML5第三天笔记
  • 2018-12-03CSS 的主要缺陷是什么?
  • 2018-12-03html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
  • 2018-12-03关于 HTML5 被简称做 H5 ,你怎么看?
  • 2018-12-03从HTML5移动应用现状谈发展趋势的详细介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 能够完全取代目前各个手机操作系统下的开发语言成为手机 App 开发的首选吗?
    • HTML5语音识别标签写法附图_html5教程技巧
    • 响应式自助建站效果怎么样
    • 分享几款炫酷的HTML5实现的图片特效
    • jQuery+JSONP跨域需要怎样实现
    • H5新属性audio音频和video视频的控制详解(推荐)
    • 熟练JavaScript的步骤应该是?
    • 让web app更快的HTML5最佳实践
    • HTML5新标签之Canvas详细介绍
    • html5中在用户可以开始播放视频/音频时触发的事件oncanplay

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有