HTML5教程

# HTML基础

https://www.bilibili.com/video/av51518146 (opens new window)

让radio单选框只能选一个-------name相同时，只能选一个

		<label for="male">
			<input type="radio" id="male" value="男" name="sex">男
		</label>
		<label for="female">
			<input type="radio" id="female" value="女" name="sex">女
		</label>

1
2
3
4
5
6

label中 for和input中的name相同，可以点击文字选中

	<label for="agree">
		<input type="checkbox" name="" id="agree" value="" />同意协议
	</label>

1
2
3

# 视口viewport

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

# 新建html5

快捷键 html:5 + tab键或者！+ tab键

# 语义标签

nav 导航

header 页眉

footer 页脚

main 文档主要内容

acticle 文章

aside 主题内容之外

# 兼容问题

引入 html5shiv 可以解决h5在IE中的兼容性问题

# 表单

# input 中 type类型

		<form action="">
			用户名: <input type="text" name="username"><br>
			密码：  <input type="password" name="userPwd"> <br>
			
			<!-- 验证,只能输入邮箱-->
			邮箱：<input type="email"><br>
			<!-- 移动端弹窗电话拨号 -->
			电话：<input type="tel"><br>
			<!-- 验证,只能输入网址 -->
			网址：<input type="url"><br>
			<!-- 增加上下箭头,只能输入数字-->
			数量：<input type="number" value="60" max="100" min="0"><br>
			<!-- search：输入框增加删除文字的叉号 -->
			请输入商品名称：<input type="search"><br>
			<!-- range范围,拉选条 -->
			范围：<input type="range" max="100" min="0" value="60"><br>
			<!-- 调用拾色器 -->
			颜色：<input type="color"><br>
			<!-- 时间和日期 -->
			时间：<input type="time"><br>
			日期：<input type="date"><br>
			<!-- datatime:大多数浏览器不支持，只有苹果的Safari支持 -->
			日期时间：<input type="datetime"><br>
			日期时间：<input type="datetime-local"><br>
			月份：<input type="month"><br> 
			星期：<input type="week">
			
			
			<input type="submit" value="提交" />
		</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 表单新增属性

placeholder：提示文本
autofocus：自动获取焦点
autocomplete：自动完成
required:必须输入
pattern:正则表达式验证
multiple：可选择多个文件
form：指定表单id,当前不在form标签中的表单数据也会提交

	<form action="" id="myForm">
		<!-- placeholder：提示文本 -->
		<!-- autofocus：自动获取焦点 -->
		<!-- autocomplete：自动完成，on:打开 off:关闭 -->
		<!--autocomplete执行需要同时满足两个前提：
		1.必须成功提交过
		2.当前添加autocomplete的元素必须有name属性 -->
		用户名：<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="on"><br>
		
		<!-- required:必须输入 -->
		<!-- pattern:正则表达式验证 -->
		手机号：<input type="tel" name="userphone" required pattern="^1(3|4|5|6|7|8|9)\d{9}$"><br>
		
		<!-- multiple：可选择多个文件 -->
		文件：<input type="file" name="photo" multiple><br>
		<!-- 在email中multiple允许输入多个邮箱，用逗号分隔 -->
		邮箱：<input type="email" name="email" multiple>
		<!-- 提交: -->
		<input type="submit"></input>
	</form>
	<!-- form：指定表单id,当前不在form标签中的表单数据也会提交 -->
	地址：<input type="text" name="address" form="myForm">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# HTML5 表单元素

datalist
keygen（浏览器基本不支持）
output

# 表单新增事件

