HTML面试题

1、谈谈你对web标准和w3c的理解和认识。 标签要闭合，英文要小写，且不要嵌套混乱，用标签语义化来提高搜索的概率；使用外链式的CSS和JS脚本，使得结构、样式、行为分离，内容能被广泛的设备所访问，代码精简，开发组件化，代码易维护、可复用、改版、升级方便； 2、HTML和XHTML有什么区别？HTML是一种基于web网页的设计语言，XHTML是一种基于XML、语法严格、标准的设计语言。两者的主要区别是不同是XHTML元素必须正确的嵌套，元素必须关闭，标签必须小写，必须有根元素；HTML没有这些限制。 3、严格模式和混杂模式如何区分？如何触发这两种模式？ 严格模式就是浏览器根据web标准去解析页面的方法，是一种要求严格的DTD，不允许使用任何表现层的语法，混杂模式是一种向后兼容的解析方法； 触发严格模式或者标准模式很简单，就是在html标签前声明正确的DTD；触发混杂模式可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明。 4、什么是静态页面？什么是动态页面？ 静态页面是指没有数据交互的网页，就是没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有HTML+CSS+Javasript作出的网站； 动态页面就是指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要后台逻辑的支持，比如动态网页就是JSP页面（后台语言是JAVA）、ASP页面（后台语言是ASP.NET）等。 5、DOCTYPE有什么用？区分严格模式与混杂模式有什么用？

区分严格模式和混杂模式的意义如下: 严格模式的排版和Javascript运行模式以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作（主要针对IE浏览器）。 6、如何调试网页代码？如何查看网页源代码？ F12 7、语义化的主要目的是什么？ 用正确的标签做正确的事情。 HTML语义化可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护性和可重用性； 8、锚点的作用是什么？如何创建锚点？ 锚点是文档中某一行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义锚点后，可以创建直接跳至该锚点（比如页面中的某个小节）的链接，这样使用者就无须不停的滚动页面来寻找他们需要的信息了。 在使用元素创建锚点时，可以使用name属性为其命名。对其他元素，还可以使用id属性为其命名。 9；、列举常用的结构标签，并描述其作用。 结构标签专门用于标识页面的不同结构，相对于使用

元素而言，结构标签可以实现语义化的标签。常用的结构标签有以下几种。

元素，用于定义文档的页眉。 元素，用于定义页面的导航链接部分。 元素，用于定义文档中的节，表示文档中的一个具体的组成部分。 元素，常用于定义独立于文档其他部分的内容。 元素，定义某区域的脚注信息。 元素，常用于定义页面的一些额外组成部分，如广告栏，侧边栏和相关引用信息。 10、超级链接有哪些常见的表现形式? 元素用于创建超级链接，常见表现形式： （1）普通超级链接，语法为cbd （2）下载链接，即目标文档为下载资源，语法为下载 （3）电子邮件链接，用于链接到E-mail，语法为 （4）联系我们链接。 （5）空链接。用于返回页面顶部，语法为... （6）锚点跳转，用于跳转到页面某一位置，目前用于前端路由，语法为.... （7）用于实现特定的代码功能，语法为... 11、你测试过哪些浏览器的页面，它们的内核分别是什么？ IE(Trident)、Firefox(Gecko)、Chrome与Safari(Webkit)、Opera(Presto). 12、div是什么？在div出现之前用什么做网站布局？ div是网站布局的盒子标签。div出现之前使用table布局，因为table布局嵌套很多。网站加载慢（table无法局部渲染），布局层级不清晰。 13、img标签上的title和alt属性的区别是什么？ title的功能是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；alt的功能是图片的替换文案，即当图片不能正常显示时（如加载失败），用文字代替。 14、空元素有哪些？ 空元素就是通常所说的但标签元素有

---

15、简述src和href的区别 src表示来源地址，用在img、script、iframe等元素上。 href表示超文本引用（hypertext reference），用在link和a等元素上。 src的内容是页面必不可少的一部分，表示引入。href的内容与该页面有关联，表示引用。简单来说，它们的区别是引入和引用。 16、简述和标签的区别 标签和标签一样，用于强调文本，但它强调的程度更强一些； 是斜体强调标签，强调更强烈、表示内容的强调点。视觉上相等于html元素中的...。和是表达元素（phrase element），即语义化元素。 是视觉元素，即非语义化元素，分别表示无意义的加粗和无意义的斜体。 17、你知道多少种DOCTYPE?HTML和XHTML有什么共同点？ DOCTYPE标签可声明3种文档类型，分别表示严格版本(Strict)、过渡版本（Transitional）和基于框架（Frameset）的HTML文档。 HTML4.01规定了3种文档类型：严格版本(Strict)、过渡版本（Transitional）和基于框架（Frameset）。 XHTML1.0规定了3中XML文档类型：严格版本(Strict)、过渡版本（Transitional）和基于框架（Frameset）。 浏览器通常有两种呈现模式Standards和Quirks。 Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页。 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。 HTML和XHTML的共同点如下： （1）所有的标记都必须要有一个相应的结束标记； （2）所有标签的元素和属性的名字都必须使用小写； （3）所有的XML标记都必须符合嵌套。 （4）所有的属性必须用引号“”括起来。 （5）所有的"<"和"&"特殊符号都用编码表示。 （6）给所有属性赋一个值。 （7）不要在注释内容中使用“--”。 （8）图片必须有文字说明。 18、在新窗口打开链接的方法是？ target=_blank. 19、HTML、CSS、Javascript的关系是什么？ （1）HTML是前端内容的载体，是内容显示的框架；内容就是网页制作者放在页面上想让用户浏览的信息，包括文字、图片、视频等。 （2）CSS是网页内容的表现，就像对网页进行包装。比如字体、颜色、边框等，这些都是用来改变内容外观的东西。 （3）Javascript用来实现网页的特效和交互。比如，当光标放在某个链接上时背景颜色改变等。 20、在一个特定的框架中如何使用HTML中的超链接定位？ 可以使用"target"属性在指定的框架中打开被链接文档。 new page 21、iframe有哪些优点？ iframe有如下优点：（1）可以解决加载缓慢的第三方内容，如图标和广告等的加载问题； （2）可以实现安全沙箱（Security Sandbox）。 （3）可以并行加载脚本 22、缺点？ （1）iframe会阻塞主页的onload事件； （2）iframe的内容即使为空，加载它也需要时间； （3）iframe元素没有语义 23、对语义化的理解 语义化标签有如下特点：(1)丢失样式的时候能够让页面呈现清晰的结构。 （2）SEO是指和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。爬虫依赖标签例确定上下文和各个关键字的权重。 （3）其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。 （4）在团队开发和维护中，语义化更具有可读性，是未来网页发展的重要方向，遵循w3c标准的团队开发的网页，都会遵循这个标准，以减少差异。 注：HTML语义化标签是重点！