HTML

HTML

什麼是HTML

• Hyper Text Markup Language
• 超文字標記語言
• 超文字： 超出文字本身的功能範圍
• 標記： 通過標記表示不同的功能，不同的標記可以實現不同的效果
• 語言： 大量的標記組合在一起，形成了一套體系，可以稱體系為“語言”

HTML體現形式

• html檔案
• htm檔案

HTML操作規範

• 一個html檔案中要有開始和結束
• 一個html文字中的基本結構
頭 頁面所攜帶的額外資料體頁面所包含的資料尾 頁尾資料
• html的程式碼不區分大小寫
• 標籤通常情況下都是成對出現的
• 有一些特殊的單獨出現
• 分割線

　　　　　　　　　　　　<hr />

• • • 換行

　　　　　　　　　　　　<br />

• html操作思想
• 一個頁面中會有很多資料展現，不同的資料可以展示的效果是不一樣的
• 使用不同的標籤來操作不同的資料
• 如果修改某一個數據的效果，只需要對標籤進行修改即可
• 大部分標籤中，會存在屬性
• 對屬性設定不同的資料值，可以實現不同的效果
• HTML常用標籤

• 字型標籤
  • <font></font>
  • 常用屬性
  • size
  • 設定字型尺寸(1-7)，超過7預設按7處理
  • color
  • 設定字型顏色(英文單詞 or 十六進位制碼 or RGB)
• 註釋
  • <!-- 我是註釋 -->
• 標題標籤
  • <h1-6></h1>
• 列表標籤

　　　　　　　　<dl> <dt>我是列表A</dt> <dt>我是列表B</dt> </dl>
　　　　　　　　<ol> <li>我是有序列表A</li> <li>我是有序列表B</li> </ol>
　　　　　　　　<ul> <li>我是無序列表A</li> <li>我是無序列表B</li> </ul>

• 圖片標籤

　　　　　　　　<img src="圖片路徑(本地/網路)" width="寬度" height="高度" title="圖片懸浮文字" <!-- 等比例 --> />

• 超連結

　　　　　　　　<a href="連結URL地址">地址描述</a>

• 表格標籤

　　　　　　　　<table border="邊框" width="寬度" height="高度" bgcolor="顏色" cellspacing="單元格距離">
　　　　　　　　　　<tr align="對齊方式" rowspan="引數為相鄰單元格數合併">
　　　　　　　　　　　　<td align="對齊方式" colspan="引數為相鄰單元格數合併"></td>
　　　　　　　　　　</tr>
　　　　　　　　</table>

• 表單

　　　　　　<form action="將表單提交給誰處理" method="提交表單時的請求方式">
　　　　　　　　<input type="text" name="username" id="username" value="" placeholder="這是文字框"/>
　　　　　　　　<input type="password" name="password" id="password" value="" placeholder="這是密碼框"/>
　　　　　　　　<input type="checkbox" name="這是複選框" id="這是複選框" value="" />
　　　　　　　　<input type="radio" name="這是單選框" id="這是單選框" value="" />
　　　　　　　　<input type="button" name="這裡是按鈕" id="這裡是按鈕" value=""/>
　　　　　　　　<input type="date" name="" id="" />
　　　　　　　　<input type="time" name="" id="" />
　　　　　　　　<input type="email" name="這是郵件格式" id="" />
　　　　　　　　<input type="file" name="" id="" value="" />
　　　　　　　　<input type="hidden" name="" id="" value="" />
　　　　　　　　<input type="number" name="" id="" value="" />
　　　　　　　　<input type="tel" name="" id="" value="" />
　　　　　　　　<input type="reset" name="" id="" value="" />
　　　　　　　　<input type="submit" name="" id="" value="" />
　　　　　　</form>

• 下拉列表

　　　　　　　　<select name="列表名">
　　　　　　　　　　<option value="">內容一</option>
　　　　　　　　　　<option value="">內容二</option>
　　　　　　　　</select>

HTML對文字處理效果

• b：加粗

　　　　　　　　<b>我被加粗了</b>

• u：下劃線

　　　　　　　　<u>我加了下劃線</u>

• s：刪除線

　　　　　　　　<s>我加了刪除線</s>

• i：斜體

　　　　　　　　<i>我變成了斜體</i>

• pre:原樣輸出

　　　　　　<pre>我被原樣輸出了</pre>

• sub:下標

　　　　　　　<2sub>3</2sub>

• sup:上標

<2sup>3</2sup>

• p:段落

　　　　　　<p>這是一個段落</p>

• div:塊/層

• span:動態文字標籤

　　　　　　<span></span>

頭部標籤

• meta標籤
• 設定字符集
  • <meta charset="utf-8"/>
• 設定關鍵詞 kewords固定寫法 關鍵字寫再content,關鍵詞之間用逗號隔開
  • <meta name="keywords" content="A,B,C"/>
• 重新整理
• • • meta http-equiv="refresh" content="重新整理條件"/>
• 頁面名稱
  • <title>頁面名稱</title>

框架標籤

• 對當前頁面進行拆分，可以水平、垂直拆分

　　　　<frameset></frameset>
　　　　　　<ul>
　　　　　　　　　<li>水平拆分: rows</li>
　　　　　　　　　<li>垂直拆分： cols</li>
　　　　　　</ul>
　　　　<frame />

• 拆分後每個區域具體顯示的內容(頁面)