html+css面试题

2020-04-02  本文已影响0人  南崽

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的值及作用

2.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请求:

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 语义化的理解？

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 框架有那些优缺点？

优点

缺点

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 的区别

25. 请描述下 SEO 中的 TDK？

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

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

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

27. src 与 href 的区别

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

28. 严格模式与混杂模式

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读