HTML5 学習メモの簡潔版 (6): 新しい属性 (1)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 学習メモの簡潔版 (6): 新しい属性 (1)

黄舟

Jan 21, 2017 pm 04:46 PM

a および area の Media 属性

link 要素との一貫性を維持するために、a 要素および area 要素にも media 属性が追加されます。これは、href が存在する場合にのみ有効です。 media 属性は、ターゲット URL が最適化されるメディア/デバイスを意味します。詳細な構文仕様については、http://dev.w3.org/csswg/css3-mediaqueries/#media0

Code を参照してください。例:

<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

メディアクエリ

ターゲットURLが最適化されるメディア/デバイスを指定します

rel

変更nate、author 、bookmark、external、help、license、next、nofollow、noreferrer、prefetch、prev、search、sidebar、tag

現在のドキュメントとターゲット URL の間の関係を指定します

type

mime_type

ターゲット URL の MIME タイプ

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 属性は、ドキュメントのエンコード方式を定義するために使用されます。この属性が XML で定義されている場合、XML は UTF-8 と一致するように、charset の値が大文字と小文字を区別しない ASCII である必要があります。 document エンコード方式として UTF-8 の使用を強制します。

注: メタ属性の charset 属性は、XHTML での直接移行の便宜のためのみに使用され、XML ドキュメントには影響しません。

charset 属性を使用して複数のメタ要素を宣言することはできません。

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 属性 (非表示の入力は使用できません)。これは、ページが読み込まれた後に現在の要素にフォーカスが自動的に作用することを定義する宣言的な方法を提供します。オートフォーカスを使用すると、ユーザーエクスペリエンスが向上します。たとえば、ログインページにオートフォーカスを設定すると、ページが読み込まれた後にフォーカスがユーザー名のテキストボックスに自動的に設定されます。

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

ログイン後にコピー

注 1: autofocus 属性はページごとに 1 回宣言されます。

注2: ページにオートフォーカスを設定する必要はありません。

placeholder属性

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

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

ログイン後にコピー

form属性

form属性（不是

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

代码如下：

<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 属性适用于，以及下面的类型：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 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。