html5新加入的内容,10个html5增加的重要新特性和内容
文章开篇之前我们先了解一下什么是 html5,百度上是这样定义 html5 的:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
其实说白了 html5 也就是人为定义的一些规则和新的 api 的集合。下面我就介绍一些开发常用的 html5 新特性:
一:canvas 标签
your browser does not support the canvas tag
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
渲染结果:
通过这个元素你可以绘制你想要的图案。
二:video标签
your browser does not support the video tag //可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
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 格式判断的。
六:去掉 script 和 link 标签里的 type 属性
html5 之后你的 script 和 link 不用再加 type 属性,一样可以工作正常,但是为了不出差错,最好还是加上。
七:contenteditable 属性
你的任何 dom 节点只要加上 contenteditable="true"就可以变得可编辑,也是一个很棒的属性添加,用这个你可以模拟 textarea。
八:input 添加了 placeholder,required,autofocus,pattern 等属性
九:mark标签
使用 mark 标签可以使你的内容有醒目的标记,从 mark 这个单词相信你就能猜出这个标签大概用途
十:pageInput 创建滑块
HTML5 引用的 range 类型可以创建滑块,它接受 min, max, step 和 value 属性,可以使用 css 的 :before 和 :after 来显示 min 和 max 的值 ,但是显示的不是很友善。
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]:after {
content: attr(max);
padding-left: 5px;}
}
html5新加入的内容,10个html5增加的重要新特性和内容相关推荐
- 前端html5的框架有哪些,10大html5前端框架
10大html5前端框架 Bootstrap 首先说Bootstrap,估计你也猜到会先说,或者一定会有这个了,这是说明它的强大之处. 拥有框架一壁江山的势气. 自己刚入道的时候,本着代码任何一个字母 ...
- html5 游戏引擎 2017,Top 10:HTML5、JavaScript 3D游戏引擎和框架
由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...
- 快速掌握 10 个 HTML5 必备技巧
HTML5 对于初学者甚至是非程序员来说都有着十足的吸引力.实际上,只要你访问网站,就会和 HTML 打交道.如果能够熟悉一些关键的编程技巧,当你对网站做一些细节调整或优化基本的 Web 元素时就能节 ...
- 10分钟HTML5入门基础知识(一)
毫无疑问,对于开发人员而言, HTML5 已是一个热点话题.如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择. 本文来自The Code Project的付费搜索位置,由Solut ...
- 获取 HTML5 网页设计灵感的10个网站推荐
这篇文章向大家推荐10个收集 HTML5 网页作品的网站,让大家感受一下 HTML5 的魅力.作为下一代网页标准,HTML5 增加了很多新标签以及新特性,正引领网页技术革命.希望这些优秀的 HTML5 ...
- H5新标签 figcaption 定义图文并茂的html5新标签-figure、figcaption
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题或者 ...
- 推荐10个HTML5游戏网站
原文作者Julio Rivera是一名来自纽约市的创意总监和网页设计师,他是Underworld Magazines的创始人.以下是全文.到现在为止,我玩了好几年的在线游戏.我已经看过用Flash和其 ...
- Web开发者不容错过的10个HTML5工具
HTML5已经成为当今世界的一个必然组成部分.由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一.随着网络的不断扩张,Web开发人员非常 ...
- html5与交互融媒体内容设计,广东省“HTML5交互融媒体内容设计与制作”赛项在我院顺利举行...
原标题:广东省"HTML5交互融媒体内容设计与制作"赛项在我院顺利举行 3月22-23日,2018-2019年广东省职业院校学生专业技能大赛"HTML5交互融媒体内容设计 ...
最新文章
- Apache Camel 2.15.0 发布,Java 规则引擎
- linux下 get,Unix/Linux下 getrusage 的用法
- mysql where in 中多个参数查询
- Oracle学习笔记:redo重做日志
- 支付宝架构师眼里的高并发架构
- 快讯 | 美国投资公司Avenue Capital Group联合创始人Marc Lasry:比特币价格可能达到40,000美元...
- 209计算机考试题库,计算机考试题库:计算机考试模拟练习题(209)
- Hadoop jobhistory历史服务器
- 50:树中两个结点的最低公共祖先
- Class的 getSuperclass与getGenericSuperclass区别
- ubuntu linux mac地址,Ubuntu下修改mac地址
- ONGC的完整形式是什么?
- 【Code-Snippet】TextView
- 【软件开发底层知识修炼】十七 快速学习GDB调试四 使用GDB进行函数调用栈的查看
- LeetCode 1792. 最大平均通过率(优先队列)
- vm虚拟机win10无法复制文件_远程桌面无法复制粘贴传输文件解决办法
- 调研报告:原型图出稿
- Guice 依赖注入
- 2019级第二次月赛暨软件计科联合新生赛题解
- iOS读懂崩溃日志,解析崩溃日志
热门文章
- linux批量做信任,Linux 批量建立信任关系,实现ssh无password登陆的脚本
- 每日小记 2017.6.29
- 服务器后还有一系列留后门,服务器留隐蔽后门
- 【英语学习】【Level 08】U04 What I love L2 My favorite sport
- oracle 9i手动启动数据库,Oracle9iAS (之五): 手工起动,关闭系统
- mysql 傻瓜式管理_傻瓜式教学【数据库管理工具Navicat】
- socket套接字TCP API
- okhttp请求php接口,安卓:okhttp请求,获取返回数据
- python excel详解_Python - excel 详解
- UE4 调试着色器编译过程