H5其实就是H4的一个增强版本，我们在利用H5进行网页的构造会更简便，标签语义更简洁明了。首先，我们要理解HTML4，它是HTML的标记+css2+JavaScript的一些基本应用，简言之，就是API+语法；而H5无非就是在原先的基础上面提供了一些新的功能。

1、H5的语义标签
　　1）:html 的定义 ，它的一个文档声明 <!DOCTYPE html>
　　 语法跟html4 差不多，w3c 提供了一个网站可以用来检测html 的语法.
　　2）html 的语义标签，多了很多新的语义标签. 这些标签用起来跟div 和span 差不多。
 <nav> 表示导航

 <header> 表示页眉

 <footer> 表示页脚

 <section> 表示区块

 <article> 表示文章 如文章、评论、帖子、博客

 <aside> 表示侧边栏 如文章的侧栏

 <figure> 表示媒介内容分组 与 ul > li 做个比较

 <!--以上是常用到的-->

 <mark> 表示标记 (带用“UI”，不怎么用)

 <progress> 表示进度 (带用“UI”，不怎么用)

 <time> 表示日期

 <hgroup> 标题列表 (据说已废弃)

 <details>

 <bdi>

 <command>

 <summary>

 <rp>

 <rt>

 <ruby>

 <!--尽量避免全局使用header、footer、aside等语义标签。-->

　　3）兼容处理

　　　　①在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素（inline）对待，将其转换成块元素（block）即可；
　　　　②在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.creatElement('tagName')创建的自定义标签
　　　　③实际开发中，我们采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!-- [if lte IE 8]>

    <script src="./js/html5shiv.min.js"></script>

<![endif]-->

【注意】<footer></footer> 这个是html5 里面的标记，相当于div，只不过有语义；然后放在ie6 里面，它会把这个footer 这个不认识的标记当做行内元素来处理；所以我们就需要屏蔽兼容性，这个时候我们就需要导入一个js 库。

html5shiv.min.js

　　2、表单

——form 是用来声明表单. input 是用来表示表单项，type 是用来控制表单项的类型.（html5 在表单上面进行一些增强）

1）输入类型（表单类型、表单元素、表单属性、表单事件）

 <input type="text" />

 email    输入email格式

 tel    手机号码

 url    只能输入url格式

 number    只能输入数字

 search    搜索框

 range    范围

 color    拾色器

 time    时间

 date    日期 不是绝对的

 datetime    时间日期

 month    月份

 week    星期

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用

2）新增了一些标签

① 数据列表：  <datalist></datalist>

②用来做安全的表单提交数据传输的安全：<keygen></keygen>

③用来做度量： <meter></meter>

④想表单里面输出，没什么作用：<outputer><outputer>

3）新增了一些属性:

 placeholder 占位符

 autofocus 获取焦点

 multiple 文件上传多选或多个邮箱地址

 autocomplete 自动完成，用于表单元素，也可用于表单自身

 form 指定表单项属于哪个form，处理复杂表单时会需要

 novalidate 关闭验证，可用于<form>标签

 required 验证条件，必填项

 pattern 正则表达式 验证表单

 手机号:<input type="tel" name="tel" required="required"       pattern="^(\+86)?1[3,5,8](\d{9})$">

【PS】我们用新增的这些属性，可以来完成我们之前要使用js 才能实现的效果.

4）表单里面的事件

①监听文本框的数据的输入： oninput 事件

②当验证不通过的时候触发： oninvalid

③进度这个标记，我们使用 progress

3、多媒体

　　1）早之前我们做网页播放器

①我们是通过js 去调用windows 里面自带的一个播放器  media player  操作系统捆绑的

②adobe 的这样的一个flash ，基本上面每个用户电脑上面都会安装.

③后期我们出现了一个东西，每个电脑上面都可以装一个快播，js 调用快播.

【javascript 里面的内容】  javascript 分为三部分：

①ECMAScript

(定义了js 的语法，变量，语句)

②BOM 浏览器对象模型

(我们可以通过浏览器的自带的一些对象，可以调出浏览器的功能.)

③Dom  文档对象模型

我首先有一个html 文件，我通过浏览器去打开这个html 文件；浏览器会去解析这个html 文件，把这个文件解析之后放在一个document 对象里面； 我以后要操作html 里面的内容，我就直接操作document 就可以

       //(操作dom 就是熟练dom   的api)

         //    (操作dom 的前期，要操作dom 必须先得到dom)

              document.getElementById("");

              document.getElementsByTagName("");

2） html5 可以提供一些标签来完成播放.

我们做这种音频文件，以及视频文件，最麻烦地方就是解码【音频文件，以及视频文件，都有格式，各种各样的格式】

1:假设你网站的视频资源是自己产生的

2:假设网站的资源是用户上传上去的，我们需要在用户上传的时候对这个资源进行转码.

【H5中】这个h5 在这个的基础上面进行了扩展，提供了一些更加强大的方法.
//根据class 的值去获取

             document.getElementByClassName("")

// 这个里面支持css 里面的选择器

//这里返回的是第一个元素..

             document.querySelector(".username")

//获取的所有的,返回的是一个集合.

             document.querySelectorAll(".username>li");

