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>