HTML零基礎學習筆記
本文記錄了在學習HTML中的一些學習筆記，使用的開發工具是notepad++和記事本，在學習的過程中一定要動手去練哦~
1.基本網頁結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.標題與注釋
<hn></hn> n從1到6，逐漸變小
注釋
<!--這里是注釋-->
3.水平線、換行和段落標簽
水平線<hr/>
換行<br/>
<p alight="left center right justify"></p>
4.預格式標簽
預格式標簽<pre></pre>
5.字體
<font></font>
<font color="red" size="1~7" face="字體幼圓"></font>
修飾標簽
加粗 <b></b> <strong></strong>
傾斜 <i></i> <em></em>
下標 <sub></sub> <sup></sup>
顯示特殊符號
http://www.w3school.com.cn/html/html_entities.asp
空格：
6.圖片
<img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx 90%" height = "xxxpx 10%" alt="解釋" />
如果使用百分比的時候，是相對於父容器大小的百分比
alt的作用：http://www.w3school.com.cn/tags/att_img_alt.asp（學習前端基礎非常好的一個網站哦）
alt利於搜索引擎的搜索
相對路徑和絕對路徑
path =
當前路徑./xx.jpg
上一級路徑../xx.jpg
上上一級路徑../../xx.jpg (相對路徑就是從當前路徑尋找，當前路徑只的是當前html所在路徑)
下一級路徑 xx/xx.jpg
path="C:\Users\souke\Desktop\×××\××.jpg"
一般在項目中都使用相對路徑
7.列表
無序列表
<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
自定義列表
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>香蕉</dd>
<dt>運動</dt>
<dd>打籃球</dd>
<dd>踢足球</dd>
</dl>
可以通過type設置圓角等樣式
8.超鏈接
超級鏈接
<a href="http://www.baidu.com" target="">百度</a>
<a href="web02.html">百度</a>
可以是本機頁面，也可以是任意的網頁地址(內部鏈接或者外部鏈接)
空鏈接href="#"
超級鏈接可以給文字或者圖片添加target
_self _blank _top _parenttitle屬性手放在鏈接上的時候顯示的提示文字name屬性定義錨名稱
跳轉到錨點
（可以使用某個文字或者某個圖片作為錨點，也可以定義一個空的錨點）
href="#錨名"
跳轉到別的頁面的錨點位置
href="xxx.html#錨名"
郵件鏈接
<a href="mailto:admin@sikiedu.com">給我發</a>
文件下載
<a href="xxx.zip">下載</a> 瀏覽器會根據鏈接類型，決定是否下載。
9.表格
表格 tr:table row td table data
<table border="1px" width="34px xx%" height="12px" align="center" bgcolor="red" cellspacing="3px" cellpadding="10px">
<tr height="23px" bgcolor="#00ee90">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
table上的屬性 border width height align bgcolor cellspacing cellpadding
tr上的屬性 align水平對齊方式 valign垂直對齊方式 bgcolor width height
td上的屬性 height bgcolor
表格合並操作
合並多列
<td colspan="2">row 1, cell 1</td>
合並多行
<td rowspan="2">row 1, cell 1</td>
多列多行合並
<td colspan="2" rowspan="2">row 1, cell 1</td>
單元格里面可以嵌套子表格
被嵌套的表格是一個完整的表格
要放在td，某個單元格里面
表格的表頭
效果：內容居中，加粗顯示
注意：可以有多個表頭
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的標題
<table border="6">
<caption>我的標題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
如何查看網頁源代碼
F12調試
10.表單
表單的作用就是把用戶輸入的信息，發送給服務器處理。
表單標簽
<form></form>
在表單標簽里面可以包含各種其他標簽
文本框，文本域，列表，單選框，多選框，按鈕......
上述一個或者多個來組成一個表單
input 輸入
textarea 文本域
select 下拉列表
option 下拉列表的項
button 按鈕
......
input 可以做文本輸入框，按鈕，文件，單選按鈕，復選按鈕
<input type="" name="" />
text 文本
password 密碼
file 文件
checkbox 多選按鈕
radio 單選按鈕
button 按鈕
submit 提交按鈕
reset 重置按鈕
hidden 隱藏
image 圖片
<input type="text" /> text和password
其他屬性
name 名字
maxlength 最大字符長度
value 默認值
placeholder 提示信息
單選框
<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>
復選框
<input type="checkbox" name="hobby" value="reading" checked />
按鈕(普通按鈕，提交按鈕，重置按鈕)
<input type="button" name="" value="普通按鈕" />
<input type="submit" name="" value="" />
<input type="reset" name="" value="" />
圖片提交按鈕按鈕
<input type="image" name="image_submit" src="xxx.jpg" />
隱藏域
<input type="hidden" name="" value=""/>
下拉列表
<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
例子：月份選擇，城市選擇
文本域
<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>
form表單屬性
action 提交路徑
method get/post傳送數據的方式
get直接把要傳輸的數據放在URL里面，適合傳輸少量數據，一般用於請求數據，明文傳輸
post把數據封裝到http請求里面，適合傳輸大量數據和重要數據傳輸（登錄，注冊，發表文章）
name 表單名字
target _self _blank
提交一個表單，相當於點擊了一個超鏈接，打開了一個新的網頁，不過通過表單的方式請求
網頁的時候，這個請求里面是帶有數據的。