HTML筆記

Cloud_WK發表於2024-04-08
HTML筆記

HTML

​ 引言：HTML（超文字標記語言），可以理解為是網頁的一個骨架，支撐著整個網頁。標籤分為雙標籤和單標籤（自閉合標籤），HTML中絕大多數都是雙標籤；在HTML中透過CSS選擇器對網頁元素進行樣式，透過JavaScript進行網頁的互動效果。

標籤名彙總

1、網頁的基本HTML結構：

<!DOCTYPE html>
<html lang=”zh-CN“>
    <head>
        <meta charset="UTF-8">
        <title>.....</title>
    </head>
    <body>
        ......
        ......
    </body>
</html>

2、HTML字元編碼

  • 平時編寫程式碼時，統一採用UTF-8編碼最為穩妥，因為支援大部分國家的文字和字元，被稱為萬國碼。

  • 為了讓瀏覽器在渲染html檔案時，不犯錯誤，可以透過meta標籤配合charset屬性指定字元編碼。

    <head>
    <meta charset="UTF-8"/>
</head>

3、HTML設定語言

​ 主要作用：讓瀏覽器顯示對應的翻譯提示、有利於搜尋引擎最佳化。

  • 具體寫法：

    <html lang="zh-CN">

  • 常用的語言：

    • zh-CN：中文-中國大陸（簡體中文）
    • zh-TW：中文-中國臺灣（繁體中文）
    • en-US：英語-美國
    • en-GB：英語-英國

4、語義化標籤

  • 概念：用特定的標籤，去表達特定的含義。
  • 原則：html標籤的效果不重要，在網頁中標籤的語義（側重標籤意思而不是效果）很重要，因為CSS可以調整標籤的效果。
  • 語義化的好處：
    • 程式碼結構清晰可讀性強。
    • 有利於SEO（搜尋引擎最佳化）。
    • 方便裝置解析（螢幕閱讀器、盲人閱讀器等）。

5、塊級元素和行內元素

  • 塊級元素：獨佔一行（塊級元素中能巢狀塊級元素和行內元素）。
  • 行內元素：不獨佔一行，可以堆疊在一行裡面（行內元素裡面只能巢狀行內元素）。
  • h1~h6之間不能互相巢狀，p元素中不要寫塊級元素。

6、跳轉到錨點

​ 錨點就是網頁中的一個標記點，可以幫助我們定位到指定元素位置。具體使用方式：

  • 第一步：設定錨點：

    <!-- 第一種方式：a標籤配合name屬性 -->
<a name="test1"></a>

<!-- 第二種方式：其他標籤配合id屬性 -->
<h2 id="test2">我是一個位置</h2>

  • 第二步：跳轉錨點：

    <!-- 跳轉到test1錨點-->
<a href="#test1">去test1錨點</a>

<!-- 跳到本頁面頂部 -->
<a href="#">回到頂部</a>

<!-- 跳轉到其他頁面錨點 -->
<a href="demo.html#test1">去demo.html頁面的test1錨點</a>

<!-- 重新整理本頁面 -->
<a href="">重新整理本頁面</a>

7、網頁中的表單

​ 概念：一個包含互動的區域，用於收集使用者提供的資料。

標籤名 標籤語義 常用屬性 單/雙標籤
form 表單 action ：用於指定表單的提交地址（後端地址）。target ：用於控制表單提交後，如何開啟頁面（_self，__blank）。methon：用於控制表單的提交方式（POST、GET） 雙
input 輸入框 type：設定輸入框的型別（text、password、radio、checkbox等...）。name：用於指定提交資料的名字 單
button 按鈕 提交按鈕 雙

8、HTML實體

​ 在 HTML 中我們可以用一種特殊的形式的內容，來表示某個符號，這種特殊形式的內容，就是 HTML 實體。比如小於號 < 用於定義 HTML 標籤的開始。如果我們希望瀏覽器正確地顯示這些字元，我們必須在 HTML 原始碼中插入字元實體。常用的字元實體如下：

  • 空格：&nbsp；小於號：&lt；大於號：&gt；元（￥）：&yen；版權（coperight）：&cope；乘號：&times；除號：divide；

  • 完整實體列表，請參考：HTML Standard (whatwg.org)

9、meta 元資訊

<!-- 配置字元編碼 -->
<meta charset="utf-8">

<!-- 針對 IE 瀏覽器的相容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 針對移動端的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 配置網頁關鍵字 -->
<meta name="keywords" content="8-12個以英文逗號隔開的單詞/詞語">

<!-- 配置網頁描述資訊 -->
<meta name="description" content="80字以內的一段話，與網站內容相關">

<!-- 針對搜尋引擎爬蟲配置 -->
<meta name="robots" content="index、noindex、follow、nofollow、all、none、noarchive、nocache">

<!-- 配置網頁作者 -->
<meta name="author" content="tony">

<!-- 配置網頁生成工具 -->
<meta name="generator" content="Visual Studio Code">

<!-- 配置定義網頁版權資訊 -->
<meta name="copyright" content="2023-2027©版權所有">

<!-- 配置網頁自動重新整理 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

相關文章