HTML，CSS · 面试题汇总

[TOC] - Doctype作用？标准模式与兼容模式各有什么区别? （1）、<!DOCTYPE>声明位于HTML文档中的第一行，处于< html >标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 ***** - 行内元素有哪些？块级元素有哪些？空(void)元素有那些？ > 首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“**block**”，则为“**块级**”元素；span默认display属性值为“**inline**”，是“**行内**”元素。（1）行内元素有：a b span img input select strong（强调的语气）（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p ***** ### html、css、js是什么? HTML：超文本标记语言、CSS：层叠样式表、Javascript：动态脚本语言 ### 1. 页面导入样式时，使用**link**和@**import**有什么区别？（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；**而@import是CSS提供的，只能用于加载CSS**; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; （4）link支持使用js控制DOM去改变样式，而@import不支持; ***** ### 2.简述一下你对HTML语义化的理解？ - 用正确的标签做正确的事情。 - html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; - 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; - 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; - 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 ***** ### 3.display有哪些值？说明他们的作用 - block 象块类型元素一样显示。 - none 缺省值。象行内元素类型一样显示。 - inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 - list-item 象块类型元素一样显示，并添加样式列表标记。 - table 此元素会作为块级表格来显示 - inherit 规定应该从父元素继承 display 属性的值 ***** ### 4.CSS3新增伪类有那些? p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。 ***** ### 5.CSS3的新特性 border-radius、box-shadow、text-shadow、gradient 渐变效果、CSS3属性选择器 ### **6.对web标准了解及W3C的认识** web标准简单来说可以分为结构、表现和行为。web标准是将该三部分独立分开，使其更具模块化。 **1.对于结构的要求** 1）标签字母要小写 2）标签要闭合 3）标签不允许随意嵌套 **2.对于css和js的要求** 1）尽量使用外链css样式表和js脚本。 2）标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。 ***** ### 7.src和href的区别 **href**标识超文本引用，用在**link**和**a**等元素上，**href**是引用和页面关联，是在当前元素和引用资源之间建立联系。 **src**表示引用资源，表示替换当前元素，用在**img**，**script**，**iframe**上，src是页面内容不可缺少的一部分。 ### 8.< a >的四个方法，放置正确状态 hover（鼠标悬浮） active（点击时） visited（已访问） link（未访问） a:link ->a:visited->a:hover ->a:active ***** ### 9.box-sizing属性 `box-sizing: content-box|border-box|inherit;` ### 10. 静态网页和动态网页没有数据交换的网页，有后台数据加载的网页 ### 11.Doctype作用？ `<!DOCTYPE>`声明位于文档中的最前面，处于 `<html>` 标签之前。告知浏览器以何种模式来渲染文档。 ### 12.锚点锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义锚点后，可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。在使用< a >元素创建锚点时，可以使用name属性为其命名。 `<a name="school">xxx</a>` `<a href="#school">hhh</a>` ### 13.常用的结构标签 - < header >元素，用于定义文档的页眉 - < nav > 元素，用于定义页面的导航链接部分 - < section >元素，用于定义文档中的节，表示文档中一个具体的组成部分 - < article >元素，常用于定义独立于文档其他部分的内容 - < aside >定义页面的一些额外组成部分，如广告栏、侧边栏和相关的引用信息 - < footer >定义某区域的脚注信息 ### 14.img属性标签上title与alt属性的区别是什么？ * Alt当图片不显示时，用文字代表 * Title为该属性提供信息 ### 15.css选择符有哪些？ * 标签选择符；类选择符；id选择符 * id>class>标签选择 * important优先级高 ### 16. first-child与first-of-type的区别是是什么？ first-child 匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。 first-of-type 匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素。并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都是属于同一级，也就是同辈。 ### 17.content有什么作用？ 1.content属性与 :before 及 :after 伪元素配合使用生成文本内容 2.通过attr()将选择器对象的属性作为字符串进行显示