正文

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

發(fā)布時間：2023-04-13 18:31:47 稿源：創(chuàng)意嶺閱讀： 149

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于寫出html5文檔的基本結(jié)構(gòu)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、HTML5的頁面結(jié)構(gòu)和HTML4有什么不同
2、HTML5是什么東西？
3、html5基本知識點
4、html5是什么？

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

一、HTML5的頁面結(jié)構(gòu)和HTML4有什么不同

如果單單說頁面結(jié)構(gòu)，不介紹新的特性、功能的話，人見解，最大的變化恐怕是語意化了，html5增加了了很多語意化標(biāo)簽，比如header、footer、nav等等。這些標(biāo)簽有利于讓瀏覽器或者蜘蛛（搜索引擎）更好理解你的頁面想表達的內(nèi)容。比傳統(tǒng)html4使用表格或者div布局更加有利于SEO或者無障礙閱讀。

其次，頁面頭部的文檔類型聲明也比html4更加簡潔，文檔類型的作用，主要是告訴瀏覽器此文檔是什么種類，該如何解析。html4有很多種頭部文檔聲明，比較亂，新手可能很難一下子理解（說實話我也不太理解），而html5則精簡到了一種：<!DOCTYPE HTML>這樣就使代碼出錯，和兼容問題得到了妥善解決。

個人覺得主要是這些改動吧，望采納。

二、HTML5是什么東西？

HTML：指的是超文本標(biāo)記語言 (Hyper Text Markup Language)，這個也是我們網(wǎng)頁最常用普通的語言了，經(jīng)歷了多個版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級到了XHTML，XHTML 指可擴展超文本標(biāo)簽語言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個 W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。另外，W3C 與 WHATWG 合作創(chuàng)建一個新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入更多驚喜，盡管 HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來的生機和活力已是那樣的激奮人心，特別是前端的工作中，那些針對瀏覽器兼容的問題將能得到很好的解決，更多的效果和應(yīng)用也能更方便的實現(xiàn)。前端工程師，也必然要與時俱進，緊跟業(yè)界時代發(fā)展的前沿，不然永遠只停留在舊的技術(shù)上，只會被無情的淘汰。

第一階段——HTML的學(xué)習(xí)?！?/p>

超文本標(biāo)記語言（HyperText Mark-up Language 簡稱HTML）是一個網(wǎng)頁的骨架，無論是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性。

HTML的學(xué)習(xí)是一個記憶和理解的過程，在學(xué)習(xí)過程中可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計”視圖中看效果，在“代碼”視圖中學(xué)本質(zhì)，將各種視圖的優(yōu)勢發(fā)揮到極致，這種對照學(xué)習(xí)的方法彌補了單純識記HTML標(biāo)簽和屬性的枯燥乏味，想必對各位初學(xué)的小盆友們來說必定是極好的！

在學(xué)習(xí)了HTML之后，我們只是掌握了各種“原材料”的制作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們設(shè)計的方案組合布局在一起并進行一些樣式的美化。

于是進入第二個階段——CSS的學(xué)習(xí)。

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

培訓(xùn)是針對那些有條件的人來說，很多小伙伴更喜歡的是自學(xué)。但是一個人自學(xué)畢竟力量是有限的，為了讓想學(xué)習(xí)的人可以更好的學(xué)習(xí)，給大家推薦一個裙，前面是6 1 1，中間是肆二 8，最后面就是壹四二，這里有很多想學(xué)習(xí)的人和你一起交流，也有大牛每天晚上免費教學(xué)，想要學(xué)習(xí)的人都可以加入我們，但是我們只歡迎想學(xué)習(xí)的人，不是來學(xué)習(xí)，隨便看看的就不要進了。

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的，這樣就極大地提高了我們開發(fā)的速度，降低了維護的成本。

同時CSS中的盒子模型、相對布局、絕對布局等能夠?qū)崿F(xiàn)對網(wǎng)頁中各對象的位置排版進行像素級的精確控制。通過此階段的學(xué)習(xí)，我們就可以順利完成“一幢樓房”的建設(shè)。

“樓房”建設(shè)完成之后，我們可以交給用戶使用，但是如果想讓用戶獲得更佳的體驗，我們還可以對“樓房”進行更深一步的“裝修”，讓它看起來更“豪華”一些。

為了完成這個任務(wù)，我們進入第三個階段——JavaScript的學(xué)習(xí)。

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對象和DOM操作，借助這些內(nèi)容我們可以來實現(xiàn)一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那么呆板，屌絲瞬間逆襲高富帥！有么有？

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經(jīng)理卻突然對你大吼道:

