人民邮电出版社《HTML5与CSS3实战指南》学习笔记

HTML5 是最新的 HTML 标准。

HTML5页面结构标签

1. header元素
   header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
   注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。

2. nav元素
   nav元素表示页面中的导航链接部分。

3. article元素
   article元素代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。

4. section元素
   section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成，但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

5. aside元素
   aside元素可用于包含与其他内容不相关的部分。例如侧边栏、二级链表或广告区。

6. footer元素
   footer元素表示页面或者页面中的一块区域的页脚。

HTML5新元素

1. hgroup

hgroup标签用于对标题进行组合，譬如将一个内容区块的标题及其副标题分为一组。
通常，将hgroup元素放在header元素中。

<header>
    <hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
    </hgroup>
</header>

1. < hgroup >标签只是对标题进行组合，而对标题的样式没有影响。

2. 在页面头部、文章头部、章节或者分段分块的头部，至少有两个主题标签，才可以使用< hgroup >标签；如果只有一个主题标签，则不需要使用。

2. figure和figcaption元素

< figure >标签规定独立的流内容（图像、图表、照片、代码等等）。
figure标签用来表示网页上一块独立的内容，可用于文章中的插图、照片、代码清单等。
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

figure有一个子标签：figcaption
< figcation > 标签定义 figure 元素的标题（caption）。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

注意：

1. 如果可以将它从文档中删除，并且理解文档内容不受影响，则不必使用figure元素，可以使用其他元素代替。
2. 如果图像或清单形成了文档流，并且移动到文本需要的地方需要重新措辞，那么最好选择其他元素代替。

<article>
    <p>As you can see in <a href="#fig1">Figure 1</a> </p>

    <figure id="fig1">
        <figcaption>Screen Reader support</figcaption>
        <img src="27858.jpg" alt="">
    </figure>
</article>

3. mark

mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。
mark 元素“表示文档中的一部分由于可能与用户当前活动有关，已被突出显示”。
不常用。最常见的是在搜索文章时，搜索关键词在搜索结果中突出显示。

<h1>yes, you can use <mark>HTML5</mark> today</h1>

效果：

4. progress和meter

1. progress元素
   progress元素代表一个任务的完成进度。
   这个元素有两个属性来表示当前任务的完成情况，value属性表示已经完成了多少工作量，max属性表示总共有多少

   <p>
       Status:
       <progress min='0' max="100" value="0" >
           <span>0</span>%
       </progress>
       Status:
       <progress min='0' max="50" value="25" >
           <span>50</span>%
       </progress>
   </p>
   

   

2. meter元素
   meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、投票人数比例等。

   它有六个属性：

   • value 属性值显示的是当前值，默认为0
   • min：当前标量的最小值；如不做指定则为0
   • max：当前标量的最大值；如不做指定则为1
   • low：当前标量的低值区
   • high：当前标量的高值区
   • optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区

   <h1>以磁盘使用为例，展示 meter 元素的用法</h1>
   <p>
       Total current disk usage:(value低于low)
       <meter value="10" min="0" max="320" low="20" high="300" title="gigabyte" >63GB</meter>
   </p>
   <p>
       Total current disk usage:(value介于low和high之间)
       <meter value="100" min="0" max="320" low="20" high="300" title="gigabyte" >63GB</meter>
   </p>
   <p>
       Total current disk usage:(value高于high)
       <meter value="310" min="0" max="320" low="20" high="300" title="gigabyte" >63GB</meter>
   </p>
   <p>
       Total current disk usage:(value=optimum)
       <meter value="310" min="0" max="320" low="20" high="300"  optimum="310" title="gigabyte" >63GB</meter>
   </p>
   

   

5. b 和 strong

这两个标签都起到加粗字体的作用。

strong 是一个逻辑标签，起强调作用，它表示“内容非常重要”；
b 是一个实体标签，无语义意义。

为了符合现在W3C的标准，还是推荐使用strong标签。

6. i 和 em

i标签和em标签都是HTML用于斜体的标签。

