HTML学习第六天
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>
大道五十,天衍四九,人遁其一!