HTML基礎

Fredette發表於2024-03-10
HTML

【一】HTML簡介

【1】什麼是HTML

  • 超文字標記語言

  • 如果想要讓瀏覽器能夠渲染出寫的頁面，都必須遵從HTML語法

  • 我們瀏覽器看到的頁面，內部其實都是HTML程式碼(所有的網站內部都是HTML程式碼)

  • HTML 是用來描述網頁的一種語言。

  • HTML 指的是超文字標記語言: HyperText Markup Language

  • 超文字 就是網頁上不光有文字，還有圖片、音樂、影片等。

  • 標記語言是一套標記標籤 (markup tag) div，span，font，i等標記

  • HTML 使用標記標籤來描述網頁

  • HTML 文件包含了HTML 標籤及文字內容

  • HTML文件也叫做 web 頁面，是以.html結尾的檔案

  • HTML的主要目的：透過一系列的標記，來顯示網頁的不同效果、不同部分。

【2】最基礎的頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hellow zhangsan</h1>
<a href="https://www.baidu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7"
     alt="my wifi">
</body>
</html>

【二】HTML中的註釋語法

  • 由於HTML程式碼非常雜亂無章且非常多，所以我們習慣性的用註釋來劃分割槽域方便後續的查詢

【1】單行註釋

<!-- 單行註釋 -->

【2】多行註釋

<!--
多行註釋1
多行註釋2
多行註釋3
-->

【三】HTML的文件結構

【1】基礎結構

<html>
    <head></head>:head內的標籤不是給使用者看的，而是定義一些配置，主要是給瀏覽器看的
    <body></body>:body內的標籤，寫什麼瀏覽器就渲染什麼，使用者就能看到什麼
</html>

注意：HTML程式碼是沒有格式的，可以全部寫在一行，只不過我們習慣了縮排來表示程式碼

【2】基本結構

  • HTML的文件結構通常遵循以下基本結構
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html>   //告訴瀏覽器後面的程式碼是html程式碼
<head>   //告訴瀏覽器當前網頁如何顯示，如編碼，關鍵詞
</head>
<body>  //告訴瀏覽器這裡是主體部分，顯示到網頁中
</body>
</html>   //html結束


<!DOCTYPE html>：宣告文件型別,告訴瀏覽器我的當前頁面是那個版本的html
<html></html>：告訴瀏覽器，其中的程式碼用的什麼格式；
<head></head>：告訴瀏覽器，這是網頁的頭部，包括了定義網頁的一些內容的標籤，如：標題、字符集等
<meta>：就是定義網頁字符集、描述、關鍵詞等內容的。
如：<meta charset=”utf8”>  字符集：功能：告訴瀏覽器，如何翻譯漢字。
<meta name=”keywords” content=”html,css,javascript”>   關鍵詞
http-equiv：模擬http協議的檔案頭原資訊，主要目的是伺服器向客戶端返回時，用什麼格式顯示。
Content-type：內容型別。
Content：詳細內容型別介紹。
Text/html：網頁是text格式，html是文字中的小格式。
Charset：字符集，主要控制漢字如何顯示。
Utf-8：多國語言編碼，什麼國家的語言都可以正常顯示。
<title></title>：當前網頁的標題，在網頁中是必須的
定義瀏覽器工具欄中的標題
提供頁面被新增到收藏夾時的標題
顯示在搜尋引擎結果中的頁面標題 
<body></body>：網頁的主體部分,網頁中主要內容都要寫到body裡。

【四】HTML標籤的分類

  • 根據標籤的閉合情況，可以分為單標籤和雙標籤

【1】雙標籤

  • 有頭有尾
  • 內容寫在中間
<h1></h1>
<a href==""></a>

【2】單標籤(自閉標籤)

  • 標籤自己閉合，不需要另一半標籤
<img/>

【五】標籤

【1】head常用標籤

<head>
    <!-- 預設編碼格式 -->
    <!-- <meta charset="UTF-8">-->
    <meta charset="UTF-8" name="keywords" content="關鍵詞">
    
    <!-- 控制頁面上顯示的小標題 -->
    <title>這是一個title標籤</title>
    
    <!-- 這裡面寫CSS裝飾程式碼 -->
    <style></style>
    
    <!-- 這裡寫JS程式碼，JavaScript -->
    <script></script>
    
    <!-- 用來引入外部CSS檔案 -->
    <link rel="styleshhet" href="">
</head>

【2】Body常用標籤

