從零開始學 Web 之 HTML（一）認識前端

時間 2019-11-17

標籤開始 web html 認識前端欄目 HTML 简体版

原文原文鏈接

你們好，這裏是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

一、什麼是前端

前端對於網站來講，一般是指網頁，網站的前臺部分包括網站的表現層和結構層。所以前端技術通常分爲前端設計和前端開發。前端

前端設計通常能夠理解爲網站的視覺設計，好比 UI 設計；
前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，如今最新的高級版本HTML五、CSS3，以及SVG等。web

前端開發的核心部分主要是：HTML，CSS，JavaScript 三個部分。ajax

HTML 是這三者中最基礎的部分，至關因而網頁的骨架，也就是網頁的結構；
CSS 部分是網頁的表現形式，也能夠說是網頁的美化，好比一個圖片的大小、位置，文字的大小顏色等；
JavaScript 是一種動態的腳本語言，負責與用戶進行交互，增長用戶體驗的做用。
瀏覽器

二、網頁組成

一個網頁的組成部分主要包括下面幾個部分：文字、圖片、輸入框、視頻、音頻、超連接 等。
webstorm

三、Web 標準

說道 Web 標準，不能不說 W3C 組織（World Wide Web Consortium），全程爲「萬維網聯盟」。萬維網聯盟建立於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。編輯器

W3C 最重要的工做是發展 Web 規範（稱爲推薦，Recommendations），這些規範描述了 Web 的通訊協議（好比 HTML 和 XHTML）和其餘的構建模塊。簡單的說就是就是肯定 Web 頁面的語法格式和規範的。ide

與之相似的一個組織是「European Computer Manufacturers Association」（ECMA組織），這個組織制定了標準的腳本語言規範 ECMAScript ，而 JavaScript 就參照的這個規範。工具

那麼 Web 標準規範了下面三個部分：post

HTML 標準（結構標準），至關人的骨架結構。
CSS 樣式（表現）標準，至關於給人化妝變的更漂亮。
JavaScript 行爲標準，至關與人在唱歌，頁面更靈動。

四、瀏覽器內核

瀏覽器內核是一個瀏覽器的核心部分，也就是「渲染引擎」。它的主要做用是決定一個瀏覽器如何顯示網頁的內容及頁面的格式信息。不一樣的瀏覽器內核對網頁編寫語法的解釋也有不一樣，所以同一網頁在不一樣的內核的瀏覽器裏的渲染（顯示）效果也可能不一樣。

這裏涉及到一個「兼容性問題」，瀏覽器兼容性問題又被稱爲網頁兼容性或網站兼容性問題，指網頁在各類瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。因此咱們在編寫代碼的時候，作好瀏覽器兼容，纔可以讓網站在不一樣的瀏覽器下都正常顯示。而對於瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容可以給用戶更好的使用體驗。

五、認識 HTML

HTML 全程爲：超文本標記語言（Hyper Text Markup Language）。這裏超文本就是超連接的意思，就是能夠實現頁面的跳轉。

六、HTML 結構標準

HTML 基本結構以下：

< !doctype html>    聲明文檔類型
<html>              根標籤
<head>              頭標籤
<title></title>     標題標籤
</head>
<body>              主體標籤
</body>
</html>

<!DOCTYPE html> 是告訴瀏覽器，如下文件用 HTML 哪一個版本解析，這裏是 HTML5 版本。
<html></html> 標籤是一個網頁的根標籤，全部的標籤都要寫在這一對根標籤裏面。
<head></head> 是頭標籤，主要是定義文檔（網頁）的頭部，包括完檔的屬性和信息，文檔的標題，還能夠引入 JavaScript 腳本，CSS 格式等。
<body></body> 是一個文檔的主題，裏面包含文檔的全部內容，好比文本，超連接，圖片，表格等內容。

七、html 標籤分類

單標籤 <! Doctype html>
雙標籤 <html> </html> ，<head></head>， <title></title>

八、html 標籤關係分類

包含（嵌套關係）<head><title></title></head> 父子關係
並列關係 <head></head><body></body> 兄弟姐妹

九、開發工具

前期學習一種語言的時候，開發工具很重要。Web開發工具備不少。最簡單的一個開發工具就是 Windows 系統自帶的記事本了，可是又難用又難看，沒有語法高亮、代碼補全等功能。

那麼我推薦你們使用的是「Sublime Text 3」代碼編輯器，它雖小巧精緻，但有着炫酷的界面，而且有大量的插件可使用，大大提升了代碼的編寫效率。

提到 Web 開發工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟件。目前已經被廣大 Web 開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。它使人稱到的是它智能打代碼補全、代碼一鍵格式化、HTML 提示、聯想查詢、代碼重構等強大功能。

建議初學者初期使用Sublime等文本編輯器，太過於智能的編輯器確實會帶給咱們極大地便利，可是在帶給咱們便利的同時，也會削弱咱們對基礎知識的掌握，只有本身一個單詞一個單詞敲出來的代碼，纔會讓咱們記得更加牢固。