第一部分：HTML问答题 1.简述一下你对HTML语义化的理解？用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。2.Label的作用是什么？是怎么用的？label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。<label for="Name">Number:</label><input type=“text“name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>3.iframe有那些缺点？*iframe会阻塞主页面的Onload事件；*搜索引擎的检索程序无法解读这种页面，不利于SEO;*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。动态给iframe添加src属性值，这样可以绕开以上两个问题。4.HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。1.XHTML 元素必须被正确地嵌套。错误：<p><span>this is example.</p></span>正确：<p><span>this is example.</span></p>2.XHTML 元素必须被关闭。错误：<p>this is example.正确：<p>this is example.</p>3.标签名必须用小写字母。错误：<P>this is example.<P>正确：<p>this is example.</p>3.1空标签也必须被关闭错误：<br>正确：<br/>4.XHTML 文档必须拥有根元素。所有的 XHTML 元素必须被嵌套于 <html> 根元素中。 5.常见的浏览器内核有哪些？Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]6.简述一下你对HTML语义化的理解？用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。7.HTML5的form如何关闭自动完成功能？给不想要提示的 form 或某个 input 设置为 autocomplete=off。8.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。<div style="height:1px;overflow:hidden;background:red"></div>9.title与h1的区别、b与strong的区别、i与em的区别？title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。i内容展示为斜体，em表示强调的文本；Physical Style Elements -- 自然样式标签b, i, u, s, preSemantic Style Elements -- 语义样式标签strong, em, ins, del, code应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。10.请描述下SEO中的TDK？在SEO中，所谓的TDK其实就是title、description、keywords这三个标签，这三个标签在网站的优化过程中title标题标签，description描述标签，keywords关键词标签11.简单书写HTML代码：请写出一个html网站代码，内容为一个图片，链接到“http://www.baidu.com”，图片路径为“./img/logo.png”,为图片设置替换文本”webfoss”,新网页在新窗口打开；答： <a href=”http://www.baidu.com” alt=”webfoss” target=”_blank”><img src=”./img/logo.png”></a>12.标签上title与alt属性的区别是什么？alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。13.前端页面有哪三层构成，分别是什么？作用是什么？分成：结构层、表示层、行为层。结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。14.每个HTML文件头里都有个很重要的东西，Doctype，知道这是干什么的么？<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。作用：1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。2.告诉浏览器按照何种规范解析页（如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面）15.DIV+CSS布局较table有什么优势？1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；2、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；3、对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形；4、修改更有效率，由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时，提高工作效率；16.为什么用多个域名存储网站资源更有效？1、CDN缓存更方便2、突破浏览器并发限制3、节约cookie带宽4、节约主域名的连接数，优化页面响应速度5、防止不必要的安全问题17.简要说明一下做好SEO需要考虑哪些方面？1.TDK2.图片+alt3.友情链接4.站点地图第二部分：HTML单选题1.以下描述错误的是（A）html需要先编译之后才能执行html需要存放在应用服务器端，客户端请求后才会将html程序返回给客户端html是需要浏览器解析的html语言就是把我们需要的内容显示在浏览器，但是html语言本身不显示2.以下描述错误的是(C)A.html分为<html><head><body>三个基本标记结构B.head头标签，可以添加关键字描述网站优化网站C.通常我们显示的内容都会放在<body>标签，通常html只能使用一次D.<!DOCTYPE>属于HTML标签，它是一种标准通用标记语言的文档类型声明3.在HTML语言中，设置表格单元格之间距离的是（B）和单元格和文字之间距离的是（C）A.borderB.cellspacingC.cellpaddingD.width4.以下对标签描述正确的(多选)（ABC）A.h1,h2,h3,h4,h5,h6标签是显示标题从h1到h6从大到小的过程B.b标签呈现粗体文本C.I标签呈现斜体文字5.以下描述错误的是（D）html分为 <html> <head> <body>三个基本标记结构。head头标签可以加关键字、描述网站、优化网站通常我们显示的内容都会放在<body>标签，通常html只能使用一次。<!DOCTYPE> : 属于html标签，它是一种标准通用标记语言的文档类型声明。6.以下说法错误的是（D）A.<p> 标签 ： 标签定义段落B.<br> : 简单的换行C.<dl>标签： 自定义列表D.<dd>: 自定义标题7.以下对标签描述正确的（多选）（A,C,D）A.h1,h2,h3,h4,h5,h6 标签是显示标题从h1到h6,从大到小的过程B.tt标签对表格的限定标签C.b 标签呈现粗体文本D.i 标签呈现斜体文字8.在HTML语言中，设置表格单元格之间距离的标签是（ B ）和单元格内文字与边框的距离 的标签是（C）A.<table border=””>B.<table cellspacing=””>C.<table cellpadding=””>D.<table width=””>第三部分：CSS问答题1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；（3）区 别： IE的content部分把 border 和 padding计算了进去;2.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 height3.css定义的权重 标签的权重为1，class的权重为10，id的权重为1004.如果需要手动写动画，你认为最小时间间隔是多久，为什么？ 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms5.简单介绍下CSS的盒子模型，他都包含哪些属性？ width,height,margin,padding,border6.宽高都200px的div在浏览器窗口居中（水平垂直都居中） position:fixed;width:200px;height:200px;left:50%;top:50%; margin-left:-100px;margin-top:-100px;7.一个满屏 品 字布局 如何设计? <div style=”margin:0 auto;width:50%;”></div> <div><div style=”width:50%;float:left;”></div><div style=”width:50%;float:left;”></div> </div>8.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}9.display:none;跟visibility:hidden;的区别是啥？ display:none;不占位，visibility:hidden;占位10.低版本浏览器不支持display:inline-block属性，请问怎么兼容*display:inline;*zoom:1;11.在使用display:inline-block时，inline-block元素会有4px左右的空隙，这是什么原因导致的以及解决方法（1） 取消换行和空格（2） 设置父元素的font-size为0，在给子元素设置自身的字体大小 12.写出下面三个的区别？*height{}_height{}+height{}* IE7及以下_IE6+IE713.Inline-block默认的对其方式是什么？在使用inline-block时在内容不同的时候想要保持内容水平对齐，说一下你采用的方法？默认对齐方式：base-line水平对齐：vertical-align:top;14.简明说一下CSS link于@import的区别和用法link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。link支持使用Javascript控制DOM去改变样式；而@import不支持。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
