html+css面试题

1. 你知道的网页制作会用到的图片格式有哪些？

png-8,png-24, jpeg，gif, svg ,dataimage/png;base64。

科普一下Webp: Webp格式，谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook、Ebay等知名网站已经并始测试并使用Webp格式。

在质量相同的情况下，Webp格式图像的体积要比JPEG格式图像小40%

dataimage/ png;base64

data: image/ png; base64, iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ AQMAAADaX5RTAAAAA3NCSVQICAj b4U/ gAAAAB1BMVEX/ / /+ZmZmOUEqyAAAAAnRSTlMA/ 1uRIrUAAAAJcEhZcwAACusAAAr rAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvM jAvMT IGkKG+AAAAHHRFWHRTb2Z0d2 Fy ZQBBZG9iZSBGaXJld29ya3MgQ1M26Lyyj AAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

那么这是什么呢，这是Data URI scheme。

Data URI schene是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能眷到它了，一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png是数据类型名称, base64是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

目前, Data URI scheme支持的类型有:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码data:text/css;base64,base64编码的CSS代码data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据.
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说,它把一些8-bit数据翻译成标准ASCII字符,网上有很多免费的base64编码和解码的工具,在PHP中可以用函数base64_encode()进行编码,如echo base64_ encode(ile_ .get_ contents( 'wg.png' ));

目前, IE8、 Firfox、 Chrome、 Opera浏览器都支持这种小文件嵌入。

img src= data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABIBMVEX///+ZmZmOUEqyAAAAAnRSTIMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9ulFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJIjONjA8LiBoZyBwY6BQQZMAtIAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC' />

把图像文件的内容直接写在了HTML文件中,这样做的好处是,节省了一个HTTP请求。坏处是浏览器不会缓存这种图像。

2. SGML（标准通用标记语言）和HTML（超文本标记语言)

①HTML是SGML的一个实例,它的DTD作为标准被固定下来,因此，HTML不能作为定义其它置标语言的元语言。XML是SGML的一个子集,严格地讲, XML也还是SGML。与HTML不同的是, XML有DTD ,因而也可以象SGML那样,作为元语言,来定义其它文件系统,或称其它置标语言。如果把置标语言分为元置标语言和实例置标语言的话, SGML和XML都是元置标语言,而HTML和由XML派生的XHTML都是实例置标语言。

②SGML(standard general markup language )是一种在WEB发明之前就已存在的使用标记来描述文档资料的通用语言，它是一种定义标记语言的元语言,HTML和XML都是由SGML发展过来的.

HTML(HyperText Markup Language)是SGML定义下的一个描述性的语言,是SGML的一个应用，它不能用来定义新的应用,HTML,用于一些Internet的短期的数据.HTMl文档格式非常松散,导致解析的复杂性增加，也导致了不同浏览器浏览的不同.

XML(extend MarkUp Lanuage)是SGML的一个简化版本,是SGML的一个子集严格意义.上讲,XML就是SGML.如果一些数据要长期使用，并且要更多的一些结构,XML将更好.XML比HTML严格，如果出现语法错误,浏览器将不发解析显示③标准答案:

SGML (标准通用标记语言)是一个标准, 告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言, HTML是被用SGML描述的标记语言。

因此利用SGML创建了HTML参照和必须共同遵守的DTD ,你会经常在HTML页面的头部发现“DOCTYPE” 属性,用来定义用于解析目标DTD
现在解析SGML是一件痛苦的事情,所以创建了XML使事情更好。XML使用了SGML,例如:在SGML中你必须使用起始和结束标签,但是在XML你可以有自动关闭的结束标签。XHTML创建于XML ,他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD

总之，SGML是所有类型的父类,较旧的HTML利用SGML , HTML4.0使用派生自XML的XHTML。

3. CSS（cascading style sheets级联样式表）中的选择器是什么？