oninput:监听当前指定元素内容的改变
onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次
oninvalid:当验证不通过的时候触发

	<form action="" method="post">
		用户名：<input type="text"  name="userName" id="userName"><br>
		电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
		<!-- 提交 -->
		<input type="submit" value="提交"/>
	</form>

	<script type="text/javascript">
		ouserName = document.getElementById("userName")
		ouserPhone = document.getElementById("userPhone")
		// oninput:监听当前指定元素内容的改变
		ouserName.oninput=function(){
			console.log('oninput:'+this.value);
		}
		//onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次
		ouserName.onkeyup=function(){
			console.log('onkeyup:'+this.value);
		}
		//oninvalid:当验证不通过的时候触发
		ouserPhone.oninvalid=function(){
			//设置默认的提示信息
			this.setCustomValidity("请输入合法的11位手机号")
			
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 进度条(progress)和度量器（meter）

		<!-- progress:进度条 -->
		<!-- max:最大值,value:当前进度值 -->
		<progress max="100" value="50"></progress>
		
		<!--meter:度量器
		high:规定的较高的值，low:规定的较高的值
		max:最大值，min:最小值，value:当前值 -->
		<meter max="100" min="0" high="80" low="40" value="30"></meter>
		<meter max="100" min="0" high="80" low="40" value="50"></meter>
		<meter max="100" min="0" high="80" low="40" value="90"></meter>

1
2
3
4
5
6
7
8
9
10

# 多媒体标签(autio和video)

<!-- 	autio:音频
		src:音频文件所在的路径
		controls:音频播放器的控制面板
		autoplay:自动播放
		loop:循环 -->
		<audio src="晚安.mp3" controls loop></audio>
<!-- 	video:视频
		src:视频文件所在的路径
		controls:视频播放器的控制面板
		autoplay:自动播放
		loop:循环
		width:宽度
		height:高度
		poster:封面-->
		<!-- 注意：只设置宽度或者高度，可以等比例 -->
		<video src="./视频.mp4" controls poster="./1.jpg" width="500px" ></video>
		
		<!-- source:因为不同浏览器支持的视频格式不同，可以准备不同格式的视频文件 -->
		<video controls>
			<source src="./视频.mp4" type="video/mp4">
			<source src="./视频.flv" type="video/flv">
		</video>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Dom操作

querySelector(传入选择器的名称)

		<ul>			<li class="red">前端</li>			<li class="green">java</li>			<li class="blue">javascript</li>			<li>c++</li>		</ul>		<script type="text/javascript">			window.onload=function(){								// query:查询			Selector:选择器						//querySelector(传入选择器的名称):选择单个，多个时返回满足条件的第一个				var javaLi=document.querySelector(".green");				console.log(javaLi);				//querySelectorAll():返回满足条件的所有，数组				var allLi=document.querySelectorAll('li');				console.log(allLi)			}		</script>

# 自定义属性

规范： 1.以data-开头

2.data-后必须至少有一个字符，多个单词使用-连接

建议： 1.名称应该都使用小写-不要包含任何的大写字符

2.名称中不要有任何的特殊符号

3.名称不要副作用纯数

取值方法：

		<p data-school-name = "itcast">学校名</p>		<script type="text/javascript">			window.onload=function(){				var p = document.querySelector('p')				//获取自定义属性值				// 将data-后面的单词使用camel命名法（驼峰命名）连接				var value = p.dataset["schoolName"];				console.log(value);			}		</script>

# 接口

# 网络接口

ononline:网络连通的时候触发这个事件
onoffline:网络断开时触发

		// ononline:网络连通的时候触发这个事件		// addEventListener添加事件（为了兼容移动端）--事件不加on		window.addEventListener("online",function(){			alert('网络连通了');		});				//onoffline:网络断开时触发		window.addEventListener("offline",function(){			alert('网络断开了');		})

# 全屏接口

全屏操作的主要方法和属性

1.requestFullScreen():开启全屏 不同浏览器需要添加不同的前缀 chrome:webkit firefox:moz ie:ms opera:o 2.CancelFullScreen():退出全屏,操作的是document 3.fullScreenElement:判断是否是全屏状态,判断的是document

			window.onload=function(){				var div = document.querySelector("div");				// 添加三个按钮的点击事件				// 全屏操作				document.querySelector("#full").onclick=function(){					// div.webkitRequestFullScreen()					// 使用能力测试添加不同浏览器下的前缀				if(div.RequestFullScreen){						div.RequestFullScreen();					}else if(div.webkitRequestFullScreen){						div.webkitRequestFullScreen();					}else if(div.mozRequestFullScreen){						div.mozRequestFullScreen();					}				}                //退出全屏				document.querySelector("#cancelFull").onclick=function(){				if(document.CancelFullScreen){						document.CancelFullScreen();					}else if(document.webkitCancelFullScreen){						document.webkitCancelFullScreen();					}else if(document.mozCancelFullScreen()){						document.mozCancelFullScreen();					}				}			}

# FileReader p19

readAsText():读取文本文件
readAsBinaryString():读取任意类型的文件，返回二进制字符串
readAsDataURL():读取文件获取一段以data开头的字符串
abort():中断读取

需求--即时预览

# 拖拽接口

# 地理定位接口

# Web存储

# sessionStorage

存储数据到本地，容量5mb左右

1.存储在当前页面中

2.它的的生命周期为关闭当前页面，关闭页面，数据自动清除

setItem(key,value):以键值对的方式存储数据，存储在当前页面中
getItem("key"):读取数据
removeItem("key"):删除指定键的数据
clear():删除所有数据

	var oSetData = document.querySelector("#setData");		var oGetData = document.querySelector("#getData");		var oRemoveData = document.querySelector("#removeData");		//存储数据setItem()		oSetData.onclick = function(){			// 获取用户名			var name = document.querySelector("#userName").value;			//存储数据			window.sessionStorage.setItem("userName",name);		}		//读取数据:getItem()		oGetData.onclick = function(){			var name = window.sessionStorage.getItem("userName");			alert(name);		}		//删除数据		oRemoveData.onclick=function(){			window.sessionStorage.removeItem("userName")		}

# localStorage

方法同sessionStorage

去GitHub编辑

上次更新: 2021/08/02, 13:47:59

← 常用meta整理 CSS教程和技巧收藏→