HTML學習13：其他常見標簽之體標簽 · Web前端HTML+CSS+JS初級入門

繼上篇博客說到頭標簽，我們這一次主要說HTML體部分中的標簽。 ### 一,<div>標簽 div標簽定義文檔中的一個分區，<div>元素是塊級元素，它是可用于組合其他 HTML 元素的容器。<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。 ~~~ <html> <head> <title>標簽演示</title> </head> <body> <div>這是div區域1</div> <hr/> <div> <div>這是div區域2</div> <p>這是一個段落</p> </body </html> ~~~ ![](https://box.kancloud.cn/2016-04-28_5721558bc9490.jpg) div區域比p表示的更大。div標簽內可以放置p標簽，反之不可以。 ### 二,span標簽表示文檔內的行內元素。<span> 元素是內聯元素，可用作文本的容器。<span> 元素也沒有特定的含義。當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。 ~~~ <html> <head> <title>標簽演示</title> </head> <body> <span>這是span區域1</span> <h1>這是一個<span style="color:#FF0000">標題</span></h1> </body </html> ~~~ ![](https://box.kancloud.cn/2016-04-28_5721558bd9683.jpg) ### 三,<button>標簽 ![](https://box.kancloud.cn/2016-04-28_5721558bea2c3.jpg) 示例： ~~~ <html> <head> <title>標簽演示</title> </head> <body> <form> 登錄名稱：<input type="text" name="user" /> <br/> 登錄密碼：<input type="password" name="password" /> <br/> <input type="reset" value="重置數據" /> <br/> <button type="reset" value="123">重置按鈕</button> <br/> <button type="button" value="234">一個按鈕</button> </form> <br/> <button type="button" value="234">一個按鈕</button> </body </html> ~~~ 運行代碼的結果是：前兩個重置按鈕都有重置數據的作用，后兩個按鈕沒有重置數據的作用。在表單標簽外邊的那個button標簽就算把它改成重置或提交的屬性值依然沒有作用。 ### 四< abbr>標簽指示簡稱或者縮寫，為瀏覽器，拼寫檢查和搜索引擎提供有用的信息。屬性：title ?標記縮寫的全拼。 ~~~ <html> <head> <title>標簽演示</title> </head> <body> <abbr title="Democratic People's Republic of Korea">DPRK</abbr>是位于東亞朝鮮半島北部的社會主義國家。 </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558c0ccd4.jpg) ### 五,<label>標簽為input標簽定義標注。為鼠標用戶改進了可用性，當點擊label的文本，會觸發相應的input控件。常用屬性：for。值是input標簽定義的一個id名，label綁定到哪個表單元素上。 ~~~ <html> <head> <title>標簽演示</title> </head> <body> <form> <label for="male">男性</label> <input type="radio" name="gender" id="male" /> <label for="female">女性</label> <input type="radio" name="gender" id="female" /> </form> </body> </html> ~~~ 運行結果是：點擊文本或單選框均可以選中。第二個作用就是多個復選框的文本，若是選擇多項的選項，那么就需要寫很多的屬性for，在這里我們可以把 input標簽放入到label標簽內，省去了繁瑣的代碼輸入。 ~~~ <html> <head> <title>標簽演示</title> </head> <body> <form> <form> <label>籃球<input type="checkbox" name="hobby" id="b" /></label> <label>足球<input type="checkbox" name="hobby" id="f" /></label> </form> </form> </body> </html> ~~~ 這樣運行的結果和上面沒有什么區別。六其他常見標簽 ? ? ? (1)< center>標簽：包括的文本進行水平居中。 ? ? ? (2)< strong>標簽：強調文本的一部分。 ? ? ? (3)< b>標簽：加粗文本內容的字體。 ? ? ? (4)< i>標簽：使用斜體作用在文本內容。 ? ? ? (5)< u>標簽：使文本內容顯示下劃線。 ? ? ? (6)< pre>標簽：顯示代碼的完整格式。 ? ? ? (7)< sub>標簽：作用字符的下標。 ? ? ? (8)< sup>標簽：作用字符的上標。 ? ? ? (9)< marpuee>標簽：讓文本內容動態的顯示，有各種各樣的滾動效果。 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>其他常用標簽演示</title> </head> <body> <marquee direction="left" behavior="scroll" style="color:#FF0000">這是一個有動態效果的標簽</marquee> <hr /> <b>這是</b><i>演示</i>其他常見的<u>標簽</u> <hr /> x<sub>2</sub> x<sup>2</sup> <hr /> <p>我在攻城課堂學習前端知識</p> <center>我在攻城課堂學習前端知識</center> <p>我在<strong>攻城課堂</strong>學習前端知識</p> <hr/> <pre> static void Main(string[] args) { ArrayList al = new ArrayList();//創建一個ArrayList類的對象al Random rm = new Random();//創建一個Random類的對象rm for (int i = 0; i < 10; i++) { int sjs = rm.Next(1,50);//調用Random類的隨機選取非負數方法 al.Add(sjs);//調用ArrayList類的元素末尾添加方法 } al.Sort();//數組元素的升序排序 foreach (int temp in al) { Console.WriteLine(temp); } Console.ReadLine(); } </pre> </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558c21b97.jpg) 最后我們來說說標簽的分類：標簽分為兩大類： 1,塊級標簽(元素)：一個完整的區塊，區域。標簽結束后都有換行。常用標簽有：div p dl table ol ul title等。 2,行內標簽(元素)：用于塊級元素內，不能表示一個完整的區塊，一個區塊或者只是一行內的某一部分。標簽結束后沒有換行。常用標簽有：font span img input select a等。 ? ? ??