Web前端-Html部分筆記（一）
以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。
由於是筆記，所以我只寫需要記的部分，那些關於Web基礎概念和Html的發展史這種瞭解的東西我就不陳述了。
一、什麼是 HTML?
-
HTML 是用來描述網頁的一種語言。
-
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
-
HTML 不是一種程式語言，而是一種標記語言 (markup language)
-
標記語言是一套標記標籤 (markup tag)
-
HTML 使用標記標籤來描述網頁
二、什麼是 HTML標籤?
-
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
-
HTML 標籤是由尖括號包圍的關鍵詞
-
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
-
開始和結束標籤也被稱為開放標籤和閉合標籤
-
標籤名必須為半形文字，大小寫皆可。以前流行用大寫，最近開始流行用小寫，因為XHTML（可擴充套件超文字標記語言）裡面規定標籤名必須小寫。標籤名的前面不能有空格
三、HTML元素標籤分類
- 單標籤
只有開始標籤沒有結束標籤, 也就是由一個<>組成 - 雙標籤
有開始標籤和結束標籤, 也就是由一個<>和一個</>組成的
四、HTML元素型別
4.1、區塊元素(display:block)
1、說明
-
每個塊級元素都從新的一行開始，並且其後的元素也要另起一行。（一個塊級元素獨佔一行）。
-
元素的高度、寬度、行高以及頂和底邊距都可設定。
-
元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定了寬度
-
一般是其他元素的容器元素,可以包含文字,內聯元素和其他塊元素
2、常用的塊狀元素
| 標籤 | 說明 |
|---|---|
| div | 文件節 |
| ul | 無序列表 |
| ol | 有序列表 |
| dl | 定義列表 |
| p | 段落 |
| h1...h6 | 標題 |
| table | 表格 |
| address | 地址 |
| form | 表單 |
4.2、內聯元素(display:inline)
1、說明
-
和其他元素都在同一行；
-
元素的高、寬、行高以及邊距均不可設定
-
元素的高、寬均取決於它包含的文字或圖片的大小
-
內聯元素只能容納文字或者其他內聯元素
2、常用的行內元素
| 標籤名 | 說明 |
|---|---|
| a | 錨點 |
| span | 常用內聯容器，定義文字內區塊 |
| label | 表格標籤 |
| br | 換行 |
| i | 斜體 |
| em | 強調 |
| strong | 粗體強調 |
| textarea | 多行文字輸入框 |
4.3、內聯塊(display:inline-block)
1、說明
-
和其他元素在同一行；
-
元素的高度、寬度、行高及邊距可以設定
2、常用的行內塊狀元素
| 標籤名 | 說明 |
|---|---|
| img | 圖片 |
| input | 輸入 |
五 、基礎結構
5.1、網頁整體結構
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>5.2、html標籤(雙標籤)
1、作用
用於告訴瀏覽器這是一個網頁, 也就是說告訴瀏覽器我是一個HTML文件
2、注意
其它所有的標籤都必須寫在html標籤裡面, 也就是寫在html開始標籤和結束標籤中間
5.3、head標籤(雙標籤)
1、作用
雙標籤,用於給網站新增一些配置資訊
2、例如
-
指定網站的標題 / 指定網站的小圖片
-
新增網站的SEO相關的資訊(指定網站的關鍵字/指定網站的描述資訊)
-
外掛一些外部的css/js檔案
-
新增一些瀏覽器適配相關的內容
3、注意
一般情況下，寫在head標籤內部的內容都不會顯示給使用者看
5.4、body標籤(雙標籤)
1、作用
雙標籤,專門用於定義HTML文件中需要顯示給使用者檢視的內容(文字/圖片/音訊/視訊)
2、注意
-
一個html開始標籤和一個html結束標籤只能有一對body標籤
-
預設樣式:margin:8px;