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="1\d{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 内容可编辑属性【true\false】
designMode 设计模式属性【on\off】——JS
hidden 隐藏属性【true\false】
spellcheck 查错属性【true\false】
——————————————————————————————————————————

5.HTML5 修改：

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

<meta charset="utf-8">

重新定义的标签

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

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

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

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

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

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

第四章 HTML5概述的更多相关文章

  1. 第1章 HTML5 概述

    第 1 章  HTML5 概述 学习要点: 1.HTML5 的历史 2.HTML5 的功能 3.HTML5 的特点 4.课程学习问题 HTML5 是继 HTML4.01 和 XHTML1.0 之后的超 ...

  2. 第 1 章 HTML5 概述

    学习要点: 1.HTML5 的历史 2.HTML5 的功能 3.HTML5 的特点 4.课程学习问题 主讲教师:李炎恢 HTML5 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的 ...

  3. 第四章 CSS3概述

    1.CSS3新增常用选择器(1)结构性伪类选择器:root 文档根元素 :nth-child(n) 第N个子元素"first-child 第一个元素 :kast-child 最后一个子元素 ...

  4. 第四章——SQLServer2008-2012资源及性能监控（1）

    原文:第四章--SQLServer2008-2012资源及性能监控(1) 性能优化的第一步是发现问题,而发现问题通常又有两类:突发问题的侦测和常规问题的侦测,对于常规问题的侦测,通常需要有一个长效的性 ...

  5. JavaScript高级程序设计：第十四章

    第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继 ...

  6. [uboot] （第四章）uboot流程——uboot编译流程

    http://blog.csdn.net/ooonebook/article/details/53000893 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...

  7. HTML第十四章总结 HTML forms

    第十四章主要讲了 html forms,通过 forms,我们可以得到 customers' feedback,使得网页能够 interactive,本章的内容分为三个部分: forms 的 elem ...

  8. 《Java程序设计》第四章-认识对象

    20145221<Java程序设计>第四章-认识对象 总结 教材学习内容总结 类与对象 定义:对象是Java语言中重要的组成部分,之前学过的C语言是面向过程的,而Java主要是面向对象的. ...

  9. [OpenGL红宝书]第一章 OpenGL概述

    第一章 OpenGL概述 标签(空格分隔): OpenGL 第一章 OpenGL概述 1 什么是OpenGL 2 初识OpenGL程序 3 OpenGL语法 4 OpenGL渲染管线 41 准备向Op ...

随机推荐

  1. Exception 04 : java.lang.ClassNotFoundException: Could not load requested class : org.hsqldb.jdbcDriver

    异常详细信息 org.hibernate.boot.registry.classloading.spi.ClassLoadingException: Unable to load class [org ...

  2. 超级有用的15个mysqlbinlog命令

    在MySQL或MariaDB中,任意时间对数据库所做的修改,都会被记录到日志文件中.例如,当你添加了一个新的表,或者更新了一条数据,这些事件都会被存储到二进制日志文件中.二进制日志文件在MySQL主从 ...

  3. ASP.NET MVC 系统过滤器、自定义过滤器

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...

  4. “段错误（segment fault）”、“非法操作，该内存地址不能read/write” 非法指针解引用造成的错误。

    小结: 1. “段错误(segment fault)”.“非法操作,该内存地址不能read/write”非法指针解引用造成的错误. <程序员的自我修养 : 链接.装载与库> Q 我写的程序 ...

  5. MySQL transaction

    MySQL transaction(数据库的事务) 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作. 要么完全执行,要么完全地不执行. ACID 事务 ...

  6. kafka读书笔记《kafka权威指南》2018

    1.有了分区,可以多个client消费一个topic,有了分区,可以将一个topic 分散在多个broker 2.kafka通过复制实现可靠,通过横向扩展提高性能(如增加分区.客户端.增加broker ...

  7. Shell基本介绍和使用

    Shell 教程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个 ...

  8. oracle查看哪些表被锁

    select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects b where a ...

  9. runtime实现weak属性

    我们可以自己创建一个 A 类,然后在“宿主对象”和“值对象”建立 weak 关系的时候,偷偷地创建一个 A 类的实例 a,绑定在 “值对象” 上. 当“值对象”销毁后,这个 a 也会被销毁.而 A 类 ...

  10. MySQL数据库改名的三种方法

    前不久去面试,被问到Innodb引擎的表如何改数据库名,当时我也只回答了MyISAM改如何操作,被一些细节问题打败,真是操蛋. 如果表示MyISAM那么可以直接去到数据库目录mv就可以. Innodb ...