紹了在HTML5中具體新增了哪些結構元素,以及這些元素的定義和使用方法。
接下來看一下在HTML5中進行總體頁面布局的時候,具體應該怎樣運用這些結構元素。
大綱
通過使用新的結構元素,HTML5的文檔結構比大量使用div元素的HTML 4的文檔結構更加清晰明確。
如果再規劃好文檔結構的大綱,就可以創建出對于閱讀者或屏幕閱讀程序來說,都很清晰易讀的文檔結構。
所謂大綱,簡單來說就是文檔中各內容區塊的結構編排。
內容區塊可以使用標題元素(hl~h6)來展示各級內容區塊的標題。
綜合運用各級內容區塊的標題創建好文檔的目錄后,該目錄就成為一個大綱了。
關于內容區塊的編排,可以分為“顯示編排”與“隱式編排”兩種方式。
顯式編排
顯式編排是指明確使用section等元素創建文檔結構,在每個內容區塊內使用標題(h1~h6、hgroup等),顯式編排內容區塊的代碼如下。
<body>
<h1>網頁內容區塊的標題</h1>
<p>網頁內容區塊的正文</p>
<section>
<h2>section 內容區塊的標題</h2>
<p>section 內容區塊的正文</p>
</section>
</body>
隱式編排
隱式編排是指不明確使用section等元素,而是根據頁面中所書寫的各級標題(h1~h6、hgroup等)
把內容區塊自動創建出來。因為HTML5分析器只要看到書寫了某個級別的標題,
就會判斷存在相對應的內容區塊。隱式編排內容區塊的代碼如下。
<body>
<h1>網頁內容區塊的標題</h1>
<p>網頁內容區塊的正文</p>
<!--分析器根據h2 等元素判斷生成內容區塊-->
<h2>section 內容區塊的標題</h2>
<p>section 內容區塊的正文</p>
</body>
兩種編排方式進行對比,很明顯,顯式編排更加清晰、易讀。
嘍大家好,我是作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!
志同道合的小伙伴跟我一起學習交流哦!
1 HTML初識
一般先學習html+css,這里我們先定一個小目標,先學HTML,后學習CSS。
HTML(英文 Hyper Text Markup Language的縮寫)中文譯為超文本標簽語言",主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。
<strong>我是加粗的字體</strong>
注:HTML就是一種文本標簽語言,唯一的標簽就是 < >
2 HTML骨架格式
日常生活的書信,我們要遵循共同的約定。
同理:HTML有自己的語言語法骨架格式:
<html> <head> <title></title> </head> <body> </body> </html>
3 我的第一個頁面及其標簽簡介
用記事本寫下如下代碼,保存為html文件,用瀏覽器打開,即可展示。
<html> <head> <title>我的第一個網站</title> </head> <body> 我終于制作了自己的第一個頁面??! </body> </html>
html標簽:所有html中標簽的一個根節點。
head標簽:用于存放:title ,meta, base, style, script, link
注意,在head標簽中我們必須要設置的標簽是title
title標簽:讓頁面擁有一個屬于自己的標題。
body標簽:頁面在的主體部分,用于存放所有的html標簽:p, h, a, b, u, i, s, em, del, ins, strong, img
4 豬八戒版骨架記憶法
看不懂的小伙伴不要氣餒,后續的分享中將持續解釋,只要你跟著我分享的課程從頭到尾去學習,每篇文章看三遍,一個月后,回過頭來看之前的文章就會感覺簡單極了。
?
本章已結束,下篇文章將分享《04HTML常用標簽》小伙伴們不要錯過喲!
這之前,首先給大家說聲抱歉,因為一些私事,所以頭條號斷更了3天,再次給大家表達歉意。
html5
xhtml文檔是html文檔向html5過渡的一個版本,html5基本遵循xhtml規范文檔要求的。我們先看一下XHTML1.0。
先指定一下名字空間
實際用處不大,所有的文檔名字空間值都是一樣(http://www.w3.org/1999/xhtm)
再看一下:
xml聲明文檔類型
以上文檔結構感覺比較復雜,沒有html5文檔簡單,看下圖html5文檔結構:
html5文檔結構
再接下來大家可以看一看,比較詳盡的html5文檔結構:
html5文檔結構 (與下圖鏈接)
html5文檔結構 (與上圖鏈接,與下圖鏈接)
以上是完整的html5文檔結構
當然,最簡單的就是<!DOCTYPE HTML> 聲明一下,其他的都可以不要,也是html5文檔
最簡單一句話就夠了,大小寫也隨意,都可以
跟一般的html文檔相比,簡短得很多,下圖:
html5聲明和html聲明
以上內容就是html5文檔結構,大家可以熟悉看一看,在此再次表達歉意,也違背了這個標題,抱歉!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。