HTML学习第六天

一、全局属性

contentEditable属性，控制标签元素的可修改性，默认与“”（空字符串）都代表真，即可编辑

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h5 contenteditable="">fdkfhisdfefhwo</h5>

    <ul contenteditable="">

        <li>djfklasdjfdklhfjfhjfen</li>

        <li>ewhfdjkshf</li>

        <li>fhjsdkjghjsdf</li>

    </ul>

</body>

</html>

designMode属性，控制页面的可编辑性，其值只能有JS编辑，而且只有on和off两种

hidden属性：类似于input的hidden属性，浏览器默认不对该元素进行渲染（也就是显示啦）可以由js脚本来处理其值，实现特殊触发显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h5 hidden="false" contenteditable="">fdkfhisdfefhwo</h5>

    <ul contenteditable="">

        <li>djfklasdjfdklhfjfhjfen</li>

        <li>ewhfdjkshf</li>

        <li>fhjsdkjghjsdf</li>

    </ul>

</body>

</html>

spellcheck属性，对用户的输入进行拼写和语法检查

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text" spellcheck="true">

</body>

</html>

但是我并没有出现拼写检查的红色下标……

tabindex属性，可以让窗口中的所有控件进行遍历获取焦点，将值设为-1则无法访问该控件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="index.html" tabindex="1">www</a>

    <a href="index.html" tabindex="3">aaa</a>

    <a href="index.html" tabindex="2">ccc</a>

    <ul tabindex="4">

        <li tabindex="-1"></li>

        <li tabindex="5"></li>

        <li tabindex="6"></li>

        <li tabindex="0"></li>

    </ul>

</body>

</html>

article元素代表文档、页面中或应用中程序中独立的、完整的、可以独自被引外部引用的内容。常常会是论坛贴子，用户评论或独立的插件

article元素可嵌套，也可当错差件使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <article>

        <header><h1>祖张依世界第一可爱！</h1></header>

        <article>

            <header><h1>祖张依世界第一可爱！</h1></header>

             <span>我不管，再建一个也一样</span>

            <footer>没救了</footer>

        </article>

        <footer>小可爱就是最可爱的！</footer>

    </article>

    <article>

        <h1>祖张依世界第一可爱！</h1>

        <object>

            <embed src="#" width="600" height="400"></embed>

        </object>

    </article>

</body>

</html>

section元素用于对网站或应用程序中页面上的内容进行分块

一个section元素常常由内容及其插件组成，当一个容器需要被直接定义样式或通过脚本定义样式的时候，推荐使用div

一般section会包含标题

article元素比section元素更加强调独立性，而section元素更强调分段分块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <section>

        <h1>祖张依</h1>

        <p>这是一个小可爱，可以卖萌，而且很萌</p>

    </section>

    <article>

        <h1>祖张依世界第一可爱！</h1>

        <p>非要我再说一遍</p>

        <section>

            <h2>可爱</h2>

            <p>这是一种很bug的个人属性</p>

        </section>

        <section>

            <h2>可爱</h2>

            <p>这是一个更加特别的属性</p>

        </section>

    </article>

</body>

</html>

nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他的页面或当前页面的其他部分，只需要将主要的、基本的元素放入nav元素即可，一般应用的场景

传统导航条
侧边导航条
页内导航
翻页操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <nav>

        <ul>

            <li><a href="#">www</a></li>

            <li><a href="#">aaa</a></li>

        </ul>

    </nav>

<article>

    <header>

        <h1>祖张依世界第一可爱！</h1>

        <nav>

            <ul>

                <li><a href="#">为什么可爱</a></li>

                <li><a href="#">为什么世界第一</a></li>

            </ul>

        </nav>

    </header>

    <section>

        <h1>为什么可爱</h1>

        <p>问那么多干什么，巴拉巴拉巴拉</p>

    <section>

        <h1>为什么世界第一</h1>

        <p>……</p>

    </section>

    </section>

    <footer>

        <a href="">删除</a>

        <a href="">修改</a>

    </footer>

</article>

<footer>

    <p><small>版权声明</small></p>

</footer>

</body>

</html>