前端必考经典，块级，行内块，行内元素在父元素中如何设置水平居中和水平垂直居中

一、如何让元素在父元素中水平垂直居中

1.1行内块或者行内元素
在父元素中居中：

text-align:center;
line-height:与高度一致;

行内块元素还需在自身设置：

vertical-align:middle;

1.2块级元素
1.2.1水平居中
给元素本身设置：

margin-left:auto;
margin-left:auto;

水平垂直都居中
方案一：

给块级元素本身设置：
position:absolute;
left:50%;
top:50%;
margin-left:负的元素宽度的一半；
margin-top:负的元素高度的一半；
父元素设置相对定位。

方案二：

给块级元素本身设置：
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
父元素设置 相对定位

二、html5新增的标签

2.1新增的结构化语义标签
header：页面头部
footer:页面页脚
nav:导航
article:文章
aside:侧边栏
section:小节，小段
2.2状态标签
meter:表示度量，状态。双
属性：max,min,low,high,value,optimum 双
progress:表示过程：max,value.双
meter和progress区别。
meter表示度量，是静态的，用于表示温度，容量，电量。
progress表示过程，完成度，用于进度条。
2.3新增列表标签
datalist:用于搜索框提示，双
details:表示详细内容，双
summary：表示详细内容标题 ，双

#### ① datalist 的用法

datalist 的 id 属性值与关联的 input 的 list 属性值一致， datalist 内要包含 option 元素。

```css
<input type="text" list="myDataList">
<datalist id="myDataList">
    <option value="aa"></option>
    <option value="ab"></option>
    <option value="abc"></option>
    <option value="abb"></option>
    <option value="abcd"></option>
    <option value="aaa123"></option>
    <option value="abbb"></option>
    <option value="bbb"></option>
    <option value="biubiubiu"></option>
</datalist>

② details 的用法

今天是个伟大的日子，Lorem ipsum dolor sit amet.

2.4 注释标签

ruby：文字注音，双
rt：注音，写在 ruby 的里面

<ruby>
    魑
    <rt>chi</rt> 
</ruby>
<ruby>
    魅
    <rt>mei</rt> 
</ruby>

<ruby>
    魑魅魍魉
    <rt>chimeiwangliang</rt>
</ruby>

mark：表示标体，W3C建议用于搜索结果中标记关键字，双
figure: 独立的流内容，用于文章中的插图,双
figcaption: 写在 figure 的里面，表示标题,双

三、 HTML5 表单新增功能

3.1表单控件新增属性
placeholder:输入提示文字
required：表示必填
autofocus:自动获取焦点
autocomplete:设置是否显示之前输入历史记录，值：on或者off
3.2 input的type属性新增的值
3.2.1文本输入框

email：
	规定填写邮箱
	在提交的时候会进行验证是否是邮箱

url:
	规定填写网址
	在提交的时候回验证是否是 url
	
number：
	规定填写数字，不是数字无法输入
	配合属性 max、min、step 规定可填写数字的范围，在提交的时候会验证数字范围
	
search：
	规定是搜索框，其他同 text 一样
	
tel：
	规定填写电话号码
	pc端与 text 一致，移动端会弹出数字键盘按键

② 范围选择框

range:
	设置范围选择框，拖动滑块可以选择范围
	配合属性 min、max、step 控制可选范围

3.2,3颜色选择框

color:
	选择颜色

日期时间选择框

date	选择日期，年月日
momth   选择哪一年的第几月
week	选择哪一年的第几周
time	选择时间 时、分
datetime-local  选择日期和时间 年月日时分

3.3 form 新增的属性

novalidate 如果设置了该属性，表单将不会进行验证。

四、HTML5 音视频标签

video视频
**src：** 指定视频的地址<br>
**width：** 设置视频宽度<br>
**height：** 设置视频高度<br>
**controls：** 显示控制条，不需要给值。<br>
**muted：** 设置静音，不需要给值。<br/>
**autoplay：** 自动播放，不需要给值。<br/>
**loop：** 设置视频循环播放，不需要给值。<br/>
**preload：** 设置视频预加载，不需要给值。<br/>
**poster：** 指定视频封面图的地址双

audio音频
**src：** 指定视频的地址<br/>
**controls：** 显示控制条，不需要给值。<br/>
**muted：** 设置静音，不需要给值。<br/>
**autoplay：** 自动播放，不需要给值。<br/>
**loop：** 设置视频循环播放，不需要给值。<br/>
**preload：** 设置视频预加载，不需要给值。<br/>
双

4.2 使用音视频标签的注意事项

• 浏览器支持的视频格式： mp4、webm、ogg，推荐 mp4
• 浏览器支持的音频格式：mp3、wav、ogg，推荐 mp3
• chrome 浏览器默认禁止了音视频的自动播放，除非设置静音。