前言Sublime3快捷方式
生成html骨架:!+TAB 或者 html:5 +TAB
html:xt +TAB 含版本資訊的骨架
生成标簽:标簽名 +TAB 如 div +TAB
生成多個标簽:div *10 +TAB
子屬關系ul >li*2 +TAB
輸出結果:<ul>
<li></li>
<li></li>
</ul>
兄弟關系:div+p +TAB
<div></div>
<p></p>
類調用.red +TAB
<div class="red"></div>
空格:
<!DOCTYPE html> 文檔類型
<meta chartset=”UTF-8”> 字元集
排版标簽
頭部、标題标簽:<h></h>
段落标簽:<p></p>
水準線标簽:<hr />
換行标簽:<br />
布局标簽:<div></div> <span></span>
文本格式化标簽:
粗體:<b></b> <strong></strong>
斜體:<i></i> <em></em>
加删除線:<s></s> <del></del>
加下劃線:<u></u> <ins></ins>
圖像标簽:<img src=”圖檔url”
alt=”文本#圖檔未顯示替換文本”
title=”文本#滑鼠懸停時顯示的内容”
width=“像素#設定圖像高度”
height=“像素#設定圖像的高度”
border=“數字#設定圖像邊框的寬度” />
連結标簽:<a href=”跳轉網頁url 或者#”
target=“目标視窗的呈現方式(_blank,_self)”>
文本或者圖像</a>
錨點定位:目錄跳轉
<a href=“#live”>我是目錄</a>
..........................
<h id=“live”>跳轉目錄對應标題</h>
Base标簽: 設定整體連結打開狀态
<base / target=”_blank”>
注釋标簽:<!--注釋内容-->
特殊字元标簽:
清單标簽
無序清單:
<ul>
<li>清單項1</li>
<li>清單項2</li>
<li>清單項3</li>
</ul>
有序清單:
<ol>
<li>清單項1</li>
<li>清單項2</li>
<li>清單項3</li>
</ol>
自定義清單:
<dl>
<dt>實數</dt>
<dd>小數</dd>
<dd>整數</dd>
<dt>虛數</dt>
<dd>複數</dd>
</dl>
表單标簽:<input />
單行文本輸入框:<input type=”text” />
密碼輸入框:<input type=”password” maxlength=”6” />
單選按鈕:<input type=”radio” name=”sex” checked=”checked” />男
//name表示同一類型(sex)單選,checked=”checked”表示預設(男)
複選框:<input type=”checkbox” />
按鈕組:
普通按鈕:<input type=”button” value=“搜尋”/>
送出按鈕:<input type=”submit” value=”送出表單” />
重置按鈕:<input type=”reset” value=”重置表單” />
圖像按鈕:<input type=”image” src=”img.png” />
檔案按鈕(檔案上傳):<input type=”file” />
lable 标簽
<lable > 使用者名 <input type=”text” value=”點使用者名進入輸入搜尋框” /></lable>
<lable for=“first”> 使用者名 <input type=”text” value=”點使用者名也可以進入輸入搜尋框” id=“first”/></lable>
//如果lable裡面有多個表單,想定位到另外幾個,可以通過for id 的格式來進行
文本域
<textarea cols=“每行字數” rows=“顯示的行數”>請輸入留言</textarea>
<p>留言闆<textarea name="content"></textarea></p>
下拉菜單
<select>
<option>北京</option>
<option>上海</option>
<option selected=“selected”>重慶</option>
//selected表示預設選中(重慶)
</select>
表單域
<form action=”xxx.php” method=”post” name=”user_information”>
</form>