整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5前端開發(fā)入門:HTML頁面的基本代碼結(jié)構(gòu)是

          HTML5前端開發(fā)入門:HTML頁面的基本代碼結(jié)構(gòu)是什么?

          多剛?cè)腴THTML5前端開發(fā)的小伙伴對HTML頁面的基本機構(gòu)代碼還不是很清楚,下面和千鋒廣州小編一起來看看吧。

          1、什么是標簽:

          html標簽組成是html文檔的最基本元素,一般是成對出現(xiàn),由開始標簽和與其對應(yīng)的結(jié)束標簽構(gòu)成.?如<html></html>,<p></p>,<body></body>,<head></head>,<span></span>等,此外,還有一些標簽是單獨出現(xiàn)的,如<img/>,<input/>等,標簽可以相互嵌套使用。

          由于html語言是一門弱類型語言,對格式的要求不是非常嚴格,因此所有標簽是不區(qū)分大小寫的,但是,一般在實際開發(fā)中,大家都統(tǒng)一使用小寫。

          2、html文檔的基本結(jié)構(gòu)

          如上圖,每一個html文檔的基本結(jié)構(gòu)為:

          第一層:

          <!DOCTTYPE>------!文檔類型,它的目的是要告訴標準通用標記語言解析器,它應(yīng)該使用什么樣的文檔類型定義(DTD)來解析文檔,在html5文檔中,一般寫為<!DOCTTYPE html> ;值得注意的是,<!DOCTTYPE>不屬于html標簽。

          <html></html>-------html標簽,是html文檔的根標簽,所有的網(wǎng)頁標簽都放在這對標簽中,是所有html標簽的祖先容器。

          第二層:

          <head></head>-------頭部標簽,代表著html文檔的頭信息,是所有頭部元素的容器,內(nèi)部一般包含:<title> <script><style><meta><link>這些頭部元素。

          <body></body>-------網(wǎng)頁主體標簽,其內(nèi)部主要包含著構(gòu)成網(wǎng)頁內(nèi)容的一些元素,如<p></p>,<span></span>,<div></div>,<table></table>等。這些元素都會在網(wǎng)頁的內(nèi)容部分顯示。

          3、標簽的屬性

          就如人有這身高、體重、年齡等這些屬性一樣,html標簽也有自己的屬性,如字體顏色,寬,高,背景等。這些屬性一般通過鍵值對的形式卸載標簽中,是標簽的一部分,并且每種標簽的屬性都不完全像同,有的標簽有著自己特有的屬性。如下圖所示:

          4、html注釋

          在實際開發(fā)中,我們需要在html文檔中做一些標記,方便日后對代碼的維護及修改,也方便其他程序員了解我們的代碼。而在html文檔中,注釋的格式為:

          我們可以理解為,html中,標簽元素是給計算機讀的,為注釋是給程序員看的。

          以上就是今天分享的內(nèi)容,希望對大家有幫助哦!

          tml 的結(jié)構(gòu)部分標簽



          二、網(wǎng)頁常見的結(jié)構(gòu)


          header 標簽 --- 頭部分結(jié)構(gòu)

          nav 標簽 --- 導航條部分結(jié)構(gòu)

          main 標簽 --- 主核心部分內(nèi)容

          footer 標簽 --- 頁尾


          01.代碼示例:

          <body>


          <header>...</header>

          <nav>...</nav>

          <main>...</main>

          <footer>...</footer>


          </body>


          02.以上源代碼使用 DOM(文件對象模型)表示:


          body

          header

          nav

          main

          footer


          03. header 與 footer 用法


          header --- 指整個網(wǎng)頁/或某個區(qū)塊的頭部。

          一定會包含該區(qū)塊的標題

          可能會包含該區(qū)塊的副標題、版本、署名等等


          footer --- 表示整個網(wǎng)頁/或某個區(qū)塊的腳部

          可能包括版權(quán)信息、參考資源、附注等等


          小結(jié):

          頭是header,腳是footer。

          header 和 footer 都可能多次出現(xiàn),但它們的級別是不同的。


          04.nav(navgation 導航) --- 包含一組鏈接,連接至網(wǎng)站其它主要頁面。


          nav 標簽 與 header 標簽的關(guān)系

          不建議將nav放置在header內(nèi)


          頭部/header是從上下文邏輯關(guān)系上來說的,并不一定是視覺設(shè)計中擺在頂上的內(nèi)


          容,所以一般不會包含nav。


          小結(jié):

          導航 navigation包含一組鏈接,指向網(wǎng)站的其他主要欄目。

          nav和header通常是互相獨立的并列關(guān)系。

          nav可能在頁面中多次出現(xiàn),分別指主導航、二級導航等等。


          05.main 標簽和 aside 標簽


          main --- 代表網(wǎng)頁中的主要內(nèi)容/主結(jié)構(gòu)

          不會包含網(wǎng)站的主導航條、網(wǎng)站總標題和網(wǎng)站總頁腳,但可能包含次一級別的


          header/van/footer。


          *注:每個網(wǎng)頁最多只有一個main


          main 不可能是以下元素的后代:


          article(文章標簽)、aside(附屬內(nèi)容標簽)、footer(網(wǎng)頁標簽)、deader(頭部標簽) 或


          nav(導航標簽)


          aside(附屬內(nèi)容)

          附屬內(nèi)容

          如果刪除,影響不大

          應(yīng)與主內(nèi)容main相關(guān)

          aside有時被翻譯成"側(cè)邊",這種翻譯是不準確的。


          代碼示例:

          <body>


          <header>...</header>

          <nav>...</nav>

          <main>

          </main>

          <aside></aside>

          <footer>...</footer>

          </body>


          按 DOM(文件對象模型)構(gòu)建 html :


          body

          header

          nav

          main

          aside

          footer


          小結(jié):

          01.主內(nèi)容main,每個頁面只有一個,指該頁面專屬的內(nèi)容塊,區(qū)別于網(wǎng)站的其他頁面。


          02.附屬內(nèi)容aside,與主內(nèi)容有一些聯(lián)系,如果被刪除,對網(wǎng)頁的閱讀沒有明顯影響。


          06. article 標簽與 section 標簽


          article 是一篇完整的文章,代表頁面中獨立的、完整的、可以獨自被外部引用的內(nèi)容。


          注意:header/footer/nav都可能出現(xiàn)在article中,作為文章自身的頭、尾與文章內(nèi)部導航。


          section (片段或章節(jié)) :


          無法獨立成文,通常性屬于 article 的一部分,該片段里的開始部分仍有一個自然標題以


          及相關(guān)內(nèi)容。


          section 也可能是main的子元素。


          07.關(guān)于 id :

          唯一標識符,同一頁面里id不得重復(fù),以半角英文字母開頭,不含特殊字符與空格,描述職能


          ,不描述樣式。


          小結(jié):

          01.article 是一篇獨立的完整的文章,可以被外界引用的。


          02.section 可以是 article 中的一個章節(jié),也可以是主內(nèi)容中的一個區(qū)塊。


          03.不管是 article 還是 section , 第一個子元素總是標題(header 或 h1)。


          08. div 標簽(部門、分塊)


          div --- 根據(jù)職能的不同,劃分出特定的一塊區(qū)域,常常結(jié)合id屬性使用。


          示例:

          <header>

          <h1>internet...</h1>

          </header>

          <div id="today">...</div> ---今日熱點功能區(qū)域

          <div id="login">...</div> ---登陸相關(guān)功能區(qū)域

          <div id="search">...</div> ---搜索功能區(qū)域


          article、section、div 的區(qū)別:


          aricle:文章

          如果上下文能聯(lián)合組成一個有意義的獨立文章;應(yīng)優(yōu)先使用 article


          section:片段,章節(jié)

          無法使用article時,該片段里的開始部分仍有一個自然標題,和相關(guān)內(nèi)容。


          div:部門、分塊

          在無法使用article/section/aside等時,仍承擔著特定功能的分塊。


          小結(jié):

          在無法使用article/section/aside等時,仍承擔著特定功能的分塊,就可以使用 div 標簽。

          div標簽和section標簽一樣,常常帶有id屬性。

          家好,我是皮皮。

          前言

          對于前端來說,HTML 都是最基礎(chǔ)的內(nèi)容。

          今天,我們來了解一下 HTML 和網(wǎng)頁有什么關(guān)系,以及與 DOM 有什么不同。通過本講內(nèi)容,你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的,以及在這個過程中我們可以進行怎樣的處理來提升網(wǎng)頁的性能,從而提升用戶的體驗。


          一、瀏覽器頁面加載過程

          不知你是否有過這樣的體驗:當打開某個瀏覽器的時候,發(fā)現(xiàn)一直在轉(zhuǎn)圈,或者等了好長時間才打開頁面……

          此時的你,會選擇關(guān)掉頁面還是耐心等待呢?

          這一現(xiàn)象,除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因,大多數(shù)都是由于頁面設(shè)計不合理導致加載時間過長導致的。

          我們都知道,頁面是用 HTML/CSS/JavaScript 來編寫的。

          • HTML 的職責在于告知瀏覽器如何組織頁面,以及搭建頁面的基本結(jié)構(gòu);
          • CSS 用來裝飾 HTML,讓我們的頁面更好看;
          • JavaScript 則可以豐富頁面功能,使靜態(tài)頁面動起來。

          HTML由一系列的元素組成,通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結(jié)構(gòu),基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu):

          <html>
              <head></head>
              <body></body>
          </html>

          其中:

          • html元素是頁面的根元素,它描述完整的網(wǎng)頁;
          • head元素包含了我們想包含在 HTML 頁面中,但不希望顯示在網(wǎng)頁里的內(nèi)容;
          • body元素包含了我們訪問頁面時所有顯示在頁面上的內(nèi)容,是用戶最終能看到的內(nèi)容;


          HTML 中的元素特別多,其中還包括可用于 Web Components 的自定義元素。

          前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會導致頁面響應(yīng)慢,這個過程很多時候體現(xiàn)在<script><style>元素的設(shè)計上,它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

          因此,如果想要提升頁面的加載速度,就需要了解瀏覽器頁面的加載過程是怎樣的,從根本上來解決問題。

          瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程(更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹)。其中,GUI 渲染線程負責渲染瀏覽器界面 HTML 元素,JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。

          由于 JavaScript 在執(zhí)行過程中還可能會改動界面結(jié)構(gòu)和樣式,因此它們之間被設(shè)計為互斥的關(guān)系。也就是說,當 JavaScript 引擎執(zhí)行時,GUI 線程會被掛起。

          以網(wǎng)易云課堂官網(wǎng)為例,我們來看看網(wǎng)頁加載流程。

          (1)當我們打開官網(wǎng)的時候,瀏覽器會從服務(wù)器中獲取到 HTML 內(nèi)容。

          (2)瀏覽器獲取到 HTML 內(nèi)容后,就開始從上到下解析 HTML 的元素。

          (3)<head>元素內(nèi)容會先被解析,此時瀏覽器還沒開始渲染頁面。

          我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素,還有一些<link>元素涉及外部資源(如圖片、CSS 樣式等),此時瀏覽器會去獲取這些外部資源。除此之外,我們還能看到<head>元素中還包含著不少的<script>元素,這些<script>元素通過src屬性指向外部資源。

          (4)當瀏覽器解析到這里時(步驟 3),會暫停解析并下載 JavaScript 腳本。

          (5)當 JavaScript 腳本下載完成后,瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當腳本執(zhí)行完成后,控制權(quán)會交回給渲染引擎,渲染引擎繼續(xù)往下解析 HTML 頁面。

          (6)此時<body>元素內(nèi)容開始被解析,瀏覽器開始渲染頁面。

          在這個過程中,我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程:把 JavaScript 放在<head>里,意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后,才能開始渲染頁面。

          到這里,我們就明白了:如果外部腳本加載時間很長(比如一直無法完成下載),就會造成網(wǎng)頁長時間失去響應(yīng),瀏覽器就會呈現(xiàn)“假死”狀態(tài),用戶體驗會變得很糟糕。

          因此,對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁,常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞,頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽,來控制 JavaScript 的加載順序。

          百度首頁

          三、DOM 解析

          對于百度這樣的搜索引擎來說,必須要在最短的時間內(nèi)提供到可用的服務(wù)給用戶,其中就包括搜索框的顯示及可交互,除此之外的內(nèi)容優(yōu)先級會相對較低。

          瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹,它們結(jié)合后才生成最終的渲染樹并渲染。因此,我們還常常將 CSS 放在<head>里,可用來避免瀏覽器渲染的重復(fù)計算。


          二、HTML 與 DOM 有什么不同

          我們知道<p>是 HTML 元素,但又常常將<p>這樣一個元素稱為 DOM 節(jié)點,那么 HTML 和 DOM 到底有什么不一樣呢?

          根據(jù) MDN 官方描述:文檔對象模型(DOM)是 HTML 和 XML 文檔的編程接口。

          也就是說,DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結(jié)構(gòu)并渲染,那么使用 DOM 則可以獲取網(wǎng)頁的結(jié)構(gòu)并進行操作。一般來說,我們使用 JavaScript 來操作 DOM 接口,從而實現(xiàn)頁面的動態(tài)變化,以及用戶的交互操作。

          在開發(fā)過程中,常常用對象的方式來描述某一類事物,用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣,它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關(guān)對象組成的結(jié)構(gòu)集合。


          三、DOM 解析

          我們常見的 HTML 元素,在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容:

          <html>
              <head>
                  <title>標題</title>
              </head>
              <body>
                  <a href='xx.com'>我的超鏈接</a>
                  <h1>頁面第一標題</h1>
              </body>
          </html>

          打開控制臺 Elements 面板,可以看到這樣的 HTML 結(jié)構(gòu),如下圖所示:

          在瀏覽器中,上面的 HTML 會被解析成這樣的 DOM 樹,如下圖所示:


          我們都知道,對于樹狀結(jié)構(gòu)來說,常常使用parent/child/sibling等方式來描述各個節(jié)點之間的關(guān)系,對于 DOM 樹也不例外。

          舉個例子,我們常常會對頁面功能進行抽象,并封裝成組件。但不管怎么進行整理,頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu),因此組件也是呈樹狀結(jié)構(gòu),組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來描述。同時,現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點展開,我們進行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結(jié)構(gòu)。


          四、事件委托

          我們知道,瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中,基于事件冒泡機制,我們可以實現(xiàn)將子元素的事件委托給父級元素來進行處理,這便是事件委托。

          如果我們在每個元素上都進行監(jiān)聽的話,則需要綁定三個事件;(假設(shè)頁面上有a,b,c三個兄弟節(jié)點)

          function clickEventFunction(e) {
            console.log(e.target===this); // logs `true`
            // 這里可以用 this 獲取當前元素
          }
          // 元素a,b,c綁定
          element2.addEventListener("click", clickEventFunction, false);
          element5.addEventListener("click", clickEventFunction, false);
          element8.addEventListener("click", clickEventFunction, false);

          使用事件委托,可以通過將事件添加到它們的父節(jié)點,而將事件委托給父節(jié)點來觸發(fā)處理函數(shù):

          function clickEventFunction(event) {
            console.log(e.target===this); // logs `false`
            // 獲取被點擊的元素
            const eventTarget=event.target;
            // 檢查源元素`event.target`是否符合預(yù)期
            // 此處控制廣告面板的展示內(nèi)容
          }
          // 元素1綁定
          element1.addEventListener("click", clickEventFunction, false);

          這樣能解決什么問題呢?

          • 綁定子元素會綁定很多次的事件,而綁定父元素只需要一次綁定。
          • 將事件委托給父節(jié)點,這樣我們對子元素的增加和刪除、移動等,都不需要重新進行事件綁定。

          常見的使用方式主要是上述這種列表結(jié)構(gòu),每個選項都可以進行編輯、刪除、添加標簽等功能,而把事件委托給父元素,不管我們新增、刪除、更新選項,都不需要手動去綁定和移除事件。

          如果在列表數(shù)量內(nèi)容較大的時候,對成千上萬節(jié)點進行事件監(jiān)聽,也是不小的性能消耗。使用事件委托的方式,我們可以大量減少瀏覽器對元素的監(jiān)聽,也是在前端性能優(yōu)化中比較簡單和基礎(chǔ)的一個做法。

          注意:

          1. 如果我們直接在document.body上進行事件委托,可能會帶來額外的問題;
          2. 由于瀏覽器在進行頁面渲染的時候會有合成的步驟,合成的過程會先將頁面分成不同的合成層,而用戶與瀏覽器進行交互的時候需要接收事件。此時,瀏覽器會將頁面上具有事件處理程序的區(qū)域進行標記,被標記的區(qū)域會與主線程進行通信。
          3. 如果我們document.body上被綁定了事件,這時候整個頁面都會被標記;
          4. 即使我們的頁面不關(guān)心某些部分的用戶交互,合成器線程也必須與主線程進行通信,并在每次事件發(fā)生時進行等待。這種情況,我們可以使用passive: true選項來解決


          五、總結(jié)

          我們了解了 HTML 的作用,以及它是如何影響瀏覽器中頁面的加載過程的,同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。


          主站蜘蛛池模板: 日韩电影在线观看第一区| av无码精品一区二区三区四区| 亚洲综合av一区二区三区不卡| 一区二区三区视频网站| 一区二区精品在线| 亚洲av综合av一区二区三区| 亚洲国产精品一区二区久久| 亲子乱av一区二区三区| 国产精品99无码一区二区| 精品国产一区二区三区AV| 97久久精品无码一区二区| 在线播放国产一区二区三区| 亚洲色欲一区二区三区在线观看| 精品国产一区二区三区2021| 无码人妻一区二区三区在线水卜樱 | 亚洲欧美日韩中文字幕一区二区三区 | 亚洲一区二区三区免费| 国产精品一区电影| 动漫精品第一区二区三区| 日本一区二区三区在线观看视频 | 美女福利视频一区二区| 国产一区二区三区手机在线观看| 日韩一区二区免费视频| 国产精品亚洲一区二区三区在线观看 | 无码aⅴ精品一区二区三区| 亚洲一区二区无码偷拍| 好爽毛片一区二区三区四无码三飞 | а天堂中文最新一区二区三区| 好吊视频一区二区三区| 一区二区乱子伦在线播放| 精品日产一区二区三区手机| 无码人妻精品一区二区三区久久| 午夜影视日本亚洲欧洲精品一区| 无码一区二区三区老色鬼| 国产精品久久一区二区三区| 亚洲av色香蕉一区二区三区蜜桃| 国产裸体舞一区二区三区| 日本一区视频在线播放| 国产精品无圣光一区二区| 无码aⅴ精品一区二区三区浪潮| 精品国产一区二区三区无码|