HTML5+CSS3从入门到精通 浅谈HTML5新特性
沉沙 2018-07-25 来源 : 阅读 1059 评论 0

摘要:本篇教程探讨了HTML5新特性,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。

h5的新特性如下

· 语义化标签

· 表单新特性

· 视频(video)和音频(audio)

· canvas画布

· svg绘图

· 地理定位

· 为鼠标提供的拖放API

· webworker

· (重点)Storage

· (重点)Websocket

 

HTML语义化是什么?

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

为什么要语义化?

有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。

语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

方便其他设备的解析

便于团队开发和维护

· 

 

  1、<section></section>

    定义文档中的主体部分的节、段。

  2、<article></article>

    一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。

  3、<aside></aside>

    用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。

  4、<header></header>

    定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

  5、<footer></footer>

    定义了文档、页面的页脚,和header类似。

  6、<nav></nav>

    定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

  7、<hgroup></hgroup>

    用于对网页或区段(section)的标题元素(h1~h6)进行组合。

  8、<figure></figure>

    用于对元素进行组合。

  9、<figcaption></figcaption>

    为figure元素加标题。一般放在figure第一个子元素或者最后一个。

  10、<details></details>

    定义元素的细节,用户可以点击查看或者隐藏。

  11、<summary></summary>

    和details连用,用来包含details的标题。

  12、<canvas></canvas>

    用来进行canvas绘图。

  13、<video></video>

    定义视频。

  14、<audio></audio>

    定义音频。

  15、<embed></embed>

    定义嵌入网页的内容。比如插件。

  16、<source></source>

    该标签为媒介元素(比如video、audio)定义媒介元素。

  17、<datalist id='dl'></datalist>

    定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

  18、<mark></mark>

    在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

  19、<meter [min/max/low/high/optimum/value]></meter>

    度量衡,用红黄绿表示出一个数值所在范围。

  20、<output></output>

    定义不同类型的输出,样式与span无异。

  21、<progress></progress>

    进度条,运行中的进度。

  22、<time></time>

    定义日期或者时间。

  23、<keygen></keygen>

    定义加密内容。

  24、<command></command>

    定义命令行为。

 

本文由职坐标整理发布,学习更多的HTML5/CSS3相关知识,请关注职坐标WEB前端HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程