03-body標籤中相關標籤-2

時間 2019-11-18

標籤 body 標籤相關简体版

原文原文鏈接

主要內容：

列表標籤 <ul>、<ol>、<dl>
表格標籤 <table>
表單標籤 <form>php

1、列表標籤

列表標籤分爲三種。css

無序列表
有序列表
定義列表

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

1.一、英文單詞解釋以下：
ul：unordered list，「無序列表」的意思。
li：list item，「列表項」的意思。安全

示例：服務器

<ul>
<li>Tom</li>
<li>Mike</li>
<li>Jack</li>
</ul>

效果：app

注意：post

li不能單獨存在，必須包裹在ul裏面；反過來講，ul裏面不能是別的東西，只能有li。
須要注意的是，ul的做用，並非給文字增長小圓點，而是增長無序列表的「語義」。網站

1.二、屬性：google

type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
能夠在每一個li裏面設置該屬性編碼

<ul>
    <li type="disc">Tom</li>
    <li type="square">Mike</li>
    <li type="circle">Jack</li>
</ul>

效果：

也能夠在ul裏面統一設置該屬性

<ul type='square'>
    <li>實心方點</li>
    <li>實心方點</li>
</ul>

<ul type="circle">
    <li>空心圓</li>
    <li>空心圓</li>
</ul>

效果：

1.三、列表之間是能夠嵌套的
例子：

<ul>
    <li>
        <b>北京市</b>
        <ul>
            <li>東城區</li>
            <li>海淀區</li>
            <li>朝陽區</li>
        </ul>
    </li>
    <li>
        <b>上海市</b>
        <ul>
            <li>靜安區</li>
            <li>黃浦區</li>
            <li>浦東新區</li>
        </ul>
    </li>
</ul>

效果：

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

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

2.一、英文單詞：Ordered List。

例如：

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

效果：

2.二、屬性：

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

<ol type="1" start="2">
    <li>第一節</li>
    <li>第二節</li>
    <li>第三節</li>
</ol>

<ol type="a" start="b">
    <li>第一節</li>
    <li>第二節</li>
    <li>第三節</li>
</ol>

<ol type="i" start="3">
    <li>第一節</li>
    <li>第二節</li>
    <li>第三節</li>
</ol>

<ol type="I" start="4">
    <li>第一節</li>
    <li>第二節</li>
    <li>第三節</li>
</ol>

效果：

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

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

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

<ul>
    <li>1. Tom</li>
    <li>2. Mike</li>
    <li>3. Jack</li>
</ul>

三、定義列表<dl>

定義列表的做用很是大。
<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的標題，這個標籤是必須的
<dd>：definition description 列表的列表項，若是不須要它，能夠不加
備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。

代碼：

<dl>
    <dt>規則一</dt>
    <dd>aa</dd>
    <dd>bb</dd>
    <dd>cc</dd>
    <dt>規則二</dt>
    <dd>dd</dd>
    <dd>ee</dd>
    <dd>ff</dd>
</dl>

備註：dd是描述dt的。

定義列表用法很是靈活，能夠一個dt配不少dd
也能夠拆開，讓每個dl裏面只有一個dt和dd，這樣子感受清晰一些

<dl>
    <dt>規則一</dt>
    <dd>aa</dd>
    <dd>bb</dd>
    <dd>cc</dd>

</dl>

<dl>
    <dt>規則二</dt>
    <dd>dd</dd>
    <dd>ee</dd>
    <dd>ff</dd>
</dl>

京東案例（京東首頁最下方）

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

2、表格標籤

一、表格標籤用<table>表示。

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

例子：

<table>
    <tr>
        <td>Tom</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr>
        <td>Mike</td>
        <td>male</td>
        <td>20</td>
    </tr>        <tr>
        <td>Jack</td>
        <td>male</td>
        <td>25</td>
    </tr>
</table>

效果：

二、<table>的屬性：

border：外邊框，單位是像素。
style="border-collapse:collapse;" :單元格的線和表格的邊框線合併
width：寬度，單位是像素
heigh：高度，單位是像素
bordercolor：表格的邊框顏色
align：表格的水平對齊方式。屬性值有：left、right、center。注意：這裏不是設置表格裏內容的對齊方式，若是想要設置單元格里的內容的對齊方式，須要對單元格標籤<td>進行設置
cellpadding：單元格內容到邊框的距離，單位是像素。默認狀況下，文字是緊挨着左邊框的，即默認值是0。