i标签的作用：仅仅是为了让字体显示斜体，对于SEO没什么作用。
em标签的作用：不仅可以让字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的。

7. cite

cite元素创建一个引用标记，用来指明某内容的引用或参考源，如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。
需要注意的是，cite元素只是用来定义引用的参考源本身，而不是引用的内容。如果要从某参考源引用内容，则要使用 blockquote 或 q 元素。

8. details 和 summary

1. details
   < details>元素实际上是一种用于标识该元素内部子元素可以被展开、收缩显示的元素。
   元素具有一个布尔类型值的open属性，定义元素内部的子元素被展开显示或收缩；open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。
2. summary
   < summary>标签可以为< details>元素定义标题，标题是可见的，用户用鼠标单击标题时，会展开显示< details>元素内容，再次单击标题时，< details>元素会收缩起来不显示。
   summary元素仅可被用于 details 元素的子代，且必须是第一子代。
   如果< details>元素内没有定义< summary>元素，浏览器会提供默认的文字显示，如“详细信息”。

<details>
  <summary>Some Magazines of Notes</summary>
   <ul>
       <li><cite>Bird Watchers Digest</cite></li>
       <li><cite>Rowers Weekly</cite></li>
       <li><cite>Fishing Monthly</cite></li>
   </ul>
</details>

<details open>
   <ul>
       <li><cite>Bird Watchers Digest</cite></li>
       <li><cite>Rowers Weekly</cite></li>
       <li><cite>Fishing Monthly</cite></li>
   </ul>
</details>

9. 作用域样式 scoped

（没太理解）

<h1>Page Title</h1>
<article>
    <style scoped>
        h1{ color: rebeccapurple;}
    </style>
    <h1>Article Title</h1>
    <p>Article content</p>
</article>

由于代码中存在 scoped 属性，因此在style元素中的文本样式仅应用于附带元素及其子代元素（如果允许级联原则），而不是整个文档。

HTML5表单

HTML5表单属性

1. required 属性

HTML5中新增的required属性可以应用在大多数输入元素上。
在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

<form>
   	<label for="register-name"> My name is: </label>
   	<input type="text" id="register-name" name="name" required>

   	<input type="submit" id="submit" value="submit">
</form>

1. 可以使用:required伪类设置必填表单元素的样式；
   如果浏览器不支持 :required 伪类，可以使用属性选择器。如

   <style>
      	input:required,
     	 	input[required] {
         	 	background-color: orangered;
      	}
   </style>
   

2. 可以使用:valid和:invalid伪类设置有效和无效字段的样式；

2. placeholder 属性

placeholder属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失。

3. pattern 属性

pattern属性使您能够提供一种正则表达式，使用户的输入与之匹配才能视为有效。

<form>
    <label for="password"> i would like my password to be:</label>
    <p>(at least 6 characters, no space)</p>
    <input type="text" id="password" name="password" required pattern="\S{6,}">

    <input type="submit" id="submit" value="submit">
</form>

以上示例表示强制要求密码至少是6位字符。
\S 指的是“任何非空白字符”，{6,}指的是“至少6次"。

4. disabled 与 readonly 属性

1. 当设置了disabled以后，点击事件将不可用
2. 可以在 CSS 中使用:disabled伪类设置禁用的表单控件的样式
3. 使用disabled属性的表单并不随表单提交，所以它们的值对服务器端的表单处理代码不可用。如果不想一个值被用户编辑，但是能够看到并提交它，可以使用readonly属性

5. multiple 属性

使用 multiple 属性表示在表单空间中可以输入多个值。

1. 在HTML以前的版本中已有此属性，但它仅应用于 select 元素；
2. 在HTML5中，它也可以被添加到 email 和 file 输入类型中。如果使用它，用户可以选择多个文件，或包含多个逗号分隔的电子邮箱地址。

6. form 属性

首先注意，不要与 form 元素混淆。

HTML5中，可以把表单控件书写在页面上任何地方，然后为该控件指定一个form属性，属性值为要关联的表单的id，这样就可以声明该元素从属于指定的表单。

7. autocomplete 属性

