目录
五、页面导入样式时，使用link和@import有什么区别？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
十二、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
十五、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使其不换行即可
十九、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
二十八、很多网站不常用table iframe这两个元素，知道原因吗？
Doctype作用是什么？严格模式与混杂模式如何区分？他们之间有何意义？
一、谈谈你对Web标准的理解。
WEB标准不是某一个标准，而是一系列标准的集合。 网页主要由三部分组成： 1. 结构（Structure）结构化标准语言主要包括XHTML和XML 2. 表现（Presentation）表现标准语言主要包括CSS 3. 行为（Behavior） 行为标准主要包括对象模型（如W3C DOM）、ECMAScript（核心，标准） 并要求这三部分分离。 这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacture <label> 元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。 这是因为，<label> 元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在<label>元素内点击文本，就会触发此控件。rs Association）的ECMAScript标准。
二、使用元素显示文本与使用其他文本标记显示文本有什么同？
<label> 元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。 这是因为，<label> 元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在<label>元素内点击文本，就会触发此控件。
三、锚点的作用是什么？如何创建锚点？
锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 在使用<a> 元素创建锚点时，需要使用name 属性为其命名，代码如下所示： <a name=”anchorname1”>锚点一</a> 然后就可以创建链接，直接跳转到锚点，代码如下所示： <a href=”#anchorname1”>回到锚点一</a>
四、行内元素有哪些？块级元素有哪些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div 默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
五、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;.
六、DOCTYPE作用？标准模式与兼容模式各有什么区别?
（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 （2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
七、HTML5 为什么只需要写 <!DOCTYPE HTML>
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
八、iframe有那些缺点？
iframe会阻塞主页面的Onload事件； 搜索引擎的检索程序无法解读这种页面，不利于SEO; iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。
九、Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>十、CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
十一、display有哪些值？说明他们的作用。
block 像块类型元素一样显示。 none 此元素不会被显示。 inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值
十二、如何居中div？如何居中一个浮动元素？如何让绝对定位的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%; } -
让绝对定位的div居中
position: absolute; width: 1200px; background: red; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;
十三、html5引入了哪些新的表单元素?
datalist
datetime
output
keygen
date
month
week
time
number
range
email
url
十四、CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点） 圆角 （border-radius:8px） 多列布局 （multi-column layout） 阴影和反射 （Shadow\Reflect） 文字特效 （text-shadow、） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转 （transform） 增加了旋转,缩放,定位,倾斜,动画，多背景 transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
十五、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核 Firefox ：gecko内核 Safari : webkit内核 Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核 Chrome: 基于webkit 只要能分清浏览器使用什么内核就得满分（safari和chrome使用webkit内核，Firefox使用gecko内核）
十六、谈谈flex布局
采用 Flex 布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称“项目”。
十七、你简述盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
十八、一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
十九、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
二十、你怎么清楚浮动?
1、在浮动元素后面添加 clear:both 的空 div 元素
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div style="clear:both"></div>
</div>2、给父元素添加 overflow:hidden 或者 auto 样式，触发BFC。
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container{
width: 300px;
background-color: #aaa;
overflow:hidden;
zoom:1; /*IE6*/
}3、使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
.clearfix{
zoom: 1; /*IE6*/
}
.clearfix:after{
content: ".";
height: 0px;
clear: both;
display: block;
overflow: hidden;
}推荐使用第三种方法，不会在页面新增div，文档结构更加清晰。
二十一、CSS盒模型原理
1、W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 2、IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading
二十二、CSS display:none和visibility:hidden的区别
visibility:hidden隐藏，但在浏览时保留位置 display:none视为不存在，且不加载
二十三、简述一下你对HTML语义化的理解？？
1）用正确的标签做正确的事情； 2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析； 3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的； 4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO； 5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。
二十四、谈谈对html5的了解？
1.良好的移动性，以移动设备为主。 2.响应式设计，以适应自动变化的屏幕尺寸 3.支持离线缓存技术，webStorage本地缓存 4.新增canvas，video，audio等新标签元素。新增特殊内容元素：article，footer，header，nav，section等，新增表单控件：calendar，date，time，email，url，search。 5.地理定位… 6.新增webSocket/webWork技术
二十五、 内联元素可以实现浮动吗？
在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。
二十六、写出几种IE6 bug；解决方法？
1）png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理. 2）IE6双倍边距bug：在该元素中加入display:inline 或 display:block 3）像素问题 使用多个float和注释引起的 使用dislpay:inline 一3px 4）超链接hover 点击后失效 使用正确的书写顺序 link visited hover active 5）z一index问题 给父级添加position:relative 6）Min一height 最小高度 ！Important 解决’ 7.select 在ie6下遮盖 使用iframe嵌套 7）为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line一height:1px）
二十七、在html5中 canvas元素的用法是什么？
html5的<canvas>是一个在脚本的帮助下可以绘制图形的元素， <canvas>就像是一个图形的容器，其他的事情会由脚本来完成，我们可以用这个元素去绘制一些图片，图形或者一些小的动画等等。
二十八、很多网站不常用table iframe这两个元素，知道原因吗？
因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好
二十九、手机端文字大小用什么单位？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
三十、了解响应式布局吗？请大体说一说?
响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 设计步骤： 1．设置meta标签 2．根据媒体查询设置样式 3．设置多种视图宽度 4．注意点： 5．宽度使用百分比 6．处理图片缩放问题
html与xhtml二者有什么区别？
功能： xhtml可兼容各大浏览器 手机设备等并且浏览器，也能快速正确的编辑网页；
书写习惯的差别：xhtml的语法书写更加严格一些，所有标签必须小写，标签必须成对出现，标签顺序必须正确，所有属性必须使用双引号"";
Doctype作用是什么？严格模式与混杂模式如何区分？他们之间有何意义？
首先 doctype的作用是为了告诉浏览器该文件的类型，让浏览器解析器知道他们应该用哪个规范来解析文档，严格模式与混杂模式，可以根据Doctype的DDT声明区分，如果DDT是严格型就会以严格形式，呈现出来，如果DDT是过渡型，并且有URL地址，那么会依然会以严格型的去进行呈现，如果没有URL地址的话，就会以混杂模式的出现，如果写错，或者不写，都会进入混杂模式，HTML5 没有DTD，所以没有严格模式和混杂模式的区分，他们的意义就是解析HTML的速度快，不易出错；
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