“這個效果在××瀏覽器下不兼容，重新搞……”

“不兼容？”瞬間石化了有木有？

“我擦，坑爹??！那可是花了我一個晚上寫了幾百行代碼搞定的啊，吐血了都!”

JavaScript的兼容性和復(fù)雜性有時候的確讓我們頭疼，還好有“大神”幫我們做了封裝。

接下來我們進入第四個階段——jQUery的學(xué)習(xí)。

jQuery是一個免費、開源的輕量級的JavaScript庫，并且兼容各種瀏覽器（jQuery2.0及后續(xù)版本放棄了對IE6/7/8瀏覽器的支持），同時現(xiàn)在有很多基于jQuery的插件可供選擇，這樣在我們實現(xiàn)一些豐富的動態(tài)效果時更方便快捷，大大節(jié)省了我們開發(fā)的時間，提高了開發(fā)速度，這也充分體現(xiàn)了其write less,do more的核心宗旨。這個Feel倍兒爽！有么有？

“豪華大樓”至此拔地而起，但是每天這樣日復(fù)一日，年復(fù)一年的蓋樓，好繁瑣！能不能將大樓里面每一個單獨部件模塊化，當(dāng)需要蓋樓時就像堆積木一樣組合在一起，這樣豈不是爽歪歪？可以實現(xiàn)嗎？答案是肯定的。

這種思想在Web前端開發(fā)中也是適合的，于是乎就出現(xiàn)了各種前端框架，在這里推薦給大家的是Bootstrap。 Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包，是一個CSS/HTML框架，并且支持響應(yīng)式布局。一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發(fā)過程中，我們可以借助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設(shè)置，然后再有針對性的微調(diào)樣式，這樣基于框架進行開發(fā)大大縮短了開發(fā)周期。站在巨人的肩膀上就是爽！

Web前端的學(xué)習(xí)建議

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

最后給大家聊聊在學(xué)習(xí)Web前端中的一些建議和方法。

在CSS布局時需要注意的一個問題是很多同學(xué)缺乏對頁面布局進行整體分析，不能夠從宏觀上對頁面中盒子間的嵌套關(guān)系進行把握，就急于動手去做，導(dǎo)致頁面中各元素間的關(guān)系很混亂，容易出現(xiàn)盒子在浮動時錯位等情況。建議大家在布局時采用“自頂向下，逐步細(xì)化”的思想，先用幾個盒子將頁面從整體上劃分，然后逐步在盒子中繼續(xù)嵌套盒子。

“君子生非異也，善假于物也”，在學(xué)習(xí)的過程中還要多瀏覽一些優(yōu)秀的網(wǎng)站，善于分析借鑒其設(shè)計思路和布局方法，見多方能識廣，進而才可以融會貫通，取他人之長為我所用。

同時還要善于使用Firebug這個利器。Firebug一方面可以在我們學(xué)習(xí)過程中幫助我們調(diào)試自己的頁面，另一方面我們可以使用Firebug方便地查看、分析別人網(wǎng)站的源代碼，“偷”也是一種技能！

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

隨著移動互聯(lián)網(wǎng)熱潮的到來，移動開發(fā)越來越受到大家的追捧，響應(yīng)式布局、微網(wǎng)站等需求量不斷增加，也是我們Web前端未來的發(fā)展方向之一，學(xué)有余力的同學(xué)可以多多關(guān)注。最后祝愿大家能在Web前端開發(fā)道路上走出一片更寬更廣的天地！

三、html5基本知識點

一、HTML的開發(fā)工具和使用的瀏覽器

開發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。

瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。

二、HTML的基本要素

DOCTYPE 描述文檔的類型

html 網(wǎng)頁的根元素，寫在網(wǎng)頁的在外面

head 網(wǎng)頁的頭部信息，寫在html標(biāo)記的里面

body 網(wǎng)頁的內(nèi)容，寫在html標(biāo)記的里面

具體描述：

1、DOCTYPE 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令。

網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同

使用例子

HTML4的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5的例子

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

2、<html></html> 網(wǎng)頁文檔中的根標(biāo)記

html 標(biāo)簽有三個特殊的屬性

manifest 指定網(wǎng)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
xmlns 設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。
lang 設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。

3、<head></head>頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。

head里面的標(biāo)記

