HTML

出自六年制學程
在2018年6月22日 (五) 23:05由丁志仁（對話 | 貢獻）所做的修訂版本

跳轉到： 導覽、 搜尋

文件類型宣告與HTML版本

<!DOCTYPE>聲明位於位於 HTML 原始碼中的第一行，優先於 <html> 標籤

(一)HTML5 宣告

<!DOCTYPE html>

HTML5 不基於 SGML ，因此不需要對DTD進行引用，但是需要 doctype 來規範瀏覽器的行為。

(二)HTML4 宣告

  1. HTML4.01和XHTML1.0寬鬆過渡等同XHTML1.1嚴格，可以使用一些不被W3C推薦的標籤(如：font、b等)，不可以使用框架：
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    或
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    或
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
  2. HTML4.01和XHTML1.0嚴格，不可以使用一些不被W3C推薦的標籤(如：font、b等)，不可以使用框架：
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
    或
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. 可以使用一些不被W3C推薦的標籤(如：font、b等)，可以使用框架：
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
    或
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'>

HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器檔案所使用的檔案類型。

宣告中，聲明了檔案的根元素是 html ，它在「公共標識符被定義為“-//W3C//DTD XHTML 1.0 Strict//EN” 的DTD」中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的DTD。如果找不到，瀏覽器將使用公共標識符後面的 URL 來尋找 DTD 的位置。

  • -：表示組織名稱未註冊。 Internet 工程任務組(IETF)和萬維網協會(W3C)並非註冊的 ISO 組織。+為預設值，表示組織名稱已註冊。
  • DTD：指定公開文本類型，即所引用的對象類型。預設為DTD。
  • HTML：指定公開文本描述，即對所引用的公開文本的唯一描述性名稱。後面可附帶版本號。預設為HTML。
  • URL：指定所引用對象的位置。
  • Strict：排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素。

(三)各標籤適用版本

標籤 HTML5 HTML 4.01 / XHTML 1.0 XHTML 1.1
Transitional Strict Frameset
<a> Yes Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes Yes
<acronym> No Yes Yes Yes Yes
<address> Yes Yes Yes Yes Yes
<applet> No Yes No Yes No
<area> Yes Yes Yes Yes No
<article> Yes No No No No
<aside> Yes No No No No
<audio> Yes No No No No
<b> Yes Yes Yes Yes Yes
<base> Yes Yes Yes Yes Yes
<basefont> No Yes No Yes No
<bdi> Yes No No No No
<bdo> Yes Yes Yes Yes No
<big> No Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes Yes
<body> Yes Yes Yes Yes Yes
<br> Yes Yes Yes Yes Yes
<button> Yes Yes Yes Yes Yes
<canvas> Yes No No No No
<caption> Yes Yes Yes Yes Yes
<center> No Yes No Yes No
<cite> Yes Yes Yes Yes Yes
<code> Yes Yes Yes Yes Yes
<col> Yes Yes Yes Yes No
<colgroup> Yes Yes Yes Yes No
<command> Yes No No No No
<datalist> Yes No No No No
<dd> Yes Yes Yes Yes Yes
<del> Yes Yes Yes Yes No
<details> Yes No No No No
<dfn> Yes Yes Yes Yes Yes
<dir> No Yes No Yes No
<div> Yes Yes Yes Yes Yes
<dl> Yes Yes Yes Yes Yes
<dt> Yes Yes Yes Yes Yes
<em> Yes Yes Yes Yes Yes
<embed> Yes No No No No
<fieldset> Yes Yes Yes Yes Yes
<figcaption> Yes No No No No
<figure> Yes No No No No
<font> No Yes No Yes No
<footer> Yes No No No No
<form> Yes Yes Yes Yes Yes
<frame> No No No Yes No
<frameset> No No No Yes No
<head> Yes Yes Yes Yes Yes
<header> Yes No No No No
<h1> to <h6> Yes Yes Yes Yes Yes
<hr> Yes Yes Yes Yes Yes
<html> Yes Yes Yes Yes Yes
<i> Yes Yes Yes Yes Yes
<iframe> Yes Yes No Yes No
<img> Yes Yes Yes Yes Yes
<input> Yes Yes Yes Yes Yes
<ins> Yes Yes Yes Yes No
<keygen> Yes No No No No
<kbd> Yes Yes Yes Yes Yes
<label> Yes Yes Yes Yes Yes
<legend> Yes Yes Yes Yes Yes
<li> Yes Yes Yes Yes Yes
<link> Yes Yes Yes Yes Yes
<map> Yes Yes Yes Yes No
<mark> Yes No No No No
<menu> Yes Yes No Yes No
<meta> Yes Yes Yes Yes Yes
<meter> Yes No No No No
<nav> Yes No No No No
<noframes> No Yes No Yes No
<noscript> Yes Yes Yes Yes Yes
<object> Yes Yes Yes Yes Yes
<ol> Yes Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes Yes
<option> Yes Yes Yes Yes Yes
<output> Yes No No No No
<p> Yes Yes Yes Yes Yes
<param> Yes Yes Yes Yes Yes
<pre> Yes Yes Yes Yes Yes
<progress> Yes No No No No
<q> Yes Yes Yes Yes Yes
<rp> Yes No No No No
<rt> Yes No No No No
<ruby> Yes No No No No
<s> Yes Yes No Yes No
<samp> Yes Yes Yes Yes Yes
<script> Yes Yes Yes Yes Yes
<section> Yes No No No No
<select> Yes Yes Yes Yes Yes
<small> Yes Yes Yes Yes Yes
<source> Yes No No No No
<span> Yes Yes Yes Yes Yes
<strike> No Yes No Yes No
<strong> Yes Yes Yes Yes Yes
<style> Yes Yes Yes Yes Yes
<sub> Yes Yes Yes Yes Yes
<summary> Yes No No No No
<sup> Yes Yes Yes Yes Yes
<table> Yes Yes Yes Yes Yes
<tbody> Yes Yes Yes Yes No
<td> Yes Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes Yes
<tfoot> Yes Yes Yes Yes No
<th> Yes Yes Yes Yes Yes
<thead> Yes Yes Yes Yes No
<time> Yes No No No No
<title> Yes Yes Yes Yes Yes
<tr> Yes Yes Yes Yes Yes
<track> Yes No No No No
<tt> No Yes Yes Yes Yes
<u> No Yes No Yes No
<ul> Yes Yes Yes Yes Yes
<var> Yes Yes Yes Yes Yes
<video> Yes No No No No
<wbr> Yes No No No No

