当前位置：文档之家 › 300道HTML、CSS习题及面试题(含答案)

300道HTML、CSS习题及面试题(含答案)

  • 格式：pdf
  • 大小：2.32 MB
  • 文档页数：165

下载文档原格式

  / 165

合集下载

htmlcss多选题及答案,前端面试题（含答案）——HTML、CSS相关

htmlcss多选题及答案,前端面试题（含答案）——HTML、CSS相关

htmlcss多选题及答案,前端⾯试题（含答案）——HTML、CSS相关HTML相关1、标签的定义与⽤法。

定义和⽤法声明位于⽂档中的最前⾯的位置，处于 标签之前。

此标签可告知浏览器⽂档使⽤哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表⽰严格版本、过渡版本以及基于框架的 HTML ⽂档。

以下⾯这个 标签为例：在上⾯的声明中，声明了⽂档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进⾏了定义。

浏览器将明⽩如何寻找匹配此公共标识符的 DTD。

如果找不到，浏览器将使⽤公共标识符后⾯的 URL 作为寻找 DTD 的位置。

提⽰和注释：注释： 标签没有结束标签！HTMLHTML 4.01 规定了三种⽂档类型：Strict、Transitional 以及 Frameset。

HTML Strict DTD如果您需要⼲净的标记，免于表现层的混乱，请使⽤此类型。

请与层叠样式表(CSS)配合使⽤：HTML Transitional DTDTransitional DTD 可包含 W3C 所期望移⼊样式表的呈现属性和元素。

如果您的读者使⽤了不⽀持层叠样式表(CSS)的浏览器以⾄于您不得不使⽤ HTML 的呈现特性时，请使⽤此类型：Frameset DTDFrameset DTD 应当被⽤于带有框架的⽂档。

除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：XHTMLXHTML 1.0 规定了三种 XML ⽂档类型：Strict、Transitional 以及 Frameset。

XHTML Strict DTD如果您需要⼲净的标记，免于表现层的混乱，请使⽤此类型。

请与层叠样式表(CSS)配合使⽤：XHTML Transitional DTDTransitional DTD 可包含 W3C 所期望移⼊样式表的呈现属性和元素。

HTML、CSS、JS面试题

HTML、CSS、JS面试题

