HTML基礎筆記

超雄代码狂發表於2024-08-17
HTML筆記

HTML

HTML4

編輯器：

VsCode

VsCode中的快捷鍵：

標準結構 ！
刪除當前行中的內容 ctrl + shift + k

註釋：

語法：

<!--    -->

字元編碼：

預設：

絕大多數瀏覽器認為你使用UTF-8編碼，因此會用UTF-8解碼

語法：

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

過程：

原始碼 to 編碼 to 編碼後的進位制程式碼 to 解碼 to 原始碼

錯誤型別：

編碼錯誤： 問號

解碼錯誤： 亂碼；

亂碼不可以修復，而問號可以更改為原型

設定語言：

原因：

根據瀏覽器中的語言判斷是否提供翻譯提示

語法：

<html lang = "zh-CN">
</html>

meta元資訊：

描述瀏覽器的基本資訊

開發者文件：

W3School

MDN

標籤：

排版標籤：

標籤名 標籤含義 單/雙標籤
h1~h6 標題 雙
p 段落 雙
div 沒有任何含義，用於整體佈局 雙
  1. h1在一個網頁中只能有一個，h2~h6可以有多個
  2. h1~h6不可以相互巢狀
  3. p標籤裡不能巢狀塊級元素

語法：

<h1>一級標題</h1>
<h2>二級標題</h2>
<p>
   這是一個段落
</p>
<div>
    這就像一個大包裝袋，分類袋
</div>

超連結標籤,圖片標籤：

語法：

<a href = "address"></a>
<a href="#">回到頂部</a>
    <a href="">重新整理頁面</a>
<a href = "#16">看庫裡</a> <!-- 地址以#開頭代表具體位置是錨點 -->
<a name = "16"></a> <!-- 這是錨點 -->
<a href = "#15">看圖片</a> 
<img id = "15" src = "address">
<!-- 超連結喚醒指定程式 -->
<a href="tel:17739501240">電話聯絡</a>
    <a href="mailto:2164182641@qq.com">郵件聯絡</a>
    <a href="sms:10086">簡訊聯絡</a>

超連結標籤作用：

  1. 可以開啟網站，檔案
  2. 可以跳轉錨點，也可以跳轉到另一個網站的錨點
  3. 有name標籤是錨點，有href是跳轉點
  4. 用來實現區域內容的跳轉和回到頂部的功能
  5. 喚起指定應用程式

相對路徑：

  • 上一級： ../
  • 下一級：/

語義化標籤

這對於設定HTML格式是一個重要的知識點

[!IMPORTANT]

標籤的效果不重要，重要的是這個標籤符合語義

作用：

  • 程式碼的可讀性強，清晰
  • 有利於SEO（搜尋引擎最佳化） 爬蟲 程式碼 機器人
  • 方便裝置解析（螢幕閱讀器，盲人閱讀器）

標籤分類

  • 塊級標籤
  • 行內標籤

[!CAUTION]

  • 塊級標籤可以包含塊級，行內標籤
  • 行內標籤只能包含行內標籤
  • 有一些特殊的規則，個例

列表標籤

語法：

<ul>
    <!-- 獨佔一行 -->
    <li>NBA實時直播</li>
    <li>NBA回放</li>
    <li>NBA球員榜</li>
    <li>東西部排名</li>
</ul>
<!--無序列表 -->

<ol>
    <li>設計程式的流程圖</li>
    <li>規範其中的演算法和資料結構</li>
    <li>將流程圖變成所用語言的程式碼並進行編譯測試</li>
</ol>
<!--有序列表 -->
<dl>
    <dt>標題</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>
<!--定義列表 -->

重點：

  • 三個列表可以互相巢狀
  • 有序和無序列表最好元素都是
  • 起手

表格標籤

表頭：

單元格：

主體：

腳註：

單元格：

一行：

屬性：

[!NOTE]

  • border（邊距）

  • width（寬度）

  • height（高度）

  • cellspacing（單元格間距）

    為0不代表邊距重合

[!NOTE]

  • align(在邊框中的水平位置)
  • valign（垂直對齊）
  • colspan（跨列）
  • rowspan（跨行）