HTML語法

HTML 的標籤內容分為三個層級：標籤、屬性、樣式指示

(一)標籤(標記)

  • 標籤必須成對：一般由開始標籤和結束標籤構成一對，如：<×>．．．．</×>其中的×代表標籤命令。以上角括號及斜線均為英文半形。
  • 開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/>

(二)屬性

  • 開始標記命令可以用「屬性」加以修飾，例如 img 標記可以有：
    1. src 屬性，指示圖的位置
    2. width 屬性，指示圖的寬度
    3. height 屬性，指示圖的高度
  • 屬性名後面是屬性值，屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
  • 屬性值通常用一對單引號「'」或雙引號「"」包起來，如果屬性值當中不含空白，則引號通常可以省略；如果屬性值當中含空白，則引號絕對不可以省略。
  • class 屬性：引用已經定義的樣式。
  • style 樣式屬性：指示後面的內容應該長什麼樣子

(三)樣式指示

  • style 的值包含的常常超過一項以上的樣式指示
  • 兩組樣式指示以「;」間開
  • 名與值以「:」相連

HTML重要的標記命令

標籤
====
html     超文件(HyperText Markup Language)
head     文件頭
meta     對自身的描述
title    標題
body     本文

h1~h6    標題一級到六級(head)
a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       放數據的表內之格(table data)
th       放標題或欄名的表內之格(table header)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

b        字加粗(bold)
u        字畫底線(under)
i        斜體字(italic)

style    宣告樣式(修飾一個超文件)
link     載入另一個檔，如 CSS 檔
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單

屬性(用=連等號兩邊)
====
http-equiv= http項目
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度，可以用點(px,pt)或長度(cm)或百分比表示
height=   高度，可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。
align=    靠左或調中或靠右
class=    引用 CSS 類別
id=       賦予標籤惟一的名字
xmlns=    指出 xml 的名字空間
type=     指示檔案的類別
content=  指示 http-equiv 屬性代表項目的值

樣式(用:連冒號兩邊)
====
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線

路徑

用於 img 的 src 屬性，以及 a 的 href 屬性。

  • 資料夾分層用「/」半型右上左下斜線隔開。
  • 相對路徑
    1. 不寫路徑，只寫檔名，代表和這個 html 同資料夾(同路徑)
    2. 「.」代表目前的資料夾(路徑)，也就是這個 html 所在的資料夾(路徑)，寫作「./」
    3. 「..」代表上一層資料夾(路徑)，寫作「../」
    4. 上一層資料夾的再上一層資料用「../../」表示，依此類推。
  • 絕對路徑
    1. 同網站路徑：以「/」做為路徑的開頭，代表網站的「根目錄」
    2. 其他網站的檔名：如「http://xxxx/yyyy/zzzz/abc.jpg」
      • http:是協定
      • //是網際網路
      • xxxx是機器名稱，如 jendo.org
      • /yyyy/zzzz/abc.jpg的第一個「/」是機器上面的文件根資料夾，後面的路徑是從文件根資料夾算起。

使用時機

相對路徑絕對路徑
本機可可
其他機器不可可

圖例

文件根資料夾：j

c.jpg

jj資料夾有：
b.jpg
qqq.html

jjj資料夾有：
a.jpg
ppp.html

kk資料夾有：
d.jpg


ii資料夾有：
e.jpg

iii資料夾有：
my lover.jpg
rrr.html

練習題(相對路徑與絕對路徑)

  1. 標籤在ppp.html需要a.jpg
  2. 標籤在rrr.html需要a.jpg
  3. 標籤在ppp.html需要e.jpg
  4. 標籤在qqq.html需要c.jpg
  5. 標籤在rrr.html需要b.jpg
  6. 標籤在rrr.html需要c.jpg
  7. 標籤在rrr.html需要b.jpg
  8. 標籤在qqq.html需要d.jpg
  9. 標籤在ppp.html需要my lover.jpg
  10. 標籤在qqq.html需要my lover.jpg

其他

  • http 超文件傳輸協定(HyperText Transfer Protocol)
  • 柏納李：HTTP 的發明人，在 1990年12月25日 實現第一次的 HTTP 傳輸，1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的，不申請專利權，不徵收專利費，因此，人人都能輕易用上全球資訊網。
  • 從 wiki 頁複製 HTML 段落
取自「http://well-being-ng.net/wiki1231/index.php?title=HTML&oldid=41331」