整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML5結構

          紹了在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前端高手哦!

          志同道合的小伙伴跟我一起學習交流哦!

          第一階段 HTML5

          03章 HTML基本結構


          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

          1. 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文檔結構,大家可以熟悉看一看,在此再次表達歉意,也違背了這個標題,抱歉!


          主站蜘蛛池模板: 国产日本亚洲一区二区三区| AA区一区二区三无码精片| 亚洲色精品三区二区一区| 国产香蕉一区二区三区在线视频| 丝袜美腿高跟呻吟高潮一区| 亚洲国产综合无码一区| 天堂va在线高清一区| 日本一区二区在线| 国产乱码伦精品一区二区三区麻豆| 精品视频无码一区二区三区| 中文字幕日韩一区二区三区不| 无码一区二区三区在线| 亚洲一区二区三区偷拍女厕| 国产精品电影一区二区三区| 久久久久人妻一区二区三区vr| 精品日产一区二区三区手机| 一区二区三区免费高清视频| 国产精品va一区二区三区| 国产精品一区视频| 亚洲av无码一区二区三区观看| 无码少妇精品一区二区免费动态| 精品国产AⅤ一区二区三区4区 | 亚洲国产专区一区| 波多野结衣在线观看一区二区三区| 97精品一区二区视频在线观看| 国产在线不卡一区二区三区| 中文字幕精品一区二区精品| 精品一区二区三区免费视频| 一区二区不卡久久精品| 亚洲国模精品一区| 国产一区二区三区在线看| 国产人妖视频一区二区破除| 国产在线精品一区二区在线看| 无码丰满熟妇浪潮一区二区AV| 日韩在线视频一区二区三区| 日韩在线视频一区二区三区| 精品91一区二区三区| 合区精品久久久中文字幕一区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 日本一区二区三区不卡视频| 99久久精品日本一区二区免费 |