HTML學習第二天by SixInNight

插入圖像

<img src="路徑" width="200">

• src：
  • 絕對路徑：src="D:\day02\imgs\02.JPG"
  • 相對路徑：
    • 當前目錄：直接寫引用文件名，如 src="02.JPG"
    • 上級目錄：../文件名，如src="../imgs/02.JPG"
    • 下級目錄：文件夾名/文件名，如src="imgs/02.JPG"
• alt：當圖片不能正常顯示時顯示的文本
• width/height：設置寬高，如果只設置寬度，高度等比變化

超鏈接

<a href="鏈接URL">文本</a>

• href：如 小編的空間

	<p>
		<a href="https://user.qzone.qq.com/1278824986">
										小編的空間</a>
	</p>

• target：
  • _blank：規定打開方式爲在新頁面打開
  • _self：規定打開方式爲在當前頁面打開，如小編主頁

	<p>
		<a href="https://me.csdn.net/hongwangdb" 
							target="_self">小編主頁</a>
	</p>

表格

• border：邊框粗細
• cellpadding：單元格邊框與內容間距
• cellspacing：單元格間距
• 代碼樣例：

<table border="2" width="25%">
	<tr>
		<td>1.1</td><td style="color:red">1.2</td><th>1.3</th>
	</tr>
	<tr>
		<td colspan="2">跨列了奧</td><td rowspan="2" style="color:red">跨行了哦</td>
	</tr>
	<tr>
		<td>3.1</td><td>3.2</td>
	</tr>
	<tr>
		<td colspan="3" align="center">又跨列了奧</td>
	</tr>
</table>

• 效果預覽：

表單

• 代碼樣例：

<form id="f1" name="form1" method="post" action="https://user.qzone.qq.com/1278824986">
	   用戶名:<input type="text" name="username" 
	   			 	value="SixInNight" readonly="readonly" 
	   				placeholder="請輸入用戶名"><br><br>
	   密碼:<input type="password" name="password" 
	   			  placeholder="請輸入密碼" maxlength="11"><br><br>
	   			  
	   <!-- checked默認選中 -->
	   性別:<input type="radio" name="sex" value="M" 
	   			checked="checked" id="s1"><label for="s1">男</label>
			<input type="radio" name="sex" value="F" 
				id="s2">
					<label for="s2">女</label><br>
	   愛好:<input type="checkbox" name="hobby" value="fj" id="b1">
	   			<label for="b1">番劇</label>
			<input type="checkbox" name="hobby" value="nh" id="b2">
					<label for="b2">女孩</label>
			<input type="checkbox" name="hobby" value="fd" 
				checked="checked" id="b3">
					<label for="b3">發呆</label><br>
	   生日:<input type="date" name="birthday"><br><br>
	   照片:<input type="file" name="pic"><br><br>
	   住址:<select name="city">
				<option>請選擇</option>
		   		<option value="bj">北京</option>
		   		<option value="sh" selected="selected">上海</option>
		   		<option value="sc">四川</option>
	      	</select><br><br>
	   自我介紹:<textarea name="intro" rows="3" cols="20" 
	   				placeholder="來嘮十塊錢的..."></textarea><br><br>

	   <!-- 提交按鈕 -->
	   <input type="submit" value="註冊">
	   <input type="reset">
	   <input type="button" value="按着玩吧">
	</form>

• 效果預覽：