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. MySQL 中while loop repeat 的基本用法

    -- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和 /* while循环语法: while 条件 DO 循 ...

  2. 3.初识Cron表达式

    Cron: 计划任务,是任务在约定的时间执行已经计划好的工作,这是表面的意思.在Linux中,我们经常用到 cron 服务器来完成这项工作.cron服务器可以根据配置文件约定的时间来执行特定的作务. ...

  3. 提高篇（1）：RMQ问题与ST表

    RMQ是英文Range Minimum/Maximum Query的缩写,是询问某个区间内的最值,这里讲一种解法:ST算法 ST算法通常用在要多次(10^6级别)询问区间最值的问题中,相比于线段树,它 ...

  4. 【例题收藏】◇例题·III◇ 木と整数 / Integers on a Tree

    ◇例题·III◇ 木と整数 / Integers on a Tree 只需要一个美妙的转换,这道题就会变得无比美妙…… 来源:+AtCoder 2148(ARC-063 E)+ ◆ 题目大意 给定一棵 ...

  5. Mysql查看锁等信息SQL语句

    查看锁等信息,包括锁信息: select "HOLD:",ph.id h_processid,trh.trx_id h_trx_id,trh.trx_started h_start ...

  6. 路由器基础配置之单臂路由实现vlan间通信

    我们将以上面的拓扑图开始进行配置,目的为设置单臂路由实现vlan间通信,设置4个vlan,pc0,1,2为vlan10 pc3,4,5为vlan20:pc6,7,8为vlan30:server0,1为 ...

  7. CentOS 7.4使用yum源安装MySQL5.7

    从CentOS 7.0发布以来,yum源中开始使用Mariadb来代替MySQL的安装.即使你输入的是yum install -y mysql , 显示的也是Mariadb的安装内容.使用源代码进行编 ...

  8. vue数据绑定html

    html标签的纯文本显示/被当做html标签处理: 1)使用两个大括号时,假如字符串内容是html标签,那么不会被转义: 2)使用三个大括号时,字符串内的html标签会被直接转义 a.两个大括号: & ...

  9. VUE前端无法启动

    cd 到client中,使用npm run dev ,一直卡着也不报错,启动不了项目 可以直接使用 ,需要进入root目录进行 cnpm install npm -g

  10. [Codeforces958E2]Guard Duty (medium)(区间DP)

    Description 题目链接 Solution 可以把题目转化一下模型,将间隔取出来,转化为N-1个数,限制不能取相邻两个数,求取K个数的最小价值 设DP[i][j]表示前i个数取j个最大价值(第 ...