菜鳥筆記——html整理
阿新 • • 發佈：2019-04-19
表單 端口 asp ali 上傳 obj 多行輸入 orm radio 7.常用符號
菜鳥筆記——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">有用的提示</a>
2.在其他頁面中創建指向該錨的鏈接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
3.塊標簽、行標簽
塊標簽：塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。 例子：<h1>, <p>, <ul>, <ol>, <dl>, <table>, <div> 行標簽：內聯元素在顯示時通常不會以新行開始。 例子：<b>, <td>, <a>, <img>, <span>
4.表格、框架、列表
/****** 表格的使用 ******/： <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> /****** 框架的使用 ******/ <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>
/* 文章內容大部分摘自w3s 如侵刪 */
菜鳥筆記——html整理