語法：

 <table border="1">
     <caption>學生資訊</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>語文</th>
                <th>數學</th>
                <th>總分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>99</td>
                <!-- 不能跨結構合併 -->
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>總結</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>
    </table>

常見文字標籤

em：要著重閱讀的內容

strong: 比em的語氣強

span：沒有語義，用於包裹短語的通用容器

雙標籤

常見標籤

  • br：換行
  • pre：按原文顯示
  • hr：分割線

單標籤

表單標籤（form）

作用：網頁中的互動區域 to 收集資訊

屬性：

  • action：將資料傳給哪個網站

  • target：是原網頁，還是新網頁，還是框架到action指定的網站

    語法：

 <form action="https://search.jd.com/search">
        賬戶：<input type="text" name="account" value="fafa" maxlength="10s"><br>
        密碼：<input type="password" name="psd" >
        <br>
        性別：
        <input type="radio" name="gender"value = "male">男
        <input type="radio" name="gender"value = "female" checked>女
        <br>
        愛好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽菸
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">燙頭
        <br>
        其他：
        <!-- 文字域 -->
        <textarea name="other" cols="20" rows="10" ></textarea>
        <!-- 可以換行 -->
         籍貫：
         <!-- 下拉框 -->
         <select name="place" >
            <option value="hebei">河北</option>
            <option value="shandong" selected>山東</option>
            <option value="shanghai">上海</option>
         </select>
        <br>
     	<!-- 隱藏域 -->
     	<input type = "hidden" name = "tag" value = "100">
     	<br>
        <br>
        <!-- 確認按鈕的第一種寫法 -->
        <button type="submit">確認 </button>
        <!-- 預設就是submit -->
        <!-- 確認按鈕的第二種寫法 -->
        <input type="submit" value="確認">
        <!-- 不可以寫name屬性，讓提交把按鈕的資料帶走 -->
         <!-- 重置按鈕的第一種寫法 -->
        <button type="reset">重置</button>
         <!-- 重置按鈕的第二種寫法 -->
        <input type="reset" value="點我重置">
          <!-- 普通按鈕 第一種寫法 -->
        <button type="button">檢測使用者賬號是否註冊</button>
         <!-- 普通按鈕 第二種寫法 -->
        <input type="button" value="檢測使用者賬號是否註冊">
     
	<!-- 禁用表單元素 - disabled	-->
      賬戶：<input disabled type="text" name="account" value="fafa" maxlength="10s"><br>
    </form>

<!-- 第一種寫法  透過id進行繫結 -->
    <label for="zhanghu">賬號：</label>
    <input id="zhanghu" type="text">
    <label for="mima">密碼：</label>
    <input id="mima" type="password">
    <!-- 第二種寫法  直接包裹-->
    <label>
        備註：<input type="text">
    </label>

 <!-- 主要資訊  -->
    <fieldset>
        <legend>主要資訊</legend>
        賬戶：<input type="text" name="account" value="fafa" maxlength="10s"><br>
        密碼：<input type="password" name="psd">
        <br>
        性別：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女
        <br>
    </fieldset>
    <!-- 附加資訊 -->
     <fieldset>
        <legend>附加資訊</legend>
        kgjkldsg
     </fieldset>

框架標籤

語法：

 <!-- 用的不多？ -->
     <!-- 可以嵌入網頁，圖片，廣告等 -->
      <!-- 瀏覽器能開啟的，都可以嵌入後檢視 -->
    <iframe src="https://www.bilibili.com"width = "900" height="300" frameborder = "1"></iframe>

    <!-- 透過超連結在自己的網頁中嵌入其他網 target屬性配合使用 -->
     <a href="https://www.bilibili.com" target="tt">點我看嗶哩嗶哩</a>
    

     <!-- 與表單的target屬性配合使用 -->
      
     
     <iframe name="tt" frameborder="0" width="900" height="400"></iframe>

HTML實體

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

chrome_jq42bnBYGt

參考手冊

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="此處可選值見下表">

參考網頁

總結

相關文章