1. h5新标签有哪些？为什么要加强语义化？
新标签：
文档类型设定：<!doctype html>；
字符设定：<meta charset="utf-8">；
常用新标签：
header，一般作为网页的头部使用，可以多个；
footer，底部，不一定是文档最底部，可以多个；
aside，侧边栏；
nav，导航栏；
article，独立内容区域，与session类似，用于文章blog、帖子、短文或者回复、评论等；
section，代表某一个区域/分区/页面/文档的一部分区域，有独立的内容，但结构相近，就可以用section，范围比div大，语义比div更强，可以包含header、h1-h6……凸显语义的标签；
datalist，标签定义选项列表，请与 input 元素配合使用该元素；
<input type="text" value="输入" list="sport"/> <!-- input里面用list -->
<datalist id="sport"> <!-- datalist里面用id -->
<option>篮球</option>
<option>足球</option>
<option>乒乓球</option>
</datalist>
fieldset，可将表单内的相关元素分组，打包legend（为fieldset元素定义标题）使用；
<fieldset>
<legend>用户登录</legend>
用户名: <input type="text"><br />
密 码: <input type="password">
</fieldset>
address，标签定义文档或文章的作者/拥有者的联系信息，字体样式默认倾斜； time，时间标签，主要用于搜索引擎和其它一些内容引擎特殊的解析和展示； hgroup，专门用来包含标题h标签的分组；
detail，细节、详情 ，open属性：默认展开，summary相当于详情的标题；
新增了许多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循环播放
……
原因：1.默认样式不一样 ；2.有SEO优化作用；
2.行内元素、块元素有哪些？它们有什么不同？
行内元素：b、span、a、u、em、i、img、input、select、label、textarea、button
块级元素：div、h、ol、ul、dl、li、table、td、th、tr、dd、dt、p、caption
空元素：area、meta、link
-
行内元素的特点：
1、行内元素只能容纳文本或者其他行内元素。
2、宽度只与内容有关。
3、和其他元素都在一行上。
4、高，行高及外边距和内边距左右可改变。
-
块级元素的特点：
1、高度，行高以及外边距和内边距都可控制。
2、总是在新行上开始，占据一整行。
3、它可以容纳内联元素和其他块元素。
4、宽度始终是与浏览器宽度一样，与内容无关。
-
区别：
1、行内元素会在一条直线上分列，都是统一行的，程度偏向分列。
块级元素各盘踞一行，垂直偏向分列；块级元素重新行开端停止接着一个断行。
2、行内元素不可以包括块级元素，只能包容文本或许其余行内元素。
块级元素能够包括行内元素和块级元素，还能够包容内联元素和其余元素；。
3、行内元素与块级元素属性的分歧，主要在盒模子属性上。
行内元素设置width无效，height无效（能够设置line-height），margin、padding设置上下有效。
-
行内元素内嵌块级元素。高度被子元素撑大，而宽度和父级一致（父级是body就是body的宽度）。
-
行内块元素内嵌块级元素。宽高都会被子元素撑大的。
3.html中首行<!doctype>的作用？
文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档；声明必须是HTML文档的第一行，位于html标签之前；
4.rem相对于根节点。em相对于父元素
5.一般html网页元素加载完成后，会触发哪个事件？onready比onload先执行
Dom文档加载的步骤：
- 解析html结构；
- 加载外部脚本和样式表文件；
- 解析并执行脚本；
- dom树构建完成（DOMContentLoaded）；
- 加载图片等外部文件；
- 页面加载完毕。
DOM ready：（也叫DOMContentLoaded ），在第4步完成后触发； 图片onload：是在第5步完成后触发； 页面onload：是第6步完成后触发。
由此可见三者执行顺序为：domready→图片load→页面load。
执行时间上，onready比onload先执行：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
onload只执行最后一个而onready可以执行多个：
编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个。 $(document).ready()可以同时编写多个，并且都可以按顺序得到执行。
注：(function(){});
6.html是怎么渲染的
1.解析html文件，创建DOM树 自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞 1）css加载不会阻塞html文件的解析，但会阻塞dom的渲染 2）css加载会阻塞后面js语句的执行 3）js会阻塞html的解析和渲染 4）没有defer和async标签的script会立即加载并执行 5）有async标签的js，js的加载执行和html的解析和渲染并行 6）有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触 发DOMContentLoaded事件前执行 7）DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片） 2.解析css，生成CSSOM，css对象模型 3.dom和css合并，构建渲染树（Render Tree） 4.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流） 1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观 2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建 3）重排必定会引发重绘，但重绘不一定会引发重排
7.滚动条
只要网页内容大于视窗，滚动条就会出现。
目标：没有滚动条影响美观，但仍旧可以滚动
方法1：在webkit内核的浏览器里可以定义滚动条样式，在CSS初始处定义
--Chrome--
body::-webkit-scrollbar{
display:none;
}
--IE/Edge--
body{
-ms-overflow-style: none;
}
--Firefox--
html {
overflow: -moz-hidden-unscrollable; /*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/
height: 100%;
}
body {
height: 100%;
width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/
overflow: auto;
}
方法2：在div外面再套一个div，内层是有滚动条的，但是我们看不到了
外面的div设置overflow:hidden；
里面的div设置 overflow-y: scroll;overflow-x: hidden;
再设置外层div的width小于内层div的width。
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
overflow:hidden;
width:200px;
}
.inner{
overflow-y:scroll;
overflow-x:hidden;
width:220px;
}
网友评论