HTML基础

DOCTYPE的作用

告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面
让浏览器以标准模式渲染（盒子模型）
让浏览器知道元素的合法性

HTML XHTML HTML5的关系

HTML是超文本标记语言，属于SGML
XHTML属于XML，是HTML进行XML严格化的结果
HTML5不属于SGML或XML，比XHTML宽松

HTML5有什么变化

新的语义化元素：section，article，footer，header
表单增强
新的API：离线，音视频，图形，实时通信，本地存储，设备能力
- 离线：Application Cache，已废弃，Service Worker
- 音视频：audio，video
- 图形：canvas，svg
- 实时通信：WebSocket
- 本地存储：localStorage，sessionStorage，IndexedDB
- 设备能力：navigator.geolocation，获取地理位置。deviceorientation，陀螺仪。
- 分类和嵌套规则

em和i的区别

就表现而言,表现都一样，都是表示斜体。

但是标签是“含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO。

i 是存样式标签。

HTML5中 i 不推荐使用。

语义化的意义

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

哪些元素可以自闭合

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

HTML和DOM的关系

HTML是’死‘的
DOM有HTML解析而来，是活的
JS可以维护 DOM

property和attribute的区别

attribute是’死‘的
property是活的，有HTML解析生成
修改互不影响

form的作用有哪些

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

盒模型

盒模型属性：

宽度（width）和高度（height），这两个属性分别决定了一个盒子的宽度和高度，在标准盒模型中，这个宽高指定的就是最里层内容区的宽度和高度，对应画框中最里面带色彩的部分。
内边距（padding），当内容区和边框需要离开一定的间距，避免布局太过拥挤时，就可以用内边距来指定他们隔开的距离。在画框中就对应着内容区和边框中间夹着的那部分白色的区域。
边框（border），边框比较好理解，就是每幅画的外框。
外边距（margin），外边距是用来限制盒子与盒子中间的距离的，在上图中，三幅画边框与边框中间空出来的距离，就由外边距来指定。

<html>
    <head>
        <style>
            div{
                width: 200px;
                height: 100px;
                padding: 10px;
                border: 1px solid #000;
                margin: 20px;
            }
            /* 标准盒模型 **/
            .content-box{
                box-sizing: content-box;
            }
            /* 怪异盒模型 **/
            .border-box{
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <!-- 标准盒模型 -->
        <div class="content-box">
            我是content-box
        </div>
        <!-- 怪异盒模型 -->
        <div class="border-box">
            我是border-box
        </div>
    </body>
</html>

标准盒模型

盒子实际大小是：

横向空间：width + padding宽度 + border宽度
纵向空间：height + padding高度 + border宽度

怪异盒模型

在怪异模式下，width 和 height 做指定的宽高就是盒子的实际宽高，而它内容区部分的大小是在 width 或 height 指定尺寸的基础上，再减去 border 和 padding 所占的宽度。

外边距折叠

但是如果两个盒子都设置了 margin，在排列这两个盒子的时候左右外边距是叠加的，上下外边距是取最大值。