前端面试题总结——HTML(延续更新中)
1.什么是HTML？
HTML：HyperText Markup Language超文本标记言语
2.XHTML和HTML有什么区分
HTML是一种基础的WEB网页设想言语，XHTML是一个基于XML的标记言语
3.简述一下你对HTML语义化的明白？
html语义化让页面的内容构造化，构造更清楚，便于对浏览器、搜索引擎剖析;
4.浏览器页面有哪三层组成，离别是什么，作用是什么?
浏览器页面组成：构造层、示意层、行动层
离别是：HTML、CSS、JavaScript
作用：HTML完成页面构造，CSS完成页面的表现与作风，JavaScript完成一些客户端的功能与营业。
5.Doctype作用？严厉情势与混淆情势怎样辨别？
（1）作用：用于示知浏览器的剖析器用什么文档范例剖析这个文档。
（2）辨别:假如HTML文档包括情势完全的DOCTYPE，那末他平常以范例情势显现。DOCTYPE不存在或许花样不正确会致使文档已混淆情势显现。
6.Quirks情势是什么？它和Standards情势有什么区分
区分：
整体会有规划、款式剖析和剧本实行三个方面的区分。
盒模子：在W3C范例中，假如设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 情势下，IE的宽度和高度还包括了padding和border。
设置行内元素的高宽：在Standards情势下，给<span>等行内元素设置wdith和height都不会见效，而在quirks情势下，则会见效。
用margin:0 auto设置程度居中：运用margin:0 auto在standards情势下能够使元素程度居中，但在quirks情势下却会失效。
7.页面导入款式时，运用link和@import有什么区分？
（1）作用差别：link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel衔接属性等作用；
而@import是CSS供应的，只能用于加载CSS;
（2）加载差别：页面被加载的时，link会同时被加载，而@import援用的CSS会比及页面被加载完再加载;
（3）兼容差别：import是CSS2.1 提出的，只在IE5以上才被辨认，而link是XHTML标签，无兼容题目;
8.晓得的网页制造会用到的图片花样有哪些？
Webp：WebP花样，谷歌（google）开辟的一种旨在加速图片加载速率的图片花样。
并能节约大批的服务器带宽资本和数据空间。Facebook Ebay等着名网站已最先测试并运用WebP花样。
Apng：是PNG的位图动画扩大，能够完成png花样的动态图片结果，有望替代GIF成为下一代动态图范例。
9.文本标记
1.特别字符
1. 示意一个空格
2.< 示意一个<
3.> 示意一个>
4.© 示意版权
5.¥ ￥
2.文本款式
1.<b></b> :加粗
2.<i></i> :斜体
3.<u></u> :下划线
4.<s></s> :删除线
5.<sup></sup> :上标
6.<sub></sub> :下标
10.什么是锚点
锚点就是网页中一个暗号，能够经由过程超级链接跳转到该暗号位置处。
1.定义锚点
1.运用a标记的name属性定义锚点
<a name="锚点称号"></a>
2.运用恣意标记的id属性定义锚点
<ANY id="锚点称号"></ANY>
2.链接到锚点
<a href="#锚点称号">本页面</a>
<a href="url#锚点称号">别的页面</a>
11.div+css的规划有什么长处？
（1）改版的时刻更轻易 只需改css文件。
（2）页面加载速率更快、构造化清楚、页面显现简约。
表现与构造相星散。
（3）易于优化（seo）搜索引擎更友爱，排名更轻易靠前。
12.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
起首：CSS范例划定，每一个元素都有display属性，肯定该元素的范例，每一个元素都有默许的display值，如div的display默许值为“block”，则为“块级”元素；span默许display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select
（2）块级元素有：div p ul ol li dl dt dd h1-h6
（3）罕见的空元素：br-换行，hr-程度分割线；
13.iframe有那些瑕玷？
1.iframe会壅塞主页面的Onload事宜，会影响页面的并行加载；
2.搜索引擎的检索顺序没法解读这类页面，不利于SEO;
革新：经由过程javascript动态给iframe增加src属性值，如许能够绕开以上两个题目。
14.Label的作用是什么？是怎样用的？
label标签来定义表单掌握间的关联,当用户挑选该标签时，浏览器会自动将核心转到和标签相干的表单控件上。
15.隐蔽元素的几种要领
（1）display:none;
（2）visibility:hidden;
（3）opacity:0;
（4）position:absolute; left:-10000px;
16.简述一下src与href的区分。
src用于替代当前元素，href用于在当前文档和援用资本之间建立联络。
17.完成不运用 border 画出1px高的线，在差别浏览器的范例情势与奇异情势下都能保持一致的结果
<div style=”height:1px;overflow:hidden;background:red”></div>
18.怎样给背景图片加上超链接
<div class="swiper-slide "
style='background:#dedede url() no-repeat center center;background-size:contain'>
<a class="banner-a"rel="nofollow" href="#"></a>
</div>
.banner-a{
width:100%;
height: 8rem;
display: inline-block;
}
19.消灭浮动的要领有哪些？
第一种：clear:both
在父元素的内里增加一个空的clear的div（跟浮动的子级同级），然后再为这个类增加属性值clear:both;便能够消灭浮动。
第二种：overflow：hidden
在父元素的款式中增加overflow: hidden;也能够消灭浮动，以下css代码，但不首倡运用这个要领，overflow: hidden;另有一个意义就是隐蔽超越的部份，处置惩罚不好照样会给页面带来贫苦。
第三种：clearfix(引荐运用)
1.在父集元素类名中增加 clear-fix
2.写伪类款式
<style>
.clear-fix::after {
content:"";
display: block;
clear:both;
}
</style>
<div class="header-line clear-fix">
<div class="header-logo">
<a class="logo"href=" https://www.meisaas.com/index.html">款式计划</a>
</div>
</div>
