HTML&&css面试题

时间 2019-11-10

标签 html&&css html css 面试栏目 HTML 繁體版

原文原文链接

HTML&css相关问题

1.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
最主要的不一样
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭
标签名必须用小写字母
XHTMl文档必须拥有根元素

2.什么是语义化的HTML？

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签作正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；
在没有样式css状况下也以一种文档格式显示，而且是容易阅读。搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于SEO。
在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2（1）、简述一下你对HTML语义化的理解？

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

3.常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

3(1).常见哪几种浏览器测试？有哪些内核（Layout Engine）？

浏览器：IE、Chrome、FireFox、Safari、Opera
内核：Trident、Gecko、Presto、Webkit

4.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?

HTML5如今已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长。
绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，好比article,footer,header,nav,section
表单控件：calendar,date,time,email,url,search
新的技术webworker,websocktGeolocation
移除的元素
纯表现的元素：basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素：frame,frameset,noframes;
支持HTML5新标签：
IE8/IE7/IE6支持经过document,createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加标签默认的样式。

5.请描述一下cookies,sessionStorage（会话存储）和localStrorage（本地存储）的区别？

cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

五、（1）请描述一下cookies、sessionStorage和localStorage区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。
cookie数据始终在同源的http请求中携带（即便不须要），即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
有期时间：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

6.如何实现浏览器内多个标签页之间的通讯？

调用localstorage,cookies等本地存储方式
WebSocket、SharedWorker
localstroge另外一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，咱们经过监听事件，控制它的值来进行页面信息通讯。
注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。

7.HTML5为何只须要写！DOCTYPE HTML？

HTMl5不基于SGML,所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；而HTMl4.01基于SGMA，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

8.Doctype做用？标准模式与兼容模式各类什么区别？

！Doctype声明位于HTML文档的第一行，处于html标签以前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会致使文档以兼容模式呈现。
标准模式的排版和JS运做模式都是该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式来显示，模拟老式浏览器的行为以防止站点没法工做。

9.Doctype？严格模式与混杂模式如何触发这两种模式，区分它们有何意义？

用于声明文档使用哪一种规范（html/Xhtml）通常为严格过渡基于框架的html文档。
加入XML声明可触发，解析方式更改成IE5.5拥有IE5.5的Bug。

9(1)、HTML5为何只须要写<!DOCTYPE HTML>？

HTML5不基于SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来进行）
而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

十、html document是干吗的？

HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内能够包含图片、连接、甚至音乐、程序等非文字元素。
HTML Document即：HTML Document对象，每一个载入浏览器的HTML文档都会成为Document对象
因为Document对象是window对象的一部分，因此可经过window.document属性对其进行访问。

十一、html5哪些操做能够SEO优化

title标签；meta标签；header标签；footer标签
元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）

十二、css盒模型有哪些及区别content-box border-box padding-box

Q1

IE盒子模型box-sizing:border-box;（怪异模式）
W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式javascript

Q2
content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。因此若是你设置的大小是同样的，content-box看起来，会比border-box大css

1三、行内元素和块状元素的区别？行内快元素的兼容性使用？（IE8如下）

行内元素：会在水平方向排列，不能包含快级元素，设置width无效，height无效（能够设置line-height），margin上下无效，padding上下无效
块级元素：各占据一行，垂直方向排列。重新行开始结束接着一个断行
兼容性：display:inline-block;display:inline;zoom:1;

1四、页面导入样式时，使用link和@import有什么区别？

1.link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel链接属性等做用；而@import是CSS提供，只能加载CSS;
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；

14(1).css引入的方式有哪些？link和@import的区别是？

内联，内嵌，外链，导入
区别：同时加载，
前者无兼容性，后者css2.1如下浏览器不支持
link支持使用javascript改变样式，后者不可。

1五、介绍如下你对浏览器内核的理解？

一、主要分红两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
二、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样、因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其余须要编辑、显示网络内容的应用程序都须要内核
三、JS引擎则：解析和执行javascript来实现网页的动态效果。
四、最开始渲染引擎和JS引擎并无区分得很明确，后来JS引擎愈来愈独立，内核九倾向于只指渲染引擎。

1六、box-sizing经常使用的属性有哪些？分别有什么做用？

box-sizing：content-box|border-box|inherit
content-box：宽度和高度分别应用到元素的内容框。

1七、清楚浮动有哪些方式？比较好的方式是哪种

一、父级div定义height。
二、结尾处加空div标签clear：both。
三、父级div定义伪类：after和zoom。
四、父级div定义overflow：hidden。
五、父级div定义overflow：auto。
六、父级div也浮动，须要定义宽度。
七、父级div定义display：table。
八、结尾处加br标签clear:both。
比较好的是第3种，好多网站都这样用

1八、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

Q1

HTML5如今已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长；
一、绘画canvas；
二、用于媒介回放的video和auto元素；
三、本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
四、sessionStorage的数据在浏览器关闭后自动删除；
五、语意化更好的内容元素，好比article、footer、header、nav、section；
六、表单控件：calendar、date、time、url、search；
七、新的技术html

