列表
- 列表可分為有序列表、無序列表和定義列表
- 有序列表
<ol>
<ol type="列表類型" start="起始編號"> <li>...</li> </ol>
type的屬性值：
1：數(shù)字（默認(rèn)）
a：小寫字母
A：大些字母
i：小寫羅馬數(shù)字
l：大寫羅馬數(shù)字
- 無序列表
<ul>
<ul type="列表類型"> <li>...</li> </ul>
type的屬性值：
disc：實心圓（默認(rèn)）
circle：空心圓
square：實心矩形
- 定義列表
<dl>
<dl> <dt>一個術(shù)語</dt> <dd>這個術(shù)語的定義</dd> </dl>
dl：定義一個定義列表
dt：定義了定義列表中的一個術(shù)語
dd：對定義列表中的術(shù)語提供定義
- 列表嵌套
<ul>
<li>列表
<ul>
<li>有序列表</li>
<li>無序列表</li>
<li>定義列表</li>
</ul>
</li>
</ul>
表格
- 表格用來組織結(jié)構(gòu)化的信息腻扇，由許多單元格組成螃诅，表格的數(shù)據(jù)保存在單元格中婶恼。表格是由<table>來定義的巩梢，<caption>是表頭，<tr>是表格的行，<td>是表格的列。
- 表格常用的屬性：
- width：設(shè)置表格的寬
- height：設(shè)置表格的高
- align：設(shè)置表格的對齊方式
- border：設(shè)置表格的邊框?qū)挾?/li>
- cellpadding：設(shè)置內(nèi)邊距
- cellspacing:設(shè)置外邊距
- 行分組
- 表格可以分為三個部分：表頭、表主體和表尾胀蛮。
-
表頭：
<thead></thead> -
表主體：
<tbody></tbody> -
表尾：
<tfoot></tfoot> - 如九宮格就可以將第一行作為表頭，第二行作為表主體糯钙，第三行作為表尾粪狼，但是在瀏覽器中顯示的不會變化。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜歡浪">
<title>Document</title>
</head>
<body>
<table align="center" border="1" width="300"
height="300px" cellspacing="10"
cellpadding="10">
<caption>九宮格</caption>
<thead>
<tr align="center" valign="bottom">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr align="center" valign="bottom">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
</body>
</html>
九宮格.png
- 不規(guī)則表格
- 跨行：colspan
-
跨列：rowspan
下面是一個跨行跨列的表格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜歡浪">
<title>Document</title>
</head>
<body>
<table border="1" bordercolor="red" width="300" height="300" align="center" cellspacing="0" cellpadding="20" >
<tr height="80" align="center" valign="top">
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
跨行跨列表格.png
-
嵌套表格
嵌套表格是在表格的一個單元格中再放置一個表格任岸，就是在td中再包含一個table元素再榄。
<!DOCTYPE html>
<html>
<head>
<title>嵌套表格</title>
<meta charset="UTF-8">
<meta name="Author" content="就是喜歡浪">
</head>
<body>
<table align="center" border="1" width="100"
height="50px" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td><table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
嵌套表格.png
表單
- 表單的作用
- 搜集不同類型的用戶輸入，通過form創(chuàng)建表單享潜，在form中添加其他表單可以包含的控件元素困鸥。
- 用于顯示信息，并提交到服務(wù)器剑按。
- 表單元素
-
form定義表單
主要屬性：- method：表單數(shù)據(jù)提交的方式疾就，取值為get或post。get是將數(shù)據(jù)放在url中艺蝴，并且對數(shù)據(jù)的大小有限制猬腰，不安全。post是不要將數(shù)據(jù)顯示在url中猜敢，而且傳輸?shù)臄?shù)據(jù)一般無限制姑荷，安全。
- action：指定將數(shù)據(jù)提交到哪里缩擂。
- name：表單名稱鼠冕。
-
部分表單控件元素
- 表單可以包含許多不同的表單控件，表單控件元素用來讓訪問者輸入信息
-
input是最重要的表單元素胯盯，<input>有很多形態(tài)懈费，根據(jù)不同的type屬性有不同的作用。
- type：text（文本輸入）博脑、password（密碼）憎乙、radio（單選輸入）薄坏、checkbox（多選輸入）。PS：設(shè)置單選時一定要將name設(shè)置一致
- name：提交表單數(shù)據(jù)必須要有name屬性
- required：設(shè)置表單控件必須填寫
- readonly：設(shè)置內(nèi)容只讀
- value：設(shè)置默認(rèn)值
- checked：設(shè)置radio和checkbox的默認(rèn)值
- maxlength：設(shè)置最大字符數(shù)
-
Select下拉列表
- selected：默認(rèn)選中項
- size：讓用戶看到幾個選項
- option：列表項
-
textrara文本域
- cols：設(shè)置寬寨闹，用字符數(shù)設(shè)置
- rows：設(shè)置高
- label實現(xiàn)點擊選項按鈕和點擊文本一樣的效果，使用for來綁定另一個元素的id君账。
-
按鈕
- 提交按鈕
```<input type="submit"/>`
2. 重置按鈕
<input type="reset"/>
3. 普通按鈕
<input type="button"/>與JS搭配使用
<button></button>
- 隱藏域
<input type="hidden"/>
- 下面是一個表格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜歡浪">
<title>Document</title>
</head>
<body>
<h1>修改個人信息</h1>
<form name="form1" method="post" action="">
<table border="1" width="300" height="400" cellspacing="0">
<tr>
<td width="100">姓名：</td>
<td>
<input name="user" type="text" required />
</td>
</tr>
<tr>
<td width="100">性別：</td>
<td>
<input type="radio" name="sex" value="man" checked/>男
<input type="radio" name="sex" value="women"/>女
</td>
</tr>
<tr>
<td width="100">愛好：</td>
<td>
<input name="like" type="checkbox" value="game" checked/>游戲
<input name="like" type="checkbox" value="siwim"/>游泳
<input name="like" type="checkbox" value="boll"/>球
<input name="like" type="checkbox" value="huaban"/>滑板
</td>
</tr>
<tr>
<td width="100">學(xué)歷：</td>
<td>
<select name="xueli">
<option value="ben">本科</option>
<option value="zhuan">尫北ぃ科</option>
<option value="other" selected>其他</option>
</select>
</td>
</tr>
<tr>
<td width="100">意向工作城市：</td>
<td>
<select name="city" size="4">
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>南昌</option>
</select>
</td>
</tr>
<tr>
<td width="100">個人描述；</td>
<td>
<textarea name="description" cols="50" rows="8">請輸入個人描述
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ispone" type="checkbox" id="isopen"/>
<label for="isopen">請不要公開我的信息</label>
<input name="serect" type="hidden" value="請不要公開我的信息"/><br/>
<input type="file" value="myphone"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="OK"/>
<input type="reset" value="重填"/></td>
</tr>
</table>
</form>
</body>
</html>
表單.png
