1. 程式人生 > >HTML 塊標籤,行內標籤,行內塊標籤以及之間的相互轉換

HTML 塊標籤,行內標籤,行內塊標籤以及之間的相互轉換

+++++++++++++++++++++++++++++++++++++++++         HTML標籤分類行內標籤:包含a、span、em、strong、b、i、u、label、br;特點:可以多個標籤存在一行,不能直接設定行內標籤的高度、寬度、行高以及頂和底邊距,完全靠內容撐開寬高!a標籤:主要用來連結一個其他的網頁;span標籤:主要用來對行內的文字進行一些樣式以及其他的操作;em標籤:一般用來對文字進行強調,使用斜體體現出來;strong標籤:一般用來對文字進行強調,使用加粗字型體現出來;img標籤:圖片引用標籤,其中 src屬性中寫入圖片的地址;var標籤:JavaScript中命名變數的標籤。塊標籤:
包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form;特點:獨佔一行,對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效;如果不給寬度,塊級元素就預設為瀏覽器的寬度,即就是100%寬;p標籤:段落標籤,段落文字使用,預設格式:段尾進行換行;div標籤:劃分塊的主要使用標籤;ul標籤:無序列表的主標籤,後面的標號為圓點(黑色);ol標籤:有序列表的主標籤,後面一般跟有序的1,2,3,4,5...;li標籤:列表中的主體使用標籤dl標籤:自定義標籤的主標籤;dt標籤:自定義標籤的表頭;dd標籤:自定義標籤的表頭的解釋(描述)資訊;h1~h6:6級標題標籤、字型的大小依次變小。行內塊標籤:
img,input,textarea特點:結合的行內和塊級的有點,不僅可以對寬高屬性值生效,還可以多個標籤存在一行顯示;+++++++++++++++++++++++++++++++++++++++++                各種標籤之間的轉換1、塊級標籤轉換為行內標籤:display:inline;2、行內標籤轉換為塊級標籤:display:block;3、轉換為行內塊標籤:display:inline-block;                各個標籤之間的區別塊標籤:獨自佔領一行、可以進行寬高的數值的設定;行標籤:在一行內顯示、不可以進行寬高的數值設定;行內塊標籤:能和其他元素待在一行,能設定寬高;                    巢狀規則 
塊標籤可以套行標籤,行標籤不可以套塊標籤。P標籤不要套塊屬性標籤,可以套a,span,文字。。。巢狀的時候注意程式碼的縮排。