H5C3的总结

	总结
	——、
	1.什么是html5？
	HTML 标准的最新版本，是对 HTML 的第五次重大版本修改。
	2.常用的新属性有哪些？
	placeholder:占位符 提示信息
	autofocus:自动获取焦点
	multiple:支持多文件上传
	autocomplete:当提交过表单内容之后规定 某个表单控件的提示内容，关闭和打开，规定表单是否应该启用自动完成功能，on默认，启用自动完成（name必须，提交按钮必须）
	required:必填项
	tabindex:指定表单控件获取焦点的顺序
	3.新增的input的type属性值有哪些？
	tel:输入手机号码格式
	email:输入邮箱格式
	url:输入url格式
	number:输入数字格式
	time
	date
	range:自由拖动滑块
	month
	week
	search：搜索框
	4.什么是自定义标签属性？如何设置 ，如何取值
	data
	利用getattribute获取类名然后 dataset.index
	5.多媒体标签是那三个
	embed :embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等
	video:视频
	audio:音频
	6.什么是字体图标？为什么使用字体图标
	是一些简单，颜色单一的图片，采用字体图标去做。
	图标放大或者缩小不会失真， 加载速度快、兼容性高、灵活性高
	二、
	1.css3有哪些私有属性和兼容情况
	私有属性：
	Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。
	Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。
	Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。
	Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。
	2.css3新增哪些选择器？（元素选择器，属性选择器，结构性伪类选择器）
	元素选择器：选择相邻兄弟，匹配选择器
	+ 相邻兄弟选择器 ~ ：如：匹配选择器位于div 后面的所有span元素都会被选中
	属性选择器：[attribute]用于选取带有指定属性的元素。
	[attribute=value]用于选取带有指定属性和值的元素。
	[attribute^=value]匹配属性值以指定值开头的每个元素。
	[attribute$=value]匹配属性值以指定值结尾的每个元素。
	[attribute\=value]匹配属性值中包含指定值的每个元素。
	[attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。
	[attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。
	3.结构性伪类选择器：
	:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
	:last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。
	:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
	:last-of-type 匹配某个父元素中最后一个某一类型的元素。
	css3追加伪元素选择器？
	::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)
	::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)
	4.css3新增哪些js选择器？
	querySelector：获取一个元素
	querySelectorAll:获取多个元素
	5.:before和 ::before写法的区别？
	:before 是css2的写法, ::before 是css3的写法
	6.如何设置多重背景？
	background-image:url(),url(),url()........
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-size: 200px 200px;
	background-position: 0 0, 50% 50%, right bottom;
	7.两种类型的渐变分别是什么？
	linear-gradient(),radial-gradient()
	8.css3的opacity属性有什么作用？
	opacity 属性是设置元素的不透明级别，规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
	三、
	1.transition是什么?是哪几个属性的简写?
	过渡元素，给用户呈现 由一种样式到另一种样式的过程
	transition-propert
	transition-duration
	transition-timing-function
	transition-delay
	2.transform是什么?移动,旋转,伸缩,倾斜扭曲分别是什么？
	transform 变形
	移动：translate(x,y);
	倾斜：skew(deg, deg)
	旋转：rotate(deg);
	伸缩：scale(x,y);
	上述是2d
	改变变形原点：transform-origin：top bottom left right
	3.animation是哪几个属性的简写?
	animation-iteration-count:infinite; 无限循环播放
	animation-play-state:paused; 暂停动画
	animation-direction:alternate;(动画交替反向运行)alternate-reverse;(动画反向交替运行)reverse(动画反向);
	animation-fill-mode: forwards(动画完成后,保持最后状态);
	animation-fill-mode: backwards;(动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。)
	animation-fill-mode: both;(动画遵循 forwards 和 backwards 的规则。)
	4.perspective属性指的是什么？
	透视透视可以将一个2D平面，在转换的过程当中，呈现3D效果。perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
	5.transform-style属性指的是什么？
	transform-style: flat|preserve-3d;
	flat：子元素将不保留其 3D 位置。
	preserve-3d：子元素将保留其 3D 位置。
	四、
	1.flex布局是什么
	把父元素设置为 弹性盒模型，子元素们会默认按照主轴排列
	2.作用在父盒子容器的属性
	flex-direction: 主轴的方向
	row 默认值 主轴正常排列
	row-reverse 主轴颠倒排列
	column 副轴排列
	column-reverse 副轴颠倒排列;
	flex-wrap: 如何换行
	nowrap（默认）:不换行
	wrap ：换行
	wrap-reverse：换行，但取反
	flex-flow（flex-direction属性和flex-wrap属性的简写）
	例：flex-flow: column wrap;
	主轴上面的对齐方式
	justify-content:
	flex-start(默认值) 正常主轴排列
	flex-end 主轴末尾对齐
	center 主轴居中对齐
	space-between 主轴两端对齐
	space-around 元素之间的间距一致 左右两边的间距加起来=元素间距;
	副轴上面的对齐方式
	align-items：
	flex-start：交叉轴的起点对齐。
	flex-end：交叉轴的终点对齐。
	center：交叉轴的中点对齐。
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。。
	多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
	align-content:
	stretch(默认) 默认排列方式
	flex-start 开始对齐
	flex-end 末尾对齐
	center 居中对齐
	space-between 两端对齐
	space-around 元素之间的间隙一致*/
	3.作用在子元素上的属性
	order规定子元素 （项目）的排列顺序
	order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
	flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
	如果每一个项目没有宽度 那么 flex-grow: 1; 就代表平均分配宽度
	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，越缩小
	flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 ，flex-basis 跟width一样
	flex属性（flex-grow, flex-shrink 和 flex-basis的简写）
	flex:auto flex: 1 1 auto
	flex:none flex: 0 0 auto
	flex-shrink flex: 0 1 0%
	flex:1 flex:1 1 0%
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
	align-self属性允许单个项目有与其他项目不一样的对齐方式
	4.媒体查询的语法那些
	@media screen and(max-width|min-width) {
	}
	max-width 最大宽度
	min-width 最小宽度
	5.响应式开发原理:
	原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
	5.说一说你对视口的理解
	布局视口:在PC端开发的页面 切换到了移动设配上面 就会显示不全此时布局视口要远大于 移动设配的宽度
	视觉视口:用户正在看到的网页的区域
	理想视口:布局视口 等于 视觉视口
	五、
	1.简单说明canvas的作用
	通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
	2.canvas浏览器不兼容问题
	ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持
	只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
	移动端的兼容情况非常理想，基本上随便使用
	2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
	如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。
	3.使用canvas创建画布需要注意哪些？
	不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。
	重新设置canvas标签的宽高属性会导致画布擦除所有的内容。
	可以给canvas画布设置背景色
	4.简单说一下canvas绘制的基本步骤?
	获取元素,获取画笔,定义一个起点（绘制一个起点 )填充图形
	5.可以利用canvas做什么功能操作?
	给形状描边 填充
	6.svg的使用方式?svg的属性都有哪些？
	svg代码直接插入网页中
	CSS中引入svg文件
	使用标签引入svg
	7.canvas和svg的区别?
	canvas 放⼤会失真或者锯⻮。
	svg 输出的图形是⽮量图形，可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。
	绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修 。
	六、
	1.Location对象以及Location的属性和方法？
	location 对象是 window 对象的一部分，可通过window.location属性对其进行访问。
	属性：
	origin返回页面来源的域(当前协议 + 主机名+端口号)
	host返回一个URL的主机名和端口
	hostname返回URL的主机名port返回一个URL服务器使用的端口号
	pathname返回的URL路径名。
	protocol返回一个URL协议
	href返回完整的URL
	hash返回从井号 (#) 开始的 URL（锚）
	search返回从问号 (?) 开始的 URL（查询部分）
	方法：
	assign()加载新的文档。跟href一样，可以跳转页面
	replace()用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
	reload()重新加载当前文档。
	2.Navigator对象？
	表示用户代理的状态和标识
	3.Navigator.onLine网络状态是什么？
	判断用户设备是否处于脱机状态（没网）
	ononline有网
	onoffline 没有网
	4.History对象及History的属性和方法？
	History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
	属性：
	length返回浏览器历史列表中的 URL 数量。
	state返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。
	方法：
	back()加载 history 列表中的上一个 URL。
	forward()加载 history 列表中的下一个 URL。
	go()加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面pushState()用于在历史中添加一条记录。
	replaceState()用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
	5.FileReader对象与Files对象的区别和作用？
	为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个Files对象（伪数组形式）。
	可以读取本地文件内容。
	七、
	1.localStorage和sessionStorage的区别?
	localStorage：永久性存储
	sessionStorage：临时存储 当页面关闭时就失效
	2.什么是同源策略?
	协议 域名 端口号一致 就可以访问其内容
	如果其中一项不同就违背了同源策略 就访问不到 - 跨域
	3.本地存储的有哪几个方法可以实现增删改?如何使用?
	setItem 设置当前值（key，value）
	getItem 获取存储数据
	removeItem 删除某一个本地存储数据（key）
	clear 清空所有
	4.如何监听存储事件?
	使用addEventListener进行监听
	5.与存储事件相关的5个属性都是什么?
	key : 修改或删除的key值，如果调用clear()时，该属性值为null
	newValue: 新设置的值，如果调用removeItem()时，该属性值为null
	oldValue : 调用改变前的value值；添加新项时，该属性值为null
	storageArea : 当前的storage对象
	url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）
	-->
	<!-- 重要问题
	1.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
	增加语意化的元素，比如 article footer header nav section
	增加常用的属性:placeholder,multiple,autofocus,data-*(自定义属性),autocomplete...等
	增加表单控件, date time email url search tel
	用于媒介回放的audio和video元素
	用于绘画的 canvas 元素
	新增API：Location,Navigator,History,FileReader，localStorage，sessionStorage等对象
	本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
	2.CSS3有哪些新特性?
	新增选择器：属性选择器、伪类选择器。
	伪元素 ：::before,::after
	颜色：新增RGBA，HSLA模式
	文字阴影:（text-shadow）
	边框： 圆角（border-radius）边框阴影： box-shadow
	盒子模型：box-sizing
	背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点等
	渐变：linear-gradient、radial-gradient
	过渡：transition，可实现动画
	2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
	3D转换
	自定义动画animation
	媒体查询，弹性盒子布局
	3.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
	响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
	基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
	页面头部必须有meta声明的viewport。
	4.Canvas和SVG有什么区别？
	canvas 输出的是⼀整幅画布,就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。
	svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修 。
	5.谈谈iframe标签的优缺点?
	iframe:是一个内联框架(行内框架),可以包含另外一个文档的内容。
	iframe的优点：
	iframe能够原封不动的把嵌入的网页展现出来。
	如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
	如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
	iframe的缺点：
	会产生很多页面，不容易管理。
	代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
	很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
	iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。