HTML5

我还想吃会

于 2024-08-05 11:49:34 发布

阅读量330

点赞数 3

文章标签： html html5

本文链接：https://blog.csdn.net/2202_75315729/article/details/140923077

版权

01-HTML5

1前言

1.1认识HTML5

前面我们学习的html是什么?

Html4.0

网页开发：html 结构 4.0

Css ->样式 2.0

Js 行为用户交互

HTML5 是html4.0升级版

结构 Html5、样式css3、行为：API都有所

增强

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些JavascriptAPI，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5, CSS3, Javascript, API在内的一套技术组合

H5范称

HTMl + CSS3 + JS

优点：

http://www.intertid.com/school/2014/595568.shtml

1.2 语法规范

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

见代码实例

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<P>我是一段文本，我闭合标签用了大写

</P>

</body>

</html>

特点：

1、更简洁

2、更宽松

单标签不用写关闭特号

双标签省略结束标签

html、head、body、colgroup、tbody可以完全省略

实际开发中应规范书写，不建议太随意!

2语义标签

语义标签对于我们并不陌生，如<p>表示一个段落、

<ul>表示一个无序列表<h1>~<h6>表示一系列标题等，

在此基础上HTML5增加了大量更有意义的语义标签，更

有利于搜索引擎或辅助设备理解HTML页面

传统的做法我们或许通过增加类名如class=header"、class="footen”，使HTML页面具有语义性，但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。

传统网页布局：

</div>

<!“主体部分 -->

</div>

H5 经典网页布局：

<!-- 头部>

</header>

<!-- 文章想L

</div>

2.1常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

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

博客

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

<figure> 表示媒介内容分组与 ul > li

做个比较

<mark> 表示标记（文本有背景颜色，表示标

记）

<progress> 表示进度

<time> 表示日期( 包裹时间）

本质上新语义标签与<div>、<span>没有区别，R 是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav“> 相当于<nav>。不要好奇，它只是一个标签!

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

2.2兼容处理

（我们在测试ie的兼容的时候，有一个叫做ietest的

软件，这个软件可以模拟ieb-ie11)

在不支持HTML5新标签的浏览器里，会将这些新

的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(’tagName)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(’tagName')来创建一遍，这样E低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测E浏览器的版本来加载三方的一个JS库来解决兼容问题。

<!--[if lte IE 8]>

src="./js/html5shiv.min.is">

</script>

<! [endif]-->

3表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色

器、日期时间组件等，使表单处理更加高效。此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。

3.1输入类型（表单类型，表单元素，

表单属性，表单事件）

email 输入email格式

tel 手机号码

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围滑动条

color 拾色器

time 时间

date 日期不是绝对的

时间日期

month 月份

week 星期

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

3.2表单元素（标签）

智能表单（输入指定文本提供备选）

<datalist> 数据列表

与input 配合使用

<input type="text" list="car

<datalist id="car

</datalist>

3.3表单层性

placeholder 占位符

autofocus 获取焦点（打开页面焦点自动锁定

在当前目标）

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

autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off) 需要放在表单内，同时加上name属性，同时成功提交，默认是autocomplete="on” 关闭

autocomplete="off"

（记录上次输入的信息，e-mail默认不会记录）

form 指定表单项属于哪个form，处理复杂表

单时会需要

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

（写在form,不会对表单进行验证）

required 必填项（不填写无法提交表单）

pattern 正则表达式验证表单

手机号:<input type="tel" name="tel"

required="required'"

pattern="^(\+86)?1[3, 5, 8](\df9子)$">

<form action="" autocomplete="on'"

id="form">

autofocus: <input

type="text" autocomplete="on'"

name="autofocus" autofocus

required>

</label>

placeholder:<input

type="text" pattern="\D+"placeholder="这是一个占位符"novalidate>

</label>

multiple: <input

type="file" multiple>

</label>

<input type="submit"

value="提交">

</fieldset>

</form>

表单外的一个元素：

<input type="text" name="outer"

form="form">

</label>

3.4表单事件

oninput 用户输入内容时触发，可用于移动端输入字