【表单的总结】我现在有一个表单，定义属性，什么时候id ，什么是时候使用name，什么时候使用class

① 我为一个元素加id 的目的，为了js 方便去获取这个元素

②name ：如果我要跟服务器进行交互，服务器到时候要获取客户端表单提交的数据.它是根据name 的值去获取

<input type="text" name="username" value="zhangsan">

// username=zhangsan

　③class 一般，如果我要通过样式去批量控制元素，我就为元素添加class 属性.

我们以后做案例：第一步，我要把页面的基本布局画好（html,css）

第二步：分析功能，根据功能找到对应的事件

第三步：事件出来了，方法就出来了

【ps】我看要完成什么功能，一般情况下我们都是操作dom； 获取dom，操作dom （api 操作.）；即使调试,一个案例，都是调出来的

【小结】  html5 概念：就是在html4 上面的一个增强版本。在 标签，css，js 上面的一个增强。

标签：出现了一些新的比较具有颠覆性的标记.

1:html5 的声明

2:语义标签(大家当做div ，或者span 来理解就可以.)

3:兼容性处理，需要导入一个js 库.

4:表单，我们传统的表单，难以完成比较复杂的页面应用

4.1：新增了一些类型 type=""

4.2: 新增了一些标签  datalist

4.3: 新增了属性  (文档)

4.4：事件  oninput

小案例：学生档案，案例.

多媒体处理:

audio  针对mp3 音频

video   针对视频的

解码；做客户端不用处理.

dom 的处理

新增了一些api ，来让我们去获取页面上面的内容.

document.getElementByTagName

document.querySelector();

document.querySelectorAll();

新增了属性操作:

document.getElementById("").classList.add();

document.getElementById("").classList.remove();

document.getElementById("").classList.toggle();

document.getElementById("").classList.contains();

自定义属性：

我可以为元素自定义属性 我们是在元素上面加  data-itcast-name="";

遵守驼峰命名法则

tabs 选项卡切换.(就是属性api )

4、CSS3 与 JS 的区别

1）css:出现了css3，支持3d 效果.

　　js:定位（直接在网站里面可以嵌入地图.），重力感应

2）css3 肯定可以使页面的显示更加的丰富效果

　　javascript 新增了一些api，定位（百度地图），重力感应  js 的一些对象

初识 HTML5（一）的更多相关文章

  1. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  2. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  3. 初识 Html5

    1.1认识HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...

  4. 初识html5 File API实现带有进度提示的文件上传

    Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...

  5. H TML5 之 （1） 初识HTML5

    新特性 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foo ...

  6. 初识html5——试试博文编辑器

    1.html5简介 HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处 ...

  7. 【HTML5】初识HTML5

    HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. HTML5 是下 ...

  8. HTML5（一）初识HTML5

    HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. 目的是为了在移动设备上支持多媒体. HTML5 的改进 完全支持 CSS3 Video 和 ...

  9. 初识HTML5

    1, 新增canvas标签,允许通过JS在客户端完成2D绘图 2, 新增Video/Audio标签,能取代flash实现媒体播放 3, 新增本地存储功能:localStorage/sessionSto ...

随机推荐

  1. vim实用配置

    "编码set encoding=utf-8"显示行号set number"语法高亮度显示syntax on "自动缩进set autoindent"t ...

  2. 九九乘法表（Python实现）

    a = 1 #while实现 while a: b = 1 while b: print(str(b)+'*'+str(a),end='=') print(a*b,end=' ') if b == a ...

  3. python的**和*

    1.**两个乘号就是乘方,比如2**4,结果就是2的4次方,结果是16一个乘号*,如果操作数是两个数字,就是这两个数字相乘,如2*4,结果为8*如果是字符串.列表.元组与一个整数N相乘,返回一个其所有 ...

  4. NestedScrollView和RecyclerView使用，并设置间距

    NestedScrollView和RecyclerView使用,并设置间距: 效果图如下: 1.NestedScrollView 和RecyclerView嵌套问题(类似ScrollView 和lis ...

  5. ES6初识-模块化

    export let A=123; export function test(){ console.log('test'); } export class Hello(){ test(){ conso ...

  6. C# Newtonsoft.Json 解析多嵌套json 进行反序列化

    [ { ", "time": "2016-09-09 12:23:33", ", "freeShipping": tru ...

  7. 为什么 redis 单线程却能支撑高并发

    redis 和 memcached 有什么区别?redis 的线程模型是什么?为什么 redis 单线程却能支撑高并发? 这个是问 redis 的时候,最基本的问题吧,redis 最基本的一个内部原理 ...

  8. Ubuntu下安装libpcap+测试安装

    1.从ftp://ftp.gnu.org/gnu/下载flex.bison.GNU M4.libpcap安装包,具体的链接分别如下: flex下载:http://flex.sourceforge.ne ...

  9. python入门基本知识

    1. 什么是语言 语言是一个事物与另外一个事物沟通的介质. python则是人(程序员)与计算机沟通的介质. 2. 什么是编程 编程就是程序员将自己想要让计算机做的事情用编程语言翻译出来写到一系列的文 ...

  10. C语言字符篇（四）字符串查找函数

      #include <string.h>   char *strchr(const char *s, int c);   The strchr() function returns a ...