前端培訓-初級階段(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 檔案,在其中列出網站中的網址以及關於每個網址的其他元資料(上次更新的時間、更改的頻率以及相對於網站上其他網址的重要程度為何等),以便搜尋引擎可以更加智慧地抓取網站。