6-[html]-標簽屬性
阿新 • • 發佈：2018-06-01
如果 鏈接 設置 color IV line wrapper 註意 自定義屬性
1.HTML標簽屬性
HTML標簽可以設置屬性，屬性一般以鍵值對的方式寫在開始標簽中。如
<div id="i1">這是一個div標簽</div> <p class=‘p1 p2 p3‘>這是一個段落標簽</p> <a href="http://www.luffycity.com">這是一個鏈接</a> <input type=‘button‘ onclick=‘addclick()‘></input>
為什麽能設置屬性呢？
其實呢，你可以這樣簡單理解，因為最終我們這些標簽會通過css去美化，通過javascript來操作，那麽這些標簽我們可以看成是一個對象，對象就應該有它自己的屬性和方法。那麽你像上面說到input標簽，type=‘button’就是它的屬性，onclick=‘addclick()’就是它的方法。後面會詳細講JavaScript和css，大家不用擔心這裏不好理解。
關於標簽屬性的註意事項：
1.HTML標簽除一些特定屬性外可以設置自定義屬性，一個標簽可以設置多個屬性用空格分隔，多個屬性不區分先後順序。 2.屬性值要用引號包裹起來，通常使用雙引號也可以單引號。 3.屬性和屬性值不區分大小寫，但是推薦使用小寫。
2.標簽分類
HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。
（1）塊級元素特點：display:block;
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨占一行
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
（2）行內元素特點：display:inline;
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
（3）行內塊狀元素的特點：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置
註意
我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為後面頁面布局做好了準備。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽分類</title> </head> <body> <div class="wrapper"> <!-- 塊級元素 ：div p h1~h6 ol ul table form li 1.獨占一行 2.可以設置寬度和高度，如果設置了寬度和高度，則就是當前的寬高，如果寬度和高度沒有設置，寬度是父盒子的寬度，高度根據內容填充 --> <div class="left"> 這是路飛學城的戰場 <div>這是我的區域 <!-- <div style="width: 500px;height: 100px">這是我的愛好</div> --> <ul> <li> <h2>抽煙</h2> </li> <li> <ol> <li>喝酒</li> <li>燙頭</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- a span br i em strong label 行內元素：在一行內展示，不能設置寬度和高度，寬度和高度根據內容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">路飛</a> <span style="width: 100px;height: 200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!-- 行內塊 : 1.在一行內展示 2.可設置寬高 --> <img src="./homesmall.png" alt="一張圖片"> <input type="text" name="username" style="width: 200px;height: 50px"> </div> <!-- 標簽嵌套規則 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是h1~h6 p --> </div> </body> </html>
3.標簽嵌套規則
塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如：
6-[html]-標簽屬性