【HTML】《HTML5秘籍》笔记

一、有用的网站

二、HTML5元素

（一）页面结构相关的语义元素

（二）文本级的语义元素

1. <time>

1. 日期格式 YYYY-MM-DD 例如

The party starts <time datetime="2012-03-21">March 21<sup>st</sup></time>

2. 时间部分 HH:MM+00:00 (24小时制小时和分钟，+后是时区) 例如以下是纽约时间。

Parties start every night at <time datetime="16:30+5:00">4:30 p.m.</time>

这样做是为了看网页的人能看到他们想看到的格式，而搜索机器和其他软件则能看到它们可以处理的值，而且毫无歧义。

3. 组合使用：日期在前，中间跟一个大写字母T，时间在后 例如

The party starts <time datetime="2012-03-21T16:30+5:00">March 21<sup>st</sup> at 4:30 p.m.</time>

2. <output>

标注JavaScript返回值

下面用一个示例来说明<output>中的form和for属性的使用

<form action"#" id="bmiCalculator">  
    <label for="feet inches">Height</label>  
    <input name="feet">feet<br>  
    <input name="inches">inches<br>  
    <br>  
    <label for="pounds">Weight</label>  
    <input name="pounds">pounds<br><br>  
    ...  
</form>

<p>Your BMI:<output id="result" form="bmiCalculator" for="feet inches pounds"></output></p>

form和for属性什么也不干，唯一的用处是表明<output>从哪些控件获取结果这一信息。

3. <mark>

标注突显文本。默认情况下，被标注的文本会带有浅黄色背景，也可以通过样式表规则为它应用不同的样式。
语义：吸引人注意那些变得很重要的文本。

需要为不支持HTML5的浏览器添加后备样式表。

mark{
    background-color: yellow;
    color: black;
}

（三）表单

1.传统表单

<fieldset>用来分区，其内的<legend>作为这一分区的标题。

<h1>Zoo Keeper Application Form</h1>
<form action="#">
  <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
  <fieldset>
    <legend>Contact Details</legend>
      <label for="name">Name <em>*</em></label>
      <input id="name"><br>
      <label for="telephone">Telephone</label>
      <input id="telephone"><br>
      <label for="email">Email <em>*</em></label>
      <input id="email"><br>
  </fieldset>
  <fieldset>
    <legend>Personal Information</legend>
      <label for="age">Age<em>*</em></label>
      <input id="age"><br>
      <label for="gender">Gender</label>
      <select id="gender">
        <option value="female">Female</option>
        <option value="male">Male</option>
      </select><br>
      <label for="comments">When did you first know you wanted to be a zoo-keeper?</label>
      <textarea id="comments"></textarea>
  </fieldset>

  <fieldset>
    <legend>Pick Your Favorite Animals</legend>
    <label for="zebra"><input id="zebra" type="checkbox"> Zebra</label>
    <label for="cat"><input id="cat" type="checkbox"> Cat</label>
    <label for="anaconda"><input id="anaconda" type="checkbox"> Anaconda</label>
    <label for="human"><input id="human" type="checkbox"> Human</label>
    <label for="elephant"><input id="elephant" type="checkbox"> Elephant</label>
    <label for="wildebeest"><input id="wildebeest" type="checkbox"> Wildebeest</label>
    <label for="pigeon"><input id="pigeon" type="checkbox"> Pigeon</label>
    <label for="crab"><input id="crab" type="checkbox"> Crab</label>
  </fieldset>
  <p><input type="submit" value="Submit Application"></p>
</form>

2. 表单优化

(1) placeholder属性（有值）——占位符

避免用占位符做两件事。一时不要用它代替字段描述或说明。而是不要为了表示占位符不是真正的内容，就选择特殊字符作为占位符。

(2) autofocus属性（无值）——自动获取焦点

只能给一个<input>或<textarea>元素添加这个属性。

(3) required属性（无值）——验证字段不为空

验证时机是点击表单里的submit按钮的时候。会弹出提示框。

(4) novalidate属性（无值）——禁用整个表单的验证功能

这个属性是添加在form里的。如果一个表单有两个提交按钮，一个用于正式提交，一个用于保存数据（不需要进行严格的数据验证），那么后者按钮的input元素里添加formnovalidate属性，同样可绕过客户端验证。

(5) 验证样式挂钩

1. required（必填）和optional（选填）：根据字段中是否使用了required属性来应用不同的样式。
2. valid（有效）和invalid（无效）：根据控件中是否包含错误来应用不同的样式。注意，除非访客提交表单，否则大多数浏览器并不会发现哪些值有效，哪些值无效；换句话说，访客不会实时看到表示输入无效的样式变化。
3. in-range（在范围内）和out-of-range（超出范围）：根据空间的min和max属性判断输入值是否超出范围，从而为控件应用样式。

如必填字段：

input:required{
    background-color:lightyellow;
}

(6)正则表达式

HTML5使用正则表达式不用^和$字符表示要匹配字段值的开头和结尾。HTML5会自动确保这一点。
浏览器不会验证空值。

通过pattern属性将其应用到<input>或<textarea>元素。

<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title="Your promotion code is three uppercase letters, a dash, then three numbers" pattern="[A-Z]{3}-[0-9]{3}">