HTML5知识点

这周我们要试着面试了，学习vue底层一个多月了，这回面试会问到的知识点从html到vue，所以这周又把js高级和css的一些东西看了一遍。昨天面试问到了一些知识点，自己有些连听都没有听过，有些是听过但是不知道其原理，在这做一个总结。
1.HTML5的新特性：
1）新增的语义化标签

	*<header>:头标签
	*<nav>：导航标签
	*<section>：定义文档某个区域的标签
	*<article>：内容标签
	*<aside>：侧边栏标签
	*<footer>：尾部标签

2）新增的多媒体标签

*<autio>:用于文档中表示音频的内容
	属性有：	src：媒体的来源
					controls：增加控制工具栏
					autoplay：自动播放，但是存在兼容性问题
					muted：静音
					loop：循环播放
	*<video>:视频
	属性有：		controls： controls 增加控制工具栏（加上controls属性，视频才会播放）
				autoplay： autoplay 自动播放(谷歌浏览器禁用了自动播放功能，加了muted属性就可以自动播放了)
				muted： muted 静音，增加后静音并且自动播放会生效
				loop： loop 循环播放
				preload： auto（预加载） none(不预加载) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
				src： url() 视频url地址
				poster： imgurl() 加载等待的画面图片

3）HTML5对表单的扩展：

*HTML5新增的表单属性
		required ：值 required 表示其内容不能为空
		placeholder：输入框的占位文字
		multiple：可以多选文件提交
		autofocus：自动聚焦
	*对于input的type值也有很多扩展
		url： URL类型
		date：日期类型
		time：时间类型
		month：月类型
		week：周类型
		number：数字类型
		tel：手机号码
		search：搜索框
		color：会显示一个取色板，可以选择颜色
		email：邮件类型

2.语义化
1）什么是语义化：指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。我的理解是最初我们使用的div，是没有意义的，尽管我们使用id和class以及css去让他们变得有意义，但是随着html5的出现，没“意义”的标签消失了，这就是我们常说的语义化。
2)语义化的优点：
*代码结构清晰，易于阅读，利于开发和维护
*提高用户体验，在样式加载失败时，页面结构清晰
*方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
*有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重。
3.BFC
1）BFC：块级格式化上下文
BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。
2）特性与作用（使用overflow:hidden）
*可以避免外边距重叠
*清除浮动
*阻止元素被浮动元素覆盖
3）触发条件（脱离文档流）
*overflow:hidden/scroll/auto;
* float: left/right
* position: absolute/fixed
* display: inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
4.如何让一个元素水平居中
1)行级元素水平居中 text-align:center;
2)块级元素水平居中 margin:0 auto;
3)绝对定位元素的水平居中

	 position: absolute;
	 left: 50%;
	 transform: translate(-50%);//要用这句话

4)flex实现，设置主轴方向居中

	display: flex;
    justify-content:space-around ;