<hgroup>標注副標題
成都創(chuàng)新互聯(lián)公司網(wǎng)站建設公司是一家服務多年做網(wǎng)站建設策劃設計制作的公司,為廣大用戶提供了成都網(wǎng)站設計、做網(wǎng)站,成都網(wǎng)站設計,一元廣告,成都做網(wǎng)站選成都創(chuàng)新互聯(lián)公司,貼合企業(yè)需求,高性價比,滿足客戶不同層次的需求一站式服務歡迎致電。
在 HTML5語義元素的使用 中已經(jīng)讓<header>物盡其用了,其實,HTML5還增加了兩個與標題有關的元素:一個是<header>,另一個是<hgroup>,下面看看兩個元素的規(guī)范做法:
如果有一個普通的標題,它本身不包含任何特殊的內容,那使用一個帶編號的標題元素(<h2>、<h3>、<3>)就可以了:
<h2>因為痛,所以叫青春</h2>
如果除了主標題,還有一個主標題,那可以把這兩個標題包裝在一個<hgroup>元素中,但是,這里邊除了編號的標題元素(<h2>、<h3>、<3>)外,其它任何元素也不要放:
<hgroup>
<h2>因為痛,所以叫青春</h2>
<h3>寫給獨自站在人生路口的你</h3>
</hgroup>
3.如果除了主標題和主標題,還有其它內容(比如內容摘要、發(fā)表日期、作者署名、圖片和小標題),應該把他們放在<hgroup>的后面,再把他們整體放在<header>元素中:
<header>
<hgroup>
<h2>因為痛,所以叫青春</h2>
<h3>寫給獨自站在人生路口的你</h3>
</hgroup>
<pclass="Byline">[韓]金蘭都</p>
</header>
上面代碼中用<h3>替換<p>(參見 HTML5語義元素的使用 ),這樣做不會改變頁面在瀏覽器中的效果,但是,但卻會影響瀏覽器或其他工具為頁面生成的文檔摘要(只會關注頂級標題(也就是這里的<h2>),其它標題會顯示在瀏覽器中,但不會列入文檔摘要,這樣的結果才是合理的)。
用<figure>添加插圖
插圖與圖片的概念不完全一樣,HTML5建議把插圖想象成一本書的附件,即是說,插圖雖獨立于文本,但在文本中會提到它。
一般來說,插圖應該是浮動的,即應該把插圖放在相關文本旁邊的一個比較近的位置上(而不是把它們鎖定在特定的詞或元素旁邊),而且,插圖通常還會有與之相伴的浮動圖題。
下面給 HTML5語義元素的使用 文章中添加插圖:
<p><spanclass="LeadIn">青春</span>, 之所以艱難,是因為孤單。</p>
<figureclass="FloatFigure">
<imgsrc="youth.jpeg"alt="Our youth">
<figcaption>是誰偷走了我們的青春?</figcaption>
</figure>
<p> 童年時,……</p>
當然,只有這些標記是不夠的,必須有相應的樣式規(guī)則,才能把插圖定位到適當?shù)奈恢?添加外邊距、控制圖題文本的格式等),以下是樣式規(guī)則:
/*為插圖應用樣式*/
.FloatFigure {
float: left;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
記得為圖題也要應用樣式規(guī)則:
/*為圖題應用樣式*/
.FloatFigure figcaption {
max-width: 200px;
font-size: small;
font-style: italic;
margin-bottom: 5px;
}
以下就是添加插圖及應用樣式頁面的外觀:
用<aside>添加附注
新的<aside>元素表示與它周圍的文本沒有密切關系的內容。使用附注可以介紹另外一個話題,或者對主文檔提出的某個觀點進行解釋,也可以用<aside>來盛放廣告、相關的內容鏈接,以起到引起讀者的注意力。
使用<div>元素也可以創(chuàng)造這種效果,但用<aside>元素包裝同樣的內容,可以讓標記更富有意義,如下:
<h3>只有你,獨自站在人生邊上</h3> <aside class="PullQuote"> <img src="quotes_start.png" alt="Quote"> 青春,痛并快樂著。但是,自己選擇的路,就是跪著,也要走完。 <img src="quotes_end.png" alt="End quote"> </aside> <p>這是個對話已絕,共鳴已亡的時代。</p>
以下是為附注添加的樣式:
.PullQuote { float: right; max-width: 300px; border-top: thin black solid; border-bottom: thick black solid; font-size: 30px; line-height: 130%; font-style: italic; padding-top: 5px; padding-bottom: 5px; margin-left: 15px; margin-bottom: 10px; } .PullQuote img { vertical-align: bottom; }
如此,便可以看到下面的附注的效果:
標題名稱:HTML5元素<hgroup>和<figure>及<aside>的使用
新聞來源:http://bm7419.com/article14/ipohde.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務、服務器托管、標簽優(yōu)化、品牌網(wǎng)站制作、App設計、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)