登录  /  注册
首页 > web前端 > H5教程 > 正文

H5新元素

高洛峰
发布: 2016-10-12 10:51:12
原创
1145人浏览过

h5新元素

1.article元素(标签)

  用于定义一个独立的内容区块,比如一篇文章,一篇博客等。

  article元素内可以嵌套其他元素,它可以有自己的头、尾、主体等内容,是用时要特别注意内容的独立性一般独立完整的内容才使用article元素,如果只是一段内容的话应该是用section元素。

2.section元素

  用于定义文章中的章节(通常应该有标题和段落内容)

  用来定义文档中特定的内容区块,可视为一个区域分组元素,用来给页面上的内容分块。

  section元素可以定义 文档的主体内容

  用一句话来概括它的作用就是给内容分段,给页面分区

  注意它与div的区别,div强调在形式上的独立性,section强调的是内容上的独立性,注意它的语义。

3.article元素和section元素的区别

  语义不同

    article元素更强调内容的独立性

    section元素更强调内容的关联性

    article元素是独立完整的内容,section元素页面内容分块

  相同点

    本质上都是带有语义的div块元素

    分别可以看做

 

4.aside元素

   aside元素通常用来设置侧边栏

  用于定义article元素之外的内容,前提是这些内容与article元素内的内容相关

  同时也可嵌套在article元素内部使用,作为主要内容的附属信息,比如与内容有关的参考资料,名词解释等

5.nav元素

  用来定义目录、导航栏、超链接

  并非所有的超链接都放在nav元素中,通常只把一个文档中的主导航栏放在nav中

  在文章页面中,nav还可以用来给一个文字做一个目录的超链接

6.time元素

  微格式的概念

    HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信息例如新闻事件的发生的日期和时间,文章的发表日期等

    HTML5中的微格式是为了简化浏览器对数据的提取,方便搜索引擎的搜索

  time元素

    time是HTML5新增的元素

    time元素代表24小时中的某个时刻或某个日期,表示时刻允许出现时差。它可以定义很多格式的日期和时间

    datetime属性代表中日期和时间之间要用“T”文字分隔,“T”表示时间,请注意倒数第二行,时间加上Z文字表示给机器编码时使用UTC标准时间,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差。

    pubdate属性是个可选标签,加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期

7.time元素示例

  

  

  

  

8.hgroup元素

  通常用来给标题分组,通常放在header中,但是并非强制要求,也不是绝对的

9.address元素

  通常用来说明坐着的联系信息,例如名字、E-mail、电话、地址等

  address元素中的内容会以斜体显示

10.新布局的优点

  1.更注重于内容而不是形式

  2.对人的友好:更加的语义化,高度的描述性,更加的直观,增加了代码的可读性。

  3.对计算机的友好:浏览器更容易解析,搜索引擎更容易抓取文档的内容

  4.代码更加的简洁

11.figure元素

  figure/figcaptio都是HTML5中新增的元素

  figure元素是一个媒体组合元素,也就是对其他的媒体元素进行组合,比如:图像、图标等等

12.figcaptio元素

  用来给figure元素定义标题

13.video

  src属性:音频地址

  loop属性:是否重复播放

  autoplay属性:是否自动播放

  controls属性:添加控制

  poster属性:在视频加载完成前显示什么

第一种:

 

第二种

你的浏览器不支持

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号