　　　　注意不是單元格內容到四條邊框的距離，而是到一條邊框的距離，默認是與左邊框的距離。若是設置屬性dir=「rt1"，就是指的到右邊框的距離。

cellspacing：單元格和單元格之間的距離（外邊框），單位是像素，默認值是0。
bgcolor：表格的背景顏色。例如bgcolor='#99cc66'
background：背景圖片，例如backgroud='src/image01.jpg'

　　　　背景圖片的優先級大於背景顏色

border單元格帶邊框的效果：

<table border="1">
<table border="20">能夠看出來這個屬性是設置表格的外邊框的寬度的

例子1：

<table border="1" style="border-collapse: collapse;" width="300" height="100", bordercolor="red" align="center" cellpadding="20" cellspacing="100" bgcolor="blue">

例子2：

<table border="1" width="300" height="100", bordercolor="red" align="center" cellpadding="20" cellspacing="10" bgcolor="blue">

當沒有設置style="border-collapse: collapse;" 時，能夠經過cellspacing設置單元格與單元格之間的距離

三、<tr>：行

一個表格就是一行一行組成。

屬性：

dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
bgcolor：設置這一行的單元格的背景色。
background：背景圖片，優先級高於背景色。
height：一行的高度
align="center"：一行的內容水平居中顯示，取值：left、center、right
valign="center"：一行的內容垂直居中，取值：top、middle、bottom

例子：

<table border="1" width="300" height="100", bordercolor="red">
    <tr dir="ltr" bgcolor="green">
        <td>Tom</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr dir="rtl" height="50" valign="bottom">
        <td>Mike</td>
        <td>male</td>
        <td>20</td>
    </tr>

    <tr align="center" >
        <td>Jack</td>
        <td>male</td>
        <td>25</td>
    </tr>
</table>

四、<td>：單元格

屬性：

align：內容的橫向對齊方式。屬性值能夠填：left right center。

　　　　若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。

valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
width：絕對值或者相對值(%)
height：單元格的高度
bgcolor：設置這個單元格的背景色。
background：設置這個單元格的背景圖片，優先級高於背景色。

五、單元格的合併

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

單元格的屬性：

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

例子：

<table border="1">
    <tr>
        <td>序號</td>
        <td colspan="3" align="center">區域</td>
    </tr>
    <tr>
        <td>1</td>
        <td>華東</td>
        <td>華東</td>
        <td>東北</td>
    </tr>
</table>

效果：

六、<th>：加粗的單元格。

至關於<td> + <b>
屬性同<td>標籤

七、<caption>：表格的標題。

使用時和tr標籤並列

例子：

<table border="1">
    <caption>區域統計</caption>
    <tr>
        <td>序號</td>
        <td colspan="3" align="center">區域</td>
    </tr>
    <tr>
        <td>1</td>
        <td>華東</td>
        <td>華東</td>
        <td>東北</td>
    </tr>
</table>

效果：

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

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

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

例子：

<table border="1">
    <tfoot>
        <tr>
            <td>我是tfoot</td>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <td>我是thead</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>我是tbody</td>
        </tr>
    </tbody>
</table>

效果：

3、表單標籤

一、表單標籤用<form>表示，用於與服務器的交互。

表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

1.一、屬性：

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

action屬性就是表示表單將提交到哪裏。 method屬性表示用什麼HTTP方法提交，有get、post兩種。

1.二、get提交和post提交的區別：

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

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

1.三、Enctype：

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

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

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

用於接收用戶輸入。
<input type="text" />

2.1屬性：

1）type="屬性值"：文本類型。
屬性值能夠是：

text（默認）
password：密碼類型
radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。很是像之前的收音機，按下去一個按鈕，其餘的就擡起來了。因此叫作radio。
checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。
checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略。
hidden：隱藏框，在表單中包含不但願用戶看見的信息
button：普通按鈕，結合js代碼進行使用。
submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。
reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值
image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。
file：文件選擇框。

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

