初识 HTML5

时间 2019-11-30

标签 html5 html 栏目 HTML5 繁體版

原文原文链接

初识 HTML5（一）

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

一、H5的语义标签

　　1）:html 的定义，它的一个文档声明 <!DOCTYPE html>

　　语法跟html4 差很少，w3c 提供了一个网站能够用来检测html 的语法.

　　 https://validator.w3.org/

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

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

　　3）兼容处理css

　　　　①在不支持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 库。html

html5shiv.min.jshtml5

　　二、表单java

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

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

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

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

2）新增了一些标签api

① 数据列表： <datalist></datalist>浏览器

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

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

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

3）新增了一些属性:

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

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

4）表单里面的事件

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

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

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

三、多媒体

　　1）早以前咱们作网页播放器

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

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

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

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

①ECMAScript

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

②BOM 浏览器对象模型

(咱们能够经过浏览器的自带的一些对象，能够调出浏览器的功能.)

③Dom 文档对象模型

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

1       //(操做dom 就是熟练dom   的api)
2         //    (操做dom 的前期，要操做dom 必须先获得dom)
3              document.getElementById("");
4              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 )

四、CSS3 与 JS 的区别

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

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

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

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