首頁 >web前端 >H5教程 >HTML5學習筆記簡明版(6):新增屬性(1)

HTML5學習筆記簡明版(6):新增屬性(1)

黄舟
黄舟原創
2017-01-21 16:46:291900瀏覽

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等屬性。

屬性



描述

hreflang

language_code

規定目標URL 的語言

media
alternate, author , bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag

規定當前文件與目標URL 之間的關係

type

mime_type %

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裡,我們不得不這樣定義:

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

在HTML5裡,我們這樣定義就行了:


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



autofocuss

,

aut autofocus屬性(hidden的input不能使用),它提供了一種聲明式的方式來定義當頁面load以後,焦點自動作用於當前元素上。使用autofocus可以提高使用者體驗,例如我們在登入頁面設置,頁面load以後自動將焦點設定到使用者名稱的textbox。
<input maxlength="256" name="loginName" value="" autofocus>
<input type="submit" value="Login">

註1:一個頁面聲明一次autofocus屬性。

註2:一個頁面裡不是必須設定autofocus的。

placeholder属性

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

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

form属性

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

代码如下:

<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 onchange="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" onchange="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" onchange="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" onchange="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 属性适用于 ff9c23ada1bcecdd1a0fb5d5a0f18437,以及下面的 d5fd7aea971a85678ba271703566ebfd 类型: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属性用来指定图片的大小。

以上就是HTML5學習筆記簡明版(6):新增屬性(1)的內容,更多相關內容請關注PHP中文網(www.php.cn)!



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn