×

HTML+CSS知识

匿名 匿名 发表于2018-09-16 11:34:56 浏览133 评论0

抢沙发发表评论

1、对web标准以及w3c的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离,文件下载与页面速度更快,内容能被更多的用户所访问,内容能被更广泛的设备所访问,更少的代码和组件,容易维护,改版方便,不需要变动页面内容,提供打印版本而不需要复制内容,提高网站易用性。

2、xhtml和html有什么区别?

HTML是一种基本的web网页设计语言;

XHTML是一个基于XML的置标语言。

主要的不同:

1)、 XHTML元素必须被正确的嵌套;

2)、 XHTML元素必须被关闭;

3)、标签名必须用小写字母;

4)、XHTML文档必须拥有根元素。

3、Doctype的作用?严格模式和混杂模式的区别?它们有什么意义?

1)、<!Doctype>声明位于文档的最前面。在<HTML>标签的前面,告知浏览器以何种模式来渲染文档。

2)、严格模式的排版和JS运作模式都是以浏览器支持的最高标准运行。按照W3C的标准来解析代码。

3)、混杂模式是宽松的,向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码, 模拟老式浏览器的行为以防止网站停止工作。

4)、若DOCTYPE为声明或格式不正确,页面将会以怪异模式的方式解析。

5)、DOCTYPE标签可声明三种DLD类型,分别是严格型,过渡型,框架型。

4、行内元素有哪些?块级元素有哪些?css的盒模型?

块级元素:div、p、h1...h6、form、ul、li

行内元素:a、b、br、i、span、input、select

css盒模型:内容、填充(padding)、边框(border)、外边距(margin)

5、css引入的方式有哪些?link和@import的区别是?

方式:

内联方式、嵌入方式、链接方式、导入方式。

区别:

1)、link是Xhtml标签,除了加载css外,还可以定义rss等其他事务;@import属于css范畴,只能加载css。

2)、link引用css时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

3)、link是XHTML标签,无兼容问题,@import是在css2.1提出的,低版本的浏览器不支持。

4)、link支持使用控制dom去改变样式,而@import不支持。

6、css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

css选择器:

1)、id选择器(#ID名)

2)、类选择器(.class名)

3)、标签选择器(div,h1,p)

4)、相邻选择器(h1+p)

5)、子选择器(ul>li)

6)、后代选择器(li a)

7)、通配符选择器(*)

8)、属性选择器(a[rel="external"])

9)、伪类选择器(a:hover,li:nth-child)

可继承的样式:

1)、font-size

2)、font-family

3)、color

4)、text-indent

优先级算法:

1)、优先级就近原则,同权重情况下样式定义最近者为准

2)、载入样式以最后载入的定位为准

3)、!important比内联优先级高,但内联比id要高

7、五大主流浏览器及其内核

1)、IE浏览器内核:Trident内核,也是俗称的IE内核;

2)、Chrome浏览器内核(谷歌):统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;

3)、Firefox浏览器内核(火狐):Gecko内核,俗称Firefox内核;

4)、Safari浏览器内核:Webkit内核;

5)、Opera浏览器内核:最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核

8、标签上title与alt属性的区别是什么?

alt当图片不显示时,用文字代表

title为该属性提供信息

9、描述css reset的作用和用途

每个浏览器都有一些自带的或者共有的默认样式,或造成一些布局上的困扰,css reset的作用就是重置这些默认样式,使样式表现一致。为了让页面获得浏览器跨浏览器的兼容性,需要用重置文件css代码覆盖浏览器默认的样式来统一样式。

10、解释css sprites如何使用?

css sprites:精灵图,把一堆小图片整合在一张大图片上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量。

使用步骤:

1)、制作一张具有多状态的拼合图片,需要按照一定规律处理。

2)、给要显示的背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示。

3)、通过背景图定位(background-position)控制不同的显示状态。

11、浏览器标准模式和怪异模式之间的区别是什么?

标准模式:浏览器按w3c标准解析执行代码;

怪异模式:使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

使用:

window.top.document.compatMode可显示为什么模式。

12、如何对网站的文件和资源进行优化?

1)、文件合并

2)、文件最小化/文件压缩

3)、使用CDN托管

4)、缓存的使用

5)、GZIP压缩你的JS和CSS文件

13、什么是语义化的HTML?为什么要做到语义化?

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。

语义化的优点:

1)、有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权证。

2)、在没有css的时候能够清晰的看出网页的结构,增强可读性。

3)、便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

4)、支持多终端设备的浏览器渲染。

14、清除浮动的几种方式,各自的优缺点?

1)、使用空标签清除浮动clear:both(理论上能清除任何标签,增加无意义的标签);

2)、使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE);

3)、是用afert伪元素清除浮动(用于非IE浏览器)。

15、如何居中div?如何居中一个浮动元素?

给div设置一个宽度,然后设置元素的左右外边距为auto,比如,margin:0 auto。则可以实现div居中显示。

对于浮动元素设置其左右外边距为关键字auto是无效的。此时,如果需要设置其居中显示,可以:

1)、精确计算其左外边距并进行设置,实现居中显示

2)、使用一个居中显示的div元素包含此浮动元素

16、HTML5的离线存储有几种方式?区别是什么?

cookies、localStorage、sessionStorage

相同点:都存储在客户端

不同点:

1)、存储大小

cookie数据大小不能超过4K。

sessionStorage和localStorage虽然也有存储大小的限制,但比cookie打得多,可以达到5M或更大

2)、有效时间

localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。

sessionStorage数据在当前浏览器窗口关闭后自动删除

cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

3)、数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

17、简述一下src与href的区别?

href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素,当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载,编译,执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这样为什么将JS脚本放在底部而不是头部。

18、简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程状态,当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

19、HTML5为什么只需要写<!DOCTYPE HTML>?

HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.0基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。


群贤毕至

访客