1、相對地址與絕對地址

相對地址：相對於引用檔案本身去定位被引用的檔案地址
絕對地址：相對於磁碟的位置去定位檔案的地址  ps：當整體檔案遷移，頂層目錄和碟符改變而找不到檔案

2、列表標籤

 （1）有序列表

<ol>
    <li>列表標題一</li>
    <li>列表標題二</li>
    <li>列表標題三</li>
</ol>

 （2）無序列表

<ul>
    <li>列表標題一</li>
    <
 
li>列表標題二</li>
    <li>列表標題三</li>
</ul>

 （3）自定義列表

<dl>
    <dt>列表標題</dt>
    <li>子標題一</li>
    <li>子標題二</li>
</dl>

3、列表技巧

1、列表的內容是可以連結的，點選連結到新聞或者文章的具體內容

 <li><a href="#">列表標題一</a></li>

2、去掉樣式（對i定義列表無效） list-style 去掉列表項的小圓點，比如：list-style:none

4、html表單

如果想要把頁面的很多資訊傳遞到後臺去，那麼需要使用表單標籤form
1>action屬性 定義表單資料提交的地址
2>method屬性 定義表單提交的方式，一般有GET和POST方法

<form action="地址。。。" method="GET"></form>     
                                              

input標籤

（1）input標籤（輸入框標籤）

type屬性功能是: 決定input輸入框是什麼型別的。 text: 輸入普通文字  password: 輸入密碼，會隱藏資訊
value屬性

： 定義表單元素的值，
name屬性： 定義表單元素的名稱，此名稱是提交資料時的鍵名

<input>                       
<input type="text">
<input type="password">       

 補充：空格

&emsp； -> 全形
&ensp； -> 半形

（2）標籤 為表單元素定義文字標註

<label for="inp1">使用者名稱：</label><input type="text" id="inp1"><br><br>

（3）radio 單選按鈕 -> input的的type屬性的值

單選按鈕：(radio)如果兩個或者多個只能選一個，name值必須相同
設定預設值：checked (H5新規定 當屬性和值相同時，可以只寫屬性不寫值)

<input type="radio" name="gender" checked>男  <input type="radio" name="gender">女<br><br>

（4）checkbox 多選按鈕 -> input的type屬性的值

設定預設值 ：checked

愛好：<input type="checkbox" checked>足球<input type="checkbox">籃球<input type="checkbox">乒乓球<br><br>

（5）file 上傳檔案 -> input的type屬性的值

<input type="file">

（6）submit 上傳檔案 -> input的type屬性的值

<input type="submit">

（7）reset 重置按鈕 -> input的type屬性的值

<input type="reset">   <!--reset需要寫在form標籤內-->

（8）button 普通按鈕 -> input的type屬性的值

<input type="button" value="按鈕1">

非input標籤

（1）textarea 文字框

禁止拖拽：resize: none;
去掉藍色外邊線 ：outline-style: none;

（2）select標籤

selected:可以設定預設選項
size: 可以顯示多個選項
mutiple： 可以選擇多個選項

（3）button普通按鈕

<button disabled>普通按鈕2</button>   <!-- disabled: 禁用標籤，標籤變灰色，也可以禁用文字框-->

5、css選擇器二

（4）id選擇器

通過id名來選擇元素，元素的id名稱不能重複，id名一般給程式使用，所以不推薦使用id作為選擇器。

#box{color:red} 
-------------------------------
<p id="box">這是一個段落標籤</p>

（5）組選擇器

如果有同樣的樣式使用設定多個選擇器

box1,.box2,.box3{width:100px;height:100px}
  .box1{background:red}
  .box2{background:pink}
  .box2{background:gold}
---------------------------------------------
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

（6）偽類選擇器

常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態。

.box1:hover{width:300px;}

6、CSS盒子模型

模型分為內外四層（內—>外）：
（1）content
（2）padding

內邊距：檢視元素的時候，預設是綠色
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
四個方向：
  padding: 10px; 四個方向
  padding: 10px 100px; 上下 左右
  padding: 10px 100px 200px; 上 左右 下
  padding: 10px 20px 30px 40px; 上 右 下 左

（3）border

邊線:border:粗細 型別 顏色
   border-top: 10px solid yellowgreen;
  border-bottom: 10px solid yellowgreen;
  border-left: 10px solid yellowgreen;
  border-right: 10px solid yellowgreen;
ps：solid:直線 dashed:虛線 dotted:點線

（4）margin

外邊距:檢視元素的時候，預設時土黃色
塊級元素:右側或者空白的部分，都用margin補齊

7、其他

（1）body

body 預設有8px的margin，(很多標籤在去除樣式之後在使用)
box-sizing: border-box    盒子的寬高是在加上padding和border之後的值

（2）顏色

1>單詞： red；
2>#ffffff； 0-9abcdef------如果兩位兩位i一樣可簡寫如： aabbdd -> abd
3>單詞；rgb（255，255，255）； -> (0,0,0) 是黑色。

（3）盒子居中：

1>margin: auto；
2>margin:0 auto；
3>margin-left: auto;
4>margin-right: auto;

（4）文字居中

左右居中：text-align:center;
上下居中：line-height: 200px;

（5）css初始化

* {
     padding: 0;
     margin: 0;
     list-style: none;
   }

8、顯示和隱藏盒子

（1）隱藏盒

display: none; -> 不佔位
visibility: hidden; -> 佔位

（2）顯示盒子

display: block -> 佔位
display: inline -> 一行顯示，不能設定寬高

（3）css元素溢位

overflow屬性：當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式

overflow的設定項：
  1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
  2、hidden 內容會被修剪，並且其餘內容是不可見的。
  3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
  4、auto 當超出時滾動條顯示，沒有超出不顯示

（4）浮動

想讓兩個塊級獨佔一行的元素在一行顯示，可以使用浮動(float)或者定位
  1、float: none 預設值。代表盒子本身沒有浮動。
  2、float: left 讓填寫程式碼的盒子以左側為基準，對齊了浮動。
  3、float: right 讓填寫程式碼的盒子以右側為基準，對齊了浮動。
解決辦法: 把浮動的盒子單獨用包起來，父盒子設定高度或者設定overflow: hidden;
總結：
  1、浮動的盒子不佔位置，所以下面的盒子會頂上來，被浮動的盒子蓋住。
  2、一個盒子裡的子盒子要麼都浮動，要麼都不浮動