HTML、CSS、JS⾯试题1.JS中的三种弹出式消息提醒（警告窗⼝、确认窗⼝、信息输⼊窗⼝）的命令是什么？警告窗⼝：alert 确认窗⼝：confirm 信息输⼊窗⼝：prompt2.声明⼀个CSS有⼏种⽅式？①导⼊⼀个已经存在的CSS⽂件： <link rel="stylesheet" type="text/css" href="">②直接在head⾥声明⼀个CSS代码段： <style type="text/css"> …… </style>③直接在元素⾥声明使⽤CSS： style=";"④在CSS⽂件中导⼊另⼀个CSS样式⽂件： @import url("CSS路径)-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的分⽀)]4.⾏内元素、块级元素，空元素有那些1、⾏内元素：span、a、em（强调）、label、textarea、select、sub、sup等2、块级元素：div、ul、ol、li、h1~h6、table、form、p、dl、dd、dt等。

3、空元素：br、hr5.div+css的布局较table布局有什么优点？ 改版的时候更⽅便只要改css⽂件。

页⾯加载速度更快、结构化清晰、页⾯显⽰简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

html、CSS和js面试题

html、CSS和js面试题

Html篇：1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。

此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。

（重点：告诉浏览器按照何种规范解析页面）模式是什么？它和Standards模式有什么区别答案：从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。

遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。

IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。

这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

前端常见的HTML+CSS面试题（附答案）

前端常见的HTML+CSS面试题（附答案）

前端常见的HTML+CSS⾯试题（附答案）HTML1. <image>标签上title属性与alt属性的区别是什么？alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明的。

且长度必须少于100个英⽂字符或者⽤户必须保证替换⽂字尽可能的短。

这包括那些使⽤本来就不⽀持图像显⽰或者图像显⽰被关闭的浏览器的⽤户，视觉障碍的⽤户和使⽤屏幕阅读器的⽤户等。

title属性为设置该属性的元素提供建议性的信息。

使⽤title属性提供⾮本质的额外信息。

参考《alt和title属性的区别及应⽤》2. 分别写出以下⼏个HTML标签：⽂字加粗、下标、居中、字体加粗：<b>、<strong>下标：<sub>居中：<center>字体：<font>、<basefont>3. 请写出⾄少5个html5新增的标签，并说明其语义和应⽤场景section：定义⽂档中的⼀个章节nav：定义只包含导航链接的章节header：定义页⾯或章节的头部。

它经常包含 logo、页⾯标题和导航性的⽬录。

footer：定义页⾯或章节的尾部。

它经常包含版权信息、法律信息链接和反馈建议⽤的地址。

aside：定义和页⾯内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

4. 请说说你对标签语义化的理解？a. 去掉或者丢失样式的时候能够让页⾯呈现出清晰的结构b. 有利于SEO：和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的有效信息：爬⾍依赖于标签来确定上下⽂和各个关键字的权重；c. ⽅便其他设备解析（如屏幕阅读器、盲⼈阅读器、移动设备）以意义的⽅式来渲染⽹页；d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

5. Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?声明位于⽂档中的最前⾯，处于标签之前。

告知浏览器以何种模式来渲染⽂档。

300道HTML、CSS习题及面试题(含答案)

300道HTML、CSS习题及面试题(含答案)

HTML+CSS习题及面试题1.[问答题]根据下面效果图设计页面：两点要求：1.自适应宽度，左右两栏固定宽度，中间栏优先加载；2.要考虑到换肤---------------------------------------------------------------------------------------------------------------------------- 来自：2011腾讯前端面试稿参考：1.自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。

<style type="text/css">*{ margin:0; padding:0px;}.header{ background:#666; text-align:center;}.body{ overflow:hidden;*zoom:1;}.wrap-2{ margin-top:30px;}.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}.footer{ background:#666; text-align:center;}</style><div class="wrap-2"><div class="header">Header</div><div class="body"><div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div><div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div><div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div></div><div class="footer">Footer</div></div>2.使用最新的css3盒布局技术，它允许宽度自适应，改变元素显示顺序，优先加载重要区域。

htmlcssjs考试题及答案

htmlcssjs考试题及答案

htmlcssjs考试题及答案HTML/CSS/JS考试题及答案一、选择题（每题3分，共30分）1. HTML5中，哪个元素用于定义最重要的标题？A. `<h1>`B. `<h6>`C. `<p>`D. `<div>`答案：A2. CSS中，哪个属性用于设置文本的颜色？A. `color`B. `background-color`C. `font-size`D. `text-align`答案：A3. 在HTML中，`<form>`元素的哪个属性用于指定表单数据提交到服务器的URL？A. `action`B. `method`C. `type`D. `href`答案：A4. JavaScript中，哪个函数用于将字符串转换为小写？A. `toLowerCase()`B. `toUpperCase()`C. `trim()`D. `replace()`答案：A5. CSS中，哪个选择器用于选择类名为“header”的所有元素？A. `.header`B. `#header`C. `header`D. `[name="header"]`答案：A6. 在HTML中，哪个元素用于定义客户端脚本？A. `<script>`B. `<noscript>`C. `<embed>`D. `<object>`答案：A7. JavaScript中，哪个对象用于处理浏览器窗口？A. `window`B. `document`C. `navigator`D. `screen`答案：A8. CSS中，哪个属性用于设置元素的宽度？A. `width`B. `height`C. `max-width`D. `min-width`答案：A9. HTML5中，哪个元素用于定义一个节或文档的一部分？A. `<section>`B. `<article>`C. `<div>`D. `<header>`答案：A10. JavaScript中，哪个方法用于将字符串分割成数组？A. `split()`B. `join()`C. `slice()`D. `substring()`答案：A二、填空题（每题4分，共20分）1. HTML中的`<meta>`标签用于提供______信息。

html+css+js面试题

html+css+js面试题一、单项选择(165题)1.html是什么意思？a)高级文本语言b)超文本标记语言c)扩展标记语言d)图形化标记语言2.浏览器针对于html文档起著了什么促进作用？a)浏览器用作建立html文档b)浏览器用作查阅html文档c)浏览器用作修正html文档d)浏览器用作删掉html文档3.默认情况下，使用p标记会形成什么效果？a)在文字p所在位置中加入8个空格b)p后面的文字会变成粗体c)开始新的一行d)p后面的文字可以变为斜体4.哪个标记用于表示html文档的结束？a)/bodyb)/htmlc)/tabled)/title5.meta元素的促进作用就是什么？。

a)meta元素用于表达html文档的格式b)meta元素用于指定关于html文档的信息c)meta元素用于实现本页的自动刷新d)以上都不对6.我们在html页面中制作了一个图像，想在鼠标指向这个图像时浮上一条提示信息，必须采用哪个参数努力做到？a)popb)srcc)altd)msg7.以下的哪一种颜色格式支持上百万种颜色，但是不支持无损压缩？a)bmpb)jpgc)gifd)tif8.哪一个标记用作并使html文档中表格里的单元格在同行展开分拆？a)cellspacingb)cellpaddingc)rowspand)colspan9.使用以下那一种元素可以将声音添加到网页里面？a)soundb)bgsoundc)musicd)voice10.以下html代码中，哪一个就是将词语“runawaybride”表明为verdana字体并且字号为5号的恰当代码？a)runawaybride b)runawaybridec)“runawaybride”d)11.在标签中，下列哪个属性用于给参数传递内容？a)addressb)valuec)amountd)method12.超链接无法链接至以下哪个边线？a)同一html文档内的边线b)磁盘上其他html 文档c)internet上html文档d)计算机，你与它之间没有通信链路13.一个文件夹名称叫做parent，其下分一个叫作test.asp的文件，和一个名叫child的文件夹。

前端面试题（HTML和css部分）

前端⾯试题（HTML和css部分）HTML、CSS部分：⼀、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？新特性：HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API语义化更好的内容标签（header,nav,footer,aside,article,section）⾳频、视频API(audio,video)画布(Canvas) API地理(Geolocation) API本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后⾃动删除表单控件，calendar、date、time、email、url、search新的技术webworker, websocket, Geolocation移除元素：纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；h5新标签兼容：IE8/IE7/IE6⽀持通过document.createElement⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签，当然最好的⽅式是直接使⽤成熟的框架、使⽤最多的是html5shim框架<!--[if lt IE 9]><script> src="/svn/trunk/html5.js"</script><![endif]-->如何区分：DOCTYPE声明\新增的结构元素\功能元素⼆、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？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 ;优先级：!important > id > class > tagimportant ⽐内联优先级⾼,但内联⽐ id 要⾼CSS3新增伪类举例：p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。

htmlcss考试题及答案

htmlcss考试题及答案1. 以下哪个HTML标签用于定义最重要的标题？A. `<h1>`B. `<h6>`C. `<header>`D. `<footer>`答案：A2. CSS中，哪个属性用于设置元素的背景颜色？A. `background-color`B. `background`C. `bgcolor`D. `color`答案：A3. 在HTML中，`<div>`标签的作用是什么？A. 定义文档的头部B. 定义文档的脚部C. 用于对文档中的块级元素进行分组D. 定义文档中的一个段落答案：C4. CSS选择器中，`.class`表示什么？A. 标签选择器B. 类选择器C. ID选择器D. 属性选择器答案：B5. 在HTML中，`<a>`标签的哪个属性用于指定链接的目标？A. `href`B. `src`C. `target`D. `alt`答案：C6. CSS中，`display`属性的哪个值可以使元素以块级元素显示？A. `inline`B. `block`C. `inline-block`D. `flex`答案：B7. HTML5中，哪个标签用于定义文档的主要内容？A. `<body>`B. `<header>`C. `<footer>`D. `<main>`答案：D8. CSS中，`margin`属性的默认值是多少？A. `0`B. `auto`C. `inherit`D. `initial`答案：A9. 在HTML中，`<img>`标签的哪个属性用于定义图像的替代文本？A. `src`B. `alt`C. `title`D. `name`答案：B10. CSS中，`float`属性用于实现什么效果？A. 清除浮动B. 创建浮动布局C. 使元素不换行D. 使元素垂直居中答案：B。

htmlcss面试题

htmlcss面试题HTML/CSS面试题HTML和CSS是前端开发中必不可少的两个技术，掌握好这两个技术对于求职者来说非常重要。

在面试中，面试官常常会问到关于HTML和CSS的问题。

本文将提供一些常见的HTML/CSS面试题，并给出详细的回答。

1. 什么是HTML？HTML（超文本标记语言）是一种用于创建网页的标准标记语言。

它使用标记标签来描述网页的结构，并通过标签来定义文本、图像、超链接、表格等元素的呈现方式。

2. 什么是CSS？CSS（层叠样式表）是一种用于描述网页显示样式的语言。