autocomplete 属性规定表单或输入字段是否应该自动完成。
该属性有两种状态值，分别为"on" 和 “off”；
”on"是默认值，当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

8. datalist元素 和 list属性

datalist 元素能满足这样的需求：具有一组预先定义自动完成选择项的文本字段。
用户可以输入自己喜欢的任何元素，但当输入时，在下拉列表中会有一组建议选项呈现给用户。

可以使用 input 元素的 list 属性将 datalist 与一个输入相关联。
一个 datalist 可以与若干个输入字段相关联。

<label for="favcolor">Favorite Color</label>
<input type="text" list="colors" id="favcolor" name="favcolor">

<datalist id="colors">
    <option value="Blue"></option>
    <option value="Green"></option>
    <option value="Pink"></option>
    <option value="Purple"></option>
</datalist>

9. autofocus 属性

布尔型 autofocus 属性指定在页面加载完成时，表单控件被对准焦点。
在一个页面只有一个表单元素具有 autofocus 属性。

HTML5新表单输入类型

input 元素的 type 属性能够决定将呈现给用户何种表单输入。

在HTML5之前，所有表单输入类型如下：

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

HTML5 提供了13种新输入类型：

• search
• email
• url
• tel
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

1. search

 <form id="search" method="get">
    <input type="search" id="s" name="s">
    <input type="submit" value="Search">
</form>

2. email

email 类型（type=“email”）用于指定一个或多个电子邮件地址。

1. 支持html5的浏览器会自动验证email域值的格式合法性，并在输入不合法时给出提示，不用自己手动写js验证代码
2. 外观上PC端与 type=“text” 的input输入类型没有差异；在手机端则会唤出英文键盘
3. email 类型的 input 元素支持 multiple 属性

3. url

url 输入类型（type=“url”）是用于说明网站地址的，在提交表单时，会自动验证url域的值。
但例如 q://dlfnhci.xyz 也会被认为是有效的，如果想使输入的值更符合具体的格式，可以使用 pattern 属性以保证正确。

4. tel

tel 输入类型（type=“tel”）表示电话号码。
但它并没有指定唯一的格式作为标准，因为世界上各个国家有许多不同类型的有效电话号码。所以想指定一种格式可以使用 pattern 属性。

5. number

number 输入类型（type=“number”）提供了一个输入数字的输入类型。
通常，这是一个微调框，在这里可以输入一个数字或单击向上或向下的箭头来选择一个数字。

属性：

1. 数字输入类型由 min 和 max 属性来规定最小允许值和最大允许值。强烈推荐使用这些属性，否则使用向上和向下箭头可能会导致不同的值，这取决于浏览器。
2. 也可以提供 step 属性，决定单击向上和向下箭头时数值增加或减少的数。

<label for="quantity">I would like to receive 
<input type="number" min="1" max="100" step="5" name="quantity" id="quantity"> copies of 
    <cite>The HTML5 Herald</cite>.
</label>

6. range

（type=“range”）显示一个滚动控件。
属性与 number输入类型一样，min、max、step。
range 输入类型的默认值是滚轴的中点，即min和max的中间值。

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
<input type="range" min="1" max="10" name="rating" id="rating">

7. color

（type=“color”）为用户提供颜色选择器。

<label for="favcolor">Favorite Color</label>
<input type="color" id="favcolor" name="favcolor">

8. date 和 time

1. date：包括（年、月、日），但不包括时间
2. month：仅包含（年、月）
3. week：包含（年、周数），例如 2011-W02
4. time：一天的时间，例如 22:00
5. datetime：包含日期和时间，由“T”分隔，在后面你可跟一个“Z”代表UTC
6. datetime-local：除了省略时区，其他都与 datetime 一样

在使用任何基于日期的输入类型时，强烈建议包含 min 和 max 属性（就像使用 number 时一样）；
date 和 time 输入类型同样支持 step 属性；在 time 和 datetime 输入类型中，step以秒来表示。

HTML5其他表单控件

1. output：接受并显示计算的结果
2. keygen：生成公共-私有密钥对
3. progress
4. meter

HTML5音频和视频

… …