选择器在你想应用一个样式的时候,帮助你去选择元素。举例，下面是简单的被命名为”instro” 的样式,他适用于HTML元素显示红色背景

<style>
.intro{
  background-color:red;
}
</style>

应用上面的”intro” 样式给div ,我们可以使用”class”选择器,如下图所示

<div class=' intro'>
<p>My name is Shivprasad koirala</p>
<p>l write interview questions.s</p>
</div>

4. 如何使用ID值来应用一个CSS样式？

假设,你有一个HTML段落标签,使用id是”mytext”,就和下面的片段中显示的那样<p id=" mytext ">This is HTML interview questions.</p>你可以使用”#”选择器和”id”的名字创建一种样式 ,并把CSS值应用到段落标签中,因此应用样式到"mytext"元素，我们可以使用"#mytext",如下图所示

<style> 
#mytext
background-color:yellow;
</style>

5. 你能解释一下CSS的盒子模型么？

CSS和模型是围绕在HTML元素周围的定义Border(边界)，

padding(内边距)和margin(外边距)的矩形空间
Border(边界) :定义了元素包含的最大区域,我们能够使
边界可见,不可见,定义高度和宽度等;
Padding(内边距) :定义了边界和内部元素的间距
Margin :定义了边界和任何相邻元素的间距

例如以下是简单的CSS代码定义了盒子的边界,内边距和外边距值

.box {
width: 200px;
border: 10px solid #99c;
padding: 20px; 
margin: 50px;
}

现在如果我们应用了以上的CSS到一个如下显示的DIV标签,你输出将会和下面图形中显示的那样。我已经创建两个测试"Some text"和"Some other text", 因此我们能看到多少margin(外边距)的属性功能

<div align= 'middle' class='box'>
Some text
</div>
Some other text

6. 你能解释一些CSS3中的文本效果么？

阴影文本效果

.specialtext
text-shadow: 5px 5px 5px #FF0000;

文字包装效果

<style>
.breakword
{word-wrap:break-word;}
</style>

7. 什么是Web Workers？为什么我们需要他们？

  • 考虑以下会执行.上百万次的繁重的循环代码
function SomeHeavyFunction()
for (i= 0; i< 1000000000000; i++)
x=i+ X;

比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作<input type= 'button' onclick= SomeHeavyFunction();'/>这个会进一步导致浏览器冻结并且没有相应,屏幕还会显示如下的异常信息如果你能移动这些繁重的循环到Javascript文件中, 采用异步的式运行,这意味着浏览器不需要等到循环接触，我们可以有更敏感的浏览器,这就是web worker的作用Web worker帮助我们用异步执行Javascript文件

8. Web Worker线程的限制是什么？

Web worker线程不能修改HTML元素,全局变量和Window.Location一类的窗口属性。你可以自由使用Javascript数据类型,XMLHttpRequest调用等。

9. 为什么要初始化CSS样式?

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

最简单的初始化方法就是: # {padding: 0; margin:0;}(不建议)

淘宝的样式初始化:

