HTML5总结

最新推荐文章于 2022-07-14 16:13:55 发布

编码要得劲

最新推荐文章于 2022-07-14 16:13:55 发布

阅读量468

点赞数

文章标签： html5 总结前端

本文链接：https://blog.csdn.net/qq_41189709/article/details/96435941

版权

前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

HTML5的总结

新增的语义化结构标签
新增的属性与元素
音频和视频
canvas(画布)
svg(矢量图)
自定义属性
- data-name
网络监听接口
- - 网络状态改变时间(了解)
全屏API实现元素全屏效果(使用)
文件读取接口实现文件读取预览效果(使用)
拖拽接口实现常见拖拽效果(使用)
地理定位接口获取用户位置信息(使用)
Web存储接口实现数据的读写(使用)
应用缓存接口(了解)

新增的语义化结构标签

（1）header（头部）（2）nav（导航）（3）section（主体）（4）aside（侧边栏）（5）article （内容）（6）footer（底部）

新增的属性与元素

表单-type新增选项

email : 验证邮箱格式是否正确，其中必须包含"@",后面还必须有( . ) ;
url : 验证网址是否正确，其中必须包含" http:// ",否者将不发成功提交
tel ： 这个属性只在移动端起作用，表示当这个input获得焦点后，自动弹出键盘，并且这能输入数字
number : 表示这里只能出现数字，并且后面还有能调节数字的按钮
range : 一个滑块空间，有min max，可以获取value的值知道当前的值，然后做一些计算
date : 一个日期控件，默认的是年月日的类型，选取当前的时间，其相关的类型有：time 时分秒，这两个可以混合使用 datetime-local 日期和时间， month 月份控件 week 周控件
color : 选择颜色控件

表单新属性

placeholder : 提供默认提示内容，=“提示内容”
multiipe : 允许输入多个值，中间使用逗号隔开
autofocus : 自动获取焦点
from : 允许表单元素定义再表单标签以外，提交时一起提交
required : 验证当前元素值是否为空，为空不让提交表单
pattern : 使用正则表达式验证当前元素值是否匹配注意 - 并不能验证当前元素值是否为空
min和max验证当前元素值最小值或最大值, 一般适用于number、range等元素
minlength和maxlength : minlength - 验证当前元素值的最小长度,当再输入值时,允许输入小于指定值，挡在提交表单时,验证元素值最小长度，maxlength - 验证当前元素值的最大长度,当输入值时,长度不能大于指定值
validity 表单验证HTML5提供一种有效状态
，有效状态通过validityState对象获取到， validityState对象可通过validity属性得到
验证(有效)状态
validityState对象提供了一系列的有效状态通过这些有效状态,进行判断
注意： 所有验证状态必须配合上述的验证属性使用
验证状态 valid 作用 - 判断当前元素值是否正确
注意该状态返回true,表示验证成功
该状态返回false,表示验证失败
valueMissing
* 作用 - 判断当前元素值是否为空
* 用法 - 配合required属性使用
typeMismatch
* 作用 - 判断当前元素值的类型是否匹配
*用法 - 配合email、number、url等
patternMismatch
* 作用 - 判断当前元素值是否与指定正则表达式匹配
* 用法 - 配合pattern属性使用
tooLong
*作用 - 判断当前元素值的长度是否正确
*用法 - 配合maxlength属性
*注意使用maxlength属性后,实际不可能出现长度大于maxlength的值
* tooLong很难出现这种情况
rangeUnderflow
* 作用 - 判断当前元素值是否小于min属性值
* 用法 - 配合min属性
* 注意 - 并不能与max属性值进行比较
stepMismatch
* 作用 - 判断当前元素值是否与step设置相符
*用法 - 配合step使用
* 注意 - 并不能与min或max属性值进行比较
customError
*用法 - 配合setCustomValidity()方法
*如果使用该方法,该状态返回true
setCustomValidity()方法
* 作用 - 设置自定义的错误提示内容
* 问题 - 使用该方法设置错误信息
* 当输入正确时,调用该方法将信息设置为空("")
* 不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)

	<script> 
			var user=document.getElementById('user');
			user.onblur=function(){
				if(user.value!=""&&user.value!=null){
					user.setCustomValidity("");
				}else if(user.validity.valueMissing){
					user.setCustomValidity('不能为空')
				}
			}
			// user.onblur=function(){
			// 	if(user.validity.valueMissing){
			// 		console.log("用户名不能为空");
			// 	}
			// };
			var email=document.getElementById('email');
			email.onblur=function(){
				if(email.validity.typeMismatch){
					console.log('邮箱格式有误');
				}
			};
			var pwd=document.getElementById('pwd');
			pwd.onblur=function(){
				if(pwd.validity.patternMismatch){
					console.log('密码格式有误');
				}
			};
			var repwd=document.getElementById('repwd');
			repwd.onblur=function(){
				if(repwd.validity.tooLong){
					console.log('密码过长');
				}
			};
			var age=document.getElementById('age');
			age.onblur=function(){
				if(age.validity.rangeUnderflow){
					console.log('年龄过小');
				}
			};
			var score = document.getElementById("score");
			score.onblur = function(){
				if(score.validity.valid){
					console.log("成绩输入正确.");
				}else if(score.validity.stepMismatch){
					console.log("成绩输入不符.");
				}
			}
		</script>

