整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML文檔結構
HTML文檔，也被稱為網頁，包括頭部和主體兩大部分。頭部主要描述瀏覽器和搜索引擎所需要的信息，瀏覽器不會將這些信息呈現給訪問者；主體是文檔的正文，是網頁中真正要傳達的信息，這些信息將在瀏覽器窗口的正文部分呈現給訪問者。
HTML文檔總是以 <html> 標簽開始，以 </html> 標簽結束，在 <head>...</head> 標簽之間的內容是頭部信息，<body>...</body> 標簽之間的內容是主體部分，即文檔的正文。此外，還要在文檔的最開頭，通過 <!DOCTYPE> 聲明這是一個HTML文檔。如圖 1?16 所示：
html文檔結構圖1-16 html文檔結構
上圖告訴我們，一個HTML文檔由4個基本部分組成：
① 一個文檔聲明：<!DOCTYPE html>
② 一個html標簽對：<html></html>
③ 一個head標簽對：<head></head>
④ 一個body標簽對：<body></body>
<!DOCTYPE>
<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于 <html> 標簽之前。該聲明不是HTML標簽，它是告訴瀏覽器該HTML文檔的DTD類型（Document Type Definition，文檔類型定義）。
在HTML5之前，有多種DTD類型，分別為Transitional類型、Strict類型、Frameset類型，而不同類型對文檔標簽嚴格程度的要求不同，并且<!DOCTYPE>的寫法非常復雜，估計也沒有人能夠完全記住這些寫法，這給開發帶來了混亂。
到HTML5之后，一切化繁為簡，只需聲明<!DOCTYPE html>即可，它就告訴瀏覽器，該文檔是一個HTML5文檔。
使用DIV+CSS布局時，我們需要通過為div命名的方式，來區分網頁中不同的模塊。在HTML5中布局方式有了新的變化，HTML5中增加了新的結構標簽，如header標簽、nav標簽、article標簽等，具體介紹如下。
1. header標簽
HTML5中的header標簽是一種具有引導和導航作用的結構標簽，該標簽可以包含所有通常放在頁面頭部的內容。header標簽通常用來放置整個頁面或頁面內的一個內容區塊的標題，也可以包含網站Logo圖片、搜索表單或者其他相關內容。其基本語法格式如下：
<header>
<h1>網頁主題</h1>
...
</header>在上面的語法格式中，<header></header>的使用方法和<div class="header"></div>類似。
注意：
在HTML網頁中，并不限制header標簽的個數，一個網頁中可以使用多個header標簽，也可以為每一個內容塊添加header標簽。
2. nav標簽
nav標簽用于定義導航鏈接，是HTML5新增的標簽，該標簽可以將具有導航性質的鏈接歸納在一個區域中，使頁面元素的語義更加明確。nav標簽的使用方法和普通標簽類似，例如下面這段示例代碼：
<nav>
<ul>
<li><a href="#">首頁</li>
<li><a href="#">公司概況</li>
<li><a href="#">產品展示</li>
<li><a href="#">聯系我們</li>
</ul></nav>在上面這段代碼中，通過在nav標簽內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個nav標簽，作為頁面整體或不同部分的導航。具體來說，nav標簽可以用于以下幾種場合。
● 傳統導航條：目前主流網站上都有不同層級的導航條，其作用是跳轉到網站的其他主頁面。
● 側邊欄導航：目前主流博客網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。
● 頁內導航：它的作用是在本頁面幾個主要的組成部分之間進行跳轉。
● 翻頁操作：翻頁操作切換的是網頁的內容部分，可以通過點擊“上一頁”或“下一頁”切換，也可以通過點擊實際的頁數跳轉到某一頁。
除了以上幾點以外，nav標簽也可以用于其他導航鏈接組中。需要注意的是，并不是所有的鏈接組都要被放進nav標簽，只需要將主要的和基本的鏈接放進nav標簽即可。
3. footer標簽
footer標簽用于定義一個頁面或者區域的底部，它可以包含所有放在頁面底部的內容。在HTML5出現之前，一般使用<div class="footer"></div>標簽來定義頁面底部，而現在通過HTML5的footer標簽可以輕松實現。與header標簽相同，一個頁面中可以包含多個footer標簽。
4. article標簽
article標簽代表文檔、頁面或者應用程序中與上下文不相關的獨立部分，該元素經常被用于定義一篇日志、一條新聞或用戶評論等。一個article標簽通常有它自己的標題（可以放在header標簽中）和腳注（可以放在footer標簽中），例如下面的示例代碼。
<article>
<header>
<h1>秋天的味道</h1>
<p>你想不想知道秋天的味道？它是甜、是苦、是澀...</p>
</header>
<footer>
<p>著作權歸XXXXXX公司所有...</p>
</footer></article>需要注意的，在上面的示例代碼中還缺少主體內容。主體內容通常會寫在header和footer之間，通過多個section標簽進行劃分。一個頁面中可以出現多個article標簽，并且article標簽可以嵌套使用。
5. section標簽
section標簽表示一段專題性的內容，一般會帶有標題，主要應用在文章的章節中。例如，新聞的詳情頁有一篇文章，該文章有自己的標題和內容，因此可以使用article標簽標注，如果該新聞內容太長，分好多段落，每段都有自己的小標題，這時候就可以使用section標簽把段落標注起來。在使用section標簽時，需要注意以下幾點：
● section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用div標簽。
如果article標簽、aside標簽或nav標簽更符合使用條件，那么不要使用section標簽。
● 沒有標題的內容模塊不要使用section標簽定義。
值得一提的是，在HTML5中，article標簽可以看作是一種特殊的section標簽，它比section標簽更具有獨立性，即section標簽強調分段或分塊，而article標簽強調獨立性。如果一塊內容相對來說比較獨立、完整時，應該使用article標簽；但是如果想要將一塊內容分成多段時，應該使用section標簽。
6. aside標簽
aside標簽用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等有別于主要內容的部分。aside標簽的用法主要分為兩種：
● 被包含在article標簽內作為主要內容的附屬信息。
● 在article標簽之外使用，作為頁面或網站的附屬信息部分。最常用的的使用形式是側邊欄。
頁是什么，大家打開的任何一個頁面都是網頁，那么網頁是怎么做的呢？那我們在學習html之后，我們能不能做出想這么漂亮的網頁呢？
我們大數據學的偏向后端的學習，而html是比較前端的知識。不怕，我們通過10天的學習，完全可以做出比學習h5的同學更好的頁面，一點問題都沒有。關注一下，帶你上車。
HTML就是描述網頁的一種語言，它具體指的就是超文本標記語言，在這里我們需要注意的一點是，html不是編程語言，而是一種標記語言，這是我們需要明確的。標記語言又是一套標記標簽。
那么，準確的說，HTML就是使用標記標簽來描述網頁的一種標記類型的語言。一個完整的HTML文檔中包含了HTML標簽和文本的內容，這也就我們說的web頁面。
創建一個頁面，我們只需要新建一個.txt文件，我們將后綴名改成.html或者htm就可以了。
我們想要使用超文本標記語言，那就得服從人家的標準。
我們看到頂部的頭DOCTYPE，DOC就是document的縮寫，第一句話我們聲明的文檔類型為html。
下面是一個html網頁的簡單結構，我們在<head>中可以放一些<style>樣式，<scrip>t腳本以及<meta>元數據等標簽去豐富我們的頁面，在<body>體內我們存放著可視化的內容。
這就是我們html的一個簡單的網頁結構，通過這個可以讓你對html語言更加的清晰。
在上面的<html></html>或者<p></p>等成對出現的代碼，就是我們的標簽，有開始有結束。
只要是標簽，我們都是以間括號修飾（大部分），而結束標簽多了一個反斜線"/"。
HTML元素與HTML標簽區別：
這兩個名詞通常都是描述同樣的意思，嚴格意義上，HTML元素包含了開始的標簽和結束的標簽，有兩部分組成。
下面標簽我們不強調的都是雙標簽。
標題<h1...h6>
htm中的標題是通過<h1...h6>標簽來定義的，數字越大，字體越小。最小只有到6，再小也沒有什么意義了。
h標簽我們一般用在文章的標題。
段落<p>
段落標簽我們一般會使用在 新聞類的文章中使用居多。使用此標簽我們可以將文章分段輸出。
鏈接<a>
html中使用呢<a>標簽來鏈接目標的地址，而我們在href寫入我們的連接。
在a標簽中還有一個重要的屬性叫做target，它定義了我們以什么樣的形式去打開我們網頁。默認是會在當前頁面打開鏈接，而我們給它一個值“_blank”，我們再去點擊的時候就會發現，瀏覽器打開了一新頁面。
圖片<img>
html中我們用img來顯示一張圖片。img中有一重要的屬性，src，我們給src一個圖片的地址路徑。<img></img>是一個成對的標簽，但是我們一般不會再標簽中間再去寫文字，所以我一般這么使用圖片標簽<img src=“ ” />，將后面的img省略掉。所以img元素是自閉元素，不需要結束標記。
height：定義圖片的高 ， width：定義圖片的寬
文本格式化標簽
水平線和折行標簽
在html中我們使用<hr/>，給我們的web頁面中加一條水平線。我們使用<br/>來折行，也就是換行標簽。
我們可以看到折行標簽的行間距比起段落標簽來更小。
表格（重要）
表格在HTML中是有<table>標簽來定義的，每個表格都是由<tr>標簽定義的行和每行被<td>標簽分割的單元格組成的。
這里我們使用rowspan合并單元格
我們使用colspon來合并列。
列表
表單
完成之后，我們的網頁效果圖如下：
Head頭部
上面就是對javaweb中html框架的簡單介紹，在沒有css樣式情況下，我們的頁面還僅僅只是比較簡單的。后續我們將繼續進行講解，10篇文章我們就可以超h5的學生。一起加油~愛學習的人都會關注呦~
感謝堅持關注的朋友~
世界很大，幸好有你~
歡迎在評論區留下你的問題或困惑，我將每天與你分享我的觀點和心得。
聚焦最新科技咨訊，探尋未來智能領域，我是Mario女陶。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
