HTML高频面试题

1.DOCTYPE 的作用是什么？
声明文档类型，告知浏览器的解析器，用什么文档类型规范来解析这个文档

2.标准模式与兼容模式各有什么区别？
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行
在兼容模式中，页面以宽容的向后兼容的方式显示你，模拟老式浏览器的行为以防止站点无法进行工作。

3.SGML 、 HTML 、XML 和 XHTML 的区别？
SGML(标准通用标记语言)
HTML（超文本标记语言）
XML（可扩展标记语言）
XHTML（可扩展超文本标记语言）

4.空元素定义
只包含单个标签，通常用于在文档中插入部分内容，eg：,

---

5.你是如何理解语义化的？
语义化：通过HTML标签来表示页面包含的信息，
语义化让页面的内容结构化，结构更清晰，
便于浏览器，搜索引擎解析，
便于团队开发和维护，语义化更具有阅读性

7.你用过哪些 HTML 5 标签？
p,h1~h6 ,nav,footer,header,video,audio,

8.H5 是什么？
（HTML5）是指html的第五个版本，html是描述网页的标准语言

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

link:
      将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入
     <link rel="stylesheet" href="">

@import
将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径

1. link先加载css文件，@import先加载html文件
   2.link 引入的样式页面加载时同时加载,@import引入的样式在页面加载完成时再加载;
   3.link 没有兼容问题, @import不兼容 ie5 以下的浏览器;
2. 所属范围不同@import 是css的语法，只能导入样式
   link是html的标签，不仅可以加载样式，还可以定义rel属性
   rel="stylesheet"表示调用外部样式表

10. Label 的作用是什么？是怎么用的？
定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

 <label>
             <input type="radio" name="gender" value="male"/>
              男&nbsp;&nbsp;&nbsp;
    </label>
    <input id="female" type="radio" name="gender" value="female" checked />
    <label for="female"> 女</label>

11.请写出至少5个HTML块元素标签
p,table,thead,tbody,caption,body,div,ul ,ol, li,h1-h6,form

12.请写出至少5个HTML行内元素标签
span,th,td,img,a,em,b,i,u,strong,input

13.请写出table标签下面会包含哪些标签元素

   <caption></caption>,
      <thead></thead>,
      <tbody></tbody>,
      <tr></tr>,
      <th></th>,
      <td></td>

14.CSS选择器有哪些？分别包括什么？
@1标签选择器/元素选择器：根据标签名称选择一类元素
@2 id选择器：通过id属性选择一个元素
#value

@3类选择器：class
.value
@4普遍选择器： ：所有
@5后代选择器：selector1>selector2:选择直接子元素
selector1 selector2:选择所有后代元素，包含孙代元素
@6兄弟选择器：
+:选择当前元素之后的一个兄弟元素
~:选择当前元素之后的所有兄弟元素
@7属性选择器：
[class]:选择当前页面中具有class属性的元素
[class=‘one’]:选择当前页面中具有class属性，并且属性值为one的元素
[class~=‘one’]:选择当前页面中具有class属性，并且属性值之一为one的
[class^=‘o’]:选择当前页面中具有class属性，并且属性值以o字符开头
[class$=‘o’]:选择当前页面中具有class属性，并且属性值以o字符结尾
[class=‘o’]:选择当前页面中具有class属性，并且属性值中包含o字符
@8多选择器：
使用逗号隔开多个选择器
div,p{
width:100px;
height:100px;
}
@9组合选择器：
将多个选择器组合到一起使用
div.one{

	}
         <div class="one"></div>

@10伪类选择器：
:伪类名称
:first-child
:last-child
:nth-child(number/odd/even)

      和状态相关的：
	:hover:当鼠标悬停在元素上时
	:active：当鼠标按下时
	:link：当鼠标未被点击时
	:visited：当点击过之后的一个状态

@11伪元素选择器：

hello

::伪元素的名称
::first-letter:第一个字符
::first-line：第一行
::seclection:文本被选中时
::before:在当前元素内容之前
content:text/url()
::after：在当前元素内容之后

15.选择器优先级是什么？
!important:不计入特性值中，使用了该属性的样式优先级最高,不建议使用

优先级需要根据特性值来计算，特性值越大，优先级越高，特性值相同，越靠下的优先级越高

style属性中:1000
id选择器:100
类选择器/属性选择器/伪类选择器:10
元素选择器/伪元素选择器：1

16.页面导入样式，使用link与@import有什么区别？
link：先加载css，在加载html的同时，瞬间将css加载上去
@import：先加载html，再加载css，给用户的体验不好
17. 先看一段代码，如下：

 <style>
    a{
      color: red;/ * num=1 */
    }
    #box a{ / *num=100+1=101*/
      color: green;
    }
    [class="box"] a{ /*num=10+1=11*/
      color: gold;
    }
    .box a{ /*num=10+1=11*/
      color: brown;
    }
    p a{ /*num=1+1=2*/
      color: yellow;
    }
  </style>
  <p id='box' class="box"> <a>hello</a></p>

请问上面代码中，a标签中文字的最终颜色是什么？

绿色green