<body>
<!--標題標籤-->
    <h1>【一】標題標籤</h1>
    <h1>一級標籤</h1>
    <h2>二級標籤</h2>
    <h6>六級標題</h6>
    標題標籤只能到 1 ~ 6 級，沒有 7 級標題
    <h7>七級標題</h7>
    
    <h1>【二】文字相關的標籤</h1>
    <h2>【1】加粗文字</h2>
    <p>這是沒有加粗的文字</p>
    <b>這是加粗的文字</b>
    <h2>【2】字型傾斜</h2>
    <i>這是傾斜的文字</i>
    <h2>文字帶下劃線</h2>
    <u>這是帶下劃線的文字</u>
	<h2>【4】文字帶刪除線</h2>
	<s>這是帶刪除的文字</s>
    
    <h1>【三】段落標籤</h1>
    <p>
        白日依山盡,
        黃河入海流。
    </p>
    <hr>
<h1>【四】換行標籤</h1>
<p>
    白日依山盡,
    <br>
    黃河入海流。
</p>
<hr>
<h1>【五】水平分割線</h1>
<hr>

</body>

image-20240130194508511

【3】塊級標籤和行內標籤

<h1>【一】塊級標籤</h1>
<h2>【1】介紹</h2>
<p>塊級標籤指的是佔一行的HTML元素標籤</p>
<h2>【2】常用的塊級標籤</h2>
<div>這是div標籤</div>
<p>這是p標籤</p><p>這是p標籤</p>
<h6>這是級別標籤</h6>
<ul>這是ul標籤</ul>
<ol>這是ol標籤</ol>
<table>這是table標籤</table>

<h1>【二】行內標籤</h1>
<h2>【1】什麼是行內標籤</h2>
<p>值在一行內現實的HTML元素,它們不會打斷當前行並且只佔據所需的內容寬度。</p>
<h2>【2】常見的行內標籤</h2>
<span>這是span標籤</span><span>這是span標籤</span>
<br>
<p>行內標籤兩個標籤在一行不會換行，塊級標籤兩個標籤在一行會自動換行</p>
<a href="https://juejin.cn/">這是一個超連結標籤</a>
<br>
<strong>這是strong標籤</strong>
<br>
<em>這是strong標籤</em>
<br>
<img src="picture.jpg" alt="這是img標籤">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--標題標籤-->
<h1>【一】塊級標籤</h1>
<h2>【1】介紹</h2>
<p>塊級標籤指的是佔一行的HTML元素標籤</p>
<h2>【2】常用的塊級標籤</h2>
<div>這是div標籤</div>
<p>這是p標籤</p><p>這是p標籤</p>
<h6>這是級別標籤</h6>
<ul>這是ul標籤</ul>
<ol>這是ol標籤</ol>
<table>這是table標籤</table>

<h1>【二】行內標籤</h1>
<h2>【1】什麼是行內標籤</h2>
<p>值在一行內現實的HTML元素,它們不會打斷當前行並且只佔據所需的內容寬度。</p>
<h2>【2】常見的行內標籤</h2>
<span>這是span標籤</span><span>這是span標籤</span>
<br>
<p>行內標籤兩個標籤在一行不會換行，塊級標籤兩個標籤在一行會自動換行</p>
<a href="https://juejin.cn/">這是一個超連結標籤</a>
<br>
<strong>這是strong標籤</strong>
<br>
<em>這是strong標籤</em>
<br>
<img src="picture.jpg" alt="這是img標籤">

</body>
</html>

image-20240130200932962

  • 塊級標籤可以修改長度，行內標籤不可以，修改了也不會發生變化
  • 塊級標籤內部可以巢狀任意的塊級標籤和行內標籤
    • 但是 p 標籤雖然是塊級標籤，但是他只能巢狀行內標籤不能巢狀塊級標籤
    • 如果套用這個，瀏覽器也會幫助處理，有報錯，使用者也感覺不到
  • 小結
    • 只要是塊級標籤都可以巢狀任意塊級標籤和行內標籤(P標籤除外)
  • 行內標籤不能巢狀塊級標籤 可以巢狀行內標籤
- ## 文字修飾標記

l <br/> ：換行，在需要換行的標記後面新增br標記就可以了

l <hr/>：水平線

v hr常用的屬性：

Size：粗細   值：1-100

Color：顏色      值：顏色

Width：寬度     值：數值(固定)或百分比(根據瀏覽器的視窗大小自動調整)

百分比一般用於響應式網站的開發

l <h1>------<h6>標題標記：雙標記，自動換行和加粗

l <p></p>：段落標記

l <pre></pre>：預排版標記

- ## 排版標記

l <br/> ：換行，在需要換行的標記後面新增br標記就可以了

l <hr/>：水平線

v hr常用的屬性：

Size：粗細   值：1-100

Color：顏色      值：顏色

Width：寬度     值：數值(固定)或百分比(根據瀏覽器的視窗大小自動調整)

百分比一般用於響應式網站的開發

l <h1>------<h6>標題標記：雙標記，自動換行和加粗

l <p></p>：段落標記

l <pre></pre>：預排版標記

【六】標籤的兩個重要屬性

<div id="" class="">
    <p>id屬性:相當於你在整個頁面上的唯一標識</p>
    <p>class屬性，可以放很多個樣式或者是裝飾</p>
