此篇收录前端面试题HTML基础部分（另一篇文章记录HTML5部分）
理论部分
HTML、 XML、 XHTML、 HTML5分别是什么
- HTML
- 超文本标记语言
- 使用标记标签来描述网页
- XML
- 可扩展标记语言，类似于 HTML
- 可以创建自己的元素（具有自我描述性）
- 设计宗旨是传输数据，而不是显示数据，是一种简单的数据存储语言
- 与HTML的区别：它XML描述数据并集中于数据的内容，HTML的设计目标是显示数据并集中于数据的外观
- XHTML
- 与HTML4.01几乎是相同的，是HTML4.01 向 HTML5 的过渡
- 是一种更严格的HTML版本
- 作为一种 XML 应用被重新定义的 HTML
HTML5简介（另一篇文章将会具体介绍）
- 最新的HTML标准
- 它的设计目的主要是为了在移动设备上支持多媒体
- 添加了新的具有语义化的标签和新的语法特征
- 在一定程度上替代flash
- 能实现多媒体，简单3D，数据库，通信等更大更广层次的应用
浏览器内核， 目前主流的浏览器内核分别是什么
浏览器内核:渲染引擎
负责对网页语法的解析，并渲染网页。决定了浏览器如何呈现网页的内容以及页面的格式信息
主流浏览器内核：
- IE: Trident，沿用到IE11，也被普遍称作”IE内核”。
- Firefox：Gecko
- Safari：Webkit
- Opera：Blink （Presto已被废弃）
- Chrome：Blink（之前也是Webkit内核）
国内其他浏览器：一般采用了双内核，其中之一兼容模式为IE内核， 另一种是极速模式，360浏览器为IE+Webkit
Blink内核和Webkit内核有什么区别： blink内核是由谷歌开发，chromium/chrome浏览器的内核，实际上也是由webkit衍生而来。 此举欲降低Webkit即苹果在浏览器市场的影响力 随着浏览器的发展，苹果的Webkit已经不能满足用户需求，同时也有碍浏览器技术的创新步伐。但是他也表示，谷歌自主研发Blink内核绝非易事，但是新内核将会提升整个开源网络生态系统的机能。谷歌做出此举之际，Mozilla与三星也达成合作协议开发“下一代”浏览器渲染引擎Servo。
对Web标准的理解
Web标准是标准制定机构W3C，为了能让web发展的更“健康”，降低开发难度和开发成本，开发者不必花许多精力在解决浏览器兼容性问题方面
Web标准
不是某一个标准，而是W3C制定的一系列标准，分为结构、表现和行为三部分
结构化标准语言（HTML和XML）
- 更合理的语义化标签
- 使用外链css和js脚本，达到结构与行为、结构与表现的分离，提高页面的渲染速度，更快地显示页面的内容。
- 标签小写，闭合，不允许随意嵌套
- ….
表现标准语言（CSS）
- …
- 行为标准语言（ECMAScript 和 DOM）
- …
- …
对HTML语义化的理解
语义化：用正确的标签做正确的事情，网页能够更好的被机器理解，进而读取页面的信息
标签结构语义化好处：
- 去掉样式能让页面结构呈现清晰
- 有益于SEO，爬虫、搜索引擎只注重语义标记
- 便于团队开发和维护
对结构与表现分离的理解：
并不是说，将HTML,CSS,JS代码单独放一个文件中，就叫分离，而是：HTML只负责结构，保证语义化，布局和元素的定位若能用CSS控制，就不要使HTML加入多余的代码，不要给HTML加入为了修改样式和元素定位的代码。类似的原理，JS也可以控制CSS样式，但如果不是必要的话尽量使用CSS来控制样式
（有些人会使用表现性标记，例如加空元素的方法，来控制页面元素定位）
结构表现分离的好处：
1. 增加代码可读性
2. 利用CSS的重用，组合，继承等特性减少样式的代码量，样式结构上非常清晰
3. 页面视觉有变动只需要修改相应的CSS文件
4. 方便JS脚本编写，比如用JS控制标签的className来方便的改变元素的样式，而不是直接修改其具体样式
渐进增强、 优雅降级、 平稳退化、 向后兼容
渐进增强
对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
向后兼容
兼容低版本浏览器
平稳退化
访问者在他们的浏览器不支持JS的情况下仍能顺利浏览网页，某些功能无法使用，但基本操作仍能完成
HTML标签
HTML模板、头部各标签的意义？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>！DOCTYPE
告知浏览器使用哪种HTML或XHTML规范解析页面lang属性
文档的语言类型。en为English，zh为中文meta
提供有关页面的元信息。 meta标签的name属性有很多值，例如
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
//对设备视口的设定
name="keywords" //文档关键词
name="description" //文档的内容描述
...- title
文档的标题，对搜索引擎来说有很高的权重
Doctype作用？ 严格模式与混杂模式如何区分？ 它们有何意义?
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或XHTML 规范。- 所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
- 触发方式：
浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关， DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示。而混杂模式的触发可以通过在HTML文档开始不声明DTD，或者在DOCTYPE前加入XML声明l<?xml version=”1.0〃 encoding=”utf-8〃?>来实现。
title与h1的区别、 b与strong的区别、 i与em的区别 href 和src的区别
title与h1的区别
title是网站的标题，能告诉搜索引擎和用户这个页面是关于什么主题和内容的网站，title的权重要高于h1
h1是一篇文章的标题，面对用户，需要突出其视觉效果b与strong的区别
两者的样式效果均是加粗，但strong是语义化逻辑标签，加强字符的语气
而b标签只是仅仅将字符变为粗体样式i与em的区别
均为斜体样式，区别与b与strong的区别一样，em具有语义化href 和src的区别
src用于替换当前元素，外部文件的引入，解析到该元素时会等此元素加载完毕再继续向下解析，例如script,img
href用于在当前文档和引用资源之间确立联系。外部资源的引用，解析到该元素时页面不会暂停解析， 例如link,a
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
块、行级元素就不写啦，相信敲过代码的同学都知道~
空元素
<br> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片Label的作用是什么？（加 for 或 包裹）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。在 label 元素内点击文本，浏览器就会自动将焦点转到与label标签的 for 属性与相关元素的 id 属性相同的表单控件上。
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