body,h1,h2,h3，h4,h5，h6,hr,p,blockquote,dl,dt,dd,ul, ol, form, fieldset, legend,button, input,(
padding:0;
}
h1,h2,h3,h4,h5，h6{
font-size: 100%;
}
address ,cite,dfn,em，,var { 
font-style:normal;
}
code,kbd, pre,samp { 
font- family : cour iernew,
courier，
monospace;
}
small{
font-size: 12px;
}
ul,ol {
list-style:none;
}
a{ 
text-decor ation:none ;
}
a : hover
{ 
text-decoration:underline;
}
sup{ 
vertical-align: text-top;
}
sub{
ver tical-align: text-bottom;
}
legend
{ color : #000;
fieldset,img {
border :0;
}
button,input，select, textarea { 
font-size: 100%
}
table{
border-collapse:collapse;
border-spacing:0;
}

10. css定义的权重

以下是权重的规则:标签的权重为1,class的权重为10 , id的权重为100 ,以下例子是演示各种定义的权重值:

div{},
class1{},
#id1{},
#id1 div{},
. class1 div{},
class1 .class2 div{}

11. 列出display的值、position的值，并说明他们的作用。

1.display的值及作用

  • block:象块类型元素一样显示。
  • none:缺省值。象行内元素类型一样显示。
  • inline-block:象行内元素一样显示,但其内容象块类型元素一样显示。
  • list-item:象块类型元素一样显示，并添加样式列表标记。

2.position的值及作用

  • absolute:生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。
  • fixed:(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。
  • relative:生成相对定位的元素,相对于其正常位置进行定位。
  • static :默认值。没有定位,元素出现在正常的流中
  • (忽略top，bottom， left， right z- index声明)。
  • inherit:规定从父元素继承position 属性的值。

12. CSS3新增伪类举例：

p:first-of-type选择属于其父元素的首个<p> 元素的每个<p>元素。
p:last-of-type选择属于其父元素的最后<p> 元素的每个<p>元素。
p:only-of-type选择属于其父元素唯一 的<p> 元素的每个<p>元素。
p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2)选择属 于其父元素的第二个子元素的每个<p>元素。
: enabled :disabled控制表单控件的禁用状态。
: checked 单选框或复选框被选中。

13. 如何居中div？如何居中一个浮动元素？

给div设置一个宽度,然后添加margin:0 auto属性

div{
width: 200px;
margin:0 auto;
}

居中一个浮动元素,确定容器的宽高宽500高300的层设置层的外边距

.div
Width:500px ;
height :300px; //高度可以不设
margin:- 150px 0 0 -250px;
position:relative;相对定位
background-color :pink;//方便看效果
left: 50%;
top:50%;
}

14. 浏览器的内核分别是什么?

IE浏览器的内核Trident、Mozilla的Gecko、 Chrome的Blink( WebKit的分支)、Opera内核原为Presto，现为Blink ;

15. GET和POST的区别，何时使用POST？

GET :一般用于信息获取,使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符;
POST :一般用于修改服务器上的资源,对所发送的信息没有限制。
GET方式需要使用Request. QueryStrinIg来取得变量的值， 而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值,而Pos t是通过提交表单来传值然而，在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据( POST没有数据量限制)
  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

16. 渐进增强和优雅降级

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

17. HTTP和HTTPS

HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层( ssr或rsL) , 这个时候,就成了我们常说的HTTPS。
默认HTTP的端口号为80 , HTTPs的端口号为443。

18. 为什么HTTPS安全?

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS ,密钥在你和终点站才有。https之 所以比http安全,是因为他利用ssl/t1s协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配, refer传递等。保障了传输过程的安全性

19. 简述一下你对 HTML 语义化的理解？

  • 用正确的标签做正确的事情。
  • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

20. Label 的作用是什么？是怎么用的?

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
Label有两种用法:一种是id绑定,一种是嵌套

< label for='Name ' >Number: </label>
< input type="text"name='Name' id='Name'/ >
< label >Date: <input type='text' name='B'/ ></label>

21.iframe 框架有那些优缺点？

优点

  • iframe 能够原封不动的把嵌入的网页展现出来。
  • 如果有多个网页引用iframe，那么你只需要修改 iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  • 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe来嵌套，可以增加代码的可重用。
  • 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe来解决。

缺点

  • 框架结构中出现各种滚动条
  • iframe 会阻塞主页面的 Onload事件
  • 搜索引擎的检索程序无法解读这种页面，不利于 SEO
  • iframe和主页面 共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

22. HTML 与 XHTML 二者有什么区别

