史上最簡潔的HTML學習筆記 (一) 基本框架和知識點

阿新 • • 發佈：2021-02-08

文章目錄

HTML 基本框架和知識點

HTML 基本框架和知識點

The Head Section 頭部

The Head Section 主要用來給瀏覽器和搜尋引擎提供資訊。

在 VSCode 中輸入 ! 然後按下 Tab 就可以快速建立 HTML Boilerplate （HTML 基本模板），如下所示。

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8" 
>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

lang 頁面語言

<html lang="en">

lang用來描述頁面語言，中文規範是zh-cmn-Hans，但也常見zh-CN 。

meta 元資料

必要元資料

< 
meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset，字元編碼集是各種文字和符號的總稱，包括各國家文字、標點符號、圖形符號、數字等。通常使用 UTF-8，這是最全面的字符集。除此之外還有很多，例如ASCII等。
viewport，可視視窗大小，用來顯示網頁的那部分割槽域。
viewport 後面的content內容是為了確保獲得最佳顯示而設定的（目前不做深究）。
以上兩點是 HTML 基本框架必須包括的兩個元資料。

可選元資料

<meta name="keywords" content="HTML, CSS">
<meta name="desription" content="...">
<!-- 還有更多，用到再查 -->

keywords，過去常用來給搜尋引擎提供關鍵詞索引，但現如今好像過時了，不過仍然可用。
description，用來描述網頁內容，搜尋引擎會根據提供的內容展示在其頁面中。例如百度搜索結果頁面中，某一個標題下的描述內容。

VSCode 小技巧：

輸入 meta:desc 即可快速補全標籤

title 網頁標題

<title>Document</title>

title，描述頁面標題。

Text 文字

p 標籤以及不建議使用的標籤

I love to teach you HTML!

I love to teach you HTML!

I love to teach you HTML!

<p>I love to teach you HTML!</p>
<p>I love to teach you <em>HTML</em>!</p>
<p>I love to teach you <i>HTML</i>!</p>
<p>I love to teach you <strong>HTML</strong>!</p>
<p>I love to teach you <b>HTML</b>!</p>

p，常規文字標籤。
em，強調標籤，通常用來強調HTML文件中重要的內容，但是不意味著需要強調就使用該標籤。因為這個標籤主要是用來給搜尋引擎快速索引用的。任何樣式都得使用 CSS 完成，這樣才是規範的作法！
i，義大利斜體標籤，改變字型為義大利斜體。
strong，粗壯標籤，通常用來強調非常重要或非常緊急的內容，同理是給搜尋引擎使用的。
b，粗體標籤，加粗字型。
以上除了 p 都不建議使用。

VSCode 小技巧：

選中要包裹住的文字，按下 ctrl + p，輸入>warp，然後輸入要用來包裹住文字的標籤，最後回車即可。

Heading 標籤

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

從 h1 到 h6 相當於是一級標籤到六級標籤的意思。不同級別的字型樣式不一樣，但是！不可以為了改變樣式來用這些標籤，所有樣式必須在 CSS 中實現。
為了規範，一個頁面只允許有一個 h1 標籤。
為了規範，這些標籤不允許跳級。
總得來說，像寫畢業論文一樣使用這些文字標籤即可，那絕對不會錯。

Entities 實體

實體編碼

I love to teach you <HTML>!

<p>I love to teach you &lt;HTML&gt;!</p>

為了讓 <HTML> 正常顯示，就要用到實體編碼，十分類似於轉義字元的感覺。
實體編碼通常以 & 開頭，以 ; 結尾。
程式碼框中的 lt 本意是 less than 的縮寫， gt 是 greater than 的縮寫（這樣一來就非常好記憶了）。
還有更多實體編碼，但不需要記憶，例如 © 是 copy，更多可以百度或谷歌 html entities 。

亂數假文

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natusdolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus&nbsp;dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.
</p>

