學(xué)習(xí)目標(biāo)

理解

1、HTML的概念 2、HTML標(biāo)簽的分類 3、HTML標(biāo)簽的關(guān)系 4、HTML標(biāo)簽的語義化

應(yīng)用

1、HTML骨架格式 2、sublime基本使用

1. HTML 初識

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言。

HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

一句話說出html作用:

網(wǎng)頁是由網(wǎng)頁元素組成的 ， 這些元素是利用html標(biāo)簽描述出來，然后通過瀏覽器解析，就可以顯示給用戶了。

所謂超文本，有2層含義：

因為它可以加入圖片、聲音、動畫、多媒體等內(nèi)容(超越文本限制)

不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機(jī)的文件連接(超級鏈接文本)。

門外漢眼中的效果頁面

我們要做的html頁面

html 總結(jié):

html 是超文本標(biāo)記(標(biāo)簽)語言

我們學(xué)習(xí)html 主要學(xué)習(xí)html標(biāo)簽

我們用html標(biāo)簽描述網(wǎng)頁元素。 比如 圖片標(biāo)簽 、文字標(biāo)簽、鏈接標(biāo)簽等等

標(biāo)簽有自己的語法規(guī)范，所有的html標(biāo)簽都是用 <> 表示的

H(很)T(甜)M(蜜)L(啦) 是很快樂的一件事情

1.1 HTML骨架標(biāo)簽

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言語法骨架格式：(要遵循，要專業(yè)) 要求務(wù)必非常流暢的默寫下來。。

html骨架標(biāo)簽總結(jié)

標(biāo)簽名

定義

說明

HTML標(biāo)簽

頁面中最大的標(biāo)簽，我們成為 根標(biāo)簽

文檔的頭部

注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title

文檔的標(biāo)題

讓頁面擁有一個屬于自己的網(wǎng)頁標(biāo)題

文檔的主體

元素包含文檔的所有內(nèi)容，頁面內(nèi)容 基本都是放到body里面的

練習(xí)1：

書寫我們的第一個HTML 頁面。

新建一個 01-html骨架標(biāo)簽 的 TXT 文件。

里面寫入剛才的HTML 骨架。

把后綴名改為 .HTML。

右擊--谷歌瀏覽器打開。

我的第一個頁面

你我之間 一飛沖天

為了便于記憶，我們請出剛才要辭職回家養(yǎng)豬的二師兄來幫忙， 我稱之為 豬八戒記憶法

團(tuán)隊約定大小寫

HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫

推薦：

我的第一個頁面

不推薦：

我的第一個頁面

1.2 HTML元素標(biāo)簽分類

標(biāo)簽：

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標(biāo)簽，如上面提到的 、

、都是HTML骨架結(jié)構(gòu)標(biāo)簽。

分類：

常規(guī)元素(雙標(biāo)簽)

內(nèi)容 標(biāo)簽名> 比如

我是文字

該語法中“”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽(start tag)”，“標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽(end tag)”。

和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個關(guān)閉符“/”。

我們以后接觸的基本都是雙標(biāo)簽

空元素(單標(biāo)簽)

比如

空元素 用單標(biāo)簽來表示， 簡單點(diǎn)說，就是里面不需要包含內(nèi)容， 只有一個開始標(biāo)簽不需要關(guān)閉。

這種單身狗標(biāo)簽非常少，一共沒多少，我們多記憶就好

一句話說出他們:

世界上單身狗畢竟是少數(shù)的， 大部分還是喜歡成雙成對，不要拉下你的另外一半，對待一個雙標(biāo)簽要有始有終。

1.3 HTML標(biāo)簽關(guān)系

主要針對于雙標(biāo)簽 的相互關(guān)系分為兩種： 請務(wù)必熟悉記住這種標(biāo)簽關(guān)系，因為后面我們標(biāo)簽嵌套特別多，很容易弄混他們的關(guān)系。

嵌套關(guān)系

2.并列關(guān)系

倡議：

如果兩個標(biāo)簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進(jìn)一個tab鍵的身位(一個tab是4個空格)。如果是并列關(guān)系，最好上下對齊。

一句話說出他們:

html雙標(biāo)簽 可以分為 有 一種是 父子級 包含關(guān)系的標(biāo)簽 一種是 兄弟級 并列關(guān)系的標(biāo)簽