<meta> 標(biāo)記
<title>定義網(wǎng)頁的標(biāo)題
<link> 鏈接
<script> 標(biāo)記JavaScript腳本的內(nèi)容
<style> 標(biāo)記css樣式
meta 標(biāo)記

4、<body></body>只能有一個，顯示網(wǎng)頁的主體內(nèi)容。

代碼示例：

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

請點擊輸入圖片描述

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網(wǎng)頁標(biāo)題(顯示在瀏覽器上)</title> 6 <meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述"> 7 <meta name="keywords" content="網(wǎng)頁關(guān)鍵詞"> 8 <link rel="/css/style.css"> 9 <script src="/js/script.js"></script>10 </head>11 <body>12 <header>網(wǎng)頁頭部內(nèi)容</header>13 <main>網(wǎng)頁主要內(nèi)容</main>14 <nav>網(wǎng)頁的導(dǎo)航內(nèi)容</nav>15 <footer>網(wǎng)頁的頁腳內(nèi)容</footer>16 </body>17 </html>

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

請點擊輸入圖片描述

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

請點擊輸入圖片描述

三、寫在<head>中的標(biāo)簽

（一）、<meta>標(biāo)簽

name 描述信息的名稱，來標(biāo)記這是一個什么樣的信息
http-equiv 描述行為
content 描述的內(nèi)容
charset 指定網(wǎng)頁的編碼

1、name 屬性

1 <meta name="author" content="nyw">2 3 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">4 5 <meta name="keywords" content="HTML,meta">6

2、http-equiv屬性

1 <meta http-equiv="refresh" content="30">2 3 <meta http-equiv="refresh" content="5,url=dom.html">4

http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。

3、content 屬性

特殊屬性

content-type 指定http頭部信息的文字編碼（最為常用）
default-style 指定優(yōu)先使用的樣式單（stylesheet）
refresh 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)
set-cookie 設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。

代碼實例：

為搜索引擎抓取機器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。

<meta name="robots" content="noindex,nofollow">

代碼實例：

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

請點擊輸入圖片描述

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網(wǎng)頁標(biāo)題(顯示在瀏覽器上)</title> 6 <meta name="author" content="nyw"> 7  8 <meta name="description" content="meta標(biāo)記學(xué)習(xí)"> 9 10 <meta name="keywords" content="HTML,meta">11 12 <meta http-equiv="refresh" content="30">13 14 <meta http-equiv="refresh" content="5,url=dom.html">15 16 <meta name="robots" content="noindex,nofollow">17 18 </head>19 <body>20 </body>21 </html>

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）

請點擊輸入圖片描述

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫在head標(biāo)簽中

title：設(shè)置網(wǎng)頁的標(biāo)題

寫法：<title>內(nèi)容</title>。

base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫法：<base href="http://www.aaa.zzz/">

base屬性值：

href 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

<base href="http://baidu.com/"> 這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。

target 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。

<base target="_blank"> 網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。

terget屬性值：

_blank 在新窗口中打開被鏈接的文檔
_self 默認(rèn)值，在相同框架中打開被鏈接的文檔
_parent 在父框架集中
_top 在整個窗口中打開被鏈接文檔·
framename 在指定框架中打開被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>

rel：引用文件，引用資源的類型定義

我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。

alternate 代替文檔（種子，其他語言版本，其他格式等等）

author 網(wǎng)頁的作者

help 幫助文件的鏈接

icon 網(wǎng)頁的圖標(biāo)

next 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁

prefetch 把鏈接外部資源時提前緩存起來。

prev 如果是連續(xù)網(wǎng)頁

media 鏈接文件或是資源屬于哪一種資源。

hreflang 鏈接文件的語言種類

type 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）

sizes 根據(jù)link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網(wǎng)頁圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 2 <link rel="icon">3 4 <link rel="icon" href="img/favicon.png" type="image/png">5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上

鏈接外部樣式單

1 <link rel="stylesheet">2 <link rel="stylesheet" href="style1.css" media="screen">3 <link rel="stylesheet" href="style2.css" title="主題樣式文件">4 <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">

說明：

alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進行選擇

media 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀

title 對這個link進行簡單的說明

網(wǎng)站RSS種子指定

<link rel="alternate" type="application/rss+xml">

為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL

<link rel="canonical">

<link rel="canonical" href="http://www.aaa.zzz/help.html">

四、html5是什么？

HTML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達到匹配當(dāng)代的網(wǎng)絡(luò)需求。

廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)。

寫出html5文檔的基本結(jié)構(gòu)（寫出html5文檔的基本結(jié)構(gòu)包括）