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. 不使用data-ng-app指令的表达式

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. 键盘遮挡控件(textfield/textview.......)

    采用的是通知的常规方式 // 解决键盘遮挡问题//选择didShow是因为需要键盘的高度//选择willHide是因为视图frame重置需要优先于键盘消失,否则表现得不连贯 [[NSNotificat ...

  3. 使用Git操作码云

    一.安装并配置 .安装git 下载地址: 官方网站:https://git-for-windows.github.io/ 国内镜像:https://pan.baidu.com/s/1kU5OCOB#l ...

  4. mysql指定id默认第一

    有个需求 家庭创建人要默认排第一,刚开始用加入家庭的时间排序可以  好简单, 后来加了一个需求 家庭创建人可以转移,结果按时间排序就不行了,又不想去写循环重新排序 就各种百度, 等于就是指定ID排最后 ...

  5. 01U盘PE系统制作方法

    1. 需要的工具和安装包:WinPE镜像文件 WinPE_x86.iso .已制作好的另一个启动盘(下文以映像总裁为例,当然也可以使用大白菜.U启动等) . 电脑.准备制作PE系统的空U盘 2. 还原 ...

  6. 有一段<script>代码，效果是点击<p>就会弹出信息，但是有的<p>点击会有效果，有的没有效果

    问题:有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果 解决: 页面代码是至上而下执行的,如果你的这个标签在< ...

  7. 特殊sql查询方法实例

    一.if条件查询:SELECT sum(if(is_buy > 0 ,1,0)) AS friend_count_all_cj, sum(if(is_buy = 0 ,1,0)) AS frie ...

  8. 第二章习题 C++

    1.编写一个程序,显示您的姓名和地址. #include<iostream> using namespace std; int main() { ]; cout << &quo ...

  9. 使用python制作神经网络——搭建框架

    一.神经网络的大体结构可分为三个函数,分别如下: 1.初始化函数 设定输入层节点,隐藏层节点和输出层节点的数量. 2.训练 学习给定训练集样本后,优化权重. 3.查询 给定输入,从输出节点给出答案 所 ...

  10. python基础之面向对象编程介绍、类和对象

    面向对象变成介绍 面向过程编程 核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西.主要应用在一旦完成很少修改的地方,如linux ...