前端基礎-html 列表標籤,表格標籤,表單標籤

時間 2019-12-07

標籤前端基礎 html 列表標籤表格表單欄目 HTML 简体版

原文原文鏈接

1、列表標籤php

一、ul（無序列表）標籤html

ul（unordered list）無序列表，ul下的子元素只能是li（list item），以下示例：html5

    <ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第三項</li>
    </ul>

總結：python

　　1）li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能是li；瀏覽器

　　2）列表之間是能夠嵌套的（li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul）；安全

　　3）type屬性html4.01中已廢棄，html5不支持；服務器

二、ol（有序列表）標籤app

ol（ordered list）有序列表，ol下的子元素只能是li，以下示例：post

    <ol>
        <li>第一項</li>
        <li>第二項</li>
        <li>第三項</li>
    </ol>

總結：google

1）ol和ul就是語義不同，怎麼使用都是同樣的；

2）type和start屬性html4.01中已廢棄，html5不支持；

3）ol這個東西用的很少，若是想表達順序，你們通常也用ul；以下示例：

   <ul>
        <li>1. 第一項</li>
        <li>2. 第二項</li>
        <li>3. 第三項</li>
    </ul>

三、dl（定義列表）標籤

dl（definition list）沒有屬性，dl的子元素只能是dt和dd。

<dl> 標籤與 <dt> （定義項目/名字）和 <dd> （描述每個項目/名字）一塊兒使用。以下示例：

    <dl>
        <dt>站點信息</dt>
        <dd>意見反饋</dd>
        <dd>關於咱們</dd>
        <dd>免責聲明</dd>
        <dd>文章歸檔</dd>
    </dl>

       或者：

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

總結：

1）dt（definition title）列表的標題，這個標籤是必須寫的；

2）dd（definition description）列表的列表項，若是不須要它，能夠不加；

3）定義列表用法很靈活，能夠一個dt配多個dd，也可讓每個dl裏只有一個dt和dd；

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

2、table標籤

表格標籤用<table>表示，一個表格<table>是由每行<tr>組成的，每行是由<td>或者<th>組成的，因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。以下表格示例：

    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

1）單元格的合併

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

橫向合併：colspan，例如colspan=」2」表示當前單元格在水平方向上要佔據兩個單元格的位置。

縱向合併：rowspan，例如rowspan=」2」表示當前單元格在垂直方向上佔據兩個單元格的位置。

    <table border="1">
        <tr>
            <th colspan="2">userinfo</th>
        </tr>
        <tr>
            <td >First Name:</td>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <td rowspan="2">Telephone:</td>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

2）<caption>：表格的標題，使用時和<tr>標籤並列，以下示例：　　

    <table border="1">
       <caption>Monthly savings</caption>
       <tr>
           <th>Month</th>
           <th>Savings</th>
       </tr>
       <tr>
           <td>January</td>
           <td>$100</td>
       </tr>
    </table>

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

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

a、若是寫了，那麼這三部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。

b、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。

3、form表單（結合js用）

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

屬性：

　　　　1）action：指定表單數據的處理程序，通常是PHP，如：action=」login.php」；

　　2）method：表單數據的提交方式，通常取值：get（默認）和post；

　　form標籤裏邊的action屬性和method屬性後面再詳細介紹，如今稍微瞭解一下：action屬性就是表示將表單提交到哪裏。method屬性表示用什麼http方法提交，有get、post兩種。

1、get方式：

　　將表單數據，以「name=value」形式追加到action指定的處理程序的後面，二者間用「？」隔開，每個表單的「name=value」間用「&」號隔開。

　　特色：只適合提交少許信息，而且不太安全（不要提交敏感數據），url中能看到提交的數據，提交的數據類型只限於ASCII字符。

2、post方式：

　　將表單數據直接（隱藏，url中不顯示）發送到action指定的處理程序。post發送的數據url不可見。action指定的處理程序能夠獲取到表單數據。

　　特色：能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的（word、excel、rar、img）。

3、enctype：

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

(1) Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以；

(2) Multipart/form-data：上傳附件時，必須使用這種編碼方式；

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

用於接收用戶輸入，例如：<input type=」text」 />

屬性：

　　　　a、type=「屬性值」：

(1) text（默認）：文本類型；

(2) password：密碼類型；

(3) radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」）；

(4) checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇；

　　　　　　(5) checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略；

(6) hidden：隱藏框，在表單中包含不但願用戶看見的信息；

(7) button：普通按鈕，結合js代碼進行使用；

(8) submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去；

(9) reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值；

(10) image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片；

(11) file：文件選擇框；

　　　　　　　　提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。

　　　　b、name：表單的名稱，用於JS來操做或控制表單時使用；

c、value=」內容」：文本框裏的默認內容（已經被填好了的）；

d、id：表單的名稱，用於JS來操做或控制表單時使用；

e、size="50"：表示文本框內能夠顯示五十個字符，一個英文或一箇中文都算一個字符；

g、readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。

用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯；

h、disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫；

5、<label>標籤

咱們先來看這樣一段代碼：

<input type="radio" name="sex" /> 男

　　　　<input type="radio" name="sex" /> 女

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

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

　　解決方法以下：

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

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

6、<select>：下拉列表標籤

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

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

屬性：

<select>標籤的屬性：

(1) multiple：能夠對下拉列表中的選項進行多選。沒有屬性值；

(2) size="2"：若是屬性值大於2，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖；

<option>標籤的屬性：

(1) selected：預選中。沒有屬性值。

代碼示例：

    <select multiple="" size=」2」>
        <option>小學</option>
        <option>初中</option>
        <option selected="">高中</option>
        <option selected="">大學</option>
        <option>研究生</option>
    </select>

7、<textarea>標籤：多行文本輸入框

屬性：

name：提交給服務器的key值；

　　　　value：提交給服務器的值；

　　　　rows="4"：指定文本區域的行數；

　　　　cols="20"：指定文本區域的列數；

　　　　readonly：只讀；

代碼示例：

4、快捷鍵

一、emeet語法：

！+tab

ul>li*5 + tab