表单的新属性

datalist 建立输入框与datalist关联，再输入框里添加list=“datalistID”,这样以后不仅可以输入，还可以选择列表，<datalist id= datalistID><option>选项一</option></datalist>
keygen 传递加密，不常用
output显示输出信息不常用

音频和视频

controls 音频播放器的控制面板，
autoplay 自动播放
loop 循环
width 宽度 height 高度

audio: 音频 ：
<audio srt="root" controls autoplay></audio>
video：视频：
poster : 当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面。默认显示当前视频的第一帧
preload : 预加载 auto 默认值，不加载 none 不加载 metadata 只加载视频的基本信息(不含视频)
source 在video里使用,因为不同的浏览器支持的视频格式不一样，所以可以准备多个格式的视频，让浏览器自动选择<source src='root' type='video/flv'>

canvas(画布)

再HTML中定义<canvas>
再JavaScript中获取画布元素
创建画布对象.getContext("2d"||"3d");
使用相对应的API，常用的有：
fillRect(x,y,width,height) - 绘制实心矩形
strokeRect(x,y,width,height) - 绘制空心矩形
fillText(text,x,y) - 绘制实心文字
strokeText(text,x,y) - 绘制空心文字
drawImage(img,x,y) - 按照图片原大小加载
clearRect(x,y,width,height) - 清除指定区域的矩形
fillStyle - 设置填充颜色
strokeStyle - 设置描边颜色
globalAlpha - 设置透明度(0-1)
createLinearGradient(x1,y1,x2,y2)：颜色线型渐变
createRadialGradient(x1,y1,r1,x2,y2,r2)：颜色扇形(射线)渐变
createPattern(img,type) - 平铺图片
clip() - 切割(按照创建路径使用)

svg(矢量图)

svg的特点：
绘制的图形可以被搜索引擎抓取
在放大的时候不会失真，
它支持事件绑定，
不依赖分辨率
支持大型渲染区域的程序(百度地图)

<svg>
       <rect x="" y="" width="" height="" />	// * 矩形元素
       <circle cx="" cy="" r="" />    //    * 圆形元素
       <ellipse cx="" cy="" rx="" ry="">   //  * 椭圆元素
       <line x1="" y1="" x2="" y2="" />    / * 直线元素
       <polyline points="">    //  * 折线元素
       <polygon points="" />    //     * 多边形元素

	//定义渐变效果
	<defs>
		<linearGradient x1="%" y1="%" x2="%" y2="%">    // 线性渐变
				   <stop offset="%" stop-color="color" />
	 	</linearGradient>
	 	//扇形渐变
	 	<radialGradient id="myrgrd" fx="50%" fy="50%" cx="50%" cy="50%" r="50%">
       		 <stop offset="0%" stop-color="red" stop-opacity="1"/>
       		 <stop offset="20%" stop-color="green" stop-opacity="1"/>
     		   <stop offset="100%" stop-color="blue" stop-opacity="1"/>
	    </radialGradient>
	</defs>
	<defs>
		//滤镜  -   高斯模糊
		//需要使用<filter>包裹起来 <feGaussianBlur> - 高斯模糊
        <filter id="gsmh">  // 固定写法 in="SourceGraphic"  stdDeviation - 定义模糊程度
            <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
        </filter>
    </defs>
