HTML面试题 HTML面试题

1. h5新标签有哪些？为什么要加强语义化？新标签：
文档类型设定：；
字符设定：；
常用新标签：
? header，一般作为网页的头部使用，可以多个；
? footer，底部，不一定是文档最底部，可以多个；
? aside，侧边栏；
? nav，导航栏；
? article，独立内容区域，与session类似，用于文章blog、帖子、短文或者回复、评论等；
? section，代表某一个区域/分区/页面/文档的一部分区域，有独立的内容，但结构相近，就可以用section，范围比div大，语义比div更强，可以包含header、h1-h6……凸显语义的标签；
? datalist，标签定义选项列表，请与 input 元素配合使用该元素；

? fieldset，可将表单内的相关元素分组，打包legend（为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中首行的作用？ ? 文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（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;
【HTML面试题】再设置外层div的width小于内层div的width。