2）value="內容"：文本框裏的默認內容（已經被填好了的）
3）size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。
注意size屬性值的單位是字符，而不是像素。
4）readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。
用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。
5）disabled：文本框只讀，不能編輯，光標點不進去，且文本框顯示灰色。屬性值能夠不寫。
6) placeholder：輸入內容以前顯示的內容

例子：

<form action="register.php" method="post">
    用戶名：<input type="text" name="username"><br>
    密碼：<input type="password" name="password"><br>
    暱稱：<input type="text" name="nickname"><br>
    性別：<input type="radio" name="gender" value="male" checked="">男
         <input type="radio" name="gender" value="female" >女<br>
    愛好：<input type="checkbox" name="hobby" value="sing">唱歌
         <input type="checkbox" name="hobby" value="dance">跳舞
         <input type="checkbox" name="hobby" value="climb">登山
</form>

效果：

例子：模擬百度搜索

<form action="https://www.baidu.com/s" method="get">
    <p>
        <input type="text" name="wd" value="" placeholder="請輸入您要搜索的內容">
        <input type="submit" value="搜索">
    </p>
</form>

效果：

四種按鈕的舉例：

<form action="">
    <input type="button" value="普通按鈕"><br>
    <input type="submit" value="提交按鈕"><br>
    <input type="reset" value="重置按鈕"><br>
    <input type="image" src="img01.jpg" width="50" value="圖片按鈕"><br>
    <input type="file" value="文件選擇框">
</form>

效果：

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

<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。
select標籤和ul、ol、dl同樣，都是組標籤。

<select>標籤的屬性：

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

<option>標籤的屬性：

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

例子：

<form action="">
        <select>
            <option>小學</option>
            <option>初中</option>
            <option>高中</option>
            <option selected="">大學</option>  #默認選中
        </select>
<br>
<br>
<br>
        <select size="3">  #以滾動條的形式顯示，一次顯示3個
            <option>小學</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學</option>
        </select>
<br>
<br>
<br>
        <select multiple="">  #可按住ctrl鍵多選
            <option selected="">小學</option> #默認選中
            <option selected="">初中</option> #默認選中
            <option>高中</option>
            <option>大學</option>
        </select>
</form>

效果：

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

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

屬性：

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

例子：

<form>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

效果：

五、<fieldset>表單的語義化

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

style="height: 200px; width: 300px;" 定義fieldset區域的寬高

style="margin: 0 auto" 定義fieldset區域在網頁中水平居中

<form action="" method="post">
    <fieldset style="height: 100px; width: 300px; margin: 0 auto;">
        <legend align="center">帳號信息</legend>
        用戶名:<input type="text" name="username"><br>
        密&nbsp&nbsp&nbsp碼:<input type="password" name="pwd" size="20"><br>
    </fieldset>

    <fieldset style="height: 100px; width: 300px; margin: 0 auto;">
        <legend align="center">其餘信息</legend>
        性別：<input type="radio" name="gender" value="male" checked="">男
            <input type="radio" name="gender" value="female">女<br>
        愛好：<input type="checkbox" name="hobby" value="sing">唱歌
             <input type="checkbox" name="hobby" value="dance">跳舞
             <input type="checkbox" name="hobby" value="climb">登山
    </fieldset>
</form>

六、<label>標籤

咱們先來看下面一段代碼：

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

對於上面這樣的單選框，咱們只有點擊那個單選框（小圓圈）才能夠選中，點擊「男」、「女」這兩個文字時是沒法選中的；因而，label標籤派上了用場。
本質上來說，「男」、「女」這兩個文字和input標籤時沒有關係的，而label就是解決這個問題的。咱們能夠經過label把input和漢字包裹起來做爲總體。
複選框也有label：（任何表單元素都有label）

解決方法以下：

性別：<input type="radio" name="gender" id="male" value="male" checked=""/><label for="male">男</label>
    <input type="radio" name="gender" id="female" value="female"><label for="female">女</label><br>
愛好：<input type="checkbox" name="hobby" id="sing" value="sing"><label for="sing">唱歌</label>
     <input type="checkbox" name="hobby" id="dance" value="dance"><label for="dance">跳舞</label>
     <input type="checkbox" name="hobby" id="climb" value="climb"><label for="climb">登山</label>

上方代碼中，input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼這個label和input就有綁定關係了。
這時，點擊漢字就能夠選中該元素了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。