</svg>

TWO.js库
- - - 支持SVG Canvas WebGL

* 如何使用two.js
     * 在HTML页面中引入two.js文件
     * 在HTML页面中定义容器(<div>)
     * 在javascript代码中
       * 获取HTML页面中的容器
       * 创建Two对象,将该对象添加到容器中
         new Two(params).appendTo(Element);
       * 使用two.js提供的API方法进行绘制
         * 利用two.js提供的方法,设置图形
	 * 利用update()方法进行绘制
   * 创建Two对象
     * 构造器 - new Two(params)
     * params参数 - 设置当前对象的信息
       * type - 设置当前使用的格式(Two.Types.svg)
         * svg - 默认值
	 * canvas
	 * webgl
       * width和height - 设置宽度和高度
       * fullscreen - 设置是否全屏
         * Boolean值,true表示全屏
     * 图形方法
       * makeLine() - 绘制线条
       * makeRectangle() - 绘制矩形
       * makeCircle() - 绘制圆形
       * makeEllipse() - 绘制椭圆
     * 动画方法
       * update() - 更新动画
       * play() - 添加动画(循环)
       * pause() - 删除动画
   * 设置绘制图形的样式
     * 调用Two对象的绘制方法绘制图形时,返回该图形对象
     * 通过该图形对象,设置相关属性值
   * 分组操作
     * Two.Group
   * 动画效果
     * bind(event,callback)方法 - 事件绑定
       * event - 绑定事件名称
         * update - 对应update()方法的作用
	 * 所有的DOM事件都可以绑定
       * callback - 事件处理函数

自定义属性

data-name

规范

以data-开头
data-后面必须至少有一个字符，多个单词用 - 连接

建议

名称中应该使用小写，不要包含任何的大写字符
名称中不要有任何的特殊符号

获取自定义属性值，将data- 后面的单词使用camel命名法连接，必须使用camel方法取值，否者有可能无法取到值

<p data-hello-name="word"></p>

var p=$("p");
//取值
p.dataset["helloName"]    //==word

网络监听接口

网络状态改变时间(了解)

1.ononline 网络连接成功触发事件
2.onoffline 网络断开时触发事件

window.addEventListener("ononline",function(){})
window.addEventListener("onoffline",function(){})

全屏API实现元素全屏效果(使用)

主要方法和属性：
注意不同浏览器需要添加不同的前缀
chrome: webkit firefox: moz ie: ms opera: o

requestFullScreen()：开启全屏显示

$("btn").onclick=function(){ div.webkitRequestFullScreen();}

cancelFullScreen(): 退出全屏显示:也加前缀，在不同的浏览器下，退出全屏只能使用docunment来实现

$("btn").onclick=function(){ div.webkitCanceltFullScreen();}

fullScreenElement: 是否是全屏状态，也只能是使用document来进行判断
**注意：**只有兼容火狐时才需要写成Full ScreenElement

$("btn").onclick=function(){ div.webkitFullscreenElement();}

文件读取接口实现文件读取预览效果(使用)

FileReader: 读取文件内容
- .readAsText():读取文本文件(可以使用txt打开的文件)，返回文本字符串，默认编码是UTF-8
- .readAsBinaryString():读取任意类型的文件，二进制字符串，这个方法通常不是用来读取文件.展示个用户看，而是存储文件。例如读取文件的内容，获取二进制数据，传递给后台，后台接受数据之后，再将数据存储
- .readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL, dataURL是一种将文件嵌入到文档的方案

