第一章 HTML 5 简介

单行文本框自动获得焦点 autofocus

  1. <body>
  2. 图书:<input type=text name=book/><br />
  3. 价格:<input type=text autofocus name=price/>
  4. </body>

HTML5 中新增的 API

本地存储、文件访问、通信

HTML5 首行声明

  1. <!DOCTYPE html>

:::warning Tips:
之间不要插入任何内容
之间不要插入任何内容
之间不要插入任何内容 ::: 两种指定页面字符集的方法:

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <meta charset="utf-8" />

HTML5 的语法改变

:::warning

  1. 对元素名称不再严格区分大小写
  2. 元素可以省略结束标签
  3. 元素的属性可以省略属性值
  4. 属性的属性值可以不使用引号 ::: 省略标签的3种情形:

    1、空元素语法的元素

    :::warning area
    base
    br
    col
    command
    embed
    hr
    img
    input
    keygen
    link
    meta
    param
    source
    wbr ::: 这些空元素标签不开始标签和结束标签分开定义。

    2、可以省略结束标签的元素

    :::warning colgroup
    dt
    dd
    li
    optgroup
    option
    p
    rt
    rp
    thead
    tbody
    tfoot
    tr
    td
    th :::

    3、可以省略全部标签的元素

    :::warning html
    head
    body
    colgroup
    tbody :::

    在线验证 http://validator.w3.org

    支持 boolean 值的属性

    允许部分“标志性”属性省略属性值:
    1. <input checked type="checkbox"/>
    2. <input readonly type="text"/>
    3. <input disabled type="text"/>
    4. <option value="1" selected/>a</option>
    还允许这些属性使用空值,空值也代表 true
    1. <input checked="" type="checkbox"/>
    2. <input readonly="" type="text"/>
    3. <input disabled="" type="text"/>
    4. <option value="1" selected/>a</option>

    允许省略属性值的属性

    :::warning checked
    readonly
    disabled
    selected
    defer
    ismap
    nohref
    noshade
    nowrap
    multiple
    noresize :::

    允许属性值不使用引号(可读性差,不推荐这样做)

    第2章 HTML 5 的常用元素及属性

用于定义文档页面的主体部分,可以指定 id、class、style 等通用属性,还可以指定 onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、omkeypress、onkeydown、onkeyup 等事件属性。 :::warning 几乎所有的 HTML 元素都可以指定 id、style、class、dir、title 等通用属性。 :::
插入一个换行。


水平线,通常代表主题结束。

书中用到的浏览器版本

:::warning Firefox 49
Opera 41
Chrome 54
Internet Explorer 11 :::

2.1.2 文本格式相关元素

定义粗体文本
定义斜体文本
定义强调文本
定义粗体文本,表示重要的文本
定义小号字体文本
上标
下标
定义文本显示的方向。该元素应指定 dir 属性,其属性值只能是 ltr 或 rtl。

2.1.3 语义相关元素

:表示一个缩写。通常建议指定title属性,表示缩写的全称。

:表示一个地址。斜体显示。
:定义一段长的引用文本。使用缩进的方式显示。可指定cite属性,表示引用文本的出处。
:定义一段短的引用文本。浏览器会为这段文本添加引号。
:表示作品的标题。斜体显示。
:表示一段代码。
:定义一个专业术语。粗体或斜体显示。
:定义文档中被删除的文本。以中画线形式显示。
:定义文档中插入的文本。以下画线形式显示。
  1. :表示元素包含的文本已经进行了“预格式化”。也就是说,元素中包含的空格、回车、Tab键和其他格式字符都会被保留下来,但浏览器会处理 pre 元素内大部分 HTML 元素。
    :定义示范文本内容。
    :定义键盘文本。常用于计算机使用文档、使用说明中。
    :表示一个变量。斜体显示。
  2. 2.1.4 使用 a 元素添加超链接和锚点

    a 元素可以指定 idclassstyledirtitle 等通用属性,以及如下6个重要属性:

      • href:指定超链接所链接的目标资源。
      • hreflang:指定超链接所链接的文档所使用的语言。
      • target:指定使用框架集中的哪个框架加载链接资源。
          • _self:自身
          • _blank:新窗口
          • _top:顶层框架
          • _parent:父框架
        • download:让用户下载资源,而非打开新页面。该属性指定了目标资源另存为的文件名。
        • type:指定被链接文档的 MIME 类型。
        • media:指定目标 URL 所引用的媒体类型(默认为 all),只有指定了 href 属性时该属性才有效。
      • a 元素还可以生成一个命名锚点,用于在 HTML 页面中生成一个定位点。

      • <!-- 以下代码生成一个命名锚点 -->
      • <a name="test">test</a>
      • <a href="#test">定位到test锚点</a>
      • <a href="anchor2.html#test">定位到anchor2.htmltest锚点</a>