菜鳥筆記——html整理

1.常用标簽

<hr/> 水準線标簽	 
<!-- This is a comment -->	注釋 			//多行注釋可以設定快捷鍵

<big>		定義大号字。
<small>		定義小号字。

<i>			定義斜體字。italic
<em>		定義着重文字。emph
			// I是Italic(斜體)，而em是emphasize(強調)。
			// <em> 标簽修飾的内容都是用斜體字來顯示。
			
<b>			定義粗體文本。
<strong>	定義加重語氣。
			//<b>标簽是一個實體标簽，它所包圍的字元将被設為bold（粗體），
			//<strong>标簽是一個邏輯标簽，它的作用是加強字元的語氣，一般來說，
			  加強字元的語氣是通過将字元變為bold（粗體）來實作的。

<sub>		定義下标字。
<sup>		定義上标字。

<ins>		定義插入字。	//下劃線
<del>		定義删除字。	//删除線

<q>			定義短的引用。浏覽器通常會為 <q> 元素包圍引号。
<blockquote> 定義被引用的節。浏覽器通常會對 <blockquote> 元素進行縮進處理。

<dfn> 		定義項目或縮寫的定義。ex:<dfn title="World Health Organization">WHO</dfn>
           

2.命名錨的文法

<a name="tips">基本的注意事項 - 有用的提示</a>
1.在同一個文檔中建立指向該錨的連結：
<a href="#tips" target="_blank" rel="external nofollow" >有用的提示</a>

2.在其他頁面中建立指向該錨的連結：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips" target="_blank" rel="external nofollow" >有用的提示</a>
           

3.塊标簽、行标簽

塊标簽：塊級元素在浏覽器顯示時，通常會以新行來開始（和結束）。
例子：<h1>, <p>, <ul>, <ol>, <dl>, <table>, <div>

行标簽：内聯元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>, <span>

           

4.表格、架構、清單

/****** 表格的使用 ******/：
<table >
	<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>


/****** 架構的使用 ******/
<frameset cols="25%,75%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
</frameset>


/****** 清單的使用 ******/
<ul type="disc">	//circle、square
	 <li>蘋果</li>
	 <li>香蕉</li>
	 <li>檸檬</li>
	 <li>桔子</li>
</ul>	//無序清單

<ol start="1">
	 <li>咖啡</li>
	 <li>牛奶</li>
	 <li>茶</li>
</ol>	//有序清單

<dl>
	<dt>計算機</dt>
	<dd>用來計算的儀器 ... ...</dd>
	<dt>顯示器</dt>
	<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>	//自定義清單
           

5.響應式 Web 設計（Responsive Web Design）

（後續更新）

6.URL

http://www.w3school.com.cn/html/index.asp

遵守以下的文法規則：

scheme://host.domain:port/path/filename

解釋：

• scheme - 定義網際網路服務的類型。最常見的類型是

  1.http 超文本傳輸協定——以 http:// 開頭的普通網頁。不加密。

  2.https安全超文本傳輸協定——安全網頁。加密所有資訊交換。

  3.ftp 檔案傳輸協定——用于将檔案下載下傳或上傳至網站。

• host - 定義域主機（http 的預設主機是 www）
• domain - 定義網際網路域名，比如 w3school.com.cn
• :port - 定義主機上的端口号（http 的預設端口号是 80）
• path - 定義伺服器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
• filename - 定義文檔/資源的名稱

7.常用符号

8.表單form

<form> 元素（HTML 表單）——用于收集使用者輸入。

HTML 表單包含表單元素。表單元素指的是不同類型的 input 元素、複選框、單選按鈕、送出按鈕等等。

表單元素：
1.<input> 元素
2.<select> 元素		下拉清單	//<select name="city">
									<option value="guangzhou">廣州</option>
									<option value="shenzhen">深圳</option>
							</select>
3.<option> 元素		定義待選擇的選項
4.<textarea> 元素 	定義多行輸入字段（文本域）
5.<button> 元素		定義可點選的按鈕	//<button type="button" "alert('Hello World!')">點選我！</button>

// HTML5 增加了如下表單元素：
	<datalist>	//<datalist> 元素為 <input> 元素規定預定義選項清單。
	<keygen>
	<output>
	
<input> 元素的輸入類型：
1.<input type="text"> 定義供文本輸入的單行輸入字段
2.<input type="password"> 定義密碼字段(password 字段中的字元會被做掩碼處理（顯示為星号或實心圓)
3.<input type="submit"> 定義送出表單資料至表單處理程式的按鈕
4.<input type="radio"> 定義單選按鈕
5.<input type="checkbox"> 定義複選框（複選框允許使用者在有限數量的選項中選擇零個或多個選項）
6.<input type="button> 定義按鈕

//	HTML5 增加了多個新的輸入類型：
	<input type="color"> 用于應該包含顔色的輸入字段（根據浏覽器支援，顔色選擇器會出現輸入字段中。）
	<input type="email"> 用于應該包含電子郵件位址的輸入字段（根據浏覽器支援，能夠在被送出時自動對電子郵件位址進行驗證。）
	<input type="range" min="0" max="10"> 用于應該包含一定範圍内的值的輸入字段（根據浏覽器支援，輸入字段能夠顯示為滑塊控件。）
	<input type="tel"> 用于應該包含電話号碼的輸入字段。
	<input type="number"> 用于應該包含數字值的輸入字段。
	<input type="url"> 用于應該包含 URL 位址的輸入字段
	<input type="search"> 用于搜尋字段（搜尋字段的表現類似正常文本字段）。
		以下均有時間選擇器：
	<input type="time"> 允許使用者選擇時間（無時區） // 時分秒
	<input type="date"> 用于應該包含日期的輸入字段 // 年月日
	<input type="datetime"> 允許使用者選擇日期和時間（有時區）
	<input type="datetime-local"> 允許使用者選擇日期和時間（無時區） // 年月日時分秒
	<input type="week"> 允許使用者選擇周和年
	<input type="month"> 允許使用者選擇月份和年份
	
<input> 元素的輸入屬性：
	value 屬性規定輸入字段的初始值
	readonly 屬性規定輸入字段為隻讀（不能修改）
	disabled 屬性規定輸入字段是禁用的，被禁用的元素是不可用和不可點選的，被禁用的元素不會被送出
	size 屬性規定輸入字段的尺寸（以字元計）
	autocomplete 屬性規定表單或輸入字段是否應該自動完成。當自動完成開啟，浏覽器會基于使用者之前的輸入值自動填寫值。autocomplete="on/off"
	autofocus 屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。
	required 屬性如果設定，則規定在送出表單之前必須填寫輸入字段。required 屬性适用于以下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
	
	
           

9.視訊、音頻

最好的 HTML 解決方法
HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>