HTML 基础强化

[shuangmianxiaoQ]

元素分类

1. 按默认样式

   • 块级（block）：div, p, h1-h6, ul, ol, dl, dd, form, section, header, footer, aside ...
   • 行内（inline）：a, span, img, label, em, strong, i ...
   • 行内块（inline-block）： input, select, ...

2. 按内容 Kinds of content

元素嵌套关系

• 块级元素可以包含行内元素
• 块级元素 不一定 能包含块级元素，特殊情况如<p>元素中不能包含<div>
• 行内元素 一般 不能包含块级元素，特殊情况如<a>元素可以包含<div>

1. 为什么<p>元素中嵌套<div>是不合法的？

查阅HTML相关文档（The p element），p元素的Content model是Phrasing content（Phrasing content），可以看到div不属于Phrasing content，所以嵌套是不合法的

2. 为什么<a>元素中嵌套<div>是合法的？ 在HTML文档中（The a element），a元素的Content model是Transparent（Transparent content models），就是说在计算嵌套合法性时相当于<a>是不存在的

面试真题

参考：前端开发面试题 | HTML

1. Doctype的意义是什么

   • 让浏览器以标准模式渲染
   • 让浏览器知道元素的合法性

2. HTML，XHTML，HTML5的关系

   • HTML属于SGML
   • XHTML属于XML，是HTML进行XML严格化的结果
   • HTML5不属于SGML或XML，比XHTML宽松

3. HTML5有什么变化

   • 新的语义化元素
   • 表单增强
   • 新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
   • 分类和嵌套变更，比如<a>元素中可以包含块级元素

4. em和i有什么区别

   • em是语义化的标签，表示强调
   • i是纯样式的标签，表示斜体
   • HTML5中i不推荐使用，一般用作图标

5. 语义化的意义是什么

   • 开发者容易理解
   • 机器容易理解结果（搜索，读屏软件）
   • 有助于SEO
   • semantic microdata

6. 哪些元素可以自闭合

   • 表单元素input
   • 图片img
   • br, hr
   • meta, link

7. HTML和DOM的关系

   • HTML是死的
   • DOM由HTML解析而来，是活的
   • JS可以维护DOM

8. property和attribute的区别（attribute和property的区别）

   • attribute是死的
   • property是活的

9. form的作用

   • 直接提交表单
   • 使用submit/reset按钮
   • 便于浏览器保存表单
   • 第三方库可以整体取值，如jQuery的serialize
   • 第三方库可以进行表单验证，如AngularJS