typora-copy-images-to: media

第01階段.前端基礎.認識HTML

學習目標

理解
- HTML的概念
- HTML標簽的分類
- HTML標簽的關系
- HTML標簽的語意化
應用
- HTML骨架格式
- sublime基本使用

1. HTML 初識

HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言，
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

pink老師一句話說出html作用:

網頁是由網頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器決議，就可以顯示給用戶了，

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

因為它可以加入圖片、聲音、影片、多媒體等內容（**超越文本限制 **）
不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連接（**超級鏈接文本 **），

<img src=https://www.cnblogs.com/etoumao/p/"timg.jpg" />

門外漢眼中的效果頁面

我們要做的html頁面

html 總結:

html 是超文本標記(標簽)語言
我們學習html 主要學習html標簽
我們用html標簽描述網頁元素，比如圖片標簽、文字標簽、鏈接標簽等等
標簽有自己的語法規范，所有的html標簽都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦）是很快樂的一件事情

1.1 HTML骨架標簽

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

同理：HTML 有自己的語言語法骨架格式：（要遵循，要專業）要求務必非常流暢的默寫下來，，

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

html骨架標簽總結

標簽名	定義	說明
	HTML標簽	頁面中最大的標簽，我們成為根標簽
	檔案的頭部	注意在head標簽中我們必須要設定的標簽是title
	檔案的標題	讓頁面擁有一個屬于自己的網頁標題
<body>	檔案的主體	元素包含檔案的所有內容，頁面內容基本都是放到body里面的

**課堂練習1： **

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

新建一個 01-html骨架標簽的 TXT 檔案，
里面寫入剛才的HTML 骨架，
把后綴名改為 .HTML，

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

<html>   
    <head>     
        <title>我的第一個頁面</title>
    </head>
    <body>
           你我之間 黑馬洗練 月薪過萬   一飛沖天   
    </body>
</html>

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

團隊約定大小寫

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫

推薦：

<head>     
        <title>我的第一個頁面</title>
 </head>

不推薦：

<HEAD>     
        <TITLE>我的第一個頁面</TITLE>
</HEAD>

1.2 HTML元素標簽分類

標簽：

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML骨架結構標簽，

分類：

常規元素（雙標簽）

<標簽名> 內容 </標簽名>   比如 <body>  我是文字  </body>

該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”，
和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”，
我們以后接觸的基本都是雙標簽

空元素（單標簽）

<標簽名 />  比如  <br />

空元素用單標簽來表示，簡單點說，就是里面不需要包含內容，只有一個開始標簽不需要關閉，
這種單身狗標簽非常少，一共沒多少，我們多記憶就好

pink老師一句話說出他們:

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

1.3 HTML標簽關系

主要針對于雙標簽 的相互關系分為兩種：請大家務必熟悉記住這種標簽關系，因為后面我們標簽嵌套特別多，很容易弄混他們的關系，

嵌套關系

<head>  
	<title> </title> 
</head>

2.并列關系

<head></head>
<body></body>

倡議：

 如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格），如果是并列關系，最好上下對齊，

pink老師一句話說出他們:

html雙標簽可以分為有一種是父子級包含關系的標簽一種是兄弟級并列關系的標簽

1.4 課堂一練

**請問下列哪組標簽關系是錯誤的？ **

[ ] <body>
[ ]
[x] </head>
[ ] <body>

2. 代碼開發工具（書寫代碼）

為了提高我們的開發效率
減少代碼的出錯我們不提倡用記事本開發，我們有更好的犀利哥，
Dreamweaver
SublimeText
WebStorm
HBuilder
VScode

有人說：

普通青年 Dreamweaver

文藝青年 sublime

高手和傻子用記事本

其實，，，，

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

sublime有非常多的優點，最開心的就是非常輕量級，打開速度超快，后面更高的功能，后面再接觸，

sublime生成html骨架小技巧

雙擊打開軟體
新建檔案（ctrl+n）
保存（ctrl+s）,保存為：檔案名.html （注意后綴名必須是 .html )
放大縮小代碼按住 ctrl 在滾動滑鼠滾輪或者 ctrl+ 加號鍵和 ctrl + 減號鍵
生成頁面骨架結構
- html: 5 按下tab鍵或者
- ! 按下tab鍵
在瀏覽器中預覽頁面
- 右鍵在瀏覽器中打開

3. 檔案型別<!DOCTYPE>

用法：

<!DOCTYPE html>

作用：

宣告位于檔案中的最前面的位置，處于標簽之前，此標簽可告知瀏覽器檔案使用哪種 HTML 或 XHTML 規范，

pink老師一句話說出他們:

就是告訴瀏覽器按照HTML5 規范決議頁面.

團隊約定：

HTML檔案必須加上 DOCTYPE 宣告，并統一使用 HTML5 的檔案宣告

4. 頁面語言lang

<html lang="en">  指定html 語言種類

最常見的2個：

en定義語言為英語
zh-CN定義語言為中文

pink老師一句話說出他們:

指定該html標簽內容所用的語言為中文

團隊約定：

考慮瀏覽器和作業系統的兼容性，目前仍然使用 zh-CN 屬性值

@拓展閱讀：

簡單來說，可能對于程式來說沒有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理Html的程式對頁面語言內容來做一些對應的處理或者事情，
比如可以

根據根據lang屬性來設定不同語言的css樣式，或者字體
告訴搜索引擎做精確的識別
讓語法檢查程式做語言識別
幫助翻譯工具做識別
幫助網頁閱讀程式做識別
等等

5. 字符集

<meta charset="UTF-8" />

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

計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存盤各種文字，

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312，

gb2312 簡單中文包括6763個漢字 GUO BIAO
BIG5 繁體中文港澳臺等用
GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則基本包含全世界所有國家需要用到的字符
這句代碼非常關鍵，是必須要寫的代碼，否則可能引起亂碼的情況，

pink老師一句話說出他們:

這句話是讓 html 檔案是以 UTF-8 編碼保存的，瀏覽器根據編碼去解碼對應的html內容，

團隊約定：

一般情況下統一使用 "UTF-8" 編碼, 請盡量統一寫成標準的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"，

6. HTML標簽的語意化

白話：所謂標簽語意化，就是指標簽的含義，

pink老師一句話說出語意化目的:

根據標簽的語意，在合適的地方給一個最為合理的標簽，讓結構更清晰，

方便代碼的閱讀和維護
同時讓瀏覽器或是網路爬蟲可以很好地決議，從而更好分析其中的內容
使用語意化標簽會具有更好地搜索引擎優化

語意是否良好：當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，( 裸奔起來一樣好看 )

遵循的原則：先確定語意的HTML ，再選合適的CSS，所以，我們接下來學習html標簽，要根據語意去記憶， HTML網頁中任何元素的實作都要依靠HTML標簽，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/31011.html

標籤：其他

上一篇：PS切圖工具

下一篇：根據js輪播圖原理寫出合理的結構與樣式、并實作js互動效果

【01】HTML_day01_02-認識HTML

typora-copy-images-to: media

學習目標

1. HTML 初識

1.1 HTML骨架標簽

html骨架標簽總結

團隊約定大小寫

1.2 HTML元素標簽分類

1.3 HTML標簽關系

1.4 課堂一練

2. 代碼開發工具（書寫代碼）

3. 檔案型別<!DOCTYPE>

4. 頁面語言lang

5. 字符集

6. HTML標簽的語意化