## HTML面试题

HTML面试题

1. DOCTYPE 的作用是什么？
   DOCTYPE是document type(文档类型)的简写,声明位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档（哪种HTML或XHTML）标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

2. 标准模式与兼容模式各有什么区别？
   标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

   兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看。

   具体区别：
   

   1.盒模型
   在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
   在兼容模式中 ：width则是=width+padding+border

   2.兼容模式下可设置百分比的高度和行内元素的高宽
   在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
   在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

   3.用margin:0 auto设置水平居中在IE下会失效
   使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
   body{text-align:center};#content{text-align:left}

   4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

3.SGML 、 HTML 、XML 和 XHTML 的区别？

GML

    是第一代置标语言，使文档能明确将标示和内容分开。
    GML主要用来解决不同系统中文档格式不同的问题。

SGML

    在 GML 的基础上进行整理，形成了一套非常严谨的文件描述方法。它的组成包括语法定义，DTD(W3C DTD 教程)，文件实例三部分。
    SGML是国际上定义电子文档和内容描述的标准。
    SGML因太严谨规范达500多页，故而不易学、不易用、难以实现，所以在它的基础上又发展出了其他的更易用的置标语言。

HTML (HyperText Markup Language) / 超文本标记语言

    是人们抽取了 SGML的一个微小子集而提取出来的。其早期规范比较松散，但比较易学。

XML (Extensible Markup Language )/ 可扩展标记语言

  也是 SGML 的一个子集，但使用比较严格的模式。

XHTML (Extensible Hypertext Markup Language) / 可扩展超文本标记语

	它的出现是因为HTML扩充性不好，内容的表现跟不上时代的变化（如无法表示某些化学符号等），以及因为性能的问题，官方逐渐趋于严格的模式，所以使用 XML的严格规则的XHTML成了W3C 计划中 HTML 的替代者。

HTML5

	经过一系列修订，到现在说的 HTML 一般指 HTML 4.01；
    而现在的 HTML 5则是 HTML 的第五个修订版，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。
    HTML5本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的html5实际上是html与css3及JavaScript和api等的一个组合，大概可以用以下公式说明：HTML5≈HTML+CSS3+JavaScript+API

4.空元素定义
没有内容的HTML元素，比较常见的空元素像img link br meta这种，他们往往没有关闭标签

5.你是如何理解语义化的？
*HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
*在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
*搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
*使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

6.meta viewport 是做什么的？怎么写?
meta viewport是专门为移动设备下的显示所设计的，为了在移动设备下，网页不需要缩放和滚动条就能查看网页中的所有内容，文字、图片大小合适等，只有检测都在移动设备上使用包含了meta的文档时，这个标签才会起作用。
写法：meta name=“viewport” content=“width=device-width, initial-scale=1.0”
7.你用过哪些 HTML 5 标签？
table div p h1~h3 hr ul ol li body html
thead tbody tfoot tr th/td
8.H5是什么？
超文本标记语言

9.页面导入样式时，使用 link 和 @import 有什么区别？

1. 所属范围
   @import 是css的语法，只能导入样式
   link是html的标签，不仅可以加载样式，还可以定义rel属性
   rel="stylesheet"表示调用外部样式表
2. 加载顺序
   页面加载的时候，link标签引入的css被同时加载
   @import引入的css在页面加载完毕后再被加载
3. 兼容性
   @import需要兼容IE5+
   link标签，不存在兼容性问题
   10.Label 的作用是什么？是怎么用的？
   label是表单组件，用于表示某一表单组件的标题；
   for与为设定标题的表单组件的ID值一致

11.请写出至少5个HTML块元素标签
table div p h1~h3 hr ul ol li body html caption
12.请写出至少5个HTML行内元素标签
span input a image em i strong label br sup sub textarea
13.请写出table标签下面会包含哪些标签元素
thead tbody tfoot tr th/td caption