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