</div>

【七】列表標籤

<h1>【一】無序列表</h1>
<ul>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
</ul>

<h1>【二】有序列表</h1>
<ol>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
    <li>這是li標籤</li>
</ol>

<h1>【三】標題列表</h1>
<dl>
    <dt>標題</dt>
    <dd>內容</dd>
    <dt>標題</dt>
    <dd>內容</dd>
    <dt>標題</dt>
    <dd>內容</dd>
    <dt>標題</dt>
    <dd>內容</dd>
</dl>

image-20240130201937240

【八】特殊符號

【1】空格 

&nbsp;

【2】大於號>

&gt;

【3】小於號<

&lt;

【4】&符&

&amp;

【5】￥符¥

&yen;

【6】版權©

&copy;

【7】商標®

&reg;

【小結】

  • 特殊符號是指在文字中使用的一些非常規字元，這些字元通常不直接出現在鍵盤上，需要透過特定的鍵盤組合或者字元實體來輸入。以下是一些常見的特殊符號及其對應的表示方法：
    • 版權符號：©，表示方法為 © 或者 ©。
    • 註冊商標符號：®，表示方法為 ® 或者 ®。
    • 商標符號：™，表示方法為 ™ 或者 ™。
    • 驚歎號：！，直接輸入 "!" 即可。
    • 問號：？，直接輸入 "?" 即可。
    • 減號：-，直接輸入 "-" 即可。
    • 加號：+，直接輸入 "+" 即可。
    • 百分號：%，直接輸入 "%" 即可。
    • 等於號：=，直接輸入 "=" 即可。
    • 乘號：×，表示方法為 × 或者 ×。
    • 除號：÷，表示方法為 ÷ 或者 ÷。
    • 分號：；，直接輸入 ";" 即可。
    • 冒號：：，直接輸入 ":" 即可。
    • 單引號：'，直接輸入 "'" 即可。
    • 雙引號："，直接輸入 """ 即可。

【九】常用標籤

【1】div標籤

  • 它是最常見的HTML容器標籤，用於將文件分隔成獨立的區塊。
  • Div標籤可以用來包裹其他標籤，透過設定樣式來控制其中內容的佈局和外觀。
  • 它沒有具體的語義含義，常用於定義頁面的整體結構或劃分不同的內容區域。

【2】span標籤

  • 它是一個內聯元素，主要用於對文字或一小段文字進行樣式上的控制。
  • Span標籤通常用於對特定部分進行樣式修飾或新增特殊效果
    • 例如修改文字顏色、加粗、斜體等，或者配合CSS實現一些互動效果。
  • 與Div標籤不同，Span標籤沒有具體的語義意義，更多地用於樣式上的調整。
  • 在構造初期最常使用，頁面的佈局一般先用div和span佔位後再去調整樣式，尤其是div使用最為頻繁
  • 可以把div標籤看成一塊區域
    • 也就意味著div標籤來提前規劃所有的區域。之後再向該區域內填寫內容即可
  • 普通的文字先用span佔位
    • 然後再去裝飾頁面

【3】img標籤

  • 圖片標籤
<img src="" alt="" title="" height="" width="">
  • src
    • 存放圖片的路徑(可以是本地也可以是網頁連結)
  • alt
    • 當圖片載入不成功時，載入出的圖片描述性資訊
  • title
    • 當滑鼠懸浮在圖片上面之後，自動展示圖片資訊
  • height/width
    • 高度和寬度
    • 當你在調整其中一個引數時，另一個引數也會等比例縮放
    • 當在調整兩個引數而不考慮比例時，就會造成圖片的失真

【4】a標籤

  • 連結標籤
<a href="" target="_blank"></a>
<a href="" target="_self"></a>

  • href

    • 指定 url 使用者點選該連結就會跳轉到目標連結
      • 當 a 標籤指定的網址從來沒有被點選過，那麼a標籤的字型顏色就是藍色
      • 當 a 標籤指定的網址從來被點選過後，那麼a標籤的字型顏色就是紫色
    • 可以放其他標籤的id值，點選即可跳轉到對應的標籤位置

  • target

    • _self
      • 預設 a 標籤是在當前頁面完成跳轉
    • _blank
      • 跳轉到新建的標籤頁

  • a標籤的錨點功能

    • 比如點選一個文字標題，自動跳轉到標題對應的區域
    <a href="" id="d1">頂部</a>
  <a href="" id="d2">中間</a>
  <a href="" id="d3">底部</a>

  <a href="#d1">回到頂部</a>
  <a href="#d2">回到中間</a>

【5】總結

  • Div標籤用於對頁面進行佈局和結構劃分
  • 而Span標籤則更多地用於對文字或一小段文字進行樣式控制。
  • 根據需要，可以透過設定不同的class或id來給這些標籤新增樣式，並使用CSS來對其進行進一步的控制和美化。

相關文章