1. 程式人生 > 其它 >html簡單認識

html簡單認識

建立單選框,文字域,複選框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
</head>
<body>
<fieldset>
    <legend>個人資訊</legend>
<form method="post" enctype="application/x-www-form-urlencoded">
    使用者名稱<input type="text" name="username"><br/>
    性別<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2" checked>女<br/>
    喜歡語言<input type="checkbox" name="app[]" value="asp">asp<input type="checkbox" name="app[]" value="aspx">aspx<input type="checkbox" name="app[]" value="php">php<br/>
    地區<select name="address">
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
    <option value="guangzhou">廣州</option>
</select><br/>
    簡介<br/><textarea cols="30" rows="10" name="info"></textarea><br/>
    <input type="submit" name="提交">

</form>
    </fieldset>
</body>
</html>
<!--enctype:enctype 屬性規定在傳送到伺服器之前應該如何對錶單資料進行編碼。預設地,表單資料會編碼為 "application/x-www-form-urlencoded"。就是說,在傳送到伺服器之前,所有字元都會進行編碼(空格轉換為 "+" 加號,特殊符號轉換為 ASCII HEX 值)。
checked:預設選擇
fieldset:給表單加上邊框
legend:legend 元素為 fieldset 元素定義標題(caption)。
type="radio"表示單選框
checkbox:複選框
select:select 元素可建立單選或多選選單。
<select&> 元素中的 <option> 標籤用於定義列表中的可用選項。
textarea:文字域
cols:列高
rows:行寬
-->

建立表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8-8">
    <title>table</title>
</head>
<body>
    <table border="1" cellspacing="3" cellpadding="6" ><!--cellspacing:單元格的空白,cellpadding:單元邊與內容的空白  -->
        <tr><th>#</th><th>名字</th><th>年齡</th></tr>
    <tr><td>1</td><td>劉備</td><td>18</td></tr>
        <tr><td>2</td><td>張飛</td><td>53</td></tr>
    <tr><td>3</td><td>趙雲</td><td>38</td></tr>
    <tr><td>總數</td><td colspan="2">3人</td></tr><!--colspan:左右表格合併-->
            <table border="1" cellspacing="3" cellpadding="6" ><!--cellspacing:單元格的空白,cellpadding:單元邊與內容的空白  -->
        <tr><th>#</th><th>名字</th><th>年齡</th></tr>
    <tr><td>1</td><td>劉備</td><td>18</td></tr>
        <tr><td>2</td><td>張飛</td><td>53</td></tr><!--rowspan:上下表格合併-->
    <tr><td>3</td><td>趙雲</td><td rowspan="2">23</td></tr>
    <tr><td>4</td><td >馬超</td></tr>
</table>
</body>
</html>