• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 位置: html5 中文手册

    html5 属性

    a和area下的media属性

    为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all

    代码示例:

    <a href="https://www.lanmper.cn" 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="https://www.lanmper.cn">
        </head>
        <body>
            <p>visit the <a href="archives.html">archives</a>.</p>
        </body>
    </html>

    点击上面的连接,将跳转到https://www.lanmper.cn。

    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="https://www.lanmper.cn" label="google">
     <option value="https://www.lanmper.cn" 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属性用来指定图片的大小。

    dirname属性

    input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。

    <form action="addcomment.cgi" method=post>
     <p><label>comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
     <p><button name="mode" type=submit value="add">post comment</button></p>
    </form>

    用户提交的时候,浏览器会接收到3个参数,分别是:comment, comment.dir和mode,类似下面这样:comment=Hello&comment.dir=ltr&mode=add

    如果是阿拉伯文的浏览器,输入的是阿拉伯文مرحبًا的话,那传回的参数就应该是这样的:

    comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

    textarea下的maxlength和wrap属性

    textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。

    新增的wrap属性为枚举值(soft/hard),意思分别是:

    • hard:自动硬回车换行,换行标记一同被传送到服务器中去,必须与cols同时使用才能判断多少字符换行;
    • soft:自动软回车换行,换行标记不会传送到服务器中去

    form下的novalidate属性

    新增属性novalidate的意思是允许form表单不验证即可提交(不用管form里的元素是否有验证条件,例如required, min, max等)。

    例子代码:

    <form action="demo_form.asp" novalidate="novalidate">
      e-mail: <input type="email" name="user_email" />
      <input type="submit" />
    </form>

    还有一种用法是,同一个form里有多个submit按钮,可以针对某个按钮设置formnovalidate属性来忽略验证,例如:

    <form action="editor.cgi" method="post">
     <p><label>name: <input required name=fn></label></p>
     <p><label>essay: <textarea required name=essay></textarea></label></p>
     <p><input type=submit name=submit value="submit essay"></p>
     <p><input type=submit formnovalidate name=save value="save essay"></p>
     <p><input type=submit formnovalidate name=cancel value="cancel"></p>
    </form>

    该form只有在点击Submit essay按钮的时候才验证表单,另外2个按钮不验证。

    input与button下的新属性

    input和button元素新增加了几个新属性(formaction, formenctype, formmethod, formnovalidate和formtarget),如果这些设置这些属性的话,那所对应的form属性值将被覆盖,即input或button所属 的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。

    例子代码:

    <form action="demo_form.asp" method="get">
    first name: <input type="text" name="fname" /><br />
    last name: <input type="text" name="lname" /><br />
    <input type="submit" value="submit" />
    <input type="submit" formmethod="post" formaction="demo_post.asp" value="submit" />
    </form>
    <form action="demo_form.asp" method="get">
      first name: <input type="text" name="fname" /><br />
      last name: <input type="text" name="lname" /><br />
      <input type="submit" value="submit" /><br />
      <input type="submit" formaction="demo_admin.asp" value="submit as admin" />
    </form>
    <form action="demo_form.asp" method="get">
      first name: <input type="text" name="fname" /><br />
      last name: <input type="text" name="lname" /><br />
    <input type="submit" value="submit" />
    <input type="submit" formtarget="_blank" value="submit" />
    </form>

    menu下的type和label属性

    menu 元素有了两个新属性:type 和 label。它们允许元素转化成典型用户界面里的菜单,并结合全局 contextmenu 属性提供上下文菜单。

    style下的scoped属性

    style 元素有了一个新的 scoped 属性,用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树,即兄弟树。

    <!-- 这个article正常使用head里声明的style -->
     <article>
        <h1>blah title blah</h1>
        <p>blah blah article blah blah.</p>
    </article>
    <article>
        <!-- 这里声明的style只能让该article以及子元素使用 -->
        <style scoped>
            h1 { color: hotpink; }
            article { border: solid 1px hotpink; }
        </style>
        <h1>blah title blah</h1>
        <p>blah blah article blah blah.</p>
    </article>

    script下的async属性

    async属性可以让script加载的脚步异步执行(即必须是src引用文件的形式才可以用),例如:

    <script type="text/javascript" src="demo_async.js" async="async"></script>

    有多种执行外部脚本的方法:

    1. 如果 async=”async”:脚本相对于页面的其余部分异步执行(当页面继续进行解析时,脚本将被执行)
    2. 如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行
    3. 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

    html下的manifest属性

    html 元素有了一个新属性 manifest,指向一个用于结合离线web应用API的应用程序缓存清单。

    首先,需要先创建manifest文件

    cache manifest
    #this is a comment
    cache #需要缓存的文件
    index.html
    style.css
    network: #不需要缓存的文件
    search.php
    login.php
    fallback: #资源不可用的情况下,重定向的地址
    /api offline.html

    然后加该文的地址加到html属性里:

    <html manifest="/offline.manifest">

    link下的sizes属性

    link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性,可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

    例子代码:

    <link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

    ol下的reversed属性

    ol 元素有了一个新属性 reversed。当其存在时,代表列表中的顺序为降序。

    iframe下的sanddbox, seamless和srcdoc属性

    iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc,用以允许沙箱内容,例如,博客评论。

    例子代码:

    <iframe sandbox src="#"></iframe>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
            src="#"></iframe>

    Seamless:

    <nav><iframe seamless src="nav.include.html"></iframe></nav>

    video和audio的play属性

    HTML5也使得所有来自HTML4的事件处理属性(那些形如 onevent-name 的属性)变成全局属性,并为其定义的新的事件添加了几个新的事件处理属性。比如,媒体元素(video 和 audio)API所使用的 play 事件。

    可编辑属性

    可编辑属性可以兼容所有的浏览器包括IE6,现在大部分的编辑器都是使用这个功能。我的代码里面也加了,就是contenteditable="true",

    • true,或者是一个空字符串,表明该元素可编辑.
    • false表明该元素不可编辑.
    • inherit表明该元素继承了其父元素的可编辑状态.


    HTML5废除的属性

    HTML4中一些属性在HTML5中不再被使用,而是采用其他属性或其他方式进行替代。

    在HTML 4中使用的属性使用该属性的元素在HTML 5中的替代方案
    revlink、arel
    charsetlink、a在被链接的资源的中使用HTTP Content-type头元素
    shape、coordsa使用area元素代替a元素
    longdescimg、iframe使用a元素链接到校长描述
    targetlink多余属性,被省略
    nohrefarea多余属性,被省略
    profilehead多余属性,被省略
    versionhtml多余属性,被省略
    nameimgid
    schememeta只为某个表单域使用scheme
    archive、chlassid、codebose、codetype、declare、standbyobject使用data与typc属性类调用插件。需要使用这些属性来设置参数时,使用param属性
    valuetype、typeparam使用name与value属性,不声明之的MIME类型
    axis、abbrtd、th使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性,来使单元格的内容变得简短
    scopetd在被链接的资源的中使用HTTP Content-type头元素
    aligncaption、input、legend、div、h1、h2、h3、h4、h5、h6、p使用CSS样式表替代
    alink、link、text、vlink、background、bgcolorbody使用CSS样式表替代
    align、bgcolor、border、cellpadding、cellspacing、frame、rules、widthtable使用CSS样式表替代
    align、char、charoff、height、nowrap、valigntbody、thead、tfoot使用CSS样式表替代
    align、bgcolor、char、charoff、height、nowrap、valign、widthtd、th使用CSS样式表替代
    align、bgcolor、char、charoff、valigntr使用CSS样式表替代
    align、char、charoff、valign、widthcol、colgroup使用CSS样式表替代
    align、border、hspace、vspaceobject使用CSS样式表替代
    clearbr使用CSS样式表替代
    compace、typeol、ul、li使用CSS样式表替代
    compacedl使用CSS样式表替代
    compacemenu使用CSS样式表替代
    widthpre使用CSS样式表替代
    align、hspace、vspaceimg使用CSS样式表替代
    align、noshade、size、widthhr使用CSS样式表替代
    align、frameborder、scrolling、marginheight、marginwidthiframe使用CSS样式表替代
    autosubmitmenu