HTML5笔记一

HTML5笔记

一、新增标签
1、header 头部标签
2、nav 导航栏标签
3、article 内容标签
4、section 块级标签
5、aside 侧边栏标签
6、footer 尾部标签

二、视频属性值
1、autoplay 视频就绪后立马播放
2、controls视频的播放控件
3、loop循环播放
4、muted视频静音
5、poster下载时显示的图像,值为url
6、source标签兼容不同视频的格式
示例：

<source src="myvideo.ogv" type="video/ogg"></source>
		<source src="myvideo.webm" type="video/webm"></source>
<video width="800" height="" autoplay controls loop muted>

			<source src="../../111.mp4" type="video/mp4"></source>
		</video>```
<video width="800" height="" src="../../QQ视频20230908084813.mp4" controls></video>
<audio src="../../11111.mp3" autoplay controls></audio>

三、input里的 type属性值
1、button 按钮
2、text 默认文本
3、radio 单选
4、checkbox 复选框
5、submit 提交
6、password 密码
7、reset 重置
8、color 颜色
9、number 数字
10、file 上传文件
11、 url 网址
12、email 邮箱
13、tel手机号
14、search 搜索框
15、date 日期
16、range 滑块
17、time 时间
18、month 月
19、week 周

1、multiple 可以上传多个文件，通常与file搭配使用
2、 placeholder 表单的请示文字
3、 required 表单输入不能为空
4、autofocus设置默认焦点
5、autocomplete记录历史输入 on打开 off关闭
6、pattern 正则验证
7、 min max 数字的值 通常与number和range
8、 step 数字的跳跃间隔
9、 readonly只读模式
10、 disabled禁用模式
示例：

<input type="file" multiple name="" id="" value="" />

	<form autocomplete="on">
	  First name:<input type="text" name="fname"><br>
	  Last name: <input type="text" name="lname"><br>
	  E-mail: <input type="email" name="email" autocomplete="off"><br>
	  <input type="submit">
	</form>

四、存储
1、保存数据：localStorage.setItem(key,value);
2、读取数据：localStorage.getItem(key);
3、删除单个数据：localStorage.removeItem(key);
4、删除所有数据：localStorage.clear();
5、得到某个索引的key：localStorage.key(index);
6、保存数据：sessionStorage.setItem(key,value);
7、读取数据：sessionStorage.getItem(key);
8、删除单个数据：sessionStorage.removeItem(key);
9、删除所有数据：sessionStorage.clear();
10、得到某个索引的key：sessionStorage.key(index);
示例：

<script type="text/javascript">
		var random = Math.floor(Math.random() * 42+1);
		console.log(random);
		localStorage.sitename="超文本链接";
		document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
		
		sessionStorage.age=18;
		document.getElementById("ids").innerHTML="年龄：" + sessionStorage.age;
	</script>