認識 HTML

時間 2019-11-19

標籤認識 html 欄目 HTML 简体版

原文原文鏈接

什麼是HTML

HTML實際上是 HyperText Markup Language 的縮寫，超文本標記語言css

HTML的做用

一、首先利用記事本保存了一個標題和兩段描述, 而後修改純文本文件的擴展名爲 .html，而後再利用瀏覽器打開html

鄭伊健

鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝「陽光檸檬茶」廣告而入行，拜羅文爲師。[1] 

1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑藉在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑藉《古惑仔》主題曲《友情歲月》得到十大中文金曲獎。1996年至1997年連續兩次得到」臺灣十大偶像」獎。

二、打開以後發現顯示的格式不對，不對的緣由是由於在純文本文件中全部文字都是同級別的，瀏覽器不知道哪些文字表明什麼意思。也就是瀏覽器不知道哪些文字是標題，哪些文字是段落，因此致使了顯示的格式不正確web
三、正是由於如此，因此 HTML 應用而生。HTML 就只有一個做用，它是專門用來描述文本的語義的。也就是說咱們能夠利用 HTML 來告訴瀏覽器哪些是標題，哪些是段落。瀏覽器
- 這些用於描述其它文本語義的文本，咱們稱之爲標籤。而且這些用於描述文本語義的標籤未來在瀏覽器中是不會被顯示出來的ide
- 因此正是由於 HTML 的這些標籤是專門用來描述其它文本語義的，而且在瀏覽器中不會被顯示出來，因此咱們稱這些文本爲"超文本"，而這些文本又叫作標籤，因此 HTML 被稱之爲"超文本標記語言"網站
```
<h1>鄭伊健</h1>

<p>鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝「陽光檸檬茶」廣告而入行，拜羅文爲師。 </p>

<p>1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑藉在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑藉《古惑仔》主題曲《友情歲月》得到十大中文金曲獎。1996年至1997年連續兩次得到」臺灣十大偶像」獎。</p>
```
注意事項翻譯
- 雖然咱們利用 H1 標籤描述一段文本以後，這段文本在瀏覽器中顯示出來會被放大和加粗，看上去咱們是利用 HTML 的標籤修改了被描述的那段文本的樣式。可是必定要記住，HTML只有一個做用，它是專門用來給文本添加語義的，而不是用來修改文本的樣式的
H1標籤它的做用是什麼?code
- 錯誤：H1 標籤能夠用來修改文字的大小，而且還能夠將文字加粗
- 正確：H1 標籤的做用是用來告訴瀏覽器，哪些文字是標題。也就是 H1 標籤是專門用於給指定的文字添加標題語義的

HTML發展史

IETF簡介

IETF是英文 Internet Engineering Task Force 的縮寫，翻譯過來就是」互聯網工程任務組「
IETF 負責定義並管理因特網技術的全部方面。包括用於數據傳輸的 IP 協議、讓域名與 IP 地址匹配的域名系統（DNS）、用於發送郵件的簡單郵件傳輸協議（SMTP）等

W3C簡介

W3C 是英文 World Wide Web Consortium 的縮寫，翻譯過來就是 W3C 理事會或萬維網聯盟，W3C 是全球互聯網最具權威的技術標準化組織
W3C於 1994 年 10 月在麻省理工學院計算機科學實驗室成立。建立者是萬維網的發明者 Tim Berners-Lee
W3C 負責 web 方面標準的制定，像 HTML、XHTML、CSS、XML 的標準就是由 W3C 來定製的

網頁固定格式

一、編寫網頁和寫信同樣都有一套規範和要求，這套規範和要求中規定了寫信的固定格式
二、寫信基本結構

敬愛的湫兮:
      您好!
      正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
      此致
敬禮!
                                                             你的朋友 伊健
                                                             2066年6月6日

三、編寫網頁的步驟：視頻

3.一、新建一個文本文檔htm

3.二、利用記事本打開

3.三、編寫THML代碼

3.四、保存而且修改純文本文檔的擴展名爲.html

3.五、利用瀏覽器打開編寫好的文件
四、網頁基本結構：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

五、經過觀察咱們發現，HTML基本結構中全部的標籤都是成對出現的，這些成對出現的標籤中有一個帶 / 有一個不帶 / ，那麼這些不帶 / 的標籤咱們稱之爲開始標籤，這些帶 / 的咱們稱之爲結束標籤

html標籤

做用：
- 用於告訴瀏覽器這是一個網頁，也就是說告訴瀏覽器我是一個 HTML 文檔
- 例如：
  - 指定網站的標題 / 指定網站的小圖片
  - 添加網站的 SEO 相關的信息（指定網站的關鍵字 / 指定網站的描述信息）
  - 外掛一些外部的 css / js 文件
  - 添加一些瀏覽器適配相關的內容
注意點：
- 通常狀況下，寫在 head 標籤內部的內容都不會顯示給用戶查看，也就是說通常狀況下寫在 head 標籤內部的內容咱們都看不到

title標籤

做用：
- 專門用於指定網站的標題，而且這個指定的標題未來還會做爲用戶保存網站的默認標題
注意點：
- title 標籤必須寫在 head 標籤裏面

body標籤

做用：
- 專門用於定義 HTML 文檔中須要顯示給用戶查看的內容（文字 / 圖片 / 音頻 / 視頻）
注意點：
- 雖說有時候你可能將內容寫到了別的地方在網頁中也能看到，可是千萬不要這麼作，必定要將須要顯示的內容寫在 body 中
- 一對 html 標籤中（一個 html 開始標籤和一個 html 結束標籤）只能有一對 body 標籤

meta標籤

一、爲何會有亂碼現象？
- 由於在編寫網頁的時候沒有指定字符集
二、如何解決亂碼現象？
- 在 head 標籤中添加<meta charset="utf-8" />，指定字符集

HTML標籤

HTML標籤分類

單標籤
- 只有開始標籤沒有結束標籤，也就是由一個 <> 組成的
```
<meta charset="UTF-8" />
```
雙標籤
- 有開始標籤和結束標籤，也就是由一個 <> 和一個 </> 組成的
```
<html>
</html>
```

HTML標籤關係分類

並列關係（兄弟 / 平級）

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

嵌套關係（父子 / 上下級）

<head>
    <meta charset="UTF-8" />
    <title>百度一下，你就知道</title>
</head>

文檔聲明

什麼是文檔聲明？
- 因爲 HTML 有不少個版本的規範，每一個版本的規範之間又有必定的差別。因此爲了讓瀏覽器可以正確的編譯、解析、渲染咱們的網頁，咱們須要在 HTML 文件的第一行告訴瀏覽器，當前這個網頁是用哪個版本的HTML規範來編寫的。瀏覽器只要知道了是用哪個版本的規範來編寫以後，它就可以正確的編譯、解析、渲染網頁
文檔聲明格式：

<!DOCTYPE html>

注意事項
- <!DOCTYPE>聲明必須是 HTML 文檔的第一行，位於標籤以前
- <!DOCTYPE> 聲明不是 HTML 標籤
- <!DOCTYPE> 聲明沒有結束標籤
- <!DOCTYPE> 聲明對大小寫不敏感
- 這個聲明瀏覽器會看，可是並非徹底依賴於這個聲明，瀏覽器有一套本身的默認的處理機制
  - 不寫也能運行
  - H5網頁裏面用H4也能運行

相關標籤/搜索

每日一句

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