HTML和CSS⾯试题及答案总结⼀
1. 对于html的语义化标签的理解，结构化标签的理解，同时写出简洁的html结构，如何进⾏SEO优化？
答：
对于html的语义化标签，⽤正确的标签做正确的事情。html语义化，让页⾯的内容结构化，便于对浏览器和搜索引擎的解析，在没有css样式的情况下，以⽂档的形式同样易于阅读，符合⽂档语义的标签。标签本⾝所代表的语义，每⼀个标签所带有的语义，根据语义去使⽤标签，依赖标记确定权重，同时也可以提⾼SEO的优化。对于结构化标签，按照⼀定的结构去使⽤标签。
简单的html结构：
2. 在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的值 。
4. 在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使⽤的时候不需要标签。
5. 在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。才能告知浏览器⽂档所使⽤的⽂档类型。
15. 当出现⽆样式内容闪烁的时候如何进⾏处理解决？
答：
@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
答：
它们之间的共同点：都是保存在浏览器端，且是同源的。
它们之间的区别：
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）会产⽣很多的页⾯，不容易进⾏管理。
22. 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的权重规则是什么？
答：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论