前端開發-2-HTML-body標籤
阿新 • • 發佈：2018-11-10
body標籤 h、p、a、ul、ol、div、img、
想要在網頁上展示出來的內容一定要放在body標籤中。 把我們之前海燕那一段HTML程式碼貼過來，儲存到一個HTML格式的檔案中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飛學城</title>
</head>
<body>
<h1>海燕</h1>
<p>在蒼茫的大海上，</p>
<p>狂風捲集著烏雲。</p>
<p>在烏雲和大海之間，</p>
<p>海燕像黑色的閃電，</p>
<p>在高傲地飛翔。</p>
</body>
</html>瀏覽器顯示如下：
常用標題標籤 h1~h6
<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。
由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標籤層級來構建文件的結構。
因此，請不要利用標題標籤來改變同一行中的字型大小。相反，我們應當使用css來定義來達到漂亮的顯示效果。
標題標籤通常用來製作文章或網站的標題。
h1~h6標籤的預設樣式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="
文字樣式標籤主要用來對HTML頁面中的文字進行修飾，比如加粗、斜體、線條樣式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜體 3. `<u></u>`：下劃線 4. `<s></s>`：刪除線 5. `<sup></sup>`：上標 6. `<sub></sub>`：下標
強呼叫法：
現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標籤。 這兩個標籤都是表示強調，但是兩者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。 在瀏覽器中`<em>`預設會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，我們通常會推薦大家使用`<strong>`表示強調
瀏覽器展示特點：
- 跟普通文字一樣，但我們可以通過css來設定當前段落的樣式
- 是否又獨佔一行呢？ 答案是的 塊級元素
超連結標籤 a，在一行顯示，屬於行內標籤
超級連結<a>標記代表一個連結點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影象 <body> <h1> <!-- a連結 超連結 target:_blank 在新的網站開啟連結的資源地址 _self 在當前網站開啟連結的資源地址 title: 滑鼠懸停時顯示的標題 --> <a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a> <a href="a.zip">下載包</a> <a href="mailto:[email protected]">聯絡我們</a> <!-- 返回頁面頂部的內容 --> <a href="#">跳轉到頂部</a> <!-- 返回某個id --> <a href="#p1">跳轉到p1</a> <!-- javascript:是表示在觸發<a>預設動作時，執行一段JavaScript程式碼，而 javascript:; 表示什麼都不執行，這樣點選<a>時就沒有任何反應。 --> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </h1> </body>
-------------------------------------
target:_blank 在新的網站開啟連結的資源地址 target：_self 在當前網站開啟連結的資源地址 title: 表示滑鼠懸停時顯示的標題 連結其他表現形式： 目標文件為下載資源 例如：href屬性值，指定的檔名稱，就是下載操作(rar、zip等) 電子郵件連結 前提：計算機中必須安裝郵件客戶端，並且配置好了郵件相關資訊。 例如：<a href="mailto:[email protected]">聯絡我們</a> 返回頁面頂部的空連結或具體id值的標籤 例如：<a href="#">內容</a>或<a href="#id值">內容</a> javascript:是表示在觸發<a>預設動作時，執行一段JavaScript程式碼。 例如：<a href="javascript:alert()">內容</a> javascript:;表示什麼都不執行，這樣點選<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</a
列表標籤 ul，ol
網站頁面上一些列表相關的內容比如說物品列表、人名列表等等都可以使用列表標籤來展示。通常後面跟<li>標籤一起用，每條li表示列表的內容
<ul>:unordered lists的縮寫 無序列表 <ol>:ordered listsde的縮寫 有序列表
----------------------------------------
<!-- 無序列表 type可以定義無序列表的樣式-->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定義有序列表的樣式 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ol標籤的屬性： type：列表標識的型別 1：數字 a：小寫字母 A：大寫字母 i：小寫羅馬字元 I：大寫羅馬字元 列表標識的起始編號 預設為1 ul標籤的屬性： type：列表標識的型別 disc：實心圓(預設值) circle：空心圓 square：實心矩形 none：不顯示標識
盒子標籤 div
<div>可定義文件的分割槽 division的縮寫 譯：區 <div> 標籤可以把文件分割為獨立的、不同的部分,請看下面程式碼我們將他們進行分割槽
分割槽，類似於android介面開發
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8" > <title>常用標籤一</title> </head> <body> <div id="wrap"> <div class="para"> <p style="height: 1000px" id="p1">段落</p> </div> <div class="anchor"> 我是普通的文字 <h1> <a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a> <a href="a.zip">下載包</a> <a href="mailto:[email protected]">聯絡我們</a> <a href="#">跳轉到頂部</a> <a href="#p1">跳轉到p1</a> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </h1> </div> <!-- <h2>路飛學城</h2> <h3>路飛學城</h3> <h4>路飛學城</h4> <h5>路飛學城</h4> <h6>路飛學城</h6> --> <div class="para"> <!-- 定義段落 通常指文章一段內容 --> <p>路飛學城立志幫助有志向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智慧等網際網路最前沿技術,開啟職業生涯新可能</p> <p>路飛學城立志幫助有志向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智慧等網際網路最前沿技術,開啟職業生涯新可能</p> <p>路飛學城立志幫助有志向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智慧等網際網路最前沿技術,開啟職業生涯新可能</p> </div> <div class="lists"> <!-- 無序列表 --> <ul type="circle"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 --> <ol type="a"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ol> </div> </div> </body> </html>View Code
分析上面程式碼可以下面的層次結構
<div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div>
我們將文件放在一個父級的區（div）中，它裡面包含四塊區（div）域，瀏覽器檢視效果,你會發現每小塊區域都是獨佔一行的，所以div是塊級元素。
另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你可以看成給這個區域起個名字。id是唯一的，一個頁面中不能有兩個重複的id，
跟身份證號碼一樣，class可以設定同樣的屬性值，並且可以設定多個，例如class=’para n1‘
圖片標籤 <img/>
一個網頁除了有文字，還會有圖片。我們使用<img/>標籤在網頁中插入圖片。 語法：<img src="圖片地址" alt="圖片載入失敗時顯示的內容" title = "提示資訊" /> 注意：
- src設定的圖片地址可以是本地的地址也可以是一個網路地址。
- 圖片的格式可以是png、jpg和gif。
- alt屬性的值會在圖片載入失敗時顯示在網頁上。
- 還可以為圖片設定寬度(width)和高度(height)，不設定就顯示圖片預設的寬度和高度
<div> <span>與行內元素展示的標籤<span> <span>與行內元素展示的標籤<span> <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> <img src="./finance-right.png" alt="人工智慧實戰" style="width: 200px;height: 200px"> </div>
總結：
1.塊級元素 特點：獨佔一行，可設寬高，如果不設寬度，則是瀏覽器的寬度 (div p h ul ol li )
2.行內元素 特點：在一行內展示，不能設定寬高，它的寬高時根據內容去填充 (a span )
3.行內塊元素 特點：在一行內展示，可設寬高 （img）
---------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飛學城</title>
</head>
<body>
<p>幫助有志向的年輕人
通過努力學習獲得
體面的 工作 和 生活！</p>
</body>
</html>
-----------------------------------------------------------------------------------------
總結：
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>常用的標籤一</title> </head> <body> 獲得體面的 工作和 生 活 獲得體面的 工作和生活 <div class="p1"> <p style="height: 2000px;" id="p1">頂部</p> </div> <div class="heading" style="height: 700px"> <!--body相關標籤--> <!--heading:標題h1-h6 沒有h7 不要隨意的通過 h 標籤改變文字的大小 h 標籤換行了 --> 囊括行業<h2>最前沿</h2>的技術，為你提供最全面、最優質、最精彩的精品專題課程 <!--塊級元素：獨佔一行 可以設定寬高--> <h1>路飛學城</h1><h2>路飛學城</h2> <h3>路飛學城</h3> <h4 style="height: 100px;width: 100px">路飛學城</h4> <h5>路飛學城</h5> <h6>路飛學城</h6> <!--<h7>路飛學城</h7>--> </div> <div class="p1"> <!--段落標籤 塊級元素 獨佔一行--> <p><strong>路飛學城</strong>立志幫助有<b>志向</b>的<i>年輕人</i>通過<u>努力學習</u>獲得<s>體面</s>的<sup>工作</sup>和<sub>生活</sub>!路飛學員通過學習Python ,金融分析,人工智慧等網際網路最前沿技術,開啟職業生涯新可能</p> <p><em>路飛學城</em>立志幫助<br>有志向<br>的年輕人<hr>通過努力學習<hr>獲得體面的工作和生活!<hr><span>路飛學員</span>通過學習Python ,金融分析,人工智慧等網際網路最前沿技術,開啟職業生涯新可能</p> <p id="p2">我們</p> </div> <div class="anchor" > <!-- a 標籤屬於行內標籤：在一行內展示 --> <!-- _self:預設值：在當前網站啊開啟資源 _blank:在新的網站開啟資源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy" >路飛學城</a> <a href="a.zip">下載壓縮包</a> <!-- a 標籤一行顯示 設定高度 寬度 不起作用 --> <a href="mailto:[email protected]" style="width: 1000px;height: 300px">聯絡我們</a> <!--返回頁面頂部內容--> <a href="#">跳轉到頂部</a> <a href="#p1">跳轉到頂部的段落標籤</a> <a href="#p2">跳轉到我們標籤</a> <!-- javascript: 是表示在觸發<a>預設動作時，執行一段JavaScript程式碼 javascript:; 表示什麼都不執行，這樣點選<a>時就沒有任何反應。把a的預設動作取消了 --> <a href="javascript:alert(1)">內容</a> <a href="javascript:">內容吧</a> <!--1. `<b></b>`：加粗--> <!--2. `<i></i>`：斜體--> <!--3. `<u></u>`：下劃線--> <!--4. `<s></s>`：刪除線--> <!--5. `<sup></sup>`：上標--> <!--6. `<sub></sub>`：下標--> <!----> <!--現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標籤。--> </div> <div class="lists"> <!-- ul ol li 塊級元素--> <!--無序列表 預設時實心圓disc--> <ul type="square" style="height: 200px;width: 200px"> <li>我的賬戶 ></li> <li>我的訂單 ></li> <li>我的優惠券 ></li> <li>我的收藏 ></li> <li>退出 <</li> </ul> <!--有序列表 預設是數字--> <ol style="list-style: none"> <li style="height: 200px;width: 200px">我的賬戶 ></li> <li>我的訂單 ></li> <li>我的優惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ol> <!-- ol標籤的屬性： type：列表標識的型別 1：數字 a：小寫字母 A：大寫字母 i：小寫羅馬字元 I：大寫羅馬字元 列表標識的起始編號 預設為1 ul標籤的屬性： type：列表標識的型別 disc：實心圓(預設值) circle：空心圓 square：實心矩形 none：不顯示標識 --> </div> <div class="image"> <!--img 行內塊標籤 1.在一行內顯示 2.可設寬高--> <img src="homesmall1.png" alt="python的圖片" style="width: 200px; height: 200px; " /> <img src="homesmall2.png" alt="linux的圖片" style="width: 200px; height: 200px" /> </div> <div class="image"> <ul type="none"> <li> <a href="javascript:"><img src="homesmall1.png" alt="python的圖片" /></a> </li> <li> <img src="homesmall2.png" alt="linux的圖片" style="cursor: pointer" /> </li> </ul> </div> <!-- 總結： 1.塊級元素 特點：獨佔一行，可設寬高，如果不設寬度，則是瀏覽器的寬度 (div p h ul ol li ) 2.行內元素 特點：在一行內展示，不能設定寬高，它的寬高時根據內容去填充 (a span ) 3.行內塊元素 特點：在一行內展示，可設寬高 （img） --> <!-- 小練習： 展示兩張圖片獨佔一行，滑鼠移上去顯示小手的狀態！ --> <!-- 其他標籤： <br> 換行 <hr> 分割線 特殊符號： 瀏覽器顯示時 會移除原始碼中多餘的空格和空行；所有連續的空格或空行都會被算作一個空格； 注意：html程式碼中所有連續的空行（換行）空格 都會被顯示為 一個空格 空格： 特殊符號對照表： http://tool.chinaz.com/Tools/HtmlChar.aspx eg: < < > > --> </body> </html>