html相关 面试问题
1. h5新标签有哪些？为什么要加强语义化？<!doctype html>作用？
加强语义化原因：1.『默认样式不一样』 2.有SEO优化作用
①文档类型设定：<!doctype html>
- 文档类型声明，目的是告诉标准通用标记语言 解析器 要使用什么样的文档类型定义（DTD）来解析文档
- 『声明必须是HTML文档的第一行，位于html标签之前』
②字符设定：<meta charset="utf-8">
③常用新标签：
-
『
header』，一般作为网页的头部使用，可以多个 -
footer，底部，不一定是文档最底部，可以多个 -
aside，侧边栏 -
nav，导航栏 -
article，独立内容区域，与session类似，用于文章blog、帖子、短文或者回复、评论等 -
『section』，代表某一个区域/分区/页面/文档的一部分区域，有独立的内容，但结构相近，就可以用section，范围比div大，语义比div更强，可以包含header、
h1-h6……凸显语义的标签 -
datalist，标签定义选项列表，请与 input 元素配合使用该元素
<!-- input里面用list属性，指向对应 id 的 datalist -->
<input type="text" value="输入" list="TFboys"/>
<datalist id="TFboys"> <!-- 指定id的datalist -->
<option>易烊千玺</option>
<option>王俊凯</option>
<option>王源</option>
</datalist>
fieldset，可将表单内的相关元素分组，和legend一起使用
<fieldset>
<legend>Form</legend> <!-- 定义标题 -->
<div>
<label>Name :</label><input type="text"><br />
</div>
<div>
<label>Name :</label><input type="password"><br />
</div>
</fieldset>
address，标签定义文档或文章的作者/拥有者的联系信息，字体样式默认倾斜- 『`time`』，时间标签，主要用于搜索引擎和其它一些内容引擎特殊的解析和展示
- 『`hgroup`』，专门用来包含标题h标签的分组；
- `detail`，细节、详情 ，open属性：默认展开，summary相当于详情的标题
④ input标签的增强
-
新增了许多input type属性：`email`、`tel`、『`url`』、
number、『`search`搜索框，加强语义、`range`自由拖动滑块』、time、date日期、datetime时间、month、week -
新增了许多input的 属性：
placeholder占位符，默认文字、`autofocus`页面加载时自动获得焦点、`multiple`多文件上传、`autocomplete`、『`required`必填项、`accesskey`规定激活元素的快捷键』
⑤多媒体标签：embed定义嵌入的内容、audio播放音频、video播放视频、src导入，autoplay自动播放、controls是否默认显示播放件、loop循环播放
2.行内元素、块元素有哪些？它们有什么不同？
参考博客：行内元素+块级元素
-
行内元素：span、a、u、i、b、strong、『em、select、label、textarea、button、**br**』
-
块级元素：div、ol、ul、li、table、th、p、『tr、dd、dt、dl、caption、address、h1～h6』、hr
-
行内块元素：例如 img 、 input、td
-
空元素：area、meta、link
行内元素的特点：
- 行内元素只能容纳文本或者其他行内元素，和其他元素都 在一行上 – 水平方向排列【特殊情况：a链接内不能嵌套其他链接】
- 宽度只与内容有关，宽和高都不可调整（『**只能够设置 `line-height`**』）
margin、padding属性值的 左右可改变，上下无效
块级元素的特点：
- 可以容纳内联元素和其他块元素，但总是在新行上开始，占据一整行 – 垂直方向排列『特殊情况：p标签中不能嵌套div标签』
- 初始宽度 始终是与浏览器宽度一样，与内容无关，宽高都可以设置
margin、padding属性值 都可控制
行内块元素的特点：
-
和其他元素同一行（行内元素特点）
-
可以设置元素的宽高等（块级元素特点）
/* 行内元素/内联元素 */
display：inline;
/* 块级元素 */
display:block;
/* 设置成行内块级元素 */
display:inline-block;
补充：纯CSS实现水平垂直居中
-
不论行内元素还是块级元素，【垂直】都是设置
height和line-height相等； -
【水平】可以分别用
text-align: center（行内元素）或者给 设置宽度后 的块级元素添加margin: 0 auto
span { /* 行内元素 */
/* 水平 */
text-align: center;
/* 垂直 */
height: 30px;
line-height: 30px;
}
div { /* 块级元素 */
/* 水平 */
width: 100px;
margin: 0 auto;
/* 垂直 */
height: 30px;
line-height: 30px;
}