第四章 HTML5概述

HTML5概述
1.HTML5优势:
解决跨浏览器问题;
部分代替原来的js
更明确地语义支持:不再单纯使用div
增强WEB应用程序地功能:拖拽API等

2.HTML5语法改变
标签不再区分大小写
元素可以省略结束标签
允许省略属性的属性值
允许属性值不适用引号

3.新增元素
(1)文档结构元素:
<article> 表示一篇文章
<nav> 表示导航栏
<aside> 侧表导航栏

(2)语意相关元素:
<mark> 重点关注内容(黄色显示)
<time> 显示时间或日期
<details> 详细信息
<sumary> 详细信息中的摘要信息【只有Chrome(谷歌浏览器)支持】

(3)特殊功能元素:

Web运用标签
<metar> 计数仪表(拥有最小值和最大值),状态、温度等
<progress> 进度条

注释标签

<ruby>标记注释或音标

<rp>不支持<ruby>的浏览器显示

<rt>标记定义对<ruby>的注释内容和文本

————————————————————————————————————
(4)表单新增元素和属性
<keygen> 表单公钥标签
<time>时间和日期
<output>输出类型    <list> <datalist……/>的转换列表属性

属性:

autofocus自动获得焦点属性、placeholder 显示提示信息属性
——————————————————————————————————————————
input元素新增type属性值:
color颜色选择器 date日期选择器 time时间选择器
datetime日期时间选择器 week选择周次文本框 month月份选择器
email电子邮箱输入框 tel电话输入框 url网址输入框
number数字输入框 range拖动条 search搜索框
——————————————————————————————————————————
【required:必须填写;pattern="正则表达式"】 正则表达式:/^ $/(/^表达开始,$/表达结束)
——————————————————————————————————————————
用户: <input type="text" placeholder="用户类型" list="usertype"/><br />
颜色: <input type="color" /><br />
日期: <input type="date" /><br />
时间: <input type="time" /><br />
日期-时间: <input type="datetime-local"><br />
周: <input type="week" /><br />
月: <input type="month" /><br />
E-mail: <input type="email" /> <br />
电话: <input type="tel" /><br />
网址: <input type="url"><br />
数字: <input type="number"><br />
拖动条: <input type="range" step="5" min="5" max="100" /><br />
搜索框: <input type="search" required="required" pattern="S{6}" /><br />
必填字段: <input type="text" required="required" pattern="1d{10}" />
提交: <input type="submit" />
——————————————————————————————————————————
(5)HTML5绘图支持
<canvas> 画布元素——在js中绘制CanvasRenderingContext2D对象

<svg>矢量图—— SVG 意为可缩放矢量图形(Scalable Vector Graphics)
——————————————————————————————————————————
绘制矩形实例:
<canvas id="mc">不支持canvas标签</canvas>
<script type="text/javascript">
// 获取canvas元素对应的DOM对象
var canvas=document.getElementById("mc");
// 获取在canvas上绘图的CanvasRenderingContext2D对象
var ctx=canvas.getContext("2d");
// 设置填充颜色
ctx.fillStyle="#F00";
// 绘制矩形
ctx.fillRect(40,50,60,70);
</script>
——————————————————————————————————————————

(6)新增多媒体支持
<audio src="音频路径" controls>不支持audio元素</dudio>
<video src="音频路径" controls>不支持video元素</video>

<source>可定义多个媒体资源
注:各个浏览器对音频的视频的支持格式不一,音频推荐WAV格式,视频推荐VP8
——————————————————————————————————————————
属性名 说明
src url地址
autoplay 装载完成自动播放
controls 显示播放控制条
loop 在此重复播放
width、height <video>元素 视频的宽高
——————————————————————————————————————————

4.HTML5新增通用属性
contentEditable 内容可编辑属性【truefalse】
designMode 设计模式属性【onoff】——JS
hidden 隐藏属性【truefalse】
spellcheck 查错属性【truefalse】
——————————————————————————————————————————

5.HTML5 修改:

文档类型申明:
<!doctype html>

<meta charset="utf-8">

重新定义的标签

dd:可以同details与figure一同使用,定义包含文本,dialog也可用

dt:可以同details与figure一同使用,汇总细节,dialog也可用

hr:表示主题结束,而不是水平线,虽然显示相同

menu:重新定义用户界面的菜单,配合commond或者menuitem使用

small:表示小字体,例如打印注释或者法律条款

strong:表示重要性而不是强调符号

原文地址:https://www.cnblogs.com/suola/p/8275775.html