網頁設計筆記

網頁設計進階筆記

HTML筆記

HTML緣由

  • 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 標籤是提供瀏覽器解讀用的。

HTML架構圖示

認識HTML標籤

標籤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 >< /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 元素中的文本是普通的左對齊文本。