zoukankan      html  css  js  c++  java
  • HTML5学习笔记简明版(6):新增属性(1)

    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

    media query

    规定目标 URL 是为何种媒介/设备优化的

    rel

    alternate, 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 &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" 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属性(不是<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 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 属性适用于 <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属性用来指定图片的大小。

  • 相关阅读:
    socket.io带中文时客户端无法响应
    JQ树插件 — zTree笔记
    cecium 笔记
    express处理跨域问题,中间件 CORS
    一些接口
    express 3.5 Err: request aborted
    ovirt kvm嵌套虚拟化
    kvm实现快速增量盘模式的克隆脚本
    kvm命令
    kvm 中 Guest Is already in use 处理办法
  • 原文地址:https://www.cnblogs.com/TomXu/p/2269105.html
Copyright © 2011-2022 走看看