微信小程序開發之路
第一部分——HTML
- HTML是超文本標記語言的縮寫,它不是一種編程語言，它是一種標記語言
- 瀏覽器是解釋和執行HTML的工具，標籤用來描述網頁，因此網頁不會顯示標籤
<meta>標籤
- 描述文檔類型和字符編碼 ,比如其中的charset，通常設置爲UTF-8，防止瀏覽器載入時亂碼
- 提供網頁檢索的依據 ，比如name屬性中定義的關鍵詞就是搜索引擎分類檢索的依據
html標籤分類
- 塊級標籤：顯示爲塊狀，前後隔一行
- 行級標籤：顯示爲行
常用標籤
- 可以用<title>name</title>定義頁面名稱
- 標題標籤：<h1>標題</h1>,提供h1到h6的標題風格
- 段落標籤：<p>段落</p>,前後換行，爲一個自然段
- 分割線標籤： <hr/>，提供一行分割線，不成對
- 有序列表： 列表元素帶數字序號
<ol>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ol>
- 無序列表： 列表元素用原點分佈
<ul>
<li>coffe</li>
<li>tea</li>
<li>water</li>
</ul>
//簡單嵌套
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li> 茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
- 定義描述標籤： 形式爲給出詞語及解釋
<dl>
<dt>title</dt>
<dd>define</dd>
</dl>
- 表格標籤： 其中border屬性表示邊框尺寸，tr聲明行，td聲明列，有幾對就是有幾行，每行裏面有幾列
<table border="1">
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
colspan 是跨列數；rowspan是跨行數;th標籤是表頭
- 表單標籤： form爲用戶創建輸入表單，
<form >
name:
<input type="text" name="inch">
<br/>
sex:
<input type="checkbox" name="insex">
</form>
input類型有很多種，包括submit和reset，分別是提交和重置鍵，對於動態鏈接
<form action="www.xxx" method="get/post"></form>
其中get方法將數據寫在地址欄上，獲取方便但不安全
post方法將數據放到內存中，更安全
value屬性是顯示在頁面的內容
輸入框的size是顯示的長度，maxlength是允許輸入的最大長度
radio作爲單選框，兩個name要相同，而checkbox是複選框，各名字不能相同
-
文件域，form的type是file，結合submit上傳
-
下拉菜單：
<select name="xx" style="width: 30%">
<option value="0">No1</option>
<option value="0">No2</option>
<option value="0">No3</option>
<option value="0">©</option>
</select>
- 圖像標籤與屬性 ：圖片地址有相對地址和絕對地址兩類，相對地址主要有相對文件路徑等，
絕對地址比如超鏈接等，對於不同的圖片類型寫入的格式是一樣的，因爲本身帶有後綴名，瀏覽器也能夠呈現出該有的狀態
在body中也可以設定background屬性，指定網頁的背景圖，圖片過小會重複
通過align屬性可以設定佈局，相對於文字的位置等，默認值是bottom ，設置爲left/right屬性可以指定浮動至段落的左側或右側
指定的alt屬性，如果圖片正常加載，鼠標懸浮於圖片上時會顯示alt文本，如果圖片無法加載，會替換爲alt文本
<img src="圖片地址" alt="圖像的代替文本"/>
<img src="/xx/xx/xx.jpg" />
<img src="http://www.xxxxxx/xxx.gif"/>
<img src="xxx" align="佈局值bottom/middle/top"/>
相對地址不安全，容易被攻擊
-
強調標籤：<span>text</span>
-
換行標籤： <br/>此標籤沒有空行，兩個p標籤之間會空行
-
範圍標籤：div標籤用來劃分塊
-
鏈接標籤 ： a標籤，也叫做anchor錨點元素，href屬性是目的的超鏈接，通過對href值的設定完成不同的跳轉需要
<a href="http://www.baidu.com">baidu</a>
//圖片超鏈接
<a href="xxx">
<img src="/xxx/xxx"/>
</a>
//連接到頁面其他位置
<a href="#名字">to'name'</a>
<p>無關段落</p>
<h3><a name="名字">我是標題3，也是要跳轉的地方</a> </h3>
//或者使用id屬性，作用和name相同
<a href="#name">to 'name'</a>
<p>wuguan </p>
<p><a id="name">to here</a> </p>
//在新頁面打開鏈接，只需將target設置爲_blank
<a href="xxxxxx" target="_blank">新頁面打開</a>
實際開發中常用的四種塊狀結構
- div-ul(ol)-li: 用於分類導航或菜單
- div-dl-dt-dd: 用於圖文混合編輯
- table-tr-td: 用於行列表
- form-table-tr-td: 用於佈局表單
萬維網制定規範標準
- 標籤名屬性名必須小寫
- 標籤必須關閉
- 屬性值必須用引號
- 標籤必須正確嵌套
- 必須添加文檔類型聲明
特殊符號
- 空格：  
- 大於號： >
- 小於號：<
- 引號： "
- 版權號： ©
綜合演示
<html>
<head>
<meta charset="UTF-8">
<title>我的頁面</title>
<style type="text/css">
h1 {
color: aqua;
}
p {
color: blue;
}
</style>
</head>
<body>
<a href="#hehe">跳轉到呵呵</a>
<h1>MYTITLE</h1>
<h2>secondTitle</h2>
<h3>thirdtitle</h3>
<dl>
<dt><a name="hehe">呵呵</a></dt>
<dd>define</dd>
</dl>
<h4>4thtitle</h4>
<h5>5thtitle</h5>
<h6>6thtitle min</h6>
<hr/>
<p>this is a paragraph</p>
<p>this is anoteher paragraph</p>
<p>+ HTML是超文本標記語言的縮寫,它不是 <br/>
一種編程語言，它是一種標記語言
+ 瀏覽器是解釋和執行HTML的工具， <br/>
標籤用來描述網頁，因此網頁不會顯示標籤
<br/>
#### meta>標籤
+ 描述文檔類型和 <br/>
字符編碼
+ 提供網頁檢索 <br/>
的依據
<br/>
#### html <br/>
標籤分類
<br/>
+ 塊級標籤：顯示爲 <br/>
塊狀，前後隔一行
+ 行級標籤：顯示爲行
<br/>
#### 常用標籤
table,form,div,dl
+ 實際開發中常用的 <br/>
四種塊狀結構
<br/>
+ 圖像標籤與屬性 ：圖片地址有相對 <br/>
地址和絕對地址兩類，相對地址主要有相對文件路徑等，
絕對地址比如超鏈接等，對於不同的圖 <br/>
片類型寫入的格式是一樣的，因爲本身帶有後綴名，瀏覽器也能夠呈現出該有的狀態
<br/>
在body中也可以設定background屬性，指定網頁的背景圖，圖片過小會重複
通過align屬性可以設定佈局，相對於文 <br/>
字的位置等，默認值是bottom ，設置爲left/right屬性可以指定浮動至段落的左側或右側
指定的alt屬性，如果圖片正常加載，鼠 <br/>
標懸浮於圖片上時會顯示alt文本，如果圖片無法加載，會替換爲alt文本
```html
<br/>
+ 標題標籤：\1>標題\1>,提供h1到h6的標題風格
+ 段落標籤：\<>段落/>,前後換行，爲一個自然段
+ 分割線標籤： \/>，提供一行分</p>
<hr/>
<ol>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ol>
<ul>
<li>coffe</li>
<li>tea</li>
<li>water</li>
<ol>
<li>www</li>
<li>eeee</li>
</ol>
</ul>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<a href="http://www.baidu.com">baidu</a>
<form>
name:
<input type="text" name="inch">
<br/>
sex:
<input type="checkbox" name="insex">
</form>
<div>
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航3</li>
</ul>
</div>
<form>
<table border="2" bgcolor="#7fffd4">
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
</form>
<form style="background-color: aquamarine">
<input type="text"><br/>
<input type="date"><br/>
<input type="text"><br/>
<input type="checkbox" checked="checked"><br/>
<input name="radio" type="radio" value="boy">nan
<input name="radio" type="radio" value="girl">nv<br/>
<input type="submit" value="tijiao"><br/>
<input type="reset" value="chongzhi"><br/>
<input type="file">
</form>
<select name="xx" style="width: 30%">
<option value="0">No1</option>
<option value="0">No2</option>
<option value="0">No3</option>
<option value="0">©</option>
</select>
</body>
</html>