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>