初识 HTML5（一）-html教程-PHP中文网

首页

web前端

html教程

初识 HTML5（一）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 16, 2016 am 08:39 AM

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

1、H5的语义标签

　　1）:html 的定义，它的一个文档声明

　　语法跟html4 差不多，w3c 提供了一个网站可以用来检测html 的语法.

　　 https://validator.w3.org/

　　2）html 的语义标签，多了很多新的语义标签. 这些标签用起来跟div 和span 差不多。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示导航
</span><span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">header</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示页眉
</span><span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示页脚
</span><span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示区块
</span><span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><span style="color: #800000;">article</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示文章 如文章、评论、帖子、博客
</span><span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示侧边栏 如文章的侧栏
</span><span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示媒介内容分组 与 ul > li 做个比较
</span><span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">以上是常用到的</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><span style="color: #800000;">mark</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示标记 (带用“UI”，不怎么用)
</span><span style="color: #008080;">10</span> <span style="color: #0000ff;"><span style="color: #800000;">progress</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示进度 (带用“UI”，不怎么用)
</span><span style="color: #008080;">11</span> <span style="color: #0000ff;"><span style="color: #800000;">time</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示日期
</span><span style="color: #008080;">12</span> <span style="color: #0000ff;"><span style="color: #800000;">hgroup</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 标题列表 (据说已废弃)
</span><span style="color: #008080;">13</span> <span style="color: #0000ff;"><span style="color: #800000;">details</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><span style="color: #800000;">bdi</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><span style="color: #800000;">command</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><span style="color: #800000;">summary</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><span style="color: #800000;">rp</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"><span style="color: #800000;">rt</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"><span style="color: #800000;">ruby</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">尽量避免全局使用header、footer、aside等语义标签。</span><span style="color: #008000;">--></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

　　3）兼容处理

　　　　①在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素（inline）对待，将其转换成块元素（block）即可；

　　　　②在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.creatElement('tagName')创建的自定义标签

　　　　③实际开发中，我们采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

<span style="color: #008000;"><!--</span><span style="color: #008000;"> [if lte IE 8]>
    <script src="./js/html5shiv.min.js"></script>
<![endif]</span><span style="color: #008000;">--></span>

登录后复制

【注意】

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

html5shiv.min.js

　　2、表单

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

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

<span style="background-color: #00ffff;"><span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 2</span> <span style="color: #000000;">email    输入email格式
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">tel    手机号码
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">url    只能输入url格式
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">number    只能输入数字
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">search    搜索框
</span></span><span style="color: #008080;"> 7</span> <span style="color: #000000;">range    范围
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">color    拾色器
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">time    时间
</span><span style="color: #008080;">10</span> <span style="color: #000000;">date    日期 不是绝对的
</span><span style="color: #008080;">11</span> <span style="color: #000000;">datetime    时间日期
</span><span style="color: #008080;">12</span> <span style="color: #000000;">month    月份
</span><span style="color: #008080;">13</span> week    星期</span>

登录后复制

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

2）新增了一些标签

① 数据列表：

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

③用来做度量：

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

3）新增了一些属性:

<span style="color: #008080;">1</span> <span style="color: #000000;">placeholder 占位符
</span><span style="color: #008080;">2</span> <span style="color: #000000;">autofocus 获取焦点
</span><span style="color: #008080;">3</span> <span style="color: #000000;">multiple 文件上传多选或多个邮箱地址
</span><span style="color: #008080;">4</span> <span style="color: #000000;">autocomplete 自动完成，用于表单元素，也可用于表单自身
</span><span style="color: #008080;">5</span> <span style="color: #000000;">form 指定表单项属于哪个form，处理复杂表单时会需要
</span><span style="color: #008080;">6</span> novalidate 关闭验证，可用于<span style="color: #0000ff;"><span style="color: #800000;">form</span><span style="color: #0000ff;">></span><span style="color: #000000;">标签
</span><span style="color: #008080;">7</span> <span style="color: #000000;">required 验证条件，必填项
</span><span style="color: #008080;">8</span> <span style="color: #000000;">pattern 正则表达式 验证表单
</span><span style="color: #008080;">9</span> 手机号:<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="tel"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="tel"</span><span style="color: #ff0000;"> required</span><span style="color: #0000ff;">="required"</span><span style="color: #ff0000;">       pattern</span><span style="color: #0000ff;">="^(\+86)?1[3,5,8](\d{9})$"</span><span style="color: #0000ff;">></span></span></span>

登录后复制

【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 就可以

<span style="color: #008080;">1</span> <span style="color: #000000;">      //(操作dom 就是熟练dom   的api)
</span><span style="color: #008080;">2</span> <span style="color: #000000;">        //    (操作dom 的前期，要操作dom 必须先得到dom)
</span><span style="color: #008080;">3</span> <span style="color: #000000;">             document.getElementById("");
</span><span style="color: #008080;">4</span>              document.getElementsByTagName("");

登录后复制

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

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

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

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

【H5中】这个h5 在这个的基础上面进行了扩展，提供了一些更加强大的方法.

<span style="color: #000000;">//根据class 的值去获取
             document.getElementByClassName("")
// 这个里面支持css 里面的选择器
//这里返回的是第一个元素..
             document.querySelector(".username")
//获取的所有的,返回的是一个集合.
             document.querySelectorAll(".username>li");</span>

登录后复制

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

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

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

<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="zhangsan"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
// username=zhangsan</span></span>

登录后复制

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

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

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

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

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

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

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

1:html5 的声明

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

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

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