HTML5

HTML5琐碎知识点(持续更新)

常用的meta标签有哪些?

<!-- 
	meta 标签由 name 和 content 属性定义,用来描述文档的属性.比如网页的作者、网页描述、关键词、
	除了HTTP标准固定了一些 name 作为大家使用的共识,开发者亦可自定义name.
-->
<!-- 常用的 meta 标签:
	(01).charset，用来描述HTML文档的编码类型
	(02).keywords，页面关键词
	(03).description，页面描述
	(04).refresh，页面重定向和刷新
	(05).viewport，适配移动端，可以控制视口的大小和比例,其中，content 参数有以下几种：
			width viewport ： 宽度(数值/device-width)
			height viewport ：高度(数值/device-height)
			initial-scale ：  初始缩放比例
			maximum-scale ：  最大缩放比例
			minimum-scale ：  最小缩放比例
			user-scalable ：  是否允许用户缩放(yes/no）
	(06).搜索引擎索引方式：其中，content 参数有以下几种：
			all：     文件将被检索，且页面上的链接可以被查询；
			none：    文件将不被检索，且页面上的链接不可以被查询；
			index：   文件将被检索；
			follow：  页面上的链接可以被查询；
			noindex： 文件将不被检索；
			nofollow：页面上的链接不可以被查询。
-->
<meta charset="UTF-8">
<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述内容" />
<meta http-equiv="refresh" content="0;url=" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index,follow" />

scr 和 href 的区别

	src和href都是用来引用外部的资源，它们的区别如下：

	src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。
		src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，
		会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
		
	href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。
		当浏览器识别到它他指向的⽂件时，会并⾏下载资源，不会停⽌对当前⽂档的处理 常用在a/link等标签上。

语义化标签

<!-- 头部标签 -->
<header/>
<!-- 导航标签 在H4中导航栏常用 ul li -->
<nav/>
<!-- 块级标签 （有语义化的div） -->
<section/>
<!-- 主要内容-->
<article/>
<!-- 侧边栏标签 -->
<aside/>
<!-- 尾部标签 -->
<footer/>

音视频标签

<!-- 
	音频标签:
	controls 控制面板
	autoplay 自动播放
	loop=‘true’ 循环播放
 -->
<audio src='' controls autoplay loop='true'></audio>
<!-- 
	视频标签:
	poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
	controls 控制面板
	width
	height
 -->
<video src='' poster='imgs/aa.jpg' controls></video>
<!-- 
	source标签:
	因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
 -->
 <video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

本地缓存

localStorage与sessionStorage不同之处
   (01).数据储存的有效作用期不同
	     - localStorage:它是始终有效的,既使关闭浏览器,它依然有效存在浏览器中。
	     - sessionStorage:仅在当前浏览器关闭之前有效。
   (02).二者作用域不同
	     - localStorage:在所有的窗口都是共享的。
	     - sessionStorage:不能在浏览器窗口中共享,即使是在同一个页面。
   (03).localStorage的API
   		 - 设置本地储存,要求键和值都必须是字符串类型，所以存储前先将对象转换为字符串类型
   			localStorage.setItem('name','countent');
         - 读取本地缓存
   			localStorage.getItem('name);