前端入門學習筆記01：HTML標籤（上）

WiCode發表於2020-09-27
前端筆記HTML

一、簡單認識HTML

1.HTML 指的是超文字標記語言 (多媒體內容超越了文字限制，還有超連結文字) ，它是用來描述網頁的一種語言。HTML 不是一種程式語言，而是一種標記語言。標記語言是一套標記標籤。

 

2..Web 標準的構成：主要包括結構 、表現和行為三個方面。結構、樣式、行為相分離。 結構寫到 HTML 檔案中， 表現寫到 CSS 檔案中， 行為寫到 JavaScript 檔案中。

 

二、HTML標籤

1.如 <html>   </html> 雙標籤

 如 <br /> 單標籤

 

2.雙標籤關係可以分為兩類：包含關係和並列關係。

包含關係：

<head>

   <title> </title>

</head>

並列關係：

<head> </head>

<body> </body>

 

3.第一個HTML頁面

 

備註：根標籤html是最大的標籤，head標籤中要設定的標籤是title（網頁標題），body標籤內放頁面主體內容。

 

4.使用VSCode

生成頁面骨架結構：輸入! 按下 Tab 鍵

VSCode 工具生成骨架標籤新增程式碼：<!DOCTYPE> 標籤，lang 語言， charset 字符集。VSCode 自動生成。

 

5.文件型別宣告標籤

<!DOCTYPE html>

這句程式碼的意思是: 當前頁面採取的是 HTML5 版本來顯示網頁.

<!DOCTYPE> 文件型別宣告，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。

備註: <!DOCTYPE> 宣告位於文件中的最前面的位置，處於 <html> 標籤之前。<!DOCTYPE>不是一個 HTML 標籤，它就是 文件型別宣告標籤。

 

6. lang 語言種類

<html lang=“en”>

用來定義當前文件顯示的語言，有en zh-CN

 

7.  字符集

<meta charset=" UTF-8" />

在<head>標籤內，可以通過<meta> 標籤的 charset 屬性來規定 HTML 文件應該使用哪種字元編碼。 採取 UTF-8來儲存文字. 如果不寫就會亂碼。

備註：以上<!DOCTYPE> 標籤，lang 語言， charset 字符集由VSCode自動生成。

 

8.標題標籤<h1> - <h6>（head）

體會：根據標籤的語義，在合適的地方給一個最為合理的標籤，可以讓頁面結構更清晰。

HTML 提供了 6 個等級的網頁標題，即<h1> - <h6> 。加了標題的文字會變的加粗，字號也會依次變大。一個標題獨佔一行。

 

9.段落標籤  <p>  </p>（paragraph）——可以把 HTML 文件分割為若干段落

在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在 HTML 標籤中，<p>標籤用於定義段落，它可以將整個網頁分為若干個段落。

文字在一個段落中會根據瀏覽器視窗的大小自動換行。段落和段落之間保有空隙。

 

10. 換行標籤<br />（break）——強制換行

在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後才自動換行。如果希望某段文字強制換行顯示，就需要使用換行標籤 <br />。

<br /> 是個單標籤。<br /> 標籤只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

 

11.文字格式化標籤——粗體、斜體 或下劃線等

<strong> 加粗

<em>傾斜

<del>刪除線

<ins>下劃線

 

12.<div> 和<span>標籤

<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。

<div>  </div>

<span>  </span>

div 是 division 的縮寫，表示分割、分割槽。span 意為跨度、跨距。

特點：

1. <div> 標籤用來佈局，但是現在一行只能放一個<div>。 大盒子

2. <span> 標籤用來佈局，一行上可以多個 <span>。小盒子

 

13.影像標籤img

 <img src="影像URL" />

src 是<img>標籤的必須屬性，它用於指定影像檔案的路徑和檔名。所謂屬性：簡單理解就是屬於這個影像標籤的特性。

更多屬性：

① 影像標籤可以擁有多個屬性，必須寫在標籤名的後面。

② 屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。

③ 屬性採取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。

 

14.相對路徑

下一級路徑   /

上一級路徑  ../

體會：檔案不能隨便亂放。新建一個資料夾來存放這些影像檔案。

 

15.超連結標籤<a>  (anchor錨)

<a href="跳轉目標" target="目標視窗的彈出方式"> 文字或影像 </a>

連結分類：

1. 外部連結: 例如

< a href="https://www.2345.com/?k69973059 "> 網址導航</a >

2. 內部連結:網站內部頁面之間的相互連結. 直接連結內部頁面名稱即可，例如

< a href="index.html"> 首頁 </a >

3. 空連結: 如果當時沒有確定連結目標時，

< a href="#"> 首頁 </a >

4. 下載連結: 如果 href 裡面地址是一個檔案或者壓縮包，會下載這個檔案。

5. 網頁元素連結: 在網頁中的各種網頁元素，如文字、影像、表格、音訊、視訊等都可以新增超連結.

6. 錨點連結: 點我們點選連結,可以快速定位到頁面中的某個位置.

l 在連結文字的 href 屬性中，設定屬性值為 #名字 的形式，如

<a href="#two"> 第2集 </a>

l 找到目標位置標籤，裡面新增一個 id 屬性 = 剛才的名字 ，如：

<h3 id="two">第2集介紹</h3>

 

16.註釋

<!-- 註釋語句 -->

快捷鍵: ctrl + /

 

17.特殊字元——空格 、大於號、 小於號

 

 

 

 

 

 

 

相關文章