【01】HTML_day01_02-認識HTML

時間 2020-02-10

標籤 html day01 day 認識欄目 HTML 简体版

原文原文鏈接

typora-copy-images-to: media

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

學習目標

理解
- HTML的概念
- HTML標籤的分類
- HTML標籤的關係
- HTML標籤的語義化
應用
- HTML骨架格式
- sublime基本使用

1. HTML 初識

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

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

網頁是由網頁元素組成的，這些元素是利用html標籤描述出來，而後經過瀏覽器解析，就能夠顯示給用戶了。前端

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

由於它能夠加入圖片、聲音、動畫、多媒體等內容（超越文本限制 ）
不只如此，它還能夠從一個文件跳轉到另外一個文件，與世界各地主機的文件鏈接（超級連接文本 ）。

<img src="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裏面的

課堂練習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 課堂一練

請問下列哪組標籤關係是錯誤的？

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

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>

做用：

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

pink老師一句話說出他們:

<!DOCTYPE html> 就是告訴瀏覽器按照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標籤。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。