一、HTML標籤

HTML標籤可以分為塊標籤，內聯標籤和內聯塊。

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用於表示元素的展示陳列方式。
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 中，把結束標籤放在開始標籤中，也就是<br />。
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： 標籤為媒介元素（比如 <video> 和<audio>）定義媒介資源。
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樣式

1、可以在HTML檔案中的head部分定義style標籤，在裡面定義各種樣式，詳細用法如下：

<style>
            /*設定樣式*/
            /*給某個標籤宣告樣式的時候，宣告瞭什麼屬性，該屬性的指就會覆蓋原有的屬性值，沒有宣告的就還是用預設值*/
            h2{
                margin:0;//周圍佔用的空間為0
                font-weight: normal;//字型不加粗
            }
            a{
                text-decoration: none;//沒有下滑線
            }
            ul{
                margin:0;
            }
            li{
                list-style: none;//去掉導航的點
            }
            .title{
                font-size: 18px;
            }
            /*可以通過 ".class名" 來定義樣式名稱並設定樣式 這叫類選擇器 並且父標籤的樣式屬性值會作用於子標籤上*/
            .title a{
                color: #333333;
            }
            /*可以通過 ".class名 便籤名"來定義設定了某個樣式的標籤的子標籤的樣式*/
            .list li{
                float:left;
                width:173px;
                height:120px;
            }
            .list li img{
                width:173px;
                height:120px;
            }
            /*可以通過 ".class名 便籤名 標籤名"來定義設定了某個樣式的標籤的子標籤的子標籤樣式，也就是說可以跨層定義標籤樣式*/
            #div1{

                border:1px solid blue !important;
            }
            /*可以用"#+id名稱"來給指定id元素配置樣式，並且
             css選擇器的優先順序
            !important>style>id>class>群組選擇器標籤
            總體上說誰的範圍小 誰的優先順序就高,!important除外
             * */
             .div2>.p1{
                border:1px solid red;
            }
             /** 
             後代選擇器  
            所有後代.div 元素  
            div>元素  直接後代 不能隔代 **/
        </style>

2、css樣式單獨寫在css檔案中，

在css檔案中直接寫css樣式程式碼，不用被任何標籤包圍。例如：

div{
        width:80px;
        height:80px;
        border:1px solid green;
    }

然後在需要應用的HTML檔案中引入即可使用，引用方法如下：
<link href="css/css.css" rel="stylesheet" />
補充：href的值是引入的css檔案的路徑，rel=”stylesheet”告訴瀏覽器引入的是樣式表。
每個HTML檔案可以引入多個css檔案，沒有限制。
一個css檔案也可以同時被多個HTML檔案引用。

3、css屬性

a、padding：造成盒子整體變大，並不是內容變大，背景會一直鋪到padding區，如果沒有padding ，背景的寬度就是width的寬度，高度同理。

padding-top:上
padding-right：右
padding-bottom：下
padding-left：左
padding 一個值 上 右 下左 都是這個值
padding 二個值 上下 左右
padding 三個值 上 左右 下
padding 四個值 上 右 下 左
盒子總體寬度大小=width+邊框+左右padding
盒子總體高度大小=height+邊框+上下padding

b、margin：外邊距，邊框以外的部分，背景並不會鋪到margin的區域。

margin可以改變元素的位置
margin 一個值 上 右 下左 都是這個值
margin 二個值 上下 左右
margin 三個值 上 左右 下
margin 四個值 上 右 下 左
margin-top：上
margin-right：右
margin-bottom：下
margin-left：左

margin的重疊

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

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;能設定文字和內聯子標籤水平居中顯示。