HTML
- 什麼是HTML?
- HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言: HyperText Markup Language
- HTML 不是一種編程語言，而是一種標記語言
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文檔包含了HTML 標籤及文本內容
- HTML文檔也叫做 web 頁面
- HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
- HTML元素
- "HTML 標籤" 和 "HTML 元素" 通常都是描述同樣的意思.
- 但是嚴格來講, 一個 HTML 元素包含了開始標籤與結束標籤，如下實例:
- HTML 元素:<p>這是一個段落。</p>
- 中文編碼設置
- 目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明爲 UTF-8。
- <meta charset="UTF-8">
- A標籤的常用方式
- 在該位置定義名字爲AnchorName的錨，就是給這個位置起了個名字，別人可以用這個名字直接鏈接到該文件的這個位置
- 超級鏈接，跳轉到另一文件。
- 當鼠標點擊“文字”時，TargetWindow的內容將會跳轉到“url”，不指定target時在本窗口跳轉。
- 路徑分類
- 本地路徑
- "c:\dir1\dir2\…"
- 絕對路徑
- "http://www.foo.com/img_url.jpg
- 相對路徑
- "images/01.jpg"
- "../../images/01.jpg"
- "/images/01.jpg" = "http://mysite/images/01.jpg
- 本地路徑
- URL
- Uniform Resource Locator（統一資源定位符）
- 網絡協議 ＋ 主機名 ＋ 端口號 ＋ 資源名（定位標記）
- http://www.jd.com:80/index.html#top
- URN
- Uniform Resource Name
- 持久可用的資源標準名稱
- 例如郵箱名[email protected]
- URI
- Uniform Resource Identifier
- 包含URL和URN
- 分割線
- hr標籤
- 標題標籤
- h標籤
- 字體標籤
- <font>標籤
- <tt></tt>通常是打字機風格字體
- <cite></cite>通常是引用方式（斜體）
- <em></em>強調（通常是斜體加粗體）
- <b></b>黑體
- <i></i>斜體
- <u></u>下劃線
- <s></s>中劃線
- <sup></sup>上標
- <sub></sub>下標
- 特殊字符
- < <
- > >
- ® 註冊商標
- & &
- 空格
- © copyright
- ™ 商標™
- " “
- <p>…</p>
- 分段落現實
- <div>…</div>
- 盒子標籤
- <span>…</span>
- 分塊顯示
- <ul>…</ul>
- <li type=“disc circle square”>…
- 符號列表
- <ol>…</ol>
- <li>…
- 數字列表
- <br>換行
- <nobr>…</nobr>不換行
- <pre></pre>保留原有格式
- <marquee></marquee>跑馬燈效果
- <blockquote></blockquote>標籤定義塊引用。
- 開啓和結束標籤之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。
- <dl><dt><dd>
- 屬性align
- <img>圖片標籤
- 常用屬性：
- Src 圖片路徑，一般使用相對路徑
- Alt 圖片無法顯示時顯示的文字
- Border 邊框的厚度
- Align = left right top middle bottom
- 常用屬性：
- <table>表格標籤
- <tr>行標籤
- <th>表頭標籤
- <td>列標籤
- rowspan屬性：跨行，行合併
- colspan 屬性：跨列，列合併
- <form>……</form>
- <form>的屬性
- Method(get post)
- Get 發送較少數據，並顯示在url中，
- 例如：url/userinfo?username=張三&password=123
- Post數據長度無限制，不會顯示在url中
- Get 發送較少數據，並顯示在url中，
- Action
- Form中數據交給服務器端哪個程序進行處理
- Eg.
<form method=“post” action=“user.jsp”>……</form>
- Method(get post)
- placeholder 屬性
- 屬性提供可描述輸入字段預期值的提示信息。
- required 屬性
- 屬性規定必需在提交之前填寫輸入字段。
- <audio>音頻標籤
- 示例：
- <audio style="display: none;" loop="loop" src="resouse/Bird25.wav" controls="controls" autoplay="autoplay"></audio>
- 示例：
- <video>視頻標籤
- 示例：
- <video width="320" height="240" controls>
- <source src="video/1.mp4" type="video/mp4">
- </video>
- 示例：
- <frameset>框架標籤
- 該標籤內可以有多個<frame>，
- 也可以有多個<frameset>，叫做嵌套
- rows屬性
- 代表橫向分隔
- cols屬性
- 代表縱向分隔
- name屬性
- 指定展示頁面的位置，使用target="框架的名字"指定顯示的位置
- <iframe>標籤
- 引入其他網頁
- 示例：<iframe width="100%" frameborder="0" border="0" height="800px" src="http://www.baidu.com"></iframe>