1.4 一練

請問下列哪組標(biāo)簽關(guān)系是錯誤的？

[ ]

[ ]

[x]

[ ]

2. 代碼開發(fā)工具(書寫代碼)

為了提高我們的開發(fā)效率

減少代碼的出錯我們不提倡用記事本開發(fā)，我們有更好的犀利哥。

Dreamweaver

SublimeText

WebStorm

HBuilder

VScode

有人說：

普通青年 Dreamweaver

文藝青年 sublime

高手和傻子 用記事本

其實(shí)。。。。

感覺： 這個feel 倍兒爽 feel feel倍兒爽 爽爽爽爽！

sublime有非常多的優(yōu)點(diǎn)， 最開心的就是非常輕量級，打開速度超快，后面更高的功能，后面再接觸。

sublime生成html骨架小技巧

雙擊打開軟件

新建文件(ctrl+n)

保存(ctrl+s),保存為：文件名.html ( 注意 后綴名必須是 .html )

放大縮小代碼 按住 ctrl 在 滾動鼠標(biāo)滾輪 或者 ctrl+ 加號 鍵 和 ctrl + 減號鍵

生成頁面骨架結(jié)構(gòu)

html: 5 按下tab鍵 或者

! 按下tab鍵

在瀏覽器中預(yù)覽頁面

右鍵在 瀏覽器中打開

3. 文檔類型

用法：

作用：

聲明位于文檔中的最前面的位置，處于 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

** 一句話說出他們:**

就是告訴瀏覽器按照HTML5 規(guī)范解析頁面.

團(tuán)隊約定：

HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明

4. 頁面語言lang

指定html 語言種類

最常見的2個：

en定義語言為英語

zh-CN定義語言為中文

** 一句話說出他們:**

指定該html標(biāo)簽 內(nèi)容 所用的語言為中文

團(tuán)隊約定：

考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值

@拓展閱讀：

簡單來說，可能對于程序來說沒有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理Html的程序?qū)撁嬲Z言內(nèi)容來做一些對應(yīng)的處理或者事情。

比如可以

根據(jù)根據(jù)lang屬性來設(shè)定不同語言的css樣式，或者字體

告訴搜索引擎做精確的識別

讓語法檢查程序做語言識別

幫助翻譯工具做識別

幫助網(wǎng)頁閱讀程序做識別

等等

5. 字符集

字符集(Character set)是多個字符的集合。

計算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計算機(jī)能夠識別和存儲各種文字。

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。

gb2312 簡單中文 包括6763個漢字 GUO BIAO

BIG5 繁體中文 港澳臺等用

GBK包含全部中文字符 是GB2312的擴(kuò)展，加入對繁體字的支持，兼容GB2312

UTF-8則基本包含全世界所有國家需要用到的字符

這句代碼非常關(guān)鍵， 是必須要寫的代碼，否則可能引起亂碼的情況。

** 一句話說出他們:**

這句話是讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對應(yīng)的html內(nèi)容。

團(tuán)隊約定：

一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請盡量統(tǒng)一寫成標(biāo)準(zhǔn)的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"。

---

6. HTML標(biāo)簽的語義化

白話： 所謂標(biāo)簽語義化，就是指標(biāo)簽的含義。

一句話說出語義化目的:

根據(jù)標(biāo)簽的語義，在合適的地方給一個最為合理的標(biāo)簽，讓結(jié)構(gòu)更清晰。

方便代碼的閱讀和維護(hù)

同時讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析，從而更好分析其中的內(nèi)容

使用語義化標(biāo)簽會具有更好地搜索引擎優(yōu)化

語義是否良好： 當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序，并且有良好的可讀性。( 裸奔起來一樣好看 )

遵循的原則：先確定語義的HTML ，再選合適的CSS。所以，我們接下來學(xué)習(xí)html標(biāo)簽，要根據(jù)語義去記憶。 HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽。

----

7. 拓展閱讀@

單身狗的由來

單身狗一詞最早是出自網(wǎng)絡(luò)社區(qū)，起源與大話西游有關(guān)。

大話西游之大圣娶親最后一幕“他好像一條狗”由來。

總結(jié)

以上是生活随笔為你收集整理的html语言语法骨架格式,0002 认识HTML(骨架、DOCTYPE、lang、charset)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。