html5中的一些标签学习总结
html5?contenteditable="true"
html5內(nèi)容可編輯屬性
html5 hgroup
hgroup字面意思是頭部的組，可以將其分拆為h和group來(lái)理解。在html5中的作用是用于對(duì)網(wǎng)頁(yè)和區(qū)塊的標(biāo)題進(jìn)行組合。（網(wǎng)頁(yè)是一個(gè)最大的區(qū)塊，所以可以認(rèn)為hgroup是區(qū)塊的標(biāo)題的組合）
前面的文章有提到header元素，貌似這個(gè)元素跟hgroup有非常相似的功能，那么它們之間有什么不同呢？
繼續(xù)從hgroup的定義來(lái)看，它是對(duì)“標(biāo)題"的組合，html中的標(biāo)題有h1,h2,h3,h4,h5,h6。hgroup只能是對(duì)這六種h的組合，不能包含其他元素，這就是跟header的區(qū)別，header可以包含其他元素，而且header可以包含hgroup。
下面是hgroup的一些示例：
情景一
?| 1 2 3 4 5 6 7 8 9 10 | <!doctype html> <title>html5 hgroup 示例一 html5zhan.com</title> <section> ????<hgroup> ????????<h1>我愛(ài)我母親</h1> ????????<h2>給全世界母親的一封信</h2> ????</hgroup> ????? ????<p>又到了5月的第二個(gè)星期天.....</p>??? </section> |
情景二
?| 1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <title>html5 hgroup 示例二 html5zhan.com</title> <section> ????<header> ????????<hgroup> ????????????<h1>我愛(ài)我母親</h1> ????????????<h2>給全世界母親的一封信</h2> ????????</hgroup> ????????<p>添加時(shí)間：2012-5-10</p> ????</header> ????<p>又到了5月的第二個(gè)星期天.....</p>??? </section> |
注
除非有兩個(gè)或者以上的h標(biāo)簽，否則請(qǐng)不要使用hgroup。
?
html5 section
section? 字面上理解為“塊”，“部分”。在html5網(wǎng)頁(yè)中表現(xiàn)的意思跟字面理解差不多，即部分，塊，模塊，主要作用為對(duì)頁(yè)面的內(nèi)容進(jìn)行分塊或者對(duì)文章的內(nèi)容進(jìn)行分段。
頁(yè)面分塊示例
可直接查看html5zhan.com的首頁(yè)，主要由六部分組成，html5新元素，html5新api，html5最新動(dòng)態(tài)，html5文章導(dǎo)航，html5最新文章以及html5作品。
這些內(nèi)容彼此都是一個(gè)獨(dú)立的模塊，這個(gè)時(shí)候就可以使用section包裹他們。
文章分段示例
這里直接給出一個(gè)介紹文章分段的代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <article> ????<h1>Web編程語(yǔ)言比較</h1> ????<p>web編程語(yǔ)言常用的有asp,asp.net,php,jsp...</p> ????<section> ????????<h2>asp</h2> ????????<p>asp全稱Active Server Page</p> ????</section> ????<section> ????????<h2>asp.net</h2> ????????<p>asp的顛覆版本</p> ????</section> ????<section> ????????<h2>php</h2> ????????<p>草根動(dòng)態(tài)語(yǔ)言，免費(fèi)，強(qiáng)大</p> ????</section> </article> |
?
?
?
article與section的異同
section和article可以互相嵌套，也就是說(shuō)他們沒(méi)有上下級(jí)關(guān)系，section可以包含article，article也可以包含section。
感覺(jué)上使用都差不多，都可以有h1,h2,h3,都有一個(gè)主體，那應(yīng)該怎么來(lái)區(qū)分它們的不同？其實(shí)很簡(jiǎn)單，只要從字面上理解它們就可以足夠了：
1、article是文章，文章就是一段完整的獨(dú)立的內(nèi)容。
2、section就是塊，某種意義上可以理解為div，但是比div的意思更加明確一點(diǎn)。
section和div的異同
1、section和div都可以對(duì)內(nèi)容進(jìn)行分塊，但是section是進(jìn)行有意義的分塊，無(wú)意義的分塊應(yīng)該由div來(lái)做，例如用作設(shè)置樣式的頁(yè)面容器。
2、section內(nèi)部必須有標(biāo)題，標(biāo)題也代表了section的意義所在。
其他說(shuō)明
1、section做為"塊"，理論上可以用于很多地方，例如一個(gè)同字型的網(wǎng)頁(yè)，可以用于包裹兩邊的內(nèi)容，但是實(shí)際上，html5中定義了更加有意義的aside標(biāo)記，完全可以用aside來(lái)替代section，因此在使用的時(shí)候應(yīng)盡量使用更有意義的標(biāo)記。
2、html5與css3權(quán)威指南中提到一個(gè)檢查輪廓的工具，這里提供一下：http://gsnedders.html5.org/outliner/
?
html5 article
article?字面意思為“文章”。在web頁(yè)面中表現(xiàn)為獨(dú)立的內(nèi)容，如一篇新聞，一篇評(píng)論，一段名言，一段聯(lián)系方式。這其中包括兩方面，一為整個(gè)頁(yè)面的主旨內(nèi)容，另外就是一些輔助內(nèi)容。
article可以嵌套，即article里面還可以包含article，此時(shí)內(nèi)article應(yīng)該跟外article有一定的關(guān)聯(lián)性，如同情景二，其中主內(nèi)容的評(píng)論。
?
?| 1 2 3 4 | <article id="demo"> ????<h1>內(nèi)容標(biāo)題（選用）</h1> ????<p>內(nèi)容</p> </article> |
?
article既然是獨(dú)立的內(nèi)容，那么內(nèi)容的主題是必不可少，標(biāo)題則為選用內(nèi)容。
情景一
整個(gè)頁(yè)面的主旨內(nèi)容
?
?| 1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <title>html5站案例</title> <body> ????<article> ????????<h1></h1> ????????<p>主內(nèi)容</p> ????</article> ????<aside> ????????側(cè)邊內(nèi)容 ????</aside> </body> |
?
情景二
內(nèi)容的評(píng)論
?
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <title>html5站案例</title> <body> ????<article> ????主內(nèi)容省略.... ????<section> ????????<h1>評(píng)論</h1> ????????<ul> ????????????<li> ????????????????<article>評(píng)論1</article> ????????????</li> ????????????<li> ????????????????<article>評(píng)論2</article> ????????????</li> ????????</ul> ????</section> ????</article> ????<aside> ????????側(cè)邊內(nèi)容 ????</aside> </body> |
?
情景三
輔助內(nèi)容
?
?| 1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <title>html5站案例</title> <body> ????主內(nèi)容省略... ????<aside> ????????<article> ????????????<p>作者：kspig</p> ????????????<p>文章編寫(xiě)時(shí)間：2012年4月</p> ????????</article> ????</aside> </body> ? |
?
html5 address
address字面理解為“地址”，在html5中，它用于文檔或者文章作者或擁有者的聯(lián)系信息。注意，這里放的不是字面上理解的“地址”，而是指“聯(lián)系信息”，可以包括文檔創(chuàng)建者的名字、站點(diǎn)鏈接、電子郵箱、真實(shí)地址、電話號(hào)碼等各類聯(lián)系信息。
address一般放在footer中，有時(shí)也放在header中，視情況而定。
情景
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <title>html5 address 示例 html5zhan.com</title> ?? <header><h1>html5 address 示例 html5zhan.com</h1></header>?? <p>這里是主體...</p> <footer> ????作者：html5zhan ????<address> ????????<ul> ????????????<li>網(wǎng)址：http://www.html5zhan.com</li> ????????????<li>QQ：10000</li> ????????????<li>郵件：web@daojia100.com</li> ????????</ul> ????</address> </footer> |
轉(zhuǎn)載于:https://www.cnblogs.com/javawebstudy/p/3765416.html
總結(jié)
以上是生活随笔為你收集整理的html5中的一些标签学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： VMware虚拟机通过光盘PE安装GHO
- 下一篇： 小数转换成二进制c语言,只写出了十进制小