数统计(js直接调用）

oninvalid验证不通过时触发(is直接调用）

<form action="" autocomplete="on'"

id="form">

oninput: <input

type="email" id="input">

</label>

<input type="submit

value="提交">

</fieldset>

</form>

var input =

document.getElementById("input");

input.oninvalid = function ()

this.setCustomValidity("请输

入正确的邮箱地址"）

子

</script>

4多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

Media palyer

此章节学习目的，了解如何通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。

4.1 音顿

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单，如下图所示

<audio src="./music/xxx.mp3"></audio>

并且可以通过附加属性可以更友好控制音频的播放，t如：

autoplay 如果出现该属性，则视频在就绪后马上播放controls如果出现该属性，则向用户显示控件，比如播放按钮。

loop 循环播放

preload 预加载同时设置autoplay时些属性失效

多测览器支持的方案

<!--通过source标签指定多格式音频文

件-->

<source src="./music/xxx.mp3"><source src="./music/xxx.wav"><source src="./music/xxx.ogg">您的浏览器不支持HTML音频播放功能

</audio>

4.2视频

HTML5通过<video>标签来解决音频播放的问题。

同音频播放一样，<video>使用也相当简单，如下图

<video src="./video/movie.mp4"controls="controls"></video>

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

preload预加载，同时设置了autoplay, 此属性将失效

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不

一样的

多测览器支持的方案

<!--通过source标签指定多格式视频文

件-->

<source src="./video/xxx.ogg"><source src="./video/xxx.mp4">您的浏览器不支持HTML视频播放功能

</video>

5 D0M扩展

5.1获取元素

1、document.getElementsBuClassName(class')通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘#box')通过CSS选择器获取元素，特合匹配条件的第1个元素。

3、document.querySelectorAll('selector')通过CSS选择器获取元素，以类数组形式存在。

5.2类名操作

1、Node.classlist.add(’class)添加class

2、Node.classlist.remove('class')移除class

3、Node.classlist.toggle('class')切换class，有则移除，

无则添加

4、Node.classlist.contains(’class)检测是否存在class Node指一个有效的0OM节点，是一个通称。

5.3自定义属性

在HTML5中我们可以自定义属性，其格式如下data-

*=”，例如

data-info=“我是自定义属性”，通过Node.datasett'info']我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时，则需要以驼峰格式才能正确获取

data-my-name="itcast”，获取Node.dataset['myName']

6新增API

6.1多媒体

方法:load()加载、play()播放、pause) 暂停

属性：currentTime 视频播放的当前进度（播放的当前时

间）

duration:视频的总时间paused:视频播放的状态.

事件：

oncanplay:事件在用户可以开始播放视频/音频( audio/video)时触发。

ontimeupdate:通过该事件来报告当前的播放进度

（播放时一直触发）

（当拖动进度条时触发该事件bncanplay

onended:播放完时触发

当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。吃会当音频/视频处于加载过程中时，会依次发生以下事件：

loadstart

durationchange

loadedmetadata

loadeddata

progress

canplay

canplaythrough

全屏：video.webkitRequestFullScreen();

var btn = document.querySelector(".switch")

var video = document.querySelector("video")

var totalTime = document.querySelector(".total-time")

var currTime = document.querySelector(".curr-time")

var currPro = document.querySelector(".curr-progress")

var extend = document.querySelector(".extend")

btn.onclick = function() {

if (video.paused) {

video.play()

this.classList.remove("icon-play")

this.classList.add("icon-pause")

} else {

video.pause()

this.classList.remove("icon-pause")

this.classList.add("icon-play")

}

//当视频可以播放时

video.oncanplay = function() {

time = video.duration //获取视频时长

console.log(time);

var h = Math.floor(time / 3600)

var m = Math.floor(time % 3600 / 60)

var s = Math.floor(time % 60)

h = h > 10 ? h : "0" + h

m = m > 10 ? h : "0" + m

s = s > 10 ? h : "0" + s

totalTime.innerHTML = h + ":" + m + ":" + s

}

//当视频播放时

video.ontimeupdate = function() {

var cTime = video.currentTime

var h = Math.floor(cTime / 3600)

var m = Math.floor(cTime % 3600 / 60)

var s = Math.floor(cTime % 60)

h = h > 10 ? h : "0" + h

m = m > 10 ? h : "0" + m

s = s > 10 ? h : "0" + s

var value = cTime / time

console.log(value);

currTime.innerHTML = h + ":" + m + ":" + s

currPro.style.width = value * 100 + "%"

}

extend.onclick = function() {

console.log(1)

video.webkitRequestFullScreen()

}

6.2拖搜

在HTML5的规范中，我们可以通过为元素增加

draggable="true”来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

6.2.1拖搜元素

页面中设置了draqgable="true"属性的元素

6.2.2目标元素

页面中任何一个元素都可以成为目标元素

6.2.3事件监听

拖搜元素

ondrag 应用于拖搜元素，整个拖拽过程都会调用

ondragstart 应用于拖搜元素，当拖搜开始时调用

ondragleave 应用于拖搜元素，当鼠标离开拖拽元素

时调用

ondragend 应用于拖搜元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖搜元素进入时调

用

ondragover 应用于目标元素，当停留在目标元素上时调

用

preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。

6.3历史

提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application, 可以无刷新改变网页内容。

旧版本浏览器..

history.back) 回退

history.forward()前进

6.4 Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以

document.cookie来进行存储的，但是由于其存储大小只有k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

Storage 存储

window.sessionStorage

window.localStorage

（向本地保存数据，有可能在浏览器内存里面，有可能在

硬盘上面.）

6.4.1 特性

1、设置、读取方便

2、容量较大，sessionStorage约5M、localStorage约

20M

3、只能存储字符串，可以将对象JSON.stringify()编码

后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效，除非手动刪除

2、可以多窗口共享

方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内

容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

我还想吃会

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5

html5笔记
复制链接

扫一扫