前端培訓-初級階段（1 - 4）
本著提升技術水平，打牢基礎知識的中心思想。前端內部開始小課堂啦（本人憑藉身高優勢，人群中多看了我一眼，穩穩拿到第一課 ）。
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。
好了，不閒扯，接下來進入我們的正題。
我們要講什麼
- 課程體系介紹、HTML+CSS基本入門知識
- 網站執行原理
- HTML常用標籤、表單新型別、網頁SEO優化
- HTML5語義化標籤、音視訊標籤
HTML+CSS 簡介
HTML（超文字標記語言 — HyperText Markup Language）是構成 Web 世界的一磚一瓦。它定義了網頁內容的含義和結構。它使用標記 來註明文字、圖片和其他內容，以便於在 Web 瀏覽器中顯示。HTML 中的標籤不區分大小寫 。
舉例來說， 我的內容是一些段落（<p>
）還是一個有序列表（<ul>
）？我的網頁上有插入圖片（<img>
）嗎？有資料表格（<table>
）嗎？
CSS（層疊樣式表 — Cascading Style Sheets），是一種樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文件的呈現。CSS 描述了 HTML 元素在螢幕上應該如何渲染。
舉例來說，我的文字是黑色還是紅色的？在螢幕的何處展示內容？用什麼背景影象和顏色來裝飾？
網站執行原理（發展歷程）
- HTML 建立結構，我們想在網際網路釋出我們的資訊，我們通過文字、圖片、音視訊。
- CSS 美化介面，頁面太醜了，都是文字，我們想要排版一下。
- JS 邏輯控制，我們想要校驗表單，做個輪播圖什麼的。
- 靜態服務部署（檔案伺服器），通過上面的內容，我們可以有一個漂亮的頁面了，接下來我們需要釋出到網上，讓其他人可以訪問。
- IP 可以理解為唯一標識（身份證），通過 IP 可以很快找到我們的伺服器。
- 通過上面的內容，其他人可以通過網路來訪問我們的頁面，但是 IP 是一串數字，太難記了。我們需要一個好記的域名。
- 動態服務，網站壯大之後，我們需要區分使用者（登入，評論），這個時候我們要引入服務端（node/java/php）
到這裡就差不多了。當然還有新的問題，新的問題也會有新的解決方案。
HTML 常用標籤
<!DOCTYPE>
定義文件型別。
<!DOCTYPE> 宣告必須是 HTML 文件的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 宣告不是 HTML標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 宣告引用DTD，因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於SGML，所以不需要引用 DTD。
提示：請始終向 HTML 文件新增 <!DOCTYPE> 宣告，這樣瀏覽器才能獲知文件型別。
<a>
標籤定義超連結。頁面互聯的基礎設施，用於從一張頁面連結到另一張頁面。
<div>
無敵塊結構
<span>
無敵行內結構
<form>
表單
<input>
表單控制元件
<img>
影象
<meta>
定義關於 HTML 文件的元資訊。
<p>
定義段落
<table>
表格
如上是一些常用標籤，不可替代，有自己獨立用途。
HTML5 標籤
這個東西也出來好久了。相信大家也都開始使用了。核心就是增加了更多的語義化 標籤，廢棄了一些純粹顯示效果的標記
HTML5 中的一些有趣的新特性：
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search
網頁 SEO
SEO 優化是搜尋引擎優化（Search Engine Optimization）。這個問題，面試經常被問到有沒有。其實有個簡單的辦法，壕 ，畢竟人家搜尋引擎公司也是要掙錢嘛。
-
在首頁加入 meta 標籤提供一些元資料（
title、description、keywords） -
注意合理使用語義化標籤（
h1） -
合理的使用屬性（
img的alt） -
禁止外鏈（
no follow） - 合理的robots.txt 、sitemap 、百度連結提交
Robots協議（也稱為爬蟲協議、機器人協議等）的全稱是“網路爬蟲排除標準”（Robots Exclusion Protocol），網站通過Robots協議告訴搜尋引擎哪些頁面可以抓取，哪些頁面不能抓取。
Sitemap 可方便網站管理員通知搜尋引擎他們網站上有哪些可供抓取的網頁。最簡單的 Sitemap 形式，就是XML 檔案，在其中列出網站中的網址以及關於每個網址的其他元資料（上次更新的時間、更改的頻率以及相對於網站上其他網址的重要程度為何等），以便搜尋引擎可以更加智慧地抓取網站。