它通过选择器选取页面中的元素，并通过属性来定义元素的样式，如颜色、字体、边距、背景等。

3. HTML和CSS有什么区别？HTML负责定义网页的结构，而CSS则负责定义网页的样式。

HTML主要由一系列标签构成，用于标记和描述页面的各个部分，如标题、段落、列表等。

而CSS通过引入样式表，控制这些标签的显示效果。

4. HTML5和HTML有什么区别？HTML5是HTML的最新版本，在原有的基础上增加了很多新特性。

相比于HTML，HTML5更强调语义化标签的使用，新增了一些常用的标签和元素，如<header>、<nav>、<video>等。

此外，HTML5还引入了图像、视频、音频等新的媒体元素，并提供了更多的接口和功能，如本地存储、地理定位等。

5. CSS3是什么？CSS3是CSS的最新版本，引入了许多新特性和模块。

它提供了更多的选择器和伪类，增加了过渡效果、动画效果、阴影效果等。

CSS3还支持圆角、渐变、多列布局等现代化的样式效果。

6. 请解释什么是盒子模型？盒子模型是CSS中一个非常重要的概念，它指的是一个元素在页面中所占用的空间。

每个元素都被看作是一个矩形的盒子，这个盒子由内容区、内边距、边框和外边距组成。

7. 请解释HTML中的块级元素和内联元素的区别？块级元素在页面中占据一整行，每个块级元素从新的一行开始显示，它们可以包含其他块级元素和内联元素。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML+CSS习题及面试题1.[问答题]根据下面效果图设计页面：两点要求：1.自适应宽度，左右两栏固定宽度，中间栏优先加载；2.要考虑到换肤---------------------------------------------------------------------------------------------------------------------------- 来自：2011腾讯前端面试稿参考：1.自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。

<style type="text/css">*{ margin:0; padding:0px;}.header{ background:#666; text-align:center;}.body{ overflow:hidden;*zoom:1;}.wrap-2{ margin-top:30px;}.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}.footer{ background:#666; text-align:center;}</style><div class="wrap-2"><div class="header">Header</div><div class="body"><div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div><div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div><div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div></div><div class="footer">Footer</div></div>2.使用最新的css3盒布局技术，它允许宽度自适应，改变元素显示顺序，优先加载重要区域。

[html]<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title><style>.container{display:-moz-box;display:-webkit-box;}div{padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.sider_l{width:250px;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;background:limegreen;}.middle_content{-moz-box-flex:1;-webkit-box-flex:1;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;background:lightpink;}.sider_r{width:250px;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;background:green;}</style></head><body><div class="container"><div class="middle_content">优先加载主内容区</div><div class="sider_l">左边栏</div><div class="sider_r">右边栏</div></div></body></html>[/html]3.上述两种方式兼容性都存在一定问题，可使用position:absolute试试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">html,body{width:100%;height:100%;margin:0;padding:0;}.content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}.left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left: 0;}.center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin :0;width:100%;}.center{margin:0 200px;}.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;to p:0;}</style></head><body><div class="content"><div class="center-ct"><div class="center">center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</div></div><div class="left">left</div><div class="right">right</div></div></body></html>4.<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>左右固宽，中间自适应且优先加载</title><metaname="author"content="Await|*******************"/><meta name="keywords" content="" /><meta name="description" content="" /><style type="text/css">body{margin:0;padding:0;}.main{width: 100%; position: relative; background: #fc0;}.content{ margin:0 210px; background:#f60;}.left{position: absolute; left: 0; top: 0; width:200px; background: #00f;}.right{position: absolute; right: 0; top: 0; width:200px; background: #0f0;}.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; }.clearfix { *zoom: 1; }</style></head><body><header>头部</header><div class="main clearfix"><div class="content">中间<br>中间</div><div class="left">左边<br>左边</div><div class="right">右边</div></div><footer>底部</footer></body></html>5.<div class="m"></div><div class="l"></div><div class="r"></div><style type="text/css">div { outline: 1px solid red; min-height: 200px;}.m{margin:0 200px;}.l,.r {position:absolute;width:200px;background: #f3c;}.l { top:0;}.r { top:0;right:0}</style>2.[问答题]根据下图编写一段XHTML---------------------------------------------------------------------------------------------------------------------------- 来自：淘宝UED Web前端开发面试题参考：考察前端工程师的语义化标签知识以及模块化HTML代码知识。