HTMLCSS学习笔记

 

a 和 area 下的 media 属性

为了和 link 元素保存一致性，a 元素和 area 元素也都增加了 media 属性，只有在 href 存在时菜有效。media 属性的意思是目标 URL 是为何种媒介 / 设备优化的，默认值是 all，详细语法规范请访问：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 等属性。

属性值描述
hreflanglanguage_code规定目标 URL 的语言
mediamedia query规定目标 URL 是为何种媒介 / 设备优化的
relalternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag规定当前文档与目标 URL 之间的关系
typemime_type规定目标 URL 的 MIME 类型

base 下的 target 属性

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the &lt;base&gt; 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 里，我们不得不这样定义：

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

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

<meta charset="ISO-8859-1">

autofocus 属性

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

<input maxlength="256"  autofocus>
<input type="submit" value="Login">

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

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

placeholder 属性

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

<input type="username" placeholder="请输入你的用户名">

form 属性

form 属性（不是

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

代码如下：

<label>Email:
 <input type="email" form="foo" >
</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  disabled>
 <legend> <label>
  <input type=checkbox 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 [-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>
</form>

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

代码 2：

<form>
<fieldset >
    <legend>
        <label>
            <input type="checkbox" form.clubfields.disabled = !checked">
            Use Club Card
        </label>
    </legend>
    <p>
        <label>
            Name on card:
            <input  required></label></p>
    <fieldset >
        <legend>
            <label>
                <input type="radio" checked form.numfields.disabled = !checked">
                My card has numbers on it
            </label>
        </legend>
        <p>
            <label>
                Card number:
                <input [-0-9]+"></label></p>
    </fieldset>
    <fieldset  disabled>
        <legend>
            <label>
                <input type="radio" form.letfields.disabled = !checked">
                My card has letters on it
            </label>
        </legend>
        <p>
            <label>
                Card code:
                <input [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"  /><br />
  Last name: <input type="text"  /><br />
  E-mail: <input type="email"  /><br />
  <input type="submit" />
</form>

注释：autocomplete 属性适用于 ，以及下面的 <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 >
    <option value=""> (none selected)
    <option>Abyssinian
    <option>Alpaca
    <!-- ... -->
   </select>
  </label>
 </datalist>

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