HTML學習筆記

zydow發表於2024-10-28
HTML筆記

宣告:該學習筆記內容均來自於菜鳥教程：https://www.runoob.com/及AcWing：https://www.acwing.com/about/,如涉及侵權我將即刻刪除文章


這篇部落格是我自己在學習HTML的時候所做的筆記,只是方便各位學習知識,交流知識,本文僅用作技術分享.

什麼是 HTML?

HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言: HyperText Markup Language
HTML 不是一種程式語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文件包含了HTML 標籤及文字內容
HTML文件也叫做 web 頁面

學習HTML前要做的準備


雖然說HTML甚至可以用記事本來寫，但是還是推薦使用一個好的IDE

推薦一款我在用的IDE：
VS Code：https://code.visualstudio.com/
在這裡就先不做VS Code的安裝教程了，可以去B站搜一下，還是很全的https://www.bilibili.com/

推薦幾款VS Code的外掛：


Fitten Code: Faster and Better AI Assistant 一個好用的AI，可以猜測你想要寫的程式碼加以提示
開啟程式碼檔案，輸入一段程式碼，Fitten Code 就會為您自動補全程式碼
按下 Tab 鍵接受所有補全建議
按下Ctrl + → 鍵(mac系統為Command+→)接收單個詞補全建議
使用者可透過點選左上角工具欄中的Fitten Code – 開始對話或者使用快捷鍵Ctrl+Alt+C(mac系統為Control+Option+C)開啟對話視窗進行對話：


中文外掛，英語不好的同志的救星，含金量MAX
PS：輸入英文歎號，再點選回車，可以直接生成一段簡單的HTML模板

推薦幾個學習HTML的網站：


菜鳥教程：https://www.runoob.com/
AcWing：https://www.acwing.com/about/

接下來，開始我們的HTML學習之旅

HTML 元素語法

  • HTML 元素以開始標籤起始

  • HTML 元素以結束標籤終止

  • 元素的內容是開始標籤與結束標籤之間的內容

  • 某些 HTML 元素具有空內容（empty content）

  • 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）

  • 大多數 HTML 元素可擁有屬性

  • <!DOCTYPE html> 宣告為 HTML5 文件

  • <html> 元素是 HTML 頁面的根元素

  • <head> 元素包含了文件的元（meta）資料，如 定義網頁編碼格式為 utf-8。
    （中文亂碼：目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元宣告為 UTF-8 或 GBK。）

  • <title> 元素描述了文件的標題

  • <body> 元素包含了可見的頁面內容

  • <h1> 元素定義一個大標題（數字可改變，h1最大，h6最小）

  • <p> 元素定義一個段落 示例：<p>段落

  • <p>這個<br>段落<br>演示了分行的效果</p>

  • <a href="https://www.cnblogs.com/zydow">這是一個連結使用了href屬性.

  • <img src="https://img2024.cnblogs.com/blog/3534859/202410/3534859-20241015205814309-888099565.png" width="800" height="450" />

  • HTML影像
    示例：HTML學習筆記

  • <br> 換行

  • <hr> 水平線

  • <!-- 這是一個註釋 --> 註釋

HTML 空元素


沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。
<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標籤中新增斜槓，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

HTML 屬性

屬性是 HTML 元素提供的附加資訊。
屬性總是以 name="value" 的形式寫在標籤內，name 是屬性的名稱，value 是屬性的值。

例如：<a href="https://www.cnblogs.com/zydow">這就是一個連結使用了href屬性.
屬性值應該始終被包括在引號內。
雙引號是最常用的，不過使用單引號也沒有問題。

PS：在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號
例如：name='zy "zydow" dow'

文字格式化

<b>加粗文字</b><br><br>
<i>斜體文字</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>、

表單


<form>標籤
HTML<form>元素表示文件中的一個區域，此區域包含互動控制元件，用於向Web伺服器提交資訊。
<input>標籤
HTML<input>用來填寫內容，常見型別有：
<input type="text">：建立基礎的單行文字框。
<input type="number">：用於讓使用者輸入一個數字。其包括內建驗證以拒絕非數字輸入。瀏覽器可能會選擇提供步進箭頭，讓使用者可以使用滑鼠增加和減少輸入的值，或者只需用指尖敲擊即可。
<input type="email">：帶有 “email” (電子郵箱) 型別標記的輸入框元素 (<input>) 能夠讓使用者輸入或編輯一個電子郵箱地址，此外，如果指定了multiple屬性，使用者還可以輸入多個電子郵箱地址。在表單提交前，輸入框會自動驗證輸入值是否是一個或多個合法的電子郵箱地址 (非空值且符合電子郵箱地址格式). CSS 偽標籤 :valid 和 :invalid 能夠在校驗後自動應用。
<input type="password">：<input> 元素 裡有一種叫做 “password” 的值，給我們一個方法讓使用者更加安全的輸入密碼。這個元素是作為一行純文字編輯器控制元件呈現的，其中文字被遮蔽以致於無法讀取，通常透過用諸如星號（“*”）或點（“•”）等符號替換每個字元來實現。這個符號會根據使用者的瀏覽器和作業系統來具體顯示哪個。
<input type="radio">： 的 radio 型別元素預設渲染為小型圓圈圖表，填充即為啟用，類似於之前描述額核取方塊（checkbox）型別。單選按鈕允許你選擇單一的值來提交表單。

常用屬性有:

name: 名稱
id: 唯一ID
maxlength：最大長度
minlength：最小長度
required：是否必填
placeholder：當表單控制元件為空時，控制元件中顯示的內容
<textarea>標籤:HTML <textarea>元素表示一個多行純文字編輯控制元件，當你希望使用者輸入一段相當長的、不限格式的文字，例如評論或反饋表

相關文章