专栏首页coding个人笔记H5新特性之语义化标签

H5新特性之语义化标签

H5新增了很多标签,也更加语义化了,但是除了header、footer、nav等,其他的还真的没有去了解过,今天整理一下H5新增的语义化标签。

Header:

不用多说,就是定义头部,可以多个。

Footer:

底部,不一定是文档最底部,可以多个。

Nav:

导航栏标签,定义导航栏。

Article:

独立内容区域,与session类似,用于文章等。

Aside:

页面侧边栏所使用。

Time:

时间标签,主要用于搜索引擎和其它一些内容引擎特殊的解析和展示。

Ruby:

注释标签,跟rt和rp一起使用,可以看一下效果

<ruby> 张 <rt>Zhang</rt><rp>不显示</rp> </ruby>

Details:

点击展开详情,可以试一下,可能在很多场景下可以使用

<details>
  <summary>更多</summary>
  <p>详细内容</p>
</details>

Mark:

会给这个字段添加一个背景色,那个颜色还改不了。

Progress:

进度条,当做简易进度条使用,不够美观。

   <progress value="50" max="100"></progress>

Section:

节的意思,主要是区分开内容,文档中的节或者是文章的节。

Video:

视频,现在大部分不支持自动播放了,微信能处理,其他还没见过能自动播放。

Audio:

音频,也就是音乐,也不支持自动播放。

Datalist:

强烈推荐,在我看来就是模糊查询,除了样式之外,非常好用。

<input type="text" list="carsd">
<datalist id="carsd">
  <option value="wf"></option>
  <option value="wg"></option>
  <option value="dre"></option>
  <option value="sdhjfgh"></option>
  <option value="dfgsdw"></option>
  <option value="fdgwfdg"></option>
  <option value="dfgtyr"></option>
  <option value="dfgwdfg"></option>
</datalist>

Embed:

插入多媒体内容,小小试了试,可以播放视频,但是那些属性都不生效。待研究。

Canvas:

画布,很强大很强大,值得研究。

Main:

主要内容。

H5还有另外一些标签,比如bdi、command、figcaption等等,可以在http://www.w3school.com.cn/html5/html5_reference.asp这个地址查看新增的标签。

其实这些语义化标签有些在使用上可能没什么特别,但是这些标签提升了可访问性和SEO的优化,还有利于维护性,对于一些机器的解析也有很大优点。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • http、https、http2一些概念

    非对称加密,现在用的几乎都是非对称加密,自己有一个密钥对公钥和私钥,公钥可以给任何人知道,别人通过公钥加密发数据给自己,自己通过密钥解密。

    wade
  • 移动端导航简单实现

    在移动端导航的功能太常见了,很多时候还需要可滑动,点击的时候还需要当前动画到中间。实现的方法很多,今天分享一个本人最近开发所用的方法。

    wade
  • js拖拽自动排列

    上一次写了拖拽,其实主要还是想实现拖拽之后实现自动排列,跟手机屏幕那样移动图标可以自动排列,先看效果:

    wade
  • bootstrap select 多选 搜索框 分组 常用

    用户5760343
  • selectToUISlider

    没错,就是这个公能,最近做一个WEB的项目,也要用到类似的功能,所以呢就研究了一下,刚开始的时候,记得Jquery UI里面有一个slider的东西,可以实现类...

    lzugis
  • [译]CSS边框实现“无图化”设计

    原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

    小李刀刀
  • Unity动画系统

    Animator 1.Animator Controller 2.Avator对角色中骨骼进行分析识别,并与Mecanim中骨骼进行对比。

    祝你万事顺利
  • 「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人
  • 邹溪源: 我们为什么要搞长沙.NET技术社区(一)

    2019年2月17日,继深圳,广州,西安,成都,苏州相继成立了.NET社区之后,酝酿已久的长沙.NET社区也终于组织了第一次线下交流会。如果您是长沙的IT精英,...

    寒树Office与RPA
  • PHP多文件上传格式化

    文件上传是所有web应用中最常见的功能,而PHP实现这一功能也非常的简单,只需要前端设置表单的 enctype 值为 multipart/form-data 之...

    硬核项目经理

扫码关注云+社区

领取腾讯云代金券