0522 HTML表單 CSS基礎

1、列表標籤

列表標籤分爲三種。

一、無序列表<ul>，無序列表中的每一項是<li>

英文單詞解釋以下：

• ul：unordered list，「無序列表」的意思。
• li：list item，「列表項」的意思。

  示例：
  複製代碼
  
  <ul>
           <li>張三</li>    
           <li>李四</li>    
           <li>王五</li>    
  </ul>

注意：

• li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
• 咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。

屬性：

• type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。

列表之間是能夠嵌套的。咱們來舉個例子：
代碼：

  <ul> <li><b>北京市</b> <ul> <li>海淀區</li> <li>朝陽區</li> <li>東城區</li> </ul> </li> <li><b>廣州市</b> <ul> <li>天河區</li> <li>越秀區</li> </ul> </li> </ul>

聲明：ul的兒子，只能是li。可是li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul。

二、有序列表<OL>，裏面的每一項是<li>

英文單詞：Ordered List。

屬性：

• type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。

和無序列表同樣，有序列表也是能夠嵌套的哦，這裏就不舉相似的例子了。

ol和ul就是語義不同，怎麼使用都是同樣的。
ol裏面只能有li，li必須被ol包裹。li是容器級。

ol這個東西用的很少，若是想表達順序，你們通常也用ul。

三、定義列表<dl>

定義列表的做用很是大。

<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。

• <dt>：definition title 列表的標題，這個標籤是必須的
• <dd>：definition description 列表的列表項，若是不須要它，能夠不加

備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。

<dl>
        <dt>第一條規則</dt>
        <dd>不許睡覺</dd>
        <dd>不許交頭接耳</dd>
        <dd>不許下神</dd>

        <dt>第二條規則</dt>
        <dd>能夠泡妞</dd>
        <dd>能夠找妹子</dd>
        <dd>能夠看mv</dd>
</dl>

上圖能夠看出，定義列表表達的語義是兩層：

• （1）是一個列表，列出了幾個dd項目
• （2）每個詞兒都有本身的描述項。

備註：dd是描述dt的。

定義列表用法很是靈活，能夠一個dt配不少dd

dt、dd都是容器級標籤，想放什麼均可以。因此，如今就應該更加清晰的知道：用什麼標籤，不是根據樣子來決定，而是語義（語義本質上是結構）。

2、表格標籤

表格標籤用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。

<table>
        <tr>
            <td>小馬哥</td>
            <td>18</td>
            <td>男</td>
            <td>山東</td>
        </tr>
        <tr>
            <td>小嶽嶽</td>
            <td>45</td>
            <td>男</td>
            <td>河南</td>
        </tr>
        <tr>
            <td>鄧紫棋</td>
            <td>23</td>
            <td>女</td>
            <td>香港</td>
        </tr>
    </table>

<table>的屬性：

• border：邊框。像素爲單位。
• style="border-collapse:collapse;"：單元格的線和表格的邊框線合併
• width：寬度。像素爲單位。
• height：高度。像素爲單位。
• bordercolor：表格的邊框顏色。
• align：表格的水平對齊方式。屬性值能夠填：left right center。
  注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）
• cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
  注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
• cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0
• bgcolor="#99cc66"：表格的背景顏色。
• background="路徑src/..."：背景圖片。
  背景圖片的優先級大於背景顏色。

備註：表格中很細表格邊線的製做：
CSS的寫法：

style="border-collapse:collapse;"

<tr>：行

一個表格就是一行一行組成的嘛。
屬性：

• dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
• bgcolor：設置這一行的單元格的背景色。
  注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
• height：一行的高度
• align="center"：一行的內容水平居中顯示，取值：left、center、right
• valign="center"：一行的內容垂直居中，取值：top、middle、bottom

<td>：單元格

屬性：

• align：內容的橫向對齊方式。屬性值能夠填：left right center。
  若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。
• valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
• width：絕對值或者相對值(%)
• height：單元格的高度
• bgcolor：設置這個單元格的背景色。
• background：設置這個單元格的背景圖片。

單元格的合併

若是要將兩個單元格合併，那確定就要刪掉一個單元格。
單元格的屬性：

• colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
• rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上

<th>：加粗的單元格。至關於<td> + <b>

• 屬性同<td>標籤

<caption>：表格的標題。使用時和tr標籤並列

表格的<thead>標籤、<tbody>標籤、<tfoot>標籤

這三個標籤有與沒有的區別：

• 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
• 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來

3、表單標籤

表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

 

屬性：

• name：表單的名稱，用於JS來操做或控制表單時使用；
• id：表單的名稱，用於JS來操做或控制表單時使用；
• action：指定表單數據的處理程序，通常是PHP，如：action=「login.php」
• method：表單數據的提交方式，通常取值：get(默認)和post

form標籤裏面的action屬性和method屬性，在後面課程給你們講解。稍微說一下：action屬性就是表示，表單將提交到哪裏。 method屬性表示用什麼HTTP方法提交，有get、post兩種。 

method: get請求和post請求
action：提交的地址

使用form表單提交的時候，表單控件的name屬性會被封裝程url上的key，value屬性會被封裝程url上的value

get提交和post提交的區別：
GET方式：
將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開。
特色：只適合提交少許信息，而且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。

POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。
特色：能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

Enctype：
表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

• Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以
• Multipart/form-data：上傳附件時，必須使用這種編碼方式。

<input>：輸入標籤（文本框）

用於接收用戶輸入。

<input type="text" />

屬性：

• type="屬性值"：文本類型。屬性值能夠是：
  • text（默認）
  • password：密碼類型
  • radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。
    ）。很是像之前的收音機，按下去一個按鈕，其餘的就擡起來了。因此叫作radio。
  • checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。
  • checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略。
  • hidden：隱藏框，在表單中包含不但願用戶看見的信息
  • button：普通按鈕，結合js代碼進行使用。
  • submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。
  • reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值
  • image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。
  • file：文件選擇框。
    提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
• value="內容"：文本框裏的默認內容（已經被填好了的）
• size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。
  注意size屬性值的單位不是像素哦。
• readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。
  用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。
• disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。

  <form>
        姓名：<input value="呵呵" >逗比<br>
        暱稱：<input value="哈哈" readonly=""><br>
        名字：<input type="text" value="name" disabled=""><br>
        密碼：<input type="password" value="pwd" size="50"><br>
        性別：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>

四種按鈕的舉例：

<form> <input type="button" value="普通按鈕"><br> <input type="submit" value="提交按鈕"><br> <input type="reset" value="重置按鈕"><br> <input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br> <input type="file" value="文件選擇框"> </form>

<select>：下拉列表標籤

<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。

select標籤和ul、ol、dl同樣，都是組標籤。

<select>標籤的屬性：

• multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。
• size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。

<option>標籤的屬性：

• selected：預選中。沒有屬性值。

例子：

    <form> <select> <option>小學</option> <option>初中</option> <option>高中</option> <option>大學</option> <option selected="">研究生</option> </select> <br><br><br> <select size="3"> <option>小學</option> <option>初中</option> <option>高中</option> <option>大學</option> <option>研究生</option> </select> <br><br><br> <select multiple=""> <option>小學</option> <option>初中</option> <option selected="">高中</option> <option selected="">大學</option> <option>研究生</option> </select> <br><br><br> </form>

<textare>標籤：多行文本輸入框

text就是「文本」，area就是「區域」。

屬性：

• value：提交給服務器的值。
• rows="4"：指定文本區域的行數。
• cols="20"：指定文本區域的列數。
• readonly：只讀。

表單的語義化

好比，咱們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候能夠利用表單的語義化。

<fieldset> <legend>帳號信息</legend> 姓名：<input value="呵呵" >逗比<br> 密碼：<input type="password" value="pwd" size="50"><br> </fieldset>

<label>標籤

對於上面這樣的單選框，咱們只有點擊那個單選框（小圓圈）才能夠選中，點擊「男」、「女」這兩個文字時是沒法選中的；因而，label標籤派上了用場。

本質上來說，「男」、「女」這兩個文字和input標籤時沒有關係的，而label就是解決這個問題的。咱們能夠經過label把input和漢字包裹起來做爲總體。

解決方法以下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label>

上方代碼中，input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼這個label和input就有綁定關係了。

固然了，複選框也有label：（任何表單元素都有label）

在HTML中引入css方式總共有三種：

1. 行內樣式
2. 內接樣式
3. 外接樣式

　　　　　3.1 連接式

　　　　　3.1 導入式

css介紹

如今的互聯網前端分三層：

• HTML：超文本標記語言。從語義的角度描述頁面結構。
• CSS：層疊樣式表。從審美的角度負責頁面樣式。
• JS：JavaScript 。從交互的角度描述頁面行爲

CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。

HTML的缺陷：

1. 不可以適應多種設備
2. 要求瀏覽器必須智能化足夠龐大
3. 數據和顯示沒有分開
4. 功能不夠強大

CSS 優勢：

1. 使數據和顯示分開
2. 下降網絡流量
3. 使整個網站視覺效果一致
4. 使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）

行內樣式（優先級最高，或一最後一次爲準）

<div>
    <p style="color: green">我是一個段落</p>
 </div>

內接樣式

<style type="text/css">
    /*寫咱們的css代碼*/
        
    span{
    color: yellow;
    }

</style>

外接樣式-連接式

<link rel="stylesheet" href="./index.css">

外接樣式-導入式

<style type="text/css">
        @import url('./index.css');
</style>

1.標籤選擇器
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「

在<head>中加入<style type="text/css">

.id選擇器
# 選中id

同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值

3.類選擇器

3.1 所謂類 就是class . class與id很是類似 任何的標籤均可以加類可是類是能夠重複,屬於歸類的概念。

3.2 同一個標籤中能夠攜帶多個類，用空格隔開

類的使用，可以決定前端工程師的css水平到底有多牛逼？

答案：必定要有」公共類「的概念

總結：

• 不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
• 每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用

玩好了類 就等於玩好了css中的1/2

到底使用id仍是用class？
答案：儘量的用class。除非一些特殊狀況能夠用id

緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤

讓鼠標顯示小手的樣式
            cursor: pointer;
讓一個盒子居中顯示
            margin: 0 auto;

基本選擇器： 標籤選擇器、id選擇器、class選擇器、*通配符選擇器 

標籤選擇器：無論你的標籤藏的多深，都會被選中，選的"共性"，而不是特性 
取消下劃線：text-decoration: none.d:hover{            text-decoration: underline;            color: red;  接觸變紅，有下劃線