Lorem ipsum，中文又稱“亂數假文”，是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果，通常網站還沒建設好時會出現這段文字
輸入 lorem + 數字（你要生成的詞數）然後按下 enter 或 tab ，例如lorem50。
在生成的亂文中，若想要 natus dolorum 出現在同一行上而不是預設邊緣換行的話，就使用 nbsp 實體編碼。
nbsp ，None-breaking Space，不間斷空格，nbsp 連線的兩個單詞將在同一行上顯示，強制不在這倆詞中間換行。

總結常用的實體編碼

&lt; &gt; &copy; &nbsp;

Hyperlinks 超文字

本小節程式碼在CSDN中無法展示效果。

<a herf="http://fancyshawn.com/" target="_blank"></a>
<a herf="#section-1"></a>
<h1 id="section-1">
    這是一句很長很長的標題
</h1>

a，Anchor，標籤可以是超連結或錨。
herf，Hypertext Reference，意思是指定超連結目標的URL。href 屬性的值可以是任何有效文件的相對或絕對URL，包括片段識別符號和JavaScript程式碼段。
相對路徑，…/coffee
絕對路徑，fancyshawn.com/coffee
target，一般跟在跳轉頁面的標籤中，內容輸入 _blank 意思是開啟新的標籤頁。
錨點，用於頁面內定點定位（點選就自動滑倒對應位置），首先得建立錨點，選擇一個要定位的標籤，賦予 id=“section-name”，然後在 a 標籤中輸入 #section-name 即可。（若留空只有#，則跳回頁面頂部）

Images 影象

可收藏素材網站：unsplash.com

<img src="image/coffee.jpg" alt="A coffee mug on a table." style="object-fit: cover"/>

img，Image，影象標籤一般使用自關閉 < / >，現如今的語法已經可以不用寫自關閉。（但是寫React的時候好像還是得寫，所以養成習慣）
scr，Scource，影象來源，填入相對或絕對路徑都可以。
alt，Alter，文字描述，用於無法正確載入圖片的時候顯示，同時還可以幫助搜尋引擎瞭解我們放在這裡的圖片是什麼，強烈建議寫入有意義的內容。
object-fit，CSS樣式之一，填入 cover 可以讓圖片不被拉伸變形。

Video and Audio 音視訊

可收藏素材網站：pexel.com

<video contorls autoplay loop src="video/ocean.mp4">Your browser dosen't support video component.</video>
<audio contorls autoplay loop src="video/大風吹.mp3">Your browser dosen't support audio component.</audio>

video 和 audio 的用法類似，故這裡只細講一個。
controls 、autoplay 、loop 三個選項分別代表了控制元件、自動播放和迴圈播放。其都是 Boolean 型別，**但是不可以賦值 true 或 false ！**這裡只要寫上該選項就是 true ，不寫預設是 false 。
在該標籤中間可以寫內容，當瀏覽器不支援該元件時就會顯示。

Lists 列表

Unordered List 無序列表

About me
Courses

Contact me

<ul>
	<li>About me</li>
    <li>Courses</li>
</ul>
<ul style="list-style-type: square;">
    <li>Subscribe</li>
</ul>
<ul style="list-style-type: none;">
    <li>Contact me</li>
</ul>

ul，Unordered List，無序列表，通常可以做成導航欄或者放圖片什麼的。
li，List Item，列表元素，裝下你的內容。
相關 CSS 樣式 list-style-type: square; 列表前的小圓點就會變成方框，改成 none 就沒有了。

Ordered List 有序列表

Preheat the oven.
Place the ingridents on the crust.
Put the pizza in the oven for 20 minutes.

<ol>
	<li>Preheat the oven.</li>
    <li>Place the ingridents on the crust.</li>
    <li>Put the pizza in the oven for 20 minutes.</li>
</ol>

ol，Ordered List，有序列表，跟無序類似，只不過每個元素都有序號了。

Description List 描述性列表

HTML

Hypertext Markup Language

CSS

Cascading Stylesheets1

Cascading Stylesheets2

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS<dt>
    <dd>Cascading Stylesheets1</dd>
    <dd>Cascading Stylesheets2</dd>
</dl>

dl，Description List，描述列表。
dt，Description Title，描述標題。
dd，Description Detail，描述內容。

VSCode 小技巧：

