H5的新特性

H5的新特新

1.语义化的标签：header、footer、section、nav、aside、article

标签	描述
header	定义文档的头部区域
footer	定义文档的尾部区域
nav	定义文档的导航栏部分
section	定义文档中的节（section、区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏部分
details	用于描述文档或者某个部分的细节
summary	标签包含details元素的标题
dialog	定义对话框，比如提示框

2.增强型表单：HTML5拥有多个新的表单Input输入类型，这些新的特性提供了更好的输入控制和验证

input的type	描述
color	主要用于选择颜色
data	从一个日期选择器选择一个日期
datatime	选择一个日期（UTC时间）
email	包含e-mail地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码的字段
time	选择一个时间
url	URL地址的输入域
week	选择周和年

3.新增表单元素：datalist、keygen、output

表单元素	描述
datalist	元素规定输入域的选项列表，使用input元素的list属性与datalist元素的id绑定
keygen	提供一种验证用户的可靠方法，标签规定用于表单的秘钥对生成器字段
output	用于不同类型的输出，比如计算机的脚本输出

4.新增的表单属性：placeholder、require、min、max、.......

表单属性	描述
placeholder	输入框的默认提示
required	是一个boolean属性，要求填写的输入域不能为空值
pattern	描述一个正则表达式，用于验证input元素的值
min/max	设置元素的最大值和最小值
step	为输入域规定合法的数字间隔
height/width	用于image类型的input标签的图像高度和宽度
autofocus	是一个boolean属性，规定在页面加载时，域自动的获取到焦点
multipe	是一个boolean属性，规定input元素中可选择多个值

5.音频、视频：audio、video

6.canvas：在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。

要指定的是 id、width、height三个属性

<canvas id="canvas" width="400" height="300" />

7.地理定位：getCurrentPosition()

返回用户位置的经度和纬度

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

8.拖拽：

9.本地存储：

localStorage：没有时间限制的数据存储

sessionStorage：针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除

10.新的事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

事件	描述
onresize	调整窗口大小时触发的事件
ondrag	当元素拖拽时触发的事件
onscroll	当滚动元素的滚动条变化时触发事件
onmousewheel	当转动鼠标滚轮时候触发的事件
onerror	当错误发生时触发的事件
onplay	当媒介数据将要开始播放时触发的事件
onpause	当媒介数据暂停时触发的事件

11.WebSocket:单个TCP连接上进行全双工通讯的协议

12.块级元素和行内元素的总结

块级元素：div、p、h1~h5、ul、ol、li、dd、table、hr、blockquote（标记长的引用）、address（ <address> 元素位于 <article> 元素内，定义文档或文章的作者/拥有者的联系信息）、menu、pre（pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。）、还有上面新增的语义化的标签：header、footer、section、nav、aside、article

行内元素：span、img、a、label、input、abbr（缩写）、em（强调）、big（呈现大号字体效果）、cite（引用a标签包裹引用的标题）、i（斜体）、q（标记短的引用）、textarea、select、small（ 标签呈现小号字体效果）、sub（下标）、sup（上标）、strong（加粗）、u（下划线）、button

<menu>标签:

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都包含带有一系列选项的下拉列表：

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>

<abbr>标签的作用：

此标签用于标记一个缩写，当鼠标停留到标记的缩写上面时会展示"title"属性的全部内容

<html>
  <head>
    <meta charset="utf-8">
    <title>abbr标签</title>
  </head>
  <body>
    <abbr title="中国航天四老之一">任新民</abbr>，航天技术与液体火箭发动机技术专家，中国导弹与航天技术的重要开拓者之一。
  </body>
</html>

posted @ 2019-12-27 13:12 冬冬先生阅读(746) 评论(0) 编辑收藏举报

刷新页面返回顶部

冬冬先生

H5的新特性

公告