《HTML5秘籍》读书笔记

综述：发(恩)展(怨)历(情)程(仇)

HTML5涵盖的一些主要功能。

HTML5核心。
这一部分主要由W3C官方的规范组成，涉及新的语义元素（第2章和第3章）、新的增强的Web表单微件（第4章）、音频和视频支持（第5章）以及通过JavaScript绘图的Canvas（第6章和第7章）。这一部分的功能大多数都得到了浏览器很好的支持。

曾经属于HTML5的功能。
这一部分源自WHATWG最初制定的HTML5规范，其中大多数功能需要JavaScript且支持富Web应用开发。最重要的包括本地数据存储（第9章）、离线应用（第10章）和消息传递（第11章），但本书要介绍的内容还不止这些。

有时候会被称为HTML5的功能。这些通常是指下一代功能，虽然它们从未进入过HTML5标准，但人们还是经常会把它们与HTML5相提并论。这部分包括CSS3（第8章）和地理定位（第12章）

主要发展思路

1. 不破坏web
2. 修补之前的“路”
3. 实用至上

---

HTML5新增的元素

1. 用于构建页面的语义元素
   <article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、<summary>

2. 用于标识文本的语义元素 <mark>、<time>、<wbr> （以前就支持，但现在已经正式列入规范 非块元素）
3. Web表单及交互
   <input>（不是新元素，但增加了很多了类型）、<datalist>、<keygen>、<meter>、<progress>、<command>、<menu>、<output>
4. 音频、视频及插件 <audio>、<video>、<source>、<embed> （以前就支持，但现在已经正式列入规范）
5. Canvas
   <canvas>

---

语义元素

为什么要语义元素？

1. 容易修改和维护
2. 无障碍
3. 搜索引擎优化

目的：替代<div>元素

元素说明

1. <article>
   表示一篇任何形式的文章，即类似新闻报道、论坛帖子或博客文章（不包括评论或作者简介）等能够独立的内容区块
2. <aside>
   表示独立于周围内容的一个完整的内容块。例如，可以用<aside> 创建一个附注栏，其中包含与主文章相关的内容或链接
3. <figure>和<figcaption>
   表示一幅插图。其中<figcaption>元素标注图题（插图的标题），而<figure>元素标注<figcaption>和插入图片的<img> 元素。目标是反映图片与图题之间是关联的
4. <footer>
   表示页面底部的页脚1 。通常是很小的一块内容，包括小字号的版权声明、简单的链接（比如About Us、Get Support等）
5. <header>
   表示增强型的标题，可以包含HTML标题和其他内容。其他内容可以是标志、作者署名或一组指向后面内容的导航链接
6. <hgroup>
   表示增强型的标题，分组两个或多个标题元素，不包含其他内容。其主要目的是把标题和副标题联系到一起
7. <nav>
   表示页面中重要的一组链接。其中的链接可以指向当前页面的主题，也可以指向网站的其他页面。实际上，一个页面中包含多个<nav> 也很正常
8. <section>
   表示文档中的一个区块，或者表示一组文档。<section>是一个通用容器，只有一条规则：其中的内容必须开始于一个标题。应该在其他语义元素（如<article>和<aside>）不适用的情况下再选用<section>

---

表单

表单控件

 <from>
    <fieldset>
            <legend>Personal Information</legend>

            <label for="birthDate">Birth Date<em>*</em></label>
            <input id="birthDate" type="date" required><br><br>

            <label for="age">Age<em>*</em></label>
            <input id="age" type="number" min="0" max="120" step="0.1" required><br><br>

            <label for="gender">Gender</label>
            <select id="gender">
                <option value="female">Female</option>
                <option value="male">Male</option>
            </select><br><br>

            <label for="comments">When did you first know you wanted to be a zoo-keeper?<em>*</em></label>
            <textarea id="comments"></textarea>
      </fieldset>
    <fieldset>
        
    </fieldset>

</from>

input--很多type可以选 从而形成不同的输入框

• 单行文本框

     <input type="text">    <input type="password">
     显示文本框，用户可以在其中填写内容。如果是密码类型的文本框，浏览器就不会显示用户输入的文本，而是用星号（*）或点号（• ）来代替每个字符
 普通<input type="text">  密码 <input type="password">

• 多行文本框

   <textarea>...</textarea>
    显示大文本框，可以输入多行文本 
  

<textarea>...呵呵呵呵呵呵呵呵呵呵呵呵hehehehehehehehehehehe</textarea>有滚动条哦

• 复选框

     <input type="checkbox" >
     显示复选框，可以作为开关，选中或取消选中 
  

<input type="checkbox">禽兽<input type="checkbox">畜生

• 单选按钮

     <input type="radio">
      显示单选按钮（一个空心圆，可以选中或取消选中）。一般单选按钮都是成组出现的，每一组单    选按钮都有相同的name 属性，用户只能选择其中一个
  

<input type="radio" name="sex">male <input type="radio" name="sex">female

•  按钮 
  
     <input type="submit">
    
    <input type="image">
    
    <input type="reset">
    
    <input type="button" >
  

显示标准的可以单击的按钮，其中类型为submit的提交按钮用于收集表单数据，并将它们发送给指定目标；类型为image的图像按钮与提交按钮作用相同，但可以显示成一幅可以单击的图像而非按钮；类型为reset的重置按钮，用于清除用户的选择和已经输入的文本信息；而类型为button的按钮本身没有任何功能，但可以通过JavaScript 给它赋予功能

<input type="submit"><input type="image"><input type="reset">

---

•  列表 
  
    < select>...</select>
     显示一个选择列表，用户可以从中选择一或多个列表项。每个列表项用<option> 元素添加
  

<select id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="male">Anmail</option>
</select>

音频和视频

Canvas

<canvas>独特的地方是需要JavaScript来操作。不使用JavaScript，就无法绘制图形，也不能画出图画。这也就意味着<canvas>是一个编程工具，而这已然超出了Web基于文档的设计初衷

详细学习见：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

CSS3