HTML和CSS面试题及答案总结一

墨蓝 2022-02-23 01:22 178阅读 0赞

1.  对于html的语义化标签的理解，结构化标签的理解，同时写出简洁的html结构，如何进行SEO优化？  
    答：  
    对于html的语义化标签，用正确的标签做正确的事情。html语义化，让页面的内容结构化，便于对浏览器和搜索引擎的解析，在没有css样式的情况下，以文档的形式同样易于阅读，符合文档语义的标签。标签本身所代表的语义，每一个标签所带有的语义，根据语义去使用标签，依赖标记确定权重，同时也可以提高SEO的优化。对于结构化标签，按照一定的结构去使用标签。  
    简单的html结构：

1.  在form表单中，get方式和post方式提交数据的区别是什么？如何判断在实际开发中的应用？  
    答：  
    get方式和post方式提交数据的区别：  
    1） 大小不同，get方式传输的数据量较小，而post可以传输大量的数据。  
    2） 安全程度不同，get方式传输数据能够被别人轻易的看到数据内容，所以安全程度较低，而post则可以很好的隐藏。  
    3） 速度不同，post方式速度较慢，而get方式速度较快。  
    4） 在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据。
    
    在实际开发中的应用：  
    1）在重要数据进行传输数据的时候，用post的方式进行提交数据。  
    2）在做数据查询的时候，用get的方式进行提交数据。  
    3）在做增加、删除和修改数据的时候，用post的方式进行提交数据。

3.在input表单控件中，value和placeholder的区别是什么？  
答：  
placeholder: 表示在输入框中显示的提示信息，用户点击之后，提示信息就会消失。  
value: 叫做默认值，当用户想要在输入框中输入信息的时候，必须先手动的删除value的值 。

1.  在css当中，@import 和 link的区别是什么呢？  
    答：  
    1）本质的差别：link是属于XHTML的标签，而@import是CSS提供的一种方式。  
    2）加载顺序的差别：当页面进行加载的时候，link引用的CSS时会被加载，而@import引用的CSS会等页面加载完成以后才被加载，所以在 @import加载CSS的时候，一开始会没有样式。  
    3）兼容性的差别：@import在老的浏览器上不兼容，只有在IE5以上的浏览器才可以被识别，但是link可以在任意浏览器的版本上进行加载执行。  
    4）使用DOM文档对象模型控制样式的差别：当使用JavaScript控制DOM区改变样式的时候，只能使用link标签，而@import是不可以的。  
    5）作用不同：link是属于XHTML，除了可以加载css,还可以定义RSS等其它事务，而@import是属于css范畴，只能加载css。  
    6）权重不同：link方式的权重高于@import的权重值。  
    7）标签不同：import在html使用的时候需要标签，而link在html使用的时候不需要标签。
2.  在HTML当中引用CSS的三种使用方式有哪些？它们之间的区别是什么？  
    答：  
    在HTML当中引用CSS的三种使用方式：  
    1） 第一种是内联样式表，样式通过style属性内嵌在css的样式当中，写在标签当中。  
    2） 第二种是内部样式表，通过style标签将CSS的样式写在style属性当中，链入内部的CSS文件。  
    3） 第三种是外部样式表，通过link标签或者是在style中通过@import的方式引入外部的CSS样式文件。

它们之间的区别：  
1） 优先级不同，内联样式表的优先级最高，而内部样式表和外部样式表的优先级与书写顺序有关，后书写的优先级高。  
2） 作用域不同，内联样式表的作用域最小，只能应用于当前的元素，内部样式表的作用域其次，只能应用于当前的HTML文件，最后是外部样式表的作用域最大，能够适用于所有链接的HTML文件。  
3）书写顺序不同，内联样式表写在标签当中，内部样式表写在style标签中来链入内部的CSS文件，外部样式表是通过link或者是@import的方式来链入外部的CSS文件。

6.新的HTML5文档类型和字符集是？  
答：  
HTML5文档类型 <!doctype html>  
HTML5使用UTF-8字符集

7.对于标准以及标准制定机构重要性的理解？  
答：  
网页标准和标准制定机构都是为了能让web发展的更健康，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

8.描述一段语义的html代码？  
答：  
HTML5中新增加的很多标签就是基于语义化设计原则  
< div id=“header”>  
< h1>标题< /h1>  
< h2>前端技术< /h2>  
< /div>  
语义 HTML 具有以下特性：  
1）文字包裹在元素中，用以反映内容。  
2）HTML 元素不能用作语义用途以外的其他目的。  
3）文本并不直接包含任何样式信息。

9.doctype的作用是什么？严格模式与混合模式如何进行区分？它们之间有什么样的意义？  
答：  
doctype的作用是<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范来渲染文档。  
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。  
它们之间的意义是可以根据不同的模式显示在浏览器当中，DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

10.行内元素有哪些？块级元素有哪些？空元素有哪些？  
答：  
块级元素：div、p、h1-h6、ol、ul、table、form  
行内元素：span、a、img、input、select、small  
空元素：没有内容的元素、 br、 hr

11.html5的新特性有哪些？  
答：  
用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素新的内容元素，比如 article、footer、header、nav、section、menu新的表单控件，比如 number、date、time、email、url、search、color、range、month、week、datetime、datetime\_local。

12.html5的存储类型有什么区别？  
答：  
cookies:服务器和客户端都可以访问，大小只有4KB左右，有有效期，过期后将会删除；localStorage:将数据保存在本地的硬件设备，没有时间限制，关闭浏览器也不会丢失。永久保存sessionStorage:将数据保存在session对象中，关闭浏览器后数据也随之销毁。临时保存。

