HTML

本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家裡的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁，可以群（六二三九六六八零六）使勁砸我得到解決~ sublime編輯器對於前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器

HTML起源

剛開始設計HTML語言是為了將文字圖像關聯在一起，用另一台發送或接收

HTML(HyperTextMark-up Language)超文本標記語言

HTML 不是一種編程語言，而是一中標記語言(mark-up language),標記語言是一套標記標籤(mark-up tag)

HTML標籤

標籤是由尖括弧 把關鍵詞括起來，標籤通常是成對出現的

Web瀏覽器

讀取 HTML 文檔，使用標籤來解析頁面的內容，以網頁的形式現實，瀏覽器不會現實HTML標籤

現在市場上主流五大瀏覽器

每種瀏覽器都有自己的內核(引擎)（解析網頁的一個程序，io以什麼方式去渲染它都要通過引擎去執行）

目前主流的瀏覽器分為五種

Chrome谷歌瀏覽器 （Webkit內核，V8 js引擎）

Firefox火狐瀏覽器 （Gecko內核）

Internet Explorer IE瀏覽器（ Trident內核）

Opera 歐朋瀏覽器 （Presto內核） 主要市場：移動端

Safari 蘋果瀏覽器 （Webkit內核，但JS引擎為Nitro）

不需要去記，簡單了解下

標籤使用規範

標籤必須閉合

所有標籤名一律小寫

代碼縮進，使閱讀代碼更加易懂

特殊符號規範使用

命名規範，見名之意

PS: 所有的標記符號都是半形英文

編輯器

眾說紛紜編輯器太多，最終只是一個工具，希望同學們能從萬千世界中找到適合自己的編輯器夥伴

Sublime插件列表

註：Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 裡面search 可以進行搜索插件名字來找到具體使用方法，還有什麼不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~

模板的配置

HTML模板

簡單了解，並不需要熟練掌握

HTML樹狀結構

Dom節點樹

HTML網頁擴展名

.html .htm這兩種是比較常見的

在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展採用.htm

現在通常使用.html作為擴展名

標籤的學習

接下來所有的標籤元素學習都在body標籤裡面去敲打實現、

H標籤

為了突出標題，字體大小和加粗發生相應的改變

我是大主題

我是大主題

我是大主題

我是大主題我是大主題我是大主題 瀏覽器標籤頁上的網頁標題

我是大標題

我是主題2

我是主題3

我是主題4 我是主題5 我是主題6

可以發現h標籤從h1到h6會隨著數值越小字越小，並且都是會加粗和各佔一行的狀態（前後的元素都會被換行）

h1標籤一般一個頁面裡面只會寫一次，為了讓搜索引擎爬取到 (寫一次利於SEO搜索引擎優化)

p段落標籤

冬著一身素衣，緩緩而來，季節沒有了往日的奼紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。

特殊符號

剛我們了解到了瀏覽器是識別尖括弧的，如果要在頁面中顯示html標記那要怎麼做呢？這時候就需要特殊符號的表示來顯示

加粗標籤

物理加粗，頁面呈現加粗狀態.不僅能加粗，還利於搜索引擎優化，就是類似於百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標籤裡面的內容來優化顯示網頁的排名

可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用於標籤

我是傾斜 我加了下劃線

A標籤

鏈接一個頁面,點擊則會跳轉這個鏈接頁面

使用錨點滾動到設定的位置

a標籤中的href控制點擊的時候跳轉到哪裡如果沒寫表示刷新當前頁面 跳轉到當前頁面(回歸到頁面頂部) 死鏈接，不會跳轉，一般用於js特效錨點到一個標籤上所對應的ID名字，點擊則跳到那個標籤位置 跳轉到百度 需要注意的是 http 協議不能少

點擊#flag的a標籤的時候會跳到到上面h2標籤

只有擁有name屬性的

a標籤

才能錨點,還有一種方式是通過ID標識唯一元素，也可以跳轉(不僅僅是a標籤)

補充標籤

滾動標籤

marquee

behivior

Font標籤

hr水平線

與font相似，擁有color和size屬性

hr標籤沒有結束標籤 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標籤，不加也能夠正確顯示，但是養成一個良好的習慣確實重要，比如微信小程序就是沒有結束標籤必須要使用一個反斜杠結尾否則直接報錯、

練習一、

結合今天所學，寫一個簡單的網頁

內容如下：

寫一篇收穫或感受 / 寫一篇文章 ————> 為什麼要自己寫，網上一大把哈哈，可以自己寫下，鍛煉下思維

需要包括h、p、a、加粗

題材不限，至少200字

練習二、

在習題一的文章底部，使用滾動標籤進行滾動方向為45°

可以在頭部找到我，如有勘誤、錯別字、盡情見諒很用心的檢查了 碼了這麼久

加群六二三九六六八零六 免費領取前端學習資料，群里還有大神解答問題和交流

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！