1. Chapter 1: Putting HTML into context
    1. HTML标准滞后于实际技术应用
      1. 为什么滞后于实际？
      2. 滞后于实际应用导致了什么结果？
        1. HTML5及相关技术是由更大量的小标准定义的。这些小标准中有一些只有几页，着眼于某一特定方面的某一个单一特性。
          1. 为什么用大量小组来定义
          2. 大量而小的定义小组可以只着眼于那些和他们有关的特性，这些定义内容的开发和标准化不会被一些其他有争议的主题所耽搁
          3. 这样做的优点
          4. 标准制定更快
          5. 这样做的缺点
          6. 难以跟进所有在改变的标准以及他们之间的相互联系
          7. 标准明细的质量也有所下降
          8. 最大的问题在于无法对标准所规定的所有特性进行有效评估
    2. Introduce Html5
      1. 核心的Html specification定义了一些的elements，这些elements是为了标记content，来表明它的重要性
      2. CSS控制已经标记了的内容的外观，使得它就像我们所看到的那样
      3. JS控制HTML文档的内容，使得它能够与用户交互。而且JS还能使用HTML5的一些新特性。
      4. H5的一些显著特点
        1. 更好的原生多媒体支持
        2. 网页内容的可编程性更高
        3. 更提倡语义学网页
          1. HTML内容的产生方法和使用方法更多样
          2. 什么是content？
          3. HTML是用来mark up content的。也就是说，那些元素标签里面的内容就是content（CSS样式定义这些内容的展示方式），而element，就是指标签及里面的内容（<body>这里面有东西的</body>）
      5. 目前H5的情况
        1. 目前还在发展，会有一些小改，但是本书所讲的核心内容的基本都已经确定了
      6. H5也是文档，只是这个文档的这些记号能够被浏览器所解析。这就是为什么我们要考虑某些浏览器是否支持某个H5特性，因为有可能某个标签的某些属性（attribute）一些浏览器是无法解析它并按标准来展示内容的
    3. 查询H5信息
      1. W3C（w3c.org）
      2. developer.mozilla.org
  2. Chapter 2: Getting Ready
    1. 浏览器
    2. 编辑器
    3. Node.js
      1. 这是服务器端，用来与前端交互。主要是因为本书服务器端的脚本使用js编写，使用Node.js来充当服务端可以避免引入新的语言
  3. Chapter 3： Getting Started with HTML
    1. HTML,顾名思义，是一个标记型语言（也就是说，它是做标记的）
      1. 标记的什么？
        1. 标记的内容是content，也就是elements里面所包的内容，通常是文本。
      2. 怎样标记？
        1. This markup takes the form of elements applied to content。形如： <tag>我就是被标记的文本，外围那俩货就是标记的东西，叫element</tag>
    2. Using Elements
      1. 什么是元素？
        1. 元素是： Elements are the way you tell the browser about your content. The effect of the element is applied to the element contents 告诉浏览器元素内容是什么，不同元素所对应的效果会被应用到元素内容上去。
        2. 元素的组成： Together，The tags（<code> </code>）and content form the element
        3. not case sensitive（大小写均可）
        4. HTML中的不同元素是为了满足文档中的不同角色 语义学元素（semantic element）能够让我们定义content的意义，也能让我们定义不同内容之间的关系
        5. 浏览器不会显示元素（elements），它只是解析元素，然后组织出使用者所看到的由元素所构成的网页页面
        6. 注意：像<code>这种会改变样式的元素是不建议使用的，因为提倡使用HTML来定义文档结构和内容的意义，用CSS来控制样式。（这些大多是HTML初期使用的一些元素，那时候对效果和内容分离的意识并不是很强）
      2. 本章所要用到的元素分别表示什么意义？
        1. DOCTYPE
          1. denote the start of an HTML document
        2. html
          1. denote the html section of an document
        3. header
          1. denote the header section of an HTML document
        4. body
          1. 表明一个文档的内容（denote the content of an HTML document）
        5. a
          1. 表示一个超链接（网页链接）
        6. button
          1. create a button for submitting a form
        7. hr
          1. 分割线
        8. 用户能够输入内容的元素标签
          1. input
          2. 单行输入区域
          3. textarea
          4. 多行输入区域
        9. 表格相关
          1. table
          2. 创建一个表格
          3. td
          4. 表格中的一个单元格
          5. tr
          6. 表格中的一行（table row）
          7. th
          8. create a table header cell，创建一个表格的表头单元格
        10. label
          1. create a label for another element
        11. style
          1. 该元素内可以定义css样式
        12. p
          1. 指paragraphs，小节
        13. empty elements
          1. 有开始和结束标签，但是里面没有内容，例如<p></p>
          2. self-closing tags
          3. 自闭标签，把开始标签和结束标签简化为一个标签。如<p/>
        14. void elements
          1. 内部无法放置内容的标签，例如：<hr/>
          2. <hr/>或<hr>均可，当然标准写法是前者
    3. Using Element Attributes（如何使用元素的属性）
      1. 元素属性是用来配置元素的
      2. 元素属性只能在起始元素中使用
      3. 属性的形式为键值对的形式，attribute name=attribute value
      4. 属性的值可以用双引号""也可以用单引号''，如果值内还有引用，单引号内用双引号引用，双引号内用单引号引用
      5. 多个属性之间使用空格隔开，而且local attribute和global attribute没有先后顺序
      6. 布尔属性的使用
        1. 布尔属性不需要有值，只需要把属性名添加到元素开始标签里就可以生效了。
        2. 例：<input disabled></input>
        3. 另外两种写法：disabled=""，disabled="disabled"
    4. Creating an HTML document
      1. 最简单的创建HTML文件的办法就是创建一个文档，并将其扩展名设为.html
      2. HTML文档有着固定的格式，一些关键性的元素需要在固定的位置才行
        1. HTML与XHTML：XHTML内容是HTML语法，而且它以能被XML解析器解析的形式来序列化为文件
      3. 第一部分：定义最外层框架（outer structure）的两个元素
        1. <!DOCTYPE HTML>
          1. 这里的HTML是布尔属性，这里是说明该文档的类型是HTML，因为在标记语言发展初期，除了HTML还有其他类型的标记语言。
          2. 注意：doctype元素前面所写的内容也会被解析到页面上去，当然，这一行为会导致报错
        2. <html></html>
      4. 第二部分：The Metadata
        1. metadata区域用来让程序员给浏览器提供该篇文档的基本信息
        2. 被包裹在<head></head>元素内的内容就是元数据metadata
          1. 典型的代表数据就是<title></title>，该标签内的内容就是显示在浏览器选型卡中的内容
          2. head元素内还可以放置一些外部的样式文件，外部脚本文件等等
      5. 第三部分：The Content，就是<body></body>里面的内容
        1. body元素
      6. 父元素，子元素，后代元素，兄弟元素（Understanding Parents，Children，Descendants，Siblings）
        1. 一个元素可以有多个后代，但是只可以有一个父节点
          1. 父节点就是本结点最近的上一级节点
        2. 兄弟节点就是同级节点。例如：head元素与body元素
        3. 后代节点可以是该节点的下一级、下一级的下一级，都可以是后代节点
        4. 子节点只是该节点最近的那个下一级节点
      7. 元素的三大种类
        1. metadata elements
          1. metadata elements就是<head></head>，metadata就是head里面的内容
        2. phrasing elements
          1. basic building blocks of HTML
        3. flow elements
          1. super-set elements of phrasing elements。所有的phrasing elements都是flow elements；但并不是所有的flow elements都是phrasing elements
        4. 并不是所有elements都可以被划分到这三类里，有些元素并不属于其中任何一个种类。例如：<li></li>元素，只能用在ul,ol,menu这三个元素里面
    5. Using HTML Entities
      1. 由于网页标记经常会使用字符，那么在网页中需要用到这些字符的时候，就要使用转义来代表这些字符，浏览器才能解析出来。
        1. <
          1. &lt;，&#60;
        2. >
          1. &gt;，&#62;
        3. &
          1. &amp;，&#30;
        4. €
          1. &euro;，&#8364;
        5. ￡
          1. &pound;，&#163;
        6. §
          1. &sect;，&#167;
        7. ©
          1. &copy;，&#169;
        8. ®
          1. &reg;，&#174;
        9. ™
          1. &trade;，&#8482；
    6. The HTML Global Attributes：所有元素都有的attribute（某个元素所特有的属性就是local attributes）
      1. accesskey
        1. 指定某一个或者多个元素的键盘快捷键
          1. 根据不同的平台触发的组合键位也不同。Windows平台是ALT+accesskey，按下后鼠标光标会在该元素内聚焦（如input元素）或选中该元素
          2. 这里注意，当触发了form>submit input的组合键位的时候，就相当于按下了该键，会直接提交
      2. class
        1. calss属性用来给元素定义类别或者给它分类
          1. 1.）定位某一个类别的多个元素
          2. 2.）将某些CSS样式应用到某个类别的所有元素上去
        2. 一个元素的class属性可以有多个值，中间以空格隔开。例如：class="class1 class2"
          1. 这里要特别注意：元素内属性class里，多个样式的顺序不影响显示结果，在style元素中定义的样式先后顺序才决定最终样式。最终应用的是靠后定义的样式
        3. class这个属性本身是没有任何效果的，那么class这个属性的用途是什么呢？
          1. 使用方法1.）在<style>元素中给某个或多个class定义样式，这样可以为某个元素上分配一个或多个样式，不用为了某个元素重复编写已有的样式
          2. 使用方法2.）通过js中的方法getElemetsByClassName(“”)来找到某个class下的所有元素并赋予其某个样式
      3. contenteditable
        1. 当该元素的值为true时，网页浏览用户可以修改当前元素的内容（content）
        2. 若该元素未指定，则该属性的值从父类中继承
      4. contextmenu 直到2021年1月中旬，仍只有火狐声称支持该特性，但是实际运行并没有效果。其他浏览器均不支持该属性
        1. 定义某个元素的上下文菜单，也就是当触发该属性时，会弹出来一个菜单（例如Windows中的右击） 当然，该菜单需要自己定义
      5. dir
        1. 元素的content中text的方向 （这里主要是指对其方向，rtl是右对齐，ltr是左对齐）
          1. rtl：从右到左，right to left
          2. ltr：left to right，从左到右
          3. 注意，对于span、code应用该属性，并不能出现右对齐的效果，需要用在p，或者div上，行内元素无法产生效果
      6. draggable
        1. 该属性用来表明某元素能否被拖拽，在37章有具体讲解
      7. dropzone
        1. HTML5中用来支持drag和drop的属性，在第37章中会有讲解
      8. hidden
        1. 该属性表明该元素当前和该文档不相关，浏览器在解释该文档时遇到有这个属性的元素就会不把这个元素展示出来
      9. id
        1. id属性会给当前元素一个独一无二的名称（元素的id不能重复）
        2. id通常用于js选中某个元素（当然要想把样式应用于某个id也是可以的）
        3. URL Fragment Identifier （URL碎片标识符）
          1. 文档名称带#idname可以定位到该idname的section
      10. lang
        1. 指定语言的所有细节操作可以参考网址：http://tools.ietf.org/html/bcp47 处理语言问题是一件比较复杂且技术要求较高的事情
        2. lang也就是language属性会让浏览器调整显示该元素的方法
          1. 比如引号
          2. 在机器阅读网页文字的时候保证正确的发音
          3. 也可以用来只显示用户所选择的那个语言的内容
          4. lang属性也可以用来选择特定语言的内容
      11. spellcheck
        1. 该属性用来告诉浏览器是否需要检查元素内容的拼写
        2. 只有当元素内容是可编辑时，该属性才有效
        3. 该属性不同浏览器的实现是不同的
        4. 注意：该属性所应用的语言是会忽略lang的设置，跟随操作系统或者是浏览器的设定
      12. style attribute
        1. 直接在该元素的属性内定义该元素的样式
        2. <p style="background: grey; color: red; padding:10px "></p>
      13. tabindex attribute
        1. 按tab键会指定网页上的元素，该属性指定tab键在网页上选择时该元素的顺位
          1. 开始浏览网页时，按下tab，鼠标会选择那个tabindex=1的元素
          2. 再按一下鼠标会到达tabindex=2的元素
          3. 注意：tabindex=-1时，鼠标不会选择该元素
          4. tab键只是选中，没有操作，不同于accesskey属性，按下组合键时（alt+accesskey）就会按下提交
      14. title attribute
        1. 用于提供额外信息。也就是当鼠标停留在元素上时所会显示在光标旁的内容。
        2. 要和图片的alt属性相区分，那个是图片无法显示的时候所显示在那里的图片文字说明内容。
  4. Chapter 4： Getting Started with CSS
    1. CSS就是指定HTML文档presentation的方法
    2. 一个CSS样式由一个或多个声明组成，多个声明之间以分号隔开
      1. 一个声明包括一对（性质：值）对 （property：value；）
  5. ——本章主要介绍HTML元素的不同方面，介绍了HTML最基础的部分（HTML是什么以及他是怎样工作的），HTML所使用的一些基本术语，以及几乎所有网页都会用到的核心元素。 ——介绍怎样通过属性attribute来配置元素，以及介绍所有elements都有的全局属性（也就是说，全局属性说的就是所有元素都有的属性）