HTML标簽和CSS個人總結一、HTML标簽二、CSS樣式三、小知識點

1、塊标簽block：div p h1-h6 ul li ol li dl dd dt 。

特點：a、支援任何的樣式。b、獨占一行。c、不設定寬度時（不等于width:0;），寬度預設充滿整行。

2、内聯标簽inline: a span time em mark

特點：a、不支援寬高（設定後無效）。b、可以在一行顯示。c、寬度由内容撐開。d、換行被解析成空格（标簽内容和标簽之間的換行都是解析成空格）。e、無法設定上下margin 隻有左右margin。

3、内聯塊inline-block：img。

特點：a、支援寬高。b、可以在一行顯示。c、換行被解析成空格。

display用于表示元素的展示陳列方式。

display：block，把元素轉換成塊便簽，讓标簽擁有塊标簽的特點。

display：inline,把元素轉換成内聯标簽，讓标簽擁有内聯标簽的特點。

display：inline-block，,把元素轉換成内聯塊，讓标簽擁有内聯塊的特點。

display:table,表單元素。

display：none， 元素隐藏 它的位置都沒有了 。

div：盒子标簽 劃分區域。

p：段落便簽 每個段落之間會有間距。

a：1、 超連結 2、下載下傳 跟壓縮包（href直接放壓縮包的路徑，點選就會下載下傳） 3、錨點（href=”#+id”點選就會定位到對應id的位置）。

ul：導航類标簽（無序清單），每一條導航用

表示。

ol:導航類标簽（無序清單），會在每個導航前加上序号，type=”a”表示用字母表示序号，type=”1”用數字表示序号，start=”2“表示序号從第二個開始。ol用得非常少。

b:标簽規定粗體文本。

big:标簽呈現大号字型效果。

body:元素定義文檔的主體

span:可擁有操作字型樣式。

br:可插入一個簡單的換行符。

br 标簽是空标簽（意味着它沒有結束标簽，是以這是錯誤的：

）。在 XHTML 中，把結束标簽放在開始标簽中，也就是<code>&lt;br /&gt;</code>。

button： 标簽定義一個按鈕。

center：對其所包括的文本進行水準居中。

dialog： 标簽定義對話框或視窗。

dl： 标簽定義了定義清單（definition list）。

dt： 标簽定義了定義清單中的項目（即術語部分）。

form： 标簽用于為使用者輸入建立 HTML 表單。

h1-h6:标題。

head： 标簽用于定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、訓示浏覽器在哪裡找到樣式表、提供元資訊等等。

hr： 标簽在 HTML 頁面中建立一條水準線。

img： 元素向網頁中嵌入一幅圖像。

input： 标簽用于搜集使用者資訊。

label： 标簽為 input 元素定義标注（标記）。

li： 标簽定義清單項目。

option： 元素定義下拉清單中的一個選項（一個條目）。

progress： 标簽标示任務的進度（程序）。

script： 标簽用于定義用戶端腳本，比如 JavaScript。

select： 元素可建立單選或多選菜單。

source： 标簽為媒介元素（比如 <code>&lt;video&gt;</code> 和<code>&lt;audio&gt;</code>）定義媒介資源。

span: 标簽被用來組合文檔中的行内元素。

style:标簽用于為 HTML 文檔定義樣式資訊。

table: 标簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

tbody: 标簽表格主體（正文）。該标簽用于組合 HTML 表格的主體内容。

td: 标簽定義 HTML 表格中的标準單元格。

th:定義表格内的表頭單元格。

thead:标簽定義表格的表頭。該标簽用于組合 HTML 表格的表頭内容。

time: 标簽用于包含時間，不會在任何浏覽器中呈現任何特殊效果。

title： 元素可定義文檔的标題。

tr： 标簽定義 HTML 表格中的行。

u： 标簽可定義下劃線文本。

ul： 标簽定義無序清單。

video： 标簽定義視訊，比如電影片段或其他視訊流。

在css檔案中直接寫css樣式代碼，不用被任何标簽包圍。例如：

然後在需要應用的HTML檔案中引入即可使用，引用方法如下：

<code>&lt;link href="css/css.css" rel="stylesheet" /&gt;</code>

補充：href的值是引入的css檔案的路徑，rel=”stylesheet”告訴浏覽器引入的是樣式表。

每個HTML檔案可以引入多個css檔案，沒有限制。

一個css檔案也可以同時被多個HTML檔案引用。

padding-top:上

padding-right：右

padding-bottom：下

padding-left：左

padding 一個值 上 右 下左 都是這個值

padding 二個值 上下 左右

padding 三個值 上 左右 下

padding 四個值 上 右 下 左

盒子總體寬度大小=width+邊框+左右padding

盒子總體高度大小=height+邊框+上下padding

margin可以改變元素的位置

margin 一個值 上 右 下左 都是這個值

margin 二個值 上下 左右

margin 三個值 上 左右 下

margin 四個值 上 右 下 左

margin-top：上

margin-right：右

margin-bottom：下

margin-left：左

當相鄰的元素出現垂直的margin的時候，margin會重疊，如果垂直方向的2個值不一樣，元素間的距離會以margin比較大的為準。

當父子級結構的時候，子級設定了垂直方向的margin會傳遞給父級，當父元素沒有設定垂直的margin值的時候，就像是子元素把垂直margin的值指派給父元素的垂直margin的值，當父元素有垂直margin值的時候，父元素與其他元素的垂直距離取，父子元素中垂直margin比較大的那個。左右方向的margin父子元素互不影響。

那如果子元素想設定與父元素的周邊（父元素的外圍，上下左右）的距離，該怎麼做呢？

1、 給父級加邊框

2、 在父元素設定padding，要注意父元素設定了padding體積會變大，若想保持原來大小，要将寬高減去padding。

當不同标簽設定同樣屬性值時，可以用“,”隔開，然後把要設定的樣式屬性寫在一起，例如：

p,body{

margin:0;

}

1、去掉導航的點

li{

list-style: none;

2、讓字型在該容器内垂直居中的方法：

line-height:容器的高度；

3、内聯标簽不能放塊标簽。

4、脫離文檔流的元素設定margin沒有用。

5、text-align: center;能設定文本和内聯子标簽水準居中顯示。