13.对于HTML语义化的理解？  
答：  
根据内容的结构化、选择合适的标签，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好的解析。对于语义化的好处是：  
1）有利于SEO和搜索引擎之间的沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。  
2）在没有CSS的情况下，页面也能呈现出很好地清晰内容结构。  
3）便于团队开发和维护，语义化更加具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。  
4）支持多终端设备的浏览器渲染。

14.HTML5为什么只需要写？  
答：  
HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型。

1.  当出现无样式内容闪烁的时候如何进行处理解决？  
    答：  
    @import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。  
    原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。  
    解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

16.对于常见的浏览器内核有哪些？  
答：  
Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器  
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey  
Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)  
Webkit：Safari Chrome

17.对于浏览器的内核，你有什么样的理解？  
答：  
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。  
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。  
JS引擎：解析和执行javascript来实现网页的动态效果。  
在最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

18.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？  
答：  
在HTML5中新增加了图像、位置、存储、多任务等功能。  
在HTML5中的新增元素：  
1）canvas，用于媒介回放的video和audio元素  
2）本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除  
3）语意化更好的内容元素，比如 article footer header nav section  
4）位置API：Geolocation  
5）表单控件，calendar date time email url search  
6）新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket等等  
7）拖放API：drag、drop

在HTML5中的移除元素：  
1）纯表现的元素：basefont big center font s strike tt u  
2）可用性产生负面影响，性能较差元素：frame frameset noframes

对于处理HTML5新标签的浏览器兼容问题：  
进行合理的开发适配，解决处理HTML5新标签的浏览器兼容问题

区分HTML和HTML5：  
1）DOCTYPE声明的方式是区分重要因素  
2）根据新增加的结构、功能来区分

19.HTML5的文件离线储存怎么使用，工作原理是什么？  
答：  
在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如：  
在页面头部加入manifest属性，在cache.manifest文件中编写离线存储的资源CACHE MANIFEST\#v0.11CACHE:js/app.jscss/style.cssNETWORK:Resourse/logo.pngFALLBACK://offline.html

20.cookies，sessionStorage和localStorage的区别是什么？  
答：  
它们之间的共同点：都是保存在浏览器端，且是同源的。  
它们之间的区别：  
1）cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。  
2）存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。  
3）作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享。

21.iframe框架有那些优缺点有哪些呢？  
答：  
iframe框架的优点：  
1）iframe能够原封不动的把嵌入的网页展现出来。  
2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。  
3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。  
4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。  
iframe框架的缺点：  
1）搜索引擎的爬虫程序无法解读这种页面。  
2）框架结构中出现各种滚动条。  
3）使用框架结构时，保证设置正确的导航链接。  
4）iframe页面会增加服务器的http请求。  
5）iframe会阻塞主页面的Onload事件。  
6）会产生很多的页面，不容易进行管理。

1.  label的作用是什么? 是怎么用的?  
    答：  
    label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY：  
    1）FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。  
    2）ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

23.HTML5的form如何关闭自动完成功能？  
答：  
HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。方法解决为：  
1）在IE的internet选项菜单中里的自动完成里面设置。  
2）设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能。

24.title与h1的区别、b与strong的区别、i与em的区别？  
答：  
1）title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响。  
2）b是无意义的视觉表示；strong标明重点内容，语气加强含义。  
3）i是斜体，是无意义的视觉表示；em表示强调文本。  
4）视觉样式标签： b i u s  
语义样式标签：strong em ins del

25.元素的alt和title有什么异同？  
答：  
不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容。  
相同点：在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

26.请写出至少5个html5新增的标签，并说明其语义和应用场景？  
答：  
1）section：定义文档中的一个章节。  
2）nav：定义只包含导航链接的章节。  
3）header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。  
4）footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。  
5）aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

27.你知道多少种Doctype文档类型？  
答：  
1）标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。  
2）HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。  
3）XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。  
4）Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

28.HTML和XHTML这两者之间有什么样的区别呢？  
答：  
1）XHTML 元素必须被正确地嵌套。  
2） XHTML 元素必须被关闭。  
3） 标签名必须用小写字母。  
4） XHTML 文档必须拥有根元素。

29.对于table有什么样的缺点呢？  
答：  
1）太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。  
2） 灵活性差，比如要将tr设置border等属性，是不行的，得通过td。  
3） 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱。  
4）混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。  
5）不够语义化。

30.对于src以及href,它们之间有什么样的区别呢？  
答：  
1）src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。  
2）src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。  
3）href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

31.请你谈谈对于CSS的布局有什么样的理解？  
答：  
常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

32.请简述CSS样式表继承是什么？  
答：  
CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：  
1）文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color。  
2）列表相关：list-style-image，list-style-position，list-style-type， list-style。

33.CSS伪类与CSS伪对象的区别是什么？  
答：CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西，根本区别在于：它们是否创造了新的元素（抽象）：  
1）伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。  
2）伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

34.请简述CSS的权重规则是什么？  
答：

35.在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？  
答：  
1）px是相对长度单位，相对于显示器屏幕分辨率而言的。  
2）em是相对长度单位，相对于当前对象内文本的字体尺寸。  
3）px定义的字体，无法用浏览器字体放大功能。  
4）em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

36.CSS3有哪些新特性？  
答：  
1）CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）。  
2）增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局。

37.为什么要初始化CSS样式？  
答：  
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

38.ine-height三种赋值方式有何区别？（带单位、纯数字、百分比）  
答：  
1）带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高。  
2）纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5\*18=27px。  
3）百分比：将计算后的值传递给后代。

39.经常遇到的浏览器兼容性有哪些？如何解决？  
答：  
1） 浏览器默认的margin和padding不同。  
2） IE6双边距bug。  
3）在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。  
4）min-height在IE6下不起作用。  
5）透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6。  
6）input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。