【重構前端知識體系之HTML】帶你重憶HTML那些記憶模糊的標籤

歸子莫發表於2022-01-22
前端HTML

【重構前端知識體系之HTML】帶你重憶HTML那些記憶模糊的標籤

引言

上節，說了HTML是標記語言，那麼最重要的就是標記，也就是標籤。

那標籤那麼多？要在這裡全部寫出來？

當然否。這裡會講解常用的標籤。（常用達到70%）

希望在各種前端框架頻出的年代，HTML依然牢記於心。

回顧

在剛開始介紹的時候，講了一個簡單的demo，這裡貼出來。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>
<body>
    <h1>我是一個頁面內容的標題</h1>
    <div>我是一個美男子，你信嗎？</div>
</body>
</html>

HTML元素

什麼是HTML元素？

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有程式碼。

具體什麼意思呢

<div>我是一個美男子，你信嗎？</div>

像上述程式碼就是一個div元素，它包含了div開始標籤，div元素內容，div結束標籤，它們一起組合成為了一個div元素。

<body>
    <h1>我是一個頁面內容的標題</h1>
    <div>我是一個美男子，你信嗎？</div>
</body>

同樣的以上的程式碼描述了一個body元素。

空HTML元素

在之後的標籤學習中，有那麼一個標籤<br>， 這個標籤定義換行。像這種HTML 元素被稱為空元素，它是在開始標籤中關閉的。

但！為了以後版本迭代和規劃，在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

未來的 HTML 版本不允許省略結束標籤！

HTML標籤

這裡按照功能分類講解

基礎標籤

列表

1、<!DOCTYPE>

定義文件型別。

2、<html>

定義 HTML 文件。

3、<head>

定義關於文件的資訊。

4、<title>

定義文件的標題。

5、<body>

定義文件的主體。

6、<br>

定義換行。

7、<h1> - <h6>

定義 HTML 標題。

8、<p>

定義段落。

9、<!-- -->

定義註釋。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>
<body>
    <h1>我是一個頁面內容的標題h1</h1>
    <p>我是一個一個段落<br>我是一個一個段落<br>我是一個一個段落<br>我是一個一個段落<br>我是一個一個段落</p>
  <!-- <p>我是一段隱藏的段落</p> -->
</body>
</html>

效果

image-20220118151800653

看起來，學會了這些基礎標籤，就可以在網上發一篇小作文啦。實現文字自由？

單獨的文字未免太過於單調，來點修飾

修飾文字（格式化）

列表

1、<abbr>

定義文件型別。最初是在 HTML 4.0 中引入的，表示它所包含的文字是一個更長的單詞或短語的縮寫形式。

<abbr title="ni shi zui hao de">nszhd</abbr>

image-20220118155417168

2、<i>

顯示斜體文字效果。

3、<b>

呈現粗體文字效果。

4、<em>

定義強調文字。

5、<strong>

把文字定義為語氣更強的強調的內容

6、<u>

定義下劃線文字。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>
<body>
        <p><i>我是一個i段落</i></p>
    <p><u>我是一個u段落</u></p>
    <p><em>我是一個em段落</em></p>
    <p><strong>我是一個strong段落</strong></p>
    <p><b>我是一個b段落</b></p>
</body>
</html>

效果

image-20220118160731574

表單

列表

1、<form>

定義供使用者輸入的 HTML 表單。

2、<input>

定義輸入控制元件。

3、<textarea>

定義多行的文字輸入控制元件。

4、<button>

定義按鈕。

5、<select>

定義選擇列表（下拉選單）。

6、<option>

定義選擇列表中的選項。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>

<body>
  
  
    <form action="form_action.asp" method="get">
        <p>name: <input type="text" name="name" /></p>
        <p>password: <input type="password" name="password" /></p>
        <p><textarea>請填寫簡介</textarea></p>
        <p>select：
            <select>
                <option value="wo">我</option>
                <option value="zui">最</option>
                <option value="shuai">帥</option>
            </select>
        </p>
        <input type="submit" value="Submit" />
    </form>


</body>

</html>

效果

image-20220118162520792

影像、音訊與視訊

列表

1、<img>

定義影像。

2、<canvas>

定義圖形。

3、<svg>

定義 SVG 圖形的容器。

4、<audio>

定義聲音內容。

5、<video>

定義視訊。

6、<source>

定義媒介源。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>

<body>

    <p>
        img: <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" />
    </p>
    <p>
        canvas: <canvas id="myCanvas"></canvas>
    </p>
    <p>
        svg: <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </p>
    <p>audio: 
        <audio src="http://96.ierge.cn/15/235/471737.mp3" controls="controls"></audio>
    </p>
    <p> video: 
        <video src="https://vd3.bdstatic.com/mda-kiq250jsxvmh23gu/hd/cae_h264_nowatermark/mda-kiq250jsxvmh23gu.mp4"></video>
    </p>


</body>

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 80, 100);
</script>

</html>

效果

image-20220118164420834

連結

列表

1、<a>

定義錨。

<a href="https://www.baidu.com">我是百度</a>

2、<link>

定義文件與外部資源的關係。

<link rel="stylesheet" type="text/css" href="demo.css" />

列表型別

列表

1、<ul>

定義無序列表。

2、<ol>

定義有序列表。

3、<li>

定義列表的專案。

4、<dl>

定義定義列表。

5、<dd>

定義定義列表中專案的描述。

6、<dl>

定義定義列表中的專案。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>

<body>

    <ul>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
    </ul>

    <ol>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
    </ol>

    <dl>
        <dt>我</dt>
        <dd>很帥</dd>
        <dt>你</dt>
        <dd>帥嗎</dd>
    </dl>


</body>

</html>

效果

image-20220118170046796

表格

列表

1、<table>

定義表格

2、<caption>

定義表格標題。

3、<th>

定義表格中的表頭單元格。

4、<tr>

定義表格中的行。

5、<td>

定義表格中的單元。

6、<thead>

定義表格中的表頭內容。

7、<tbody>

定義表格中的主體內容。

8、<tfoot>

定義表格中的表注內容（腳註）。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                </th>
                <th>分數</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td>小明</td>
                <td>100</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>小紅</td>
                <td>70</td>
            </tr>
            <tr>
                <td>小東</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>


</body>

</html>

效果

image-20220118172018318

其他

列表

1、<script>

定義客戶端指令碼。

<script type="text/javascript">
document.write("Hello World!")
</script>

2、<object>

定義嵌入的物件。

3、<embed>

為外部應用程式（非 HTML）定義容器。

<embed src="test.png" />

4、<head>

定義關於文件的資訊。

5、<meta>

定義關於 HTML 文件的元資訊。

6、<base>

定義頁面中所有連結的預設地址或預設目標。

總結

HTML的標籤很多，相信大多數的xdm都瞭解。但並非都能記得。

告訴你們一件事，我在做HTML的面試題集，準確率竟然只有60%多。這也是我寫本篇文章的目的。查漏補缺。

重構前端知識體系，你要一起嗎？

部落格說明與致謝

文章所涉及的部分資料來自網際網路整理，其中包含自己個人的總結和看法，分享的目的在於共建社群和鞏固自己。

引用的資料如有侵權，請聯絡本人刪除！

感謝萬能的網路，W3C，菜鳥教程等！

感謝勤勞的自己，個人部落格，GitHub學習，GitHub

公眾號【歸子莫】，小程式【子莫說】

如果你感覺對你有幫助的話，不妨給我點贊鼓勵一下，好文記得收藏喲！關注我一起成長！

所屬專欄：重構前端知識體系（HTML）

幸好我在，感謝你來！

相關文章