应该使用 XHTML ，因为 XHTML是 XML重写了HTML的规范，比HTML更加严格，表现如下：
1、XHTML中所有的标记都必须有一个相应的结束标签
2、XHTML所有标签的元素和属性的名字都必须使用小写；
3、所有的XML标记都必须合理嵌套；
4、所有的属性都必须用引号""括起来；
5、把所有‹和&amp; 特殊符号用编码表示；
6、给所有属性附一个值；
7、不要在注释内容中使用“--”；
8、图片必须使用说明文字。

23. HTML5 的 form 如何关闭自动完成功能？

将不想要自动完成的 form 或 input设置为 autocomplete=off

24.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别

  • title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于H1；H1概括的是文章主题，一个页面最好只用一个H1，seo权重低于title。
    A.从网站角度而言，title则重于网站信息标题，突出网站标题或关键字用title，一篇文章，一个页面最好只用一个H1，H1用得太多，会稀释主题；一个网站可以有多个title，最好一个单页用一个title以便突出网站页面主题信息。
    B.从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用户，要突出其视觉效果。
    C.从SEO角度而言，title的权重高于H1，其适用性要比H1广。
  • b为了加粗而加粗，strong为了标明重点而加粗
    A. b这个标签对应bold ,即文本加粗，其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
    B.strong这个标签意思是加强字符的语气,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
  • 同上i为了斜体而斜体,em为了标明重点而斜体，且对于搜索引擎来说strong和em比b和i要重视的多

25. 请描述下 SEO 中的 TDK？

在 SEO中，所谓的 TDK其实就是title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords关键词标签

26. Doctype，知道这是干什么的么？

‹!DOCTYPE›声明位于文档中的最前面的位置，处于 ‹html›标签之前。
1.告知浏览器文档使用哪种 HTML 或 XHTML规范。
2.告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）

  • doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
    声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行，位于html标签之前。
  • 浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype来区分这两种模式，doctype在 html 中的作用就是触发浏览器的标准模式，如果 html 中省略了doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。

27. src 与 href 的区别

src用于引用资源，替换当前元素；
href用于在当前文档和引用资源之间确立联系。

28. 严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

29. 对于 WEB 标准以及 W3C 的理解与认识问题

  • web 标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML 标签组成。或许通俗点说，在页面 body里面我们写入的标签都是为了页面的结构。表现即指css 样式表，通过 css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。
  • web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
  • W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
    1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO很有帮助）
    1）标签字母要小写
    2）标签要闭合
    3）标签不允许随意嵌套
    2.对于 css和js 来说
    1）尽量使用外链 css样式表和js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
    2）样式尽量少用行间样式表，使结构与表现分离，标签的id 和class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
    3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

30. 列举 IE 与其他浏览器不一样的特性？

a. IE的排版引擎是 Trident（又称为 MSHTML）
b. Trident内核曾经几乎与 W3C 标准脱节（2005 年）
c. Trident内核的大量Bug等安全性问题没有得到及时解决
d. JS方面，有很多独立的方法，例如绑定事件的 attachEvent、创建事件的 createEventObject 等
e. CSS 方面，也有自己独有的处理方式，例如设置透明，低版本 IE 中使用滤镜的方式

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS 面试题整理（一）
    1.web标准： (1)结构标准：其语言主要包括XHTML（实现HTML向XML的过渡。）和XML（用于弥补HTM...
    张果果阅读 9,166评论 0赞 13
  • HTML & CSS面试题（含答案）
    问：对WEB标准以及W3C的理解与认识？ 答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css...
    LuckyJin阅读 7,846评论 0赞 11
  • HTML+CSS面试题
    1. 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层、表示层、行为层分别是：HTML、CSS、Ja...
    程序猿人王小贱阅读 5,864评论 1赞 11
  • html+css面试题
    1.如何理解html语义化 html语义化是指从代码上展示页面的结构，而不是从最终视觉上来表现结构。 1.2 表现...
    林不羁吖阅读 3,077评论 0赞 0
  • html&&css面试题
    1. 什么是盒子模型？ 2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 3. CSS实现垂直水...
    王帅同学阅读 4,026评论 0赞 0