基礎標籤
<h1></h1>:標題
<p></p> 段落
<hr>水平線
<br>換行
<span></span>分區，可多標籤一行
<div></div>分區，每個標籤一行
文本格式化標籤
<b></b> <strong></strong>加粗
<i></i> <em></em>斜體
<s></s> <del></del>刪除
<u></u> <ins></ins 下劃線
圖像標籤
<img src="圖片url">
<img/>屬性
alt圖片不能顯示時的替代文本title鼠標懸停時顯示height圖像高度width圖像寬度border圖像邊框寬度
鏈接標籤
<a href="URL" target ="打開方式"></a>
<a>屬性
target _blank 新窗口打開
拓展
<base> <base target="_blank">
<pre></pre> 預格式化文本
保留空格與換行
特殊字符
空字符
註冊商標 ®
< <
> >
& &
表格
展示表格式數據
<body>
<!-- 表格標籤-->
<table border="1">
<!--表格標題標籤-->
<caption>表格標題</caption>
<!--行標籤-->
<tr>
<!--表頭單元格,文字居中且加粗-->
<th></th>
</tr>
<tr>
<!--單元格標籤-->
<td></td>
</tr>
</table>
</body>
表格屬性
border 邊框
width 寬度
height 高度
align 設置表格在網頁中水平對齊方式
leftcenterrightcellspacing單元格與單元格之間距離cellpadding單元格內容與邊框的距離
合併單元格
跨行合併
rowspan="合併單元格的個數 "
跨列合併
colspan="合併單元格個數"
合併三部曲
- 先確認跨行還是跨列
- 根據 先上 後下 先左 後右的原則找到目標單元格 ，然後寫上合併方式 和合並數量
- 刪除多餘的單元格
表格結構劃分
<thead></thead> 內部必須擁有<tr>標籤
<tbody></tbody>
<tfoot></tfoot>
列表標籤
無序列表
<ul>
<!--ul內只能嵌套li-->
<li>列表項1 </li>
<li>列表項2</li>
</ul>
效果：
- 列表項1
- 列表項2
有序列表
<ol>
<li>列表項</li>
<li>列表項</li>
</ol>
效果：
- 列表項
- 列表項
自定義列表
<dl>
<dt>名詞</dt>
<dd>名詞的解釋1</dd>
<dd>名詞的解釋2</dd>
<dt>名詞2</dt>
<dd>名詞2的解釋2<dd>
</dl>
效果：
- 名詞
- 名詞的解釋1
- 名詞的解釋2
- 名詞2
- 名詞2的解釋2
表單
表單標籤
<input/>控件
- 語法
<input type="屬性值"/> - 屬性值
typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox複選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕file文件域
name控件的名稱valueinput控件中的默認文本值sizeinput控件在頁面中的顯示寬度checked表示默認選中狀態
<body>
用戶名： <input type="text" value="請輸入用戶名" name="username"/> <br/>
密碼： <input type="password" name="password" /><br/>
性別：
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex"/>
未知<input type="radio" name="sex" checked="checked"/> <br/>
愛好：
睡覺<input type="checkbox" name="nobby" checked="checked"/>
游泳<input type="checkbox" name="nobby"/>
遊戲<input type="checkbox" name="nobby"/>
看書<input type="checkbox" name="nobby"/>
<br/>
<input type="button" value="普通按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="reset" value="重置按鈕"/>
<!--圖片提交按鈕-->
<input type="image" src="圖片地址" /><br/>
<!--文件域-->
上傳頭像: <input type="file"/>
</body>
<label></label>標籤
作用: 用於綁定一個表單元素，當點擊label標籤時，被綁定的表單元素會獲得輸入焦點
綁定元素:
- 直接包含
<label>用戶名：<input type="text"/></label>
- 通過for 和 id
<label for="username">用戶名：</label> <input type="text" id="username"/>
<textarea></textarea>文本域
可顯示多行文本
效果：
可顯示多行文本1
可顯示多行文本2
可顯示多行文本3
select下拉列表
<select>
<option>--請選擇--</option>
<!--添加默認選中項-->
<option selected="selected">選項１</option>
<option>選項２</option>
</select>
<form>表單域
語法：
<body>
<form action="" method="" name="" >
</form>
<body/>
屬性：
actionurl地址method表單提交方式name指定表單名稱
示例：
<body>
<form action="" method="">
用戶名： <input type="text" value="請輸入用戶名" name="username"/> <br/>
密碼： <input type="password" name="password" /><br/>
性別：
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex"/>
未知<input type="radio" name="sex" checked="checked"/> <br/>
愛好：
睡覺<input type="checkbox" name="nobby" checked="checked"/>
游泳<input type="checkbox" name="nobby"/>
遊戲<input type="checkbox" name="nobby"/>
看書<input type="checkbox" name="nobby"/>
<br/>
<input type="button" value="普通按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="reset" value="重置按鈕"/>
<!--圖片提交按鈕-->
<input type="image" src="圖片地址" /><br/>
<!--文件域-->
上傳頭像: <input type="file"/>
</form>
<body/>
相關推薦：
