超文本标记语言

html4与html5的区别

  • 文档声明类型（<!DOCTYPE html>）
  • 新的元素：
    • header,footer,section,article,nav,aside
    • video,time,command,canvas
  • input新元素：date，email，url
  • 新的属性：
    • meta的charset
    • script的async
  • 全域属性：contextmenu，draggable，contenteditable
  • 移除元素：big，center，font

新的应用程序API

  • HTML Geolocation
  • HTML Drag 和 Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE
  • HTML Canvas/WebGL
  • HTML Audio/Video

head

head标签的base标签
基础路径

  1. <base href="/123" />
  3. <a href="1/1.html"></a>
  4. // /123/1/1.html

html5

发展：html4 => xhtml => html5
新增：

  • 区块：section，article，nav，aside
  • 表单增强
  • 日期，时间，搜索
  • 表单验证
  • placeholder自动聚焦
  • 语义化标签：header，footer，section，article，nav，aside
  • em，strong
  • i改为保留（icon）

新的API

  • 离线
  • 音视频
  • 图形
  • 实时通信websocket
  • 本地存储
  • 设备能力

嵌套规则

语义化的意义

  • 开发者易理解
  • 机器容易理解结构
  • 有助于SEO

哪些元素自闭和？

  • input
  • image
  • br
  • hr
  • meta link

html和dom的关系

  • HTML需要解析变为DOM树
  • js维护的是DOM

property和attribute

  • property 特性
  • attribute 属性
  • 互不影响

form作用

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

元素分类

  • 按默认样式
    • 块级元素（block）
      • div，p
    • 行内元素/内联元素（inline）
      • span，em，strong
    • inline-block元素
      • select

a元素包含div是不是合法的？ 不一定合法，a是transprent（透明模型），忽略，判断a的上级元素是否能包含a下级的块级元素

  1. // 不合法
  2. <p>
  3.   <a>
  4.       <div>123</div>
  5.   </a>
  6. </p>
  8. // 合法
  9. <div>
  10.   <a>
  11.       <div>123</div>
  12.   </a>
  13. </div>

doctype

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