Q2

IE8/IE7/IE6支持经过document.createElement方法产生的标签；前端

<!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->

1九、iframe的做用？

用法

一、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种不少页面都相同的部分，这样在切换页面的时候避免重复下载。html5

优势
一、便于修改，模拟分离，像一些信息管理系统会用到。
二、但如今基本不推荐使用。除非特殊须要，通常不推荐使用。java

缺点
一、iframe的建立比通常的DOM元素慢了1-2个数量级
二、iframe标签会阻塞页面的的加载，若是页面的onload事件不能及时触发，会让用户以为网页加载很慢，用户体验很差，在Safari和Chrome中能够经过js动态设置iframe的src属性来避免阻塞。
三、iframe对于SEO不友好，替换方案通常就是动态语言的Incude机制和ajax动态填充内容等。css3

20、box-sizing、transition、translate分别是什么？

一、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
二、transition:当前元素只要有"属性"发生变化时，能够平滑的进行过渡。经过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
三、translate：经过移动改变元素的位置；有x,y,z三个属性

2一、选择器优先级是怎样的？

一、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
二、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重
三、比较：先从第一个0开始比较，若是第一个0大，那么说明这个选择器的权重高，若是第一个相同，比较第二个，依次类推。web

2二、有一个导航栏在Chrome里面样式无缺？在IE里文字都聚到一块儿了，是哪一个兼容性问题？
用了display：flex属性，在IE10如下都是无效的。ajax

23.CSS实现垂直水平居中

HTML结构：算法

<div class="wrapper">
    <div class="content"></div>
</div>

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素须要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

方法二

.content{
        position:absolute;
        left:50%;
        top:50%;
        width:200px;
        height:200px;
        background:red;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }

24.display有哪些值？说明它们的做用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。像行内元素类型同样显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，能够设置宽高，同行显示。
list-item 像块类型元素同样显示，并添加样式列表标记。
table 此元素会做为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

25.行内元素有哪些？块级元素有哪些？css的盒模型？

块级元素：div ,p,h1,form,ul,li
行内元素：span,a,label,input,img,strong,em;
css盒模型：内容，border,margin,padding;

2六、写一下audio标签中，如何实现音乐的暂停和播放

play()开始,pause()暂停

26（1）、写出video标签中预加载视频用到的属性是什么

preload

27.css选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？

标签选择符；类选择符；id选择符
id>class>标签选择
important优先级高

28.css清除浮动的几种方法？

使用带clear属性的空标签；
使用css的overflow属性；
使用css的：after伪元素；

同时为了兼容 IE6，7 一样须要配合zoom使用

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
     .clear{zoom:1;}

使用邻接元素处理；
父级设置成inline-block；
br清浮动
以浮制浮（父级同时浮动）
给浮动元素父级设置高度
给父元素添加overflow：hidden 清除浮动方法；
问题：须要配合宽度或者 zoom 兼容IE6 IE7；
```
overflow: hidden;
     *zoom: 1;
```

2九、px、em、rem的区别？

一、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，若是px要换算成物理长度，须要指定精度DPI。
二、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，所以并非一个固定的值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
四、区别：IE没法调用那些使用px做为单位的字体大小，而em和rem能够缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，全部浏览器已支持rem。

30、CSS3新特性有哪些？

一、颜色：新增RGBA、HSLA模式
二、文字阴影(text-shadow)
三、边框：圆角（border-radius）边框阴影：box-shadow
四、盒子模型：box-sizing
五、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔能够设置多背景，用于自适应布局
六、渐变：linear-gradient、radial-gradient
七、过渡：transition可实现动画
八、自定义动画
九、在CSS3中惟一引入的伪元素是::selection
十、多媒体查询、多栏布局
十一、border-image
十二、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
1三、3D转换

3一、标签上title与alt属性的区别是什么？

Alt当图片不显示时，用文字表明
Title为该属性提供信息

3二、描述css reset的做用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不一样，样式不一样，而后重置，让他们统一。

3三、解释css sprites,如何使用？

css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

33（1）、为何要使用css sprites

css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样能够减小。
不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是若是请求太多会给服务器增长很大的压力。

3四、在新窗口打开连接的方法是？

target:_blank

3五、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

结构是html,表现是css

3六、简述对Web语义化的理解？

就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽可能使用语义化的标签，使程序代码简洁明了，易于进行web操做和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。

3七、display:none;与visibility:hidden的区别是什么？

display:none;使用该属性后，HTML元素（对象）的宽高，高度等各类属性值都将“丢失”；
visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在，也便是说它仍然具备高度，宽度等属性值。

3八、请用css定义p标签，要求实现如下效果；字体颜色在IE6下为黑色（#000000）；IE7下为红色（#ff0000）;而其余浏览器下为绿色（#00ff00）

p{
    color:green;
    *color:blue;
    _color:black;
}

3九、前端页面有哪三层构成，分别是什么？做用是什么？