拖拽接口实现常见拖拽效果(使用)

为了使元素可拖动，需要把 draggable 属性设置为 true ：
拖拽元素事件：
(常用)       (on)dragstart(开始拖拽是触发该事件)
         (on)drag - 当鼠标拖放过程中,类似于mousemove事件,该事件在拖拽的过程中会一直触发
         dragend- 当鼠标结束拖放时被触发
目标元素事件：
         dragenter - 当鼠标拖放进入到目标元素内被触发
(常用)       dragover - 当鼠标到达目前元素被触发 - 进行拖放需要阻止事件的默认行为，要为该事件添加event.preventDefault();
(常用)       drop - 当鼠标松开时被触发
         dragleave - 当鼠标拖放离开目标元素被触发

dataTransfer对象，使用event调 - 类似于window系统的剪切板的功能
作用 - 可以将源元素的信息(数据),存储在这里，将存储在该对象的源元素信息,提供给目标元素
该对象的方法：
        - setData() - 设置(源元素的)数据，一般在源元素的事件里使用
        -getData() - 获取设置的数据，一般在目标元素的事件中使用
        -clearData() - 清除(设置的)数据,防止内存浪费
        -setDragImage()方法 - 修改拖放过程中,鼠标跟随的图片效果(实际操作中,该方法几乎不用)

地理定位接口获取用户位置信息(使用)

使用百度地图的接口，需要联网才能实现

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
//密钥需要区百度地图里申请

在HTML中定义一个显示地图的容器<div>
创建一个Map对象

<script>
var map=new BMap.Map("容器的ID")；
map.centerAndZoom(point);   //初始化地址
</script>

百度地图的组件：
   map.centerAndZoom() - 初始化地图
   map.addControl() - 添加控件
   mao.addOverlay() - 添加标注(标记)
Control 控件类
    ScaleControl - 比例尺控件，在地图上显示一个比例尺
    NavigationContro; - 缩放控件，在地图上显示一个放大缩小移动的按钮

//添加缩放比例尺控件  -  默认在左下角，设置参数控制其所在位置  BMAP_ANCHOR_+...
    var scale=new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});
    //将控件添加至地图中
    map.addControl(scale);

    //创建一个平移缩放控件  -  该控件默认位置在右上角，可设置位置，与比例尺设置位置方法相同
    var nav=new BMap.NavigationControl();
    map.addControl(nav);

Overlay 遮盖物类
Marker - 在地图上显示一个标注

    //Overlay类 - 地图的遮盖物
    //Marker - 表示地图上一个图像标注
    // 构造器 - Marker(point)
    //            point - 标注的坐标值
    //Map对象添加遮盖物
     var marker=new BMap.Marker(Point);
     map.addOverlay(marker);

太多了，感兴趣的话可以去http://lbsyun.baidu.com/jsdemo.htm#a1_2查看

Web存储接口实现数据的读写(使用)

HTML5存储系统
* localStorage(本地存储) - 替代Cookie
* sessionStorage(会话|临时存储) - 替代Session(类似于内存)
它们都有以下方法：

setItem(key,value)方法 - 设置或新增数据
getItem(key) - 获取数据
key(index) - 根据索引值获取key值
removeItem(key) - 删除数据
clear() - 将数据清空
length - 获取数据的个数

应用缓存接口(了解)

首先必须<html lang=“en” manifest=“app.appcache”>添加manifest属性，app.appcache外部文件，在这个外部文件中写你需要缓存的文件配置
在app.appcache文件中的格式

CACHE MANIFEST
# 使用#来注释，注意： 在这个文件中第一行必须是  CACHE MANIFEST

#需要缓存的文件，就写在这下面
CACHE:
/theme.css
/logo.gif
/main.js
*
# * 表示所有文件

#下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.php
*

#下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 two.css 替代 three.css 目录中的所有文件，中间使用空格隔开
FALLBACK:
three.css two.css