10个html5增加的重要新特性和内容

时间：2021-09-16 09:34:31

　　文章开篇之前我们先了解一下什么是html5，百度上是这样定义html5的：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

其实说白了html5也就是人为定义的一些规则和新的api的集合。下面我就介绍一些开发常用的html5新特性：

一：canvas标签

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

</body>

</html>

渲染结果：

10个html5增加的重要新特性和内容

通过这个元素你可以绘制你想要的图案，这是w3school的canvas文档：http://www.w3school.com.cn/tags/html_ref_canvas.asp

二：video标签

　　<video> 标签可以定义视频，比如电影片段或其他视频流。

<video src="视频地址" controls="controls" autoplay="autoplay" >

your browser does not support the video tag   //可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

</video>

　　video标签具有以下属性：

　　　　1.autoplay:如果出现该属性，则视频在就绪之后马上播放

　　　　2.controls:如果出现该属性，则向用户显示控件，比如播放按钮

　　　　3.height：设置视频播放器高度

　　　　4.loop：如果出现该属性，则会重复播放

　　　　5.preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。

　　　　6.src：视频地址

　　　　7.width：设置视频播放器宽度

三：localStorage和sessionStorage

　　　Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

　　   1.localStorage: 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

　　　2.sessionStorage: 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

　　 Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

　　sessionStorage.setItem("name", "三十亿少女的梦");  


　　console.log(sessionStorage.getItem("name")); //三十亿少女的梦

四：语义化标签

在HTML5出来之前，我们用div构建页面，但是这些div都没有实际意义。我们只能通过id等属性认为赋予它一些身份。为了便于开发者观察和seo（搜索引擎优化），html5推出了这些语义化标签。

　　header：代表“网页”或“section”的页眉。

　　footer：代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

　　hgroup：代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

　　nav：元素代表页面的导航链接区域。用于定义页面的主要导航部分。

　　aside：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

　　section：代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

　　article：最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

五：新表单控件

　　html5中添加了date(日期选择)、time(时间选择)、email(邮箱地址)、url（链接）等表单控件，我个人非常喜欢这些添加。比如email控件，以前我们没有这个控件的时候要判断用户输入的是不是email格式只能通过js正则表达式来判断，但h5之后只用在input的type属性写上email就可以了，但这只是基本的判断不能保证百分百过滤，为了安全，后台还是要进行email格式判断的。

<input type="email" />

六：去掉script和link标签里的type属性

　　html5之后你的script和link不用再加type属性，一样可以工作正常，但是为了不出差错，最好还是加上。

七：contenteditable属性

　　　　你的任何dom节点只要加上contenteditable="true"就可以变得可编辑，也是一个很棒的属性添加,用这个你可以模拟textarea。

八：input添加了placeholder，required,autofocus,pattern等属性

<input type="text" placeholder="请输入姓名" />  <!--当这个输入框为空时框内显示：请输入姓名 -->

<input type="text" required />  <!--输入框为必填，否则不能提交表单 -->

<input type="text" autofocus />  <!--进入页面，自动聚焦到这个input -->

<input type="text" name="country_code" pattern="[A-z]{3}"> <!--输入值必须与正则匹配-->

九：mark标签

　　使用mark标签可以使你的内容有醒目的标记，从mark这个单词相信你就能猜出这个标签大概用途

十：pageInput创建滑块

　　HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性，可以使用css的:before和:after来显示min和max的值 ，但是显示的不是很友善。。。

<style>

input[type=range]:before {

  content: attr(min);

  padding-right: 5px;

} 

input[type=range]:after {

  content: attr(max);

  padding-left: 5px;}

}

</style>

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ />

10个html5增加的重要新特性和内容的更多相关文章

  1. 返璞归真 asp&period;net mvc &lpar;10&rpar; - asp&period;net mvc 4&period;0 新特性之 Web API

    原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API [索引页][源码下载] 返璞归真 asp.net mvc (10) - asp.net ...

  2. Android 10 终于来了！增加了不少新特性

    前言 Android 10 正式发布了,根据官网的介绍,聚焦于隐私可控.手机自定义与使用效率,此版本主要带来了十大新特性:   image 智能回复 使用机器学习来预测你在回复信息时可能会说些什么,这 ...

  3. HTML5的十大新特性

    为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...

  4. html5&bsol;CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  5. ElasticSearch 5学习&lpar;10&rpar;——结构化查询（包括新特性）

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  6. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  7. HTML5、CSS3等新特性&colon;

    HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...

  8. HTML5 中的一些新特性

    HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...

  9. HTML5中的DOM新特性

    元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...

随机推荐

  1. &lbrack;转&rsqb;搭建Maven私服

    在开发过程中,有时候会使用到公司内部的一些开发包,显然把这些包放在外部是不合适的.另外,由于项目一直在开发中,这些内部的依赖可能也在不断的更新.可以通过搭建公司内部的Maven服务器,将第三方和内部的 ...

  2. Solr 4&period;3&period;0 配置Data import handler时出错

    启动solr的时候,居然出现了如下的错误: org.apache.solr.common.SolrException: RequestHandler init failure        at or ...

  3. H5学习第四周

    本周.我们结束了HTML标签和css样式部分,开始了JS的学习.JS是的内容和css,html基本上没有什么联系而且它比较需要逻辑思考能力,所以要从新开始学习. 使用js的三种方式: 1.html标签 ...

  4. JS中清空字符串前后空格

    在JS 操作的时候 长期会有对字符串的操作, 但是在JS 中不像在C#中 有字符串的方法 Trim() 来对字符串进行处理 .  所以自己写一个对字符串前后清楚空格的方法还是有必要的 以免以后忘记了 ...

  5. Week Plan：强介入性的效率导师&lbrack;转&rsqb;

    做产品有三重境界,以效率工具这一细分领域为例: 第一重——发现用户需求,如 Fleep,敏锐地发现团队协作中的关键——聊天,围绕这一需求做足文章; 第二重——预见用户需求,如 ProcessOn,在以 ...

  6. php redis中文手册

    phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github.com/ow ...

  7. Unity 软件使用事项

    打开旧版工程 目前发现两种方式来触发升级程序: 1.Unity软件启动时选择旧版工程,触发更新 2.直接打开旧版工程的场景文件,触发更新   在使用中发现一种错误做法,不知道是不是共性问题,在此先记录 ...

  8. （1）WePHP 开启WePHP

    新建入口文件index.php,定义新项目的目录地址APP_PATH,引入WePHP项目入口文件 <?php define('APP_PATH','./index/'); require_onc ...

  9. Grafana学习

    一.安装 Grafana最新版本4.3.1安装(后端使用mysql) 二.使用

  10. 【BZOJ】3779 重组病毒

    [算法]Link-Cut Tree+线段树(维护DFS序) [题解]整整三天……T_T 这篇题解比较资瓷:permui 这道题虽然树形态没有变化,但用lct写的原因在于把题目中的操作一进行了神转化:每 ...

相关文章