Web前端開發，自學筆記整理
HTML基礎
1.基礎環境
- Google Chrome
- HBuilder
- Photoshop
2.HTML基礎架構
<!--HTML註釋，快捷方式 command+/ （Windows：control+/）-->
<!--document type html-->
<!DOCTYPE html>
<!--網頁正式內容-->
<html>
<!--頭部-->
<head>
<!--編碼類型-->
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<!--身體-->
<body>
Hello world!
</body>
</html>3.字符集（編碼類型）
- UTF-8: 國際通用字庫
- GB2312(GBK): 中國字庫
- UTF-8(一個漢字3個字節)
- GB2312(一個漢字2個字節)
- 計算機不能之間存儲漢字，都是存儲編碼
4.常用標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標籤</title>
</head>
<body>
<!--1.標題標籤-->
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
<!--2.段落標籤-->
<h2>春曉</h2>
<p>春眠不覺曉，</p>
<p>處處聞啼鳥。</p>
<p>夜來風雨聲，</p>
<p>花落知多少。</p>
<!--3.加粗標籤-->
<p>對比文字</p>
<strong>測試</strong>
<b>測試</b>
<!--4.傾斜標籤-->
<i>谷歌</i>
<em>www.google.com</em>
<!--5.下劃線標籤-->
<p> God help <u>those</u> who help <u>themselves</u>. </p>
<!--6.上標註-->
<p>
2<sup>3</sup>=8
</p>
<!--7.下標註-->
<p>
H<sub>2</sub>O 水
</p>
<!--8.無序列表-->
<ul>
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
<!--9.有序列表 屬性名=屬性值
type="a" //序號類型 1(默認),a,A,i,I
start="3"//序號起始位置-->
<ol>
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<ol type="a">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<ol type="a" start="3">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<!--10.自定義列表-->
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
</dl>
<!--11.圖片
src="url"網絡鏈接
或src="path"本地路徑
-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524137188339&di=9bfcd71b9d04cd4db12359ce28a1aaa8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014263554468cc0000019ae9262bb8.jpg%402o.jpg" />
<img src="dishu1.png" />
<br />
<!--12.超鏈接
href="url"網絡鏈接
或href="path"本地路徑
target="打開方式" //_self當前窗口（默認），_blank新建窗口
-->
<a href="https:www.baidu.com">百度一下</a>
<br />
<a href="01-test.html" target="_blank">HTML基礎架構</a>
<br />
<!--特殊字符-->
空格 <br />強制換行
<p>你 可以不聰明,<br />但不可以不努力。</p>
<hr /> 分割線
<p>
© 版權標籤
</p>
<p>
<前端開發> <=左尖括號；右尖括號=>
</p>
</body>
</html>5.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
3行4列: 每行4個單元格（有三行）
tr: 行
td: 單元格
width: 表格寬度（像素px，可以省略不寫）
height: 表格高度
border: 表格邊框
cellspacing: 單元格間距
cellpadding: 調整內容的位置
align: 水平對齊方式（left，center，right）
加到table裏表示整個表格水平方向位置
加到tr裏表示整一行的對齊方式
加到td裏表示對應單元格的對齊方式
valign: 垂直方向（只能用於tr/td，top/middle/bottom）
bordercolor: 邊框顏色
colspan: 合併行單元格
rowspan: 合併列單元格
-->
<table width="300" height="200" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="blue">
<!--第一行-->
<tr align="center">
<td>1</td>
<td colspan="2" align="center">2</td> <!--合併行單元格 colspan="" 合併的單元格數量-->
<!--<td>3</td>-->
<td rowspan="2">4</td> <!--合併列單元格 rowspan="" 合併的單元格數量-->
</tr>
<!--第二行-->
<tr valign="bottom">
<td align="center">1</td>
<td>2</td>
<td>3</td>
<!--<td>4</td>-->
</tr>
<!--第三行-->
<tr>
<td valign="bottom" colspan="3">1</td>
<!--<td>2</td>
<td>3</td>-->
<td>4</td>
</tr>
</table>
</body>
</html>6.表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單</title>
</head>
<body>
<!--
表單域：form
name: 表單域名稱
method: 請求方式 get/post
action: 提交URL
-->
<form name="test" method="get" action="https:www.baidu.com">
<!--
1.文本域
type: 類型
placeholder: 提示文本
value: 輸入框中的初始內容
-->
<p>
賬號: <input type="text" placeholder="手機號/QQ號" value="123456" />
</p>
<!--
2.密碼輸入框
type: type="password"
-->
<p>
密碼: <input type="password" placeholder="6位密碼" />
</p>
<!--
3.單選框
type="radio"
同一組中的只能選擇一個
name: 控制哪一組
checked: 默認選中的
-->
<p>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>中性
</p>
<!--
4.多選框
type="checkbox"
name: 控制哪一組
checked: 默認選中的
-->
<p>
<input type="checkbox" name="like" />睡覺
<input type="checkbox" name="like" checked="checked" />吃飯
<input type="checkbox" name="like" />打豆豆
</p>
<!--
5.下拉菜單
-->
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
<!--
6.按鈕
value: 按鈕內容
-->
<p>
<input type="button" value="按鈕1"/>
<input type="button" value="按鈕2"/>
</p>
<!--
7.提交按鈕
提交即提交到表單域action中填寫的地址
-->
<p>
<input type="submit" value="註冊" />
</p>
<!--
8.重置按鈕
重置該按鈕對應的表單域中
-->
<p>
<input type="reset" value="重置" />
</p>
</form>
</body>
</html>