HTML面试题

2020-01-30 本文已影响0人逸軒

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()可以同时编写多个，并且都可以按顺序得到执行。

注： $(document).ready(function(){})可以简写成$ (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;
}