[Day22] Web 前端概述 - 用 HTML 標籤承載頁面內容 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 22

1

自我挑戰組

30天學python系列第 22 篇

[Day22] Web 前端概述 - 用 HTML 標籤承載頁面內容

11th鐵人賽

團隊菜雞自學

2019-10-08 10:29:47

918 瀏覽

分享至

接下來是 100 天當中的第三部分 Web 前端概述。我也會分成幾天做這階段的筆記。

HTML 簡史

1991年10月：一個非正式 CERN（歐洲核子研究中心）文件首次公開 18 個 HTML 標籤，這個文件的作者是物理學家蒂姆·伯納斯-李，他是全球資訊網 (World Wide Web) 的發明者，也是全球資訊網聯盟(World Wide Web Consortium，簡稱 W3C) 的主席。
1995年11月：HTML2.0 標準發布（RFC 1866）。
1997年1月：HTML3.2 作為 W3C 推薦標準發布。
1997年12月：HTML4.0 作為 W3C 推薦標準發布。
1999年12月：HTML 4.01 作為 W3C 推薦標準發布。
2008年1月：HTML5 由 W3C 作為工作草案發布。
2011年5月：W3C 將 HTML5 推進至最終徵求階段。
2012年12月：W3C HTML5 指定作為'候選推薦'階段。
2014年10月：HTML5 作為穩定 W3C 推薦標準發布，這表示 HTML5 的標準化已經完成。

HTML5 新特性

引入原生多媒體支持（audio 和 video 標籤）
引入可編程內容（canvas 標籤）
引入語義 Web（article、aside、details、figure、footer、header、nav、section、summary 等標籤）
引入新的表單元件（日曆，電子郵件信箱，搜尋等）
引入對離線存儲更好的支持（localStorage 和 sessionStorage）
引入對定位，拖放、WebSocket、後台任務等的支持

使用標籤 (tags) 承載內容

結構

html
- head
  - title
  - meta
- body

文本

標題 (heading) 和段落 (paragraph)
- h1 ~ h6
- p
上標 (superscript) 和下標 (subscript)
- sup
- sub
空白（白色空間）
折行（break）和水平標尺 (horizontal rule)
- br
- hr
語義化標籤
- 粗體和強調 - strong
- 引用 - blockquote
- 縮寫詞和首字母縮寫詞 - abbr / acronym
- 引文 - cite
- 所有者聯繫信息 - address
- 內容的修改 - ins / del

列表 (list)

有序列表 (ordered list) - ol / li
無序列表 (unordered list) - ul / li
定義列表 (definition list) - dl / dt / dd

鏈接 (Anchor)

頁面鏈接
Anchor 鏈接
功能鏈接

圖像 (image)

圖像存儲位置
圖像及其寬高
正確的圖像格式
- JPEG
- GIF
- PNG
矢量圖
語義化標籤 - 圖 / 無標題

表格（table）

基本的表格結構 - table / tr / td / th
表格的標題 - caption
跨行和跨列 - rowpan 屬性 / colspan 屬性
長表格 - thead / tbody / tfoot

表單（form）

重要屬性 - action / method / enctype
表單控件 (input) - type 屬性
- 文本框 - text / 密碼框 - password / 數字框 - number
- 電子郵件信箱 - email / 電話 - tel / 日期- date / 滑動條 - range / URL - url / 搜尋 - search
- 單選按鈕 - radio / 複選按鈕 - checkbox
- 文件上傳 - file / 隱藏域 - hidden
- 提交按鈕 - submit / 圖像按鈕 - image / 重置按鈕 - reset
下拉列表 - select / option
文本域（多行文本）- textarea
組合表單元素 - fieldset / legend

影音視頻（audio / video）

視頻格式和播放器
視頻託管服務
添加視頻的準備工作
video 標籤和屬性 - autoplay / controls / loop / muted / preload / src
audio 標籤和屬性 - autoplay / controls / loop / muted / preload / src / width / height / poster

窗口（frame）

框架集（不建議使用）- frameset / frame
內嵌窗口 - iframe

其他

文檔類型

<!doctype html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

註釋

<!-- 這是一段註釋，註釋不能夠嵌套 -->

屬性
- id：唯一標識
- class：元素 (element) 所屬的類別，用於區分不同的元素
- title：元素的額外信息（鼠標懸浮時會顯示）
- tabindex：Tab 鍵切換順序
- contenteditable：元素是否可編輯
- draggable：元素是否可拖拽
塊級 (block) 元素 / 行內 (inline) 元素
字符實體（實體替換符）

單看這些文字敘述並沒有很清楚了解是什麼意思，所以我利用網站的檢視網頁原始碼，就能更清楚了解每個標籤的用意。如果是像我一樣不懂的人很建議可以這樣做。

[Day21] Python 語言進階 - 5

[Day23] Web 前端概述 - 用 CSS 渲染頁面

系列文

30天學python 共 30 篇

目錄

RSS系列文訂閱系列文

25 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22189 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