HTML標簽

一、表格標簽

表格的主要作用：
表格主要用于顯示、展示數(shù)據(jù)，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。
1.<table></table>用來定義表格的標簽。
2.<tr></tr>用來定義行的標簽，必須嵌套在table標簽中
3.<td></td>用來定義表格中的單元格的標簽，必須嵌套在tr標簽中
4.td是指table data

<table align="center" border="1" cellpadding="8" cellspacing="0" width="500" height="250">
    <tr><td>姓名</td> <td>性別</td> <td>年齡</td></tr>
    <tr><td>周杰倫</td> <td>男</td> <td>42</td></tr>
    <tr><td>劉德華</td> <td>男</td> <td>64</td></tr>
    <tr><td>郭富城</td> <td>男</td> <td>62</td></tr>
</table>

5.<th></th>表頭單元格標簽，加粗且居中顯示
6.表格屬性，align，border，cellpadding，cellspacing，width

表格結(jié)構(gòu)標簽

使用場景:因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成表格頭部和表格主體兩大部分
在表格標簽中，分別用:thead標簽 表格的頭部區(qū)域、tbody標簽 表格的主體區(qū)域，這樣可以更好的分清表格結(jié)構(gòu)。
1.<thead></thead>:用于定義表格的頭部。<thead>內(nèi)部必須擁有<tr>標簽。一般是位于第一行。
2.<tbody></tbody>:用于定義表格的主體，主要用于放數(shù)據(jù)本體。
3.以上標簽都是放在<table></table>標簽中

合并單元格

特殊情況下,可以把多個單元格合并為一個單元格，這里同學們會最簡單的合并單元格即可.
合并單元格方式:
跨行合并:rowspan="合并單元格的個數(shù)"
跨列合并:colspan="合并單元格的個數(shù)"
目標單元格:(合并代碼)
跨行:最上側(cè)單元格為目標單元格,寫合并代碼
跨列:最左側(cè)單元格為目標單元格,寫合并代碼
合并單元格三步曲
1.先確定是跨行還是跨列合并。
2.找到目標單元格.寫上合并方式= 合并的單元格數(shù)量。比如:<tdcolspan=“2”></td>.
3.刪除多余的單元格。

總結(jié)

二、列表標簽

無序列表、有序列表、自定義列表

無序列表（重點）

<ul>標簽表示 HTML 頁面中項目的無序列表，一般會以項目符號呈現(xiàn)列表項，而列表項使用<li>標簽定義。

<ul>
   <li>列表1</li>
   <li>列表2</li>
   <li>列表3</li>
</ul>

1.無序列表的各個列表項之間沒有順序級別之分，是并列的。
2.<ul></ul>中只能嵌套 <li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的.
3. <li>與</li>之間相當于一個容器，可以容納所有元素。
4.無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS 來設置

有序列表（理解）

<ol>
   <li>列表1</li>
   <li>列表2</li>
   <li>列表3</li>
</ol>

自定義列表（重點）

在HTML標簽中，<dl>標簽用于定義描述列表(或定義列表)，該標簽會與<dt>(定義項目/名字)和<dd>(描述每一個項目/名字)一起使用。

    <dl>
        <dt>關(guān)注我們</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>聯(lián)系我們</dd>
    </dl>

列表總結(jié)

三、表單標簽

在 HTML中，一個完整的表單通常由表單域、表單控件(也稱為表單元素)和提示信息3個部分構(gòu)成
表單域是一個包含表單元素的區(qū)域。
在HTML標簽中，<form>標簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞
<form>會把它范圍內(nèi)的表單元素信息提交給服務器

    <form action="demo.php" method="post" name="name1" >

    </form>

表單控件：在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。
<input>是一個單標簽
type文本框、密碼框

<form action="">
    用戶名：<input type="text"> <br>
    密碼框：<input type="password">
</form>

type單選按鈕、復選框
<input type="radio" name="sex" value="sss">單選按鈕命名name才能實現(xiàn)單選
<input type="checkbox">
1.name和value是每個表單元素都有的屬性值主要給后臺人員使用
2.name表單元素的名字要求單選按鈕和復選框要有相同的name值.
3.checked="checked"規(guī)定此 input 元素首次加載時應當被選中
4.maxlength="6"規(guī)定輸入字段中的字符的最大長度。

label標簽
<label>標簽為input元素定義標注(標簽)。
<label>標簽用于綁定一個表單元素 當點擊<label> 標簽內(nèi)的文本時，瀏覽器就會自動將焦點(光標轉(zhuǎn)到或者選擇對應的表單元素上用來增加用戶體驗
核心:<label>標簽的 for 屬性應當與相關(guān)元素的id 屬性相同

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

select表單元素

<select>
    <option>山東</option>
    <option>山西</option>
    <option>陜西</option>
    <option selected="selected>北京</option>
</select>

1.<select>中至少包含一對<option>
2.在<option>中定義selected="selected"時，當前項即為默認選中項

textarea文本域元素
使用場景: 當用戶輸入內(nèi)容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽.文章來源地址http://www.zghlxwxcb.cn/news/detail-623564.html

到了這里，關(guān)于h5(html5)+css3前端筆記二的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！