HTML5的全局属性

最新推荐文章于 2022-07-14 17:05:32 发布

转载最新推荐文章于 2022-07-14 17:05:32 发布 · 149 阅读

文章标签：

#HTML5

前端学习专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了HTML5中引入的多种新特性，包括增强的输入控件、新的内容元素如article和section，以及改进的表单功能。通过实例展示了contentEditable、spellcheck等属性的应用，同时介绍了formtarget、autofocus等表单元素的新属性。

contentEditable属性

designMode属性

hidden属性

spellcheck属性

tableindex属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>可编辑列表</h2>
    <ul contenteditable="" hidden="">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
<input type="test" spellcheck="">
    <a href="#" tabindex="1">hello</a>
    <a href="#" tabindex="3">hello</a>
    <a href="#" tabindex="2">hello</a>
<ul tabindex="4">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

新增的主体结构元素article,aside，section time

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article元素aside元素nav元素</title>
</head>
<body>
    <article>
        <header>
            <h1>我的</h1>
            <p>12336526984</p>
        </header>
        <article>
            <header>
                zuozhe
            </header>
            <p>pinglun</p>
            <footer>
                time
            </footer>
        </article>
        <footer>
            <p>这是底部</p>
        </footer>
    </article>
<article>
    <h1>内嵌页面</h1>
    <aside>
        <h1>123</h1>
        <p>456</p>
    </aside>
    <object>
        <embed src="#" width="600" height="400"></embed>
    </object>
</article>
<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2018-7-14</a></li>
            <li><a href-="#">7895445</a></li>
        </ul>
    </nav>
</aside>
<section>
    <h1>65</h1>
    <p>吃奶粉都不会一股</p>
</section>
<article>
    <h1>1465</h1>
    <p>不是更别说如果你</p>
    <section>
        <h2>4184</h2>
        <p>过呢计划</p>
    </section>
</article>
<section>
    <h1>885</h1>
    <article>
        <h2>er</h2>
        <p>55464165</p>
    </article>
    <article>
        <h2>er</h2>
        <p>55464165</p>
    </article>
    <article>
        <h2>er</h2>
        <p>55464165</p>
    </article>
</section>
    <time datetime="2018-07-15">2018-07-15</time>
    <time datetime="2018-07-15T20:00">2018-07-15</time>
    <time datetime="2018-07-15T20:00Z">2018-07-15</time>
    <time datetime="2018-07-15T20:00+09:00">2018-07-15</time>
<article>
    <header>
        <h1>苹果</h1>
        <p>发布日期
        <time datetime="2018-07-15" pubdate>2018-07-15</time>
        </p>
        <p>舞会时间
            <time datetime="2018-07-15" >2018-07-15</time>
        </p>
    </header>
</article>
</body>
</html>

address

address>
    <a href="#">iwen</a>
    <a href="#">ime</a>
</address>
<footer>
    <div>
        <address>
            <a href="#">iwen</a>
            啦啦啦啦
        </address>
        <time datetime="2018-07-15">2018-07-15</time>
    </div>
</footer>

HTML5J基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页编辑示例</title>
</head>
<body>
    <header>
        <h1>网页标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a> </li>
                <li><a href="#">帮助</a> </li>
            </ul>
        </nav>
    </header>
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>
    <p>文章正文</p>
    <section>
        <div>
            <article>
                <h1>评论标题</h1>
                <p>评论正文</p>
            </article>
        </div>
    </section>
</article>
<footer>
    <small>14556</small>
</footer>

</body>
</html>

footer元素

from fromaction（指定提交页面） frommethod (指定提交方法) formenctype

<form id="123" action="">
    <input type="submit" name="s1" value="v1" formaction="xx.jsp"><input>
    <input type="submit" name="s1" value="v1" formmethod="post" formaction="xx.jsp"><input>
    <input type="submit" name="s1" value="v1" formmethod="get"><input>
    <input type="submit" name="s1" value="v1" formenctype="text/plain"><input>
    <input type="submit" name="s1" value="v1" formenctype="multipart/form-data"><input>
    <input type="submit" name="s1" value="v1" formenctype="application/x-www-form-urlencoded"><input>
</form>

formtarget 打开页面位置 autofocus(页面焦点)

<input type="submit" name="s1" value="v1" formtarget="_blank"><input>
<input type="submit" name="s1" value="v1" formtarget="_self"><input>
<input type="submit" name="s1" value="v1" formtarget="_parent"><input>
<input type="submit" name="s1" value="v1" formtarget="_top"><input>
<input type="submit" name="s1" value="v1" formtarget="framename"><input>
<input type="submit" name="s1" value="v1" autofocus><input>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页编辑示例</title>
</head>
<body>
<script>
    function validate() {
        var txtName = document.getElementById("txt_name");
        var button = document.getElementById("btnValidate");
        var form = document.getElementById("123");
        if(txtName.value.trim()==""){
            var lable = document.createElement("lable");
            lable.setAttribute("for","txt_name");
            form.insertBefore(lable,button);
            txtName.labels[1].innerHTML="请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:9px; color:red");
        }
    }
</script>
    <form id="123" action="">
        <input type="text" required="required"><input>
       <button type="submit">提交</button>
        <label id="label" for="txt_name">姓名：</label>
        <input id="txt_name">
        <input type="button" id="btnValidate" value="验证" onclick="validate()">
    </form>

</body>
</html>

标签的control属性，编辑框的placeholder属性，复选框的indeterminate属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页编辑示例</title>
</head>
<body>
    <script>
        function setValue() {
            var label = document.getElementById("label");
            var textbox=label.control;
            textbox.value = "010010";
        }
    </script>
     <form>
         <label id="label">
             邮编：
             <input id="txt_zip" maxlength="6" placeholder="请输入邮编">
             <small>请输入6位数字</small>
         </label>
         <input type="button" value="设置默认值" onclick="setValue()">
     </form>
<input type="checkbox" indeterminate id="cb">属性测试
<script>
   var cb = document.getElementById("cb");
   cb.indeterminate = true;
</script>
</body>
</html>

image的width属性和height属性

<form action="test.isp" method="post">
    姓名：<input type="text" name="name">
    <input type="image" src="123.gif" alt="编辑" width="50" height="50">
</form>

文本框的list属性AutoComplete属性

    <form>
        <input type="text" name="greeting" list="greetings">
        <datalist id="greetings" style="display:none">
            <option value="HTML5">HTML5</option>
            <option value="CSS">CSS</option>
            <option value="JS">JS</option>
        </datalist>
    </form>
<input type="text" name="greeting" autocomplete="" list="greetings">

pattern属性和SelectionDirection属性

<script>
    function AD() {
        var control = document.forms[0]['text'];
        var Direction = control.selectionDirection;
        alert(Direction);
    }
</script>
<form action="xxx">
    请输入内容：
    <input pattern="[A-Z]{3}" name="part">
    <input type="submit">
    <input type="text" name="text">
    <input type="button" value="点击我" onclick="AD()">
</form>