輸入 ul>li*3 然後按下 enter 或 tab 即可快速生成程式碼，這叫禪意編碼 :p

Tables 表格

Expenses
Category	Amount
Marketing	$100
Accounting	$100
Total	$300

<table>
    <thead>
        <tr>
        	<th colspan="2">Expenses</th>
        </tr>
        <tr>
           	<th>Category</th>
       		<th>Amount</th>
        </tr>
    </thead>
	<tbody>
    	<tr>
            <td>Marketing</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Accounting</td>
            <td>$100</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>Total</td>
            <td>$300</td>
        </tr>
    </tfoot>
</table>

<style>
    table, 
    td,
    th {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
    
    tfoot {
        text-align: left;
    }
</style>

table，表格標籤。
**tr，**Table Row，錶行。
th，Table Heading，表格標題列。
td，Table Data Shell，表格資料列。
thead，Table Head，與上面 th 不一樣，這個是表的名稱（一般是為了方便搜尋引擎，結構也更明瞭）。有了 thead 以後就需要把 tr>th 標籤放在 thead 裡面。
tbody，Table Body，同 thead 功能類似，規則同理。
tfoot，Table Footer，同 thead 功能類似，規則同理。
相關 CSS 樣式：border、border-collapse、padding 分別是指表格外邊框、表格空隙以及內間距（應用在文字上，是文字與邊框的距離）。其中 th 有個 colspan 是指佔列寬，預設是1。tfoot 的 text-align 是指文字對齊方向。

Containers 容器

div 標籤

這裡是容器裝的內容

<div class="product">
    <p>這裡是容器裝的內容</p>
</div>

<style>
    .product {
        background-color: gold;
    }
</style>

div，容器標籤，屬於 Block-level Element 塊狀元素，這類標籤總是預設開始於新的一行並填充整個行空間，除非用 CSS 樣式改變。
相關 CSS 樣式，background-color 意味改變背景顏色。

span 標籤

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<p><div class="heightlight">Lorem</div> ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><span class="heightlight">Lorem</span> ipsum dolor sit amet consectetur adipisicing elit.</p>

<style>
    .heightlight {
        background-color: gold;
    }
</style>

我們想要給 Lorem 一個強調，但是按照第一行的實現，我們會得到一個換行的強調。這並不是我們預計的結果。因為 div 本身是一個 Block-level Element，每次都開始於新的一行。這時候就引入了 span 標籤。
span，容器標籤，通常裝文字，屬於 Inline Element 內行元素，只在行內發生作用，設定寬高不起作用，不會影響文字內容，使其換行等，同時豎直方向和間距也不起作用。

Semantic Elements 語義元素

通常情況下，語義元素能夠清楚的描述其意義給瀏覽器和開發者以及搜尋引擎。

Heading

Published January 1 2021 05:00pm

<article class="article">
	<h1> Heading</h1>
    <p>Published <time datetime="2021-01-01 17:00">January 1 2021 05:00pm</time></p>
    <p>
        <mark>Lorem</mark> ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus&nbsp;dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.
    </p>
    <figure>
    	<img src="" alt="">
        <figcaption>My coffe this morning</figcaption>
    </figure>
</article>

article 文章標籤，通常可以裝論壇的帖子、評論、產品展示等。
figure 特徵標籤，標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文件流產生影響。通常還要使用 figcaption 為特徵新增標題描述，即上文所示。
mark 高亮標籤，自帶的高亮效果，不用像上一章那樣再新增 CSS 樣式了。
time 時間標籤，顯示效果與常規文字無區別，通常會加上 datetime 選項，其格式為“2021-01-01 17:00”，必須是兩位的月份和日期。

Structuring a Web Page 結構化一個頁面

<header>
      <nav>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Products</h2> 
        <article></article>
        <article></article>
        <article></article>
      </section>
      <section>
        <h2>Testimonial</h2>
        <article>
          <section></section>
          <section></section>
        </article>
        <article></article>
      </section>
    </main>
    <aside></aside>
    <footer>
      <nav>
        <ul></ul>
      </nav>
    </footer>