從零開始學 Web 之 HTML（一）認識前端
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
1、什麼是前端
前端對於網站來說，通常是指網頁，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發。
前端設計一般可以理解為網站的視覺設計，比如 UI 設計；
前端開發則是網站的前臺程式碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高階版本HTML5、CSS3，以及SVG等。
前端開發的核心部分主要是：HTML，CSS，JavaScript 三個部分。
HTML 是這三者中最基礎的部分，相當於是網頁的骨架，也就是網頁的結構；
CSS 部分是網頁的表現形式，也可以說是網頁的美化，比如一個圖片的大小、位置，文字的大小顏色等；
JavaScript 是一種動態的指令碼語言，負責與使用者進行互動，增加使用者體驗的作用。
2、網頁組成
一個網頁的組成部分主要包括下面幾個部分：文字、圖片、輸入框、視訊、音訊、超連結 等。
3、Web 標準
說道 Web 標準，不能不說 W3C 組織（World Wide Web Consortium），全程為「全球資訊網聯盟」。全球資訊網聯盟創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。
W3C 最重要的工作是發展 Web 規範（稱為推薦，Recommendations），這些規範描述了 Web 的通訊協議（比如 HTML 和 XHTML）和其他的構建模組。簡單的說就是就是確定 Web 頁面的語法格式和規範的。
與之類似的一個組織是「European Computer Manufacturers Association」（ECMA組織），這個組織制定了標準的指令碼語言規範 ECMAScript ，而 JavaScript 就參照的這個規範。
那麼 Web 標準規範了下面三個部分：
- HTML 標準（結構標準 ），相當人的骨架結構。
- CSS 樣式（表現）標準 ， 相當於給人化妝變的更漂亮。
- JavaScript 行為標準 ， 相當與人在唱歌，頁面更靈動。
4、瀏覽器核心
瀏覽器核心是一個瀏覽器的核心部分，也就是「渲染引擎」。它的主要作用是決定一個瀏覽器如何顯示網頁的內容及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同，因此同一網頁在不同的核心的瀏覽器裡的渲染（顯示）效果也可能不同。
這裡涉及到一個「相容性問題」，瀏覽器相容性問題又被稱為網頁相容性或網站相容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的相容問題。所以我們在編寫程式碼的時候，做好瀏覽器相容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計，瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。
5、認識 HTML
HTML 全程為：超文字標記語言（Hyper Text Markup Language）。這裡超文字就是超連結的意思，就是可以實現頁面的跳轉。
6、HTML 結構標準
HTML 基本結構如下：
< !doctype html> 宣告文件型別
<html> 根標籤
<head> 頭標籤
<title></title> 標題標籤
</head>
<body> 主體標籤
</body>
</html><!DOCTYPE html>是告訴瀏覽器，以下檔案用 HTML 哪個版本解析，這裡是 HTML5 版本。<html></html>標籤是一個網頁的根標籤，所有的標籤都要寫在這一對根標籤裡面。<head></head>是頭標籤，主要是定義文件（網頁）的頭部，包括完檔的屬性和資訊，文件的標題，還可以引入 JavaScript 指令碼，CSS 格式等。<body></body>是一個文件的主題，裡面包含文件的所有內容，比如文字，超連結，圖片，表格等內容。
7、html 標籤分類
單標籤 <! Doctype html>
雙標籤 <html> </html> ，<head></head>， <title></title>
8、html 標籤關係分類
包含（巢狀關係）<head><title></title></head> 父子關係
並列關係 <head></head><body></body> 兄弟姐妹
9、開發工具
前期學習一種語言的時候，開發工具很重要。Web開發工具有很多。最簡單的一個開發工具就是 Windows 系統自帶的記事本了，但是又難用又難看，沒有語法高亮、程式碼補全等功能。
那麼我推薦大家使用的是「Sublime Text 3」 程式碼編輯器，它雖小巧精緻，但有著炫酷的介面，並且有大量的外掛可以使用，大大提高了程式碼的編寫效率。
提到 Web 開發工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟體。目前已經被廣大 Web 開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智慧的JavaScript IDE”等。它令人稱到的是它智慧打程式碼補全、程式碼一鍵格式化、HTML 提示、聯想查詢、程式碼重構等強大功能。
建議初學者初期使用Sublime等文字編輯器，太過於智慧的編輯器確實會帶給我們極大地便利，但是在帶給我們便利的同時，也會削弱我們對基礎知識的掌握，只有自己一個單詞一個單詞敲出來的程式碼，才會讓我們記得更加牢固。
10、小結
今天的內容大部分都是一些理解性的基礎知識，算是開胃小菜，明天我們將進入真正的 HTML 基礎知識乾貨的學習。
相關推薦
從零開始學 Web 之 HTML（一）認識前端
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、什麼是前端 前端對於網站來說，
從零開始學Web之HTML（二）標籤、超連結、特殊符號、列表、音樂、滾動、head等
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、標籤 1、單標籤 註釋標籤
從零開始學 Web 之 HTML（三）表單
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、表格 1
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 CSS（一）選擇器
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W
從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤
一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史 超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19
從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、DOM概念 D
從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件
一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js
從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 JavaScript（一）JavaScript概述
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、JavaScr
從零開始學 Web 之 Ajax（一）伺服器相關概念
一、伺服器和客戶端 伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。 伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等 檔案上傳下載服務：V
從零開始學 Web 之 ES6（一）ES5嚴格模式
一、ECMAScript 5 嚴格模式 1、概述 除了正常執行模式，ECMAscript 5添加了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 2、目的 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：
從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件
png 好用 添加 方式 執行 存在 區別 也會 地址 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：http://ww
從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 Ajax（五）同步異步請求，數據格式
遊記 document 空閑 name center 20px 實現 resp 也會 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之