HTML5学习笔记简明版（6）：新增属性（1）

忘是亡心i 2022-04-16 04:20 233阅读 0赞

# a和area下的media属性 #

为了和link元素保存一致性，a元素和area元素也都增加了media属性，只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的，默认值是all，详细语法规范请访问：[http://dev.w3.org/csswg/css3-mediaqueries/\#media0][http_dev.w3.org_csswg_css3-mediaqueries_media0]

代码示例：

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
    HTML5 a media attribute.
    </a>

# area下的hreflang, type, rel属性 #

为了保存和a元素以及link元素的一致性，area元素增加了hreflang, type, rel等属性。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>属性</p> </td> 
   <td style="vertical-align:top;"> <p>值</p> </td> 
   <td style="vertical-align:top;"> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>hreflang</p> </td> 
   <td style="vertical-align:top;"> <p>language_code</p> </td> 
   <td style="vertical-align:top;"> <p>规定目标 URL 的语言</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>media</p> </td> 
   <td style="vertical-align:top;"> <p>media query</p> </td> 
   <td style="vertical-align:top;"> <p>规定目标 URL 是为何种媒介/设备优化的</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>rel</p> </td> 
   <td style="vertical-align:top;"> <p>alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag</p> </td> 
   <td style="vertical-align:top;"> <p>规定当前文档与目标 URL 之间的关系</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>type</p> </td> 
   <td style="vertical-align:top;"> <p>mime_type</p> </td> 
   <td style="vertical-align:top;"> <p>规定目标 URL 的 MIME 类型</p> </td> 
  </tr> 
 </tbody> 
</table>

# base下的target属性 #

base下的target属性和a的target属性是一样的，目的很多老版本浏览器早就一起支持了。

*注1：target必须在所有连接元素之前声明。*

*注2：如果声明多个，以第一个为准。*

<!DOCTYPE html>
    <html>
        <head>
            <title>This is an example for the <base> element</title>
            <base href="http://www.example.com/news/index.html">
        </head>
        <body>
            <p>Visit the <a href="archives.html">archives</a>.</p>
        </body>
    </html>

点击上面的连接，将跳转到http://www.example.com/news/archives.html。

# meta下的charset属性 #

charset是用来定义文档的encoding方式的，如果在XML里定义了该属性，则charset的值必须是不区分大小写的ASCII以便match UTF-8，因为XML文档强制使用UTF-8作为encoding方式的。

*注：meta属性上的charset属性在XML文档里是不起作用的，仅仅是为了方便与XHTML直接互相迁移。*

不能声明多个带有charset属性的meta元素。

在HTML4里，我们不得不这样定义：

在HTML5里，我们这样定义就行了：

# autofocus属性 #

HTML5为input, select, textarea和button元素增加了一个autofocus属性（hidden的input不能使用），它提供了一种声明式的方式来定义当页面load以后，焦点自动作用于当前元素上。使用autofocus可以提高用户体验，比如我们在登录页面设置，页面load以后自动将焦点设置到用户名的textbox上。

*注1：一个页面声明一次autofocus属性。*

*注2：一个页面里不是必须要设置autofocus的。*

# placeholder属性 #

input和textarea元素新增加了placeholder属性，该属性是提升用户输入内容。当用户点击的时候，该内容文本自动消失，离开焦点并且值为空的话，再次显示。以前我们都是使用JavaScript代码来实现，其实蛮复杂的，有了placeholder属性就爽了，直接写成下面下这样的代码：

# form属性 #

form属性（不是<form>元素），是一个划时代的属性，它允许你将<form>表单里的表单控件声明在表单外门，只需要在相应的控件上设置form属性为指定的<form>表单的id就行了，不需要非得把元素声明在<form>元素里了，解放啦。

代码如下：

<label>Email:
     <input type="email" form="foo" name="email">
    </label>
    <form id="foo"></form>

支持该属性的元素有：input, output, select, textarea, button, label, object和fieldset。

# required属性 #

required属性是一个验证属性，表明该控件是必填项，在submit表单之前必须填写。可用的元素是：input, select和textarea（例外： type类型为hidden, image或类似submit的input元素）。

如果在select上使用required属性，那就得设置一个带有空值的占位符option。代码如下：

<label>Color: <select name=color required>
     <option value="">Choose one
     <option>Red
     <option>Green
     <option>Blue
    </select></label>

# fieldset下的disabled属性 #

当fieldset的设置disabled属性时，其所有的子控件都被禁用掉了，但不包括legend里的元素。name属性是用来脚本访问的。

代码1：

<form>
    <fieldset name="clubfields" disabled>
     <legend> <label>
      <input type=checkbox name=club οnchange="form.clubfields.disabled = !checked">
      Use Club Card
     </label> </legend>
     <p><label>Name on card: <input name=clubname required></label></p>
     <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
     <p><label>Expiry date: <input name=clubexp type=month></label></p>
    </fieldset>
    </form>

当点击legend里的checkbox的时候，会自动切换fieldset子元素的disabled状态。

代码2：

<form>
    <fieldset name="clubfields">
        <legend>
            <label>
                <input type="checkbox" name="club" οnchange="form.clubfields.disabled = !checked">
                Use Club Card
            </label>
        </legend>
        <p>
            <label>
                Name on card:
                <input name="clubname" required></label></p>
        <fieldset name="numfields">
            <legend>
                <label>
                    <input type="radio" checked name="clubtype" οnchange="form.numfields.disabled = !checked">
                    My card has numbers on it
                </label>
            </legend>
            <p>
                <label>
                    Card number:
                    <input name="clubnum" required pattern="[-0-9]+"></label></p>
        </fieldset>
        <fieldset name="letfields" disabled>
            <legend>
                <label>
                    <input type="radio" name="clubtype" οnchange="form.letfields.disabled = !checked">
                    My card has letters on it
                </label>
            </legend>
            <p>
                <label>
                    Card code:
                    <input name="clublet" required pattern="[A-Za-z]+"></label></p>
        </fieldset>
    </fieldset>
    </form>

在这个例子，当你外面的 "Use Club Card" checkbox没有选中的时候，里面的子控件都是被禁用的，如果选中了，两个radiobutton都可用了，然后可以选择哪一个子fieldset你想让它可用。

# input下的新属性(autocomplete, min, max, multiple, pattern, step) #

input下增加了几个用于约束输入内容的属性（autocomplete, min, max, multiple, pattern和step），目前只有部分浏览器支持required和autocomplete属性，其它属性尚未支持。

autocomplete 属性规定输入字段是否应该启用自动完成功能, 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

<form action="demo_form.asp" method="get" autocomplete="on">
      First name:<input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      E-mail: <input type="email" name="email" autocomplete="off" /><br />
      <input type="submit" />
    </form>

*注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。*

**另外也可以声明一个list属性，用来和存放数据的datalist元素关联**：

<form>
    <label>Homepage: <input name=hp type=url list=hpurls></label>
    <datalist id=hpurls>
     <option value="http://www.google.com/" label="Google">
     <option value="http://www.reddit.com/" label="Reddit">
    </datalist>
    </form>

当input为空的时候，双击它，就会弹出提示选项（选项内容就是定义的label（Google/Reddit））。选择一个label就会将对应的value地址更新到input里（目前FF支持）。

datalist的声明形式可以有多种：

<datalist id="breeds">
       <option value="Abyssinian">
       <option value="Alpaca">
       
    </datalist>
    或者
    <datalist id="breeds">
      <label>
       or select one from the list:
       <select name="breed">
        <option value=""> (none selected)
        <option>Abyssinian
        <option>Alpaca
        
       </select>
      </label>
     </datalist>

另外，当input的type为image的时候，input还支持width和height属性用来指定图片的大小。

[http_dev.w3.org_csswg_css3-mediaqueries_media0]: http://dev.w3.org/csswg/css3-mediaqueries/#media0