網頁設計筆記

• HTML (HyperText Markup Language) 超文本標記語言：是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計賞心悅目的網頁。
• HTML 在 1989 年時由 Tim Berners-Lee 所發展出來的，在 1990 年被 WWW 開始採用，並於 1991 年提出 HTML 語法的基本草稿。由於全世界的人都在使用 HTML 來設計網頁 (WebPage) 構建網站，所以 HTML 的語法必須統一。全球資訊網協會 W3C (The World Wide Web Consortium) 在 1993 年推出 HTML1.0 版，到了 1995 年 2 月推出 HTML2.0 版。
• HTML5是HTML最新的修訂版本，由全球資訊網協會於2014年10月完成標準制定。
• HTML 是由兩個部份所組成：包含了標籤（tags）與內容（content），我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。
• 內容（content）：凡是在網頁上所看到文字，或影音、圖檔，都是內容。
• 標籤 (Tag)：就是命令，由簡單的英文語意組成。如< 標籤名稱 >與< /標籤名稱 >。
• 瀏覽器只接受 HTML 標籤(命令)，並按照標籤的指示來產生變化， HTML 標籤是提供瀏覽器解讀用的。

1. HTML5基本架構圖示



---



---

2. HTML5進階架構圖示



---

3. HTML5進階架構原始碼

標籤tag

種類	說明
標籤 tag	用 < >括住特定名稱的文字範圍，標籤有兩種類型，分別為「獨立標籤」與「成對標籤」。
獨立標籤	例如 < hr > 隔線，< br > 分行， < img … > 圖片, 獨立標籤通常是網頁上一個特定的元素，不作用到其他内容範圍。
成對標籤	例如 < p > < /p >、 < a … > < /a > 大多數的標籤是以成對標籤的方式存在 前面< p >、< a >、< em >為開始標籤,後面對應的< /p >、< /a >、< /em >為結束標籤 開始標籤加上斜線/即為結束標籤, 開始標籤與結束標籤之間的内容，就是標籤標註作用的範圍 p, a, em 代表標籤名稱, 不同名稱有不同用途。
成對標籤的原則	順序原則 - 先有開始標籤，才會有結束標籤 對應原則 - 有開始標籤就要有結束標籤，成對出現，數目相同 巢狀原則 - 如果標籤範圍裡面有其他的標籤，被包住的標籤在範圍裡面必須符合順序原則和對應原則
常用的標籤	段落：p 標題：h1、h2、h3、h4、h5、h6 強調：strong、b、i 表格：table、tr、td 影像：img < img src="..."> 超連結：a 連結目標：_blank,_top... 檔案內連結、電子郵件連結 特殊文字：© ©　空格  　強制分行 < br / >

網頁基本架構

標籤	屬性及說明	用法及範例
< html >< /html >	此標籤是置於整個文件的開始和結束之處，以供瀏覽器識別此文件為合法的文件。
< head >< /head >	此標籤是用以表示標頭資訊的開始與結束，用來作為網頁的描述，不會出現在網頁內容頁，在< head >與< /head >之間可加入其它標籤< title >< /title >或< meta >等。
< title > < /title >	Title Tag （標題標記）是HTML裡的元素，用來定義網頁的標題，同時，Title也會被 Google設定為搜尋結果上顯示的網頁標題，因此在 SEO上也是非常重要的優化項目之一。網頁的標題，同時也會出現在瀏覽器上方標籤。
< body > < /body >	HTML文件中所有要顯示的內容，也就是實際瀏覽網頁時看到的內容，包括文字、圖片、表單和多媒體物件都必須放置在< body >標籤內

區塊架構

標籤	屬性及說明	用法及範例
< header > < /header >	標頭：放置表頭重要資訊、ＬＯＧＯ、導覽列等資訊
< nav > < /nav >	導覽列：通常放置於header標籤內，
< main > < /main >	主要內容：網頁的主要內容
< article > < /article >	< article >是HTML 5 的新標籤。article元素可用於表示頁面上某塊具有一定獨立性的內容，這個內容可以是一篇文章、論壇上的一個帖子/評論、一篇部落格等。
< section > < /section >	自訂的區塊：是HTML 5 的新標籤。如數篇摘要組成的空間
< footer > < /footer >	頁尾：位於HTML5文件頁面底部，大多用於顯示著作權、作者或相關資訊等

標題

標籤	屬性及說明	用法及範例
< h1 > < /h1 >	< h1 > - < h6 > 標題標籤。 < h1 > 定義最大的標題。< h6 > 定義最小的標題。 由於h 元素擁有確切的語義，因此請慎重地選擇恰當的標籤層級來構建文檔的結構。 請不要使用標題標籤來改變同一行中的字體大小。

段落

標籤	屬性及說明	用法及範例
< p > < /p >	段落：< p >標籤是用來標明文字段落的開頭和結尾。這個標籤還可以加入align屬性來指定段落的對齊方式。	align對齊的方式（left 、 center 、 right） < p align = "center" >段落文字置中對齊 < /p >
< br >	換行：< br >標籤可以指示瀏覽器在HTML的文件上執行斷行功能。br只是單純的斷行，後續的文字仍會維持相同的行距，p標籤則是另起新的段落，並且會加大行距。
< hr >	< hr >可以畫出一條水平線(horizontal rule)

超連結

標籤	屬性及說明	用法及範例
< a > < /a >	超連結：< a > 標籤定義超鏈接，用於從一個頁面鏈接到另一個頁面。 < a > 元素最重要的屬性是 href 屬性，它指定鏈接的目標，如網址、網頁檔案、圖片等。 target，用來指定開啟新頁面、連結文件的視窗或子框架。	網站連結語法：< a href="http://www.cute.edu.tw" >學校網站連結< /a >。效果：學校網站連結 電子郵件連結：< a href="mailto:jinjin@cute.edu.tw" >電子郵件連結< /a >。效果：電子郵件連結 target=框窗名稱，指定欲連結的視窗(_blank,_top,_self,_parent,框窗名稱) target=_blank：將連結的畫面內容，開在新的瀏覽視窗中。 target=_parent：將連結的畫面內容，當成文件的上一個畫面。 target=_self：將連結的畫面內容，顯示在目前的視窗中。 將網站開啟新視窗的語法< a href="http://www.cute.edu.tw" target="_blank" >學校網站連結< /a >。效果：學校網站連結開新視窗

表格

標籤	屬性及說明
< table > < /table >	表格：< table >是用來標示表格的開頭和結尾。包含許多屬性，可用來設定整張表格的格式，以下是這些屬性的簡介： align：用以設定表格相對於視窗的水平位置 border：指定表格外框線的寬度 cellpadding：用以指定儲存格內，文字與框線之間的距離 cellspacing：用以指定表格內框線(儲存格與儲存格之間)的寬度 width：表格的寬度，以像素值或視窗百分比為單位 bgcolor：用以設定表格的背景顏色
< caption > < /caption >	表格標題：< caption > 標籤定義表格的標題。 < caption > 標籤必須直接放置到< table > 標籤之後。 每個表格只能規定一個標題。 通常標題會居中顯示在表格上方
< tr > < /tr >	< tr >標籤是用以指示瀏覽器將文字顯示為一行表格列。
< td > < /td >	< td >代表表格資料(Table Data)，用以指定表格內某一儲存格的內容
< th > < /th >	< th > 定義HTML表格中的表頭單元格。 th 元素中的文本呈現為粗體並且居中。 td 元素中的文本是普通的左對齊文本。