结构层、表示层、行为层
结构层（structural layer）：由HTML或XHTML之类的标记语言负责建立。
表示层（presentation layer）:由css负责建立。
行为层（behaviorlayer）:负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

40、实现布局中间自适应宽度，左右两栏固定宽度

<style>
        .box{
            display:flex;
        }
        .left{
            width: 200px;
            height: 600px;
            background:red;
        }
        .right{
            width: 200px;
            height: 600px;
            background:red;
        }
        .center{
            width: 100%;
            height:600px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="box" >
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

4一、如何在页面上实现一个圆形的可点击区域？

一、map+area或者svg
二、border+radius
三、纯js实现须要求一个点在不在圆上简单算法，获取鼠标坐标等等

4二、介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不一样的？

一、有两种：IE盒子模型、W3c盒子模型
二、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
三、区别：IE的content部分把border和padding计算了进去

4三、你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

4四、IE8如下版本的浏览器中盒模型有什么不一样？

IE8如下浏览器的盒模型中定义的元素的宽高不包括内边剧和边距

4五、写出几种IE6 BUG的解决方法

一、双边距BUG float引发的使用display
二、3像素问题使用float引用的使用display:inline -3px;
三、超连接hover后点击失效，使用正确的书写顺序 link visited hover active
四、le z-index问题给父级添加position:relative
五、png 透明使用js代码改
六、min-height最小高度！important解决
七、select 在ie6下遮盖使用iframe嵌套
八、为何没有办法定义1px左右的宽度器（IE6默认的行高形成的，使用over:hidden,zoom:0.08,line-height:1px）

4六、css选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？

css选择符：类选择器、标签选择器、ID选择器、后代选择器（派生选择器）、群组选择器
能够继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器
优先级算法：
标签内直接定义：1000
ID选择器：100
类选择器：1
内联和important中，important优先级高

4七、css的基本语句构成是？

选择符、属性、值

HTML&&css面试题

HTML&css相关问题

1.XHTML和HTML有什么区别

2.什么是语义化的HTML？

2（1）、简述一下你对HTML语义化的理解？

3.常见的浏览器内核有哪些？

3(1).常见哪几种浏览器测试？有哪些内核（Layout Engine）？

4.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?

5.请描述一下cookies,sessionStorage（会话存储）和localStrorage（本地存储）的区别？

五、（1）请描述一下cookies、sessionStorage和localStorage区别？

6.如何实现浏览器内多个标签页之间的通讯？

7.HTML5为何只须要写！DOCTYPE HTML？

8.Doctype做用？标准模式与兼容模式各类什么区别？

9.Doctype？严格模式与混杂模式如何触发这两种模式，区分它们有何意义？

9(1)、HTML5为何只须要写<!DOCTYPE HTML>？

十、html document是干吗的？

十一、html5哪些操做能够SEO优化

十二、css盒模型有哪些及区别content-box border-box padding-box

Q1

Q2

1三、行内元素和块状元素的区别？行内快元素的兼容性使用？（IE8如下）

1四、页面导入样式时，使用link和@import有什么区别？

14(1).css引入的方式有哪些？link和@import的区别是？

1五、介绍如下你对浏览器内核的理解？

1六、box-sizing经常使用的属性有哪些？分别有什么做用？

1七、清楚浮动有哪些方式？比较好的方式是哪种

1八、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

Q1

Q2

1九、iframe的做用？

用法

优势

缺点

20、box-sizing、transition、translate分别是什么？

2一、选择器优先级是怎样的？

2二、有一个导航栏在Chrome里面样式无缺？在IE里文字都聚到一块儿了，是哪一个兼容性问题？

23.CSS实现垂直水平居中

24.display有哪些值？说明它们的做用。

25.行内元素有哪些？块级元素有哪些？css的盒模型？

2六、写一下audio标签中，如何实现音乐的暂停和播放

26（1）、写出video标签中预加载视频用到的属性是什么

27.css选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？

28.css清除浮动的几种方法？

2九、px、em、rem的区别？

30、CSS3新特性有哪些？

3一、标签上title与alt属性的区别是什么？

3二、描述css reset的做用和用途？

3三、解释css sprites,如何使用？

33（1）、为何要使用css sprites

3四、在新窗口打开连接的方法是？

3五、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

3六、简述对Web语义化的理解？

3七、display:none;与visibility:hidden的区别是什么？

3八、请用css定义p标签，要求实现如下效果；字体颜色在IE6下为黑色（#000000）；IE7下为红色（#ff0000）;而其余浏览器下为绿色（#00ff00）

3九、前端页面有哪三层构成，分别是什么？做用是什么？

40、实现布局中间自适应宽度，左右两栏固定宽度

4一、如何在页面上实现一个圆形的可点击区域？

4二、介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不一样的？

4三、你如何对网站的文件和资源进行优化？期待的解决方案包括：

4四、IE8如下版本的浏览器中盒模型有什么不一样？

4五、写出几种IE6 BUG的解决方法

4六、css选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？

4七、css的基本语句构成是？

看到错误欢迎在评论区指出！！！