網頁設計筆記

網頁設計進階筆記

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),我們用標籤來控制內容的呈現樣貌,例如字體大小、斜體粗體、在文字或圖片設置超連結等。
  • 內容:凡是在 WebPage 上所看到文字,或影音、圖檔,都是內容。
  • 標籤 (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 > 標頭:放置表頭重要資訊、LOGO、導覽列等資訊
< 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 元素中的文本是普通的左對齊文本。