01 關于HTML基礎-構建Web，這些你都知道嗎？（很全）
以下均是參考MDN web docs，總結出來的比較重要的知識點，與君共勉。不妥之處，還望大家及時提出！
什么是HTML？
是一種告訴瀏覽器如何組織頁面的標記語言。它由一系列元素組成。
HTML元素
1. 開始標簽 eg: <p>
2. 結束標簽 eg: </p>
3. 內容 標簽中間寫的即內容。
4. 元素 以上三者相結合就是一個完整的元素。
著重強調 - 加粗[strong]，斜體[em]，下劃線[ins]
<p>追尋<strong>夢想</strong>的<em>腳本</em>不<ins>停歇</ins></p>
追尋夢想的腳本不停歇
塊級元素和內聯元素
塊級元素：通常用于展示頁面上結構化的內容，eg：段落、列表、導航菜單、頁腳等。一般會獨占一行，其后的內容會擠到下一行顯示。
內聯元素：通常出現在塊級元素中并環(huán)繞文檔內容的一小部分，不會導致換行。
eg: <em>首先</em><em>其次</em><em>最后</em>
首先其次最后
空元素
也可以理解為單標簽，eg:<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" height="80"/>
注意：width/height屬性一般只改一個，即可等比例縮放。
屬性
<p class="edit-p"></p> 其中class即使p元素的屬性，格式：一空格二等于號三引號，其中引號是單引號/雙引號都可，看個人習慣。
當然，也有一些無值屬性，下面的disabled屬性使得input框變成灰色，禁止用戶輸入。
eg:<input type="text" disabled/>
eg:<input type="text" />
超鏈接-強大的a標簽
<p>數理不分家 諾貝爾官方公布<a title="愛因斯坦簡介">愛因斯坦</a>數學成績單：真學霸無疑</p>
數理不分家 諾貝爾官方公布愛因斯坦數學成績單：真學霸無疑
統一資源定位符（URL）是一個定義了在網絡上的位置的一個文本字符串。使用路徑查找文件。 file.html與當前文件是同一目錄。 返回上一級目錄用 ../ 表示。注意：
1.鏈接要盡可能短，盡可能使用相對鏈接。
2.鏈接到非HTML資源，要留下清晰的指示。
<p><a >下載銷售報告（PDF,10MB）</a></p>
<a
download="firefox-latest-64bit-installer.exe">
下載最新的 Firefox 中文版 - Windows（64位）
</a>
下載最新的 Firefox 中文版 - Windows（64位）
4.電子郵件鏈接
<a href="mailto:nowhere@mozilla.org">向nowhere發(fā)郵件</a>
其中，郵件地址是可選的，若你忘了也沒關系，用戶可以發(fā)送給他們選擇的地址郵件。
下面是一個包含cc(抄送),bcc,主題和主體的實例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
注：使用 ?分隔主URL與參數值，以及使用 &來分隔 mailto:中的各個參數。這是標準URL查詢標記方法。
絕對URL和相對URL
projects是根目錄
絕對URL：http://www.example.com/projects/index.html其中，http://www.example.com是web服務器站點的域名。
相對URL：pdfs/projext.pdf其中，pdfs是projects的子目錄，projext.pdf是pdfs的子目錄。（對應的絕對URL是http://www.example.com/projects/pdfs/project-brief.pdf）
HTML文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個Blog</title>
</head>
<body>
<p>我們的未來都不是夢，終究會實現！We can do it.</p>
</body>
</html>
其中，是文檔聲明。
html元素是根元素，包裹著整個完整的頁面。
head元素是一個容器，內容不在頁面顯示。
meta元素中的charset一般寫'UTF-8'就可，它囊括了人類大部分的文字。
title元素設置頁面標題。
body元素包含了你訪問頁面時所有顯示在頁面上的內容。
HTML中的空白
（看下面代碼，實質是只相差一個空格，那些空格不起作用，HTML會將連續(xù)出現的空白字符當做一個空格符處理。）
<p>一直在路上，故有無限的可能。</p>
<p>一直在路上，
故有無限的可能</p>
一直在路上，故有無限的可能。
一直在路上， 故有無限的可能
HTML中的特殊字符
| 原義字符 | 等價字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
<p>左家垅<p>的夏天</p>
<p>左家垅<p>的夏天</p>
左家垅
的夏天
左家垅 < p > 的夏天
HTML注釋
<!-- <p>用戶看不見，但很有用！</p> -->
head標簽中有什么？
頁面加載完成時，head標簽里的內容不會在頁面顯示，但它的作用是保存頁面的一些元數據。
<meta charset="UTF-8">
如果你將charset設置為GBK（中國大陸國標字符集），則頁面將會出現亂碼。
注：Chrome瀏覽器會自動修正錯誤的編碼，你或許看不到。
在HTML中應用CSS和JavaScript，分別使用<link>和<script>元素.
<link>經常位于文檔的頭部，有2個屬性，rel="stylesheet"表示這是文檔的樣式表，href包含了樣式表文件的路徑。
<link rel="stylesheet" href="my-css-file.css">
<script>放在文檔的尾部就可（body之前），這樣可確保加載腳本前已解析了HTML內容。
<script src="my-js-file.js"></script>
HTML文字處理
六個標題元素標簽如下，其中h1最好使用一次，這是頂級標題，每頁不要超過3個標題：
<h1>淋雨一直走</h1>
<h2>張韶涵</h2>
<h3>有夢就別怕痛</h3>
<h4>淋雨一直走</h4>
<h5>是道陽光就該暖和</h5>
<h6>人都應該有夢</h6>
淋雨一直走
張韶涵
有夢就別怕痛
淋雨一直走
是道陽光就該暖和
人都應該有夢
列表
無序列表
<ul>
<li>雞蛋</li>
<li>牛奶</li>
<li>狗不理</li>
</ul>
- 雞蛋
- 牛奶
- 狗不理
有序列表，可以嵌套
<ol>
<li>面條</li>
<li>米飯</li>
<ul>
<li>辣白菜</li>
<li>紅燒肉</li>
</ul>
<li>魚粉</li>
</ol>
- 面條
- 米飯
- 辣白菜
- 紅燒肉
- 魚粉
高階文字排版
描述列表
<dl>
<dt>內心獨白</dt>
<dd>戲劇中，某個角色對自己的內心活動......</dd>
<dt>語言獨白</dt>
<dd>戲劇中，某個角色把自己的想法.....</dd>
<dt>旁白</dt>
<dd>戲劇中，為渲染幽默或戲劇性效果而進行的.......</dd>
</dl>
- 內心獨白
- 戲劇中，某個角色對自己的內心活動......
- 語言獨白
- 戲劇中，某個角色把自己的想法.....
- 旁白
- 戲劇中，為渲染幽默或戲劇性效果而進行的.......
其中，描述列表使用 dl 標簽 ，每一項用 dt 閉合，每個描述用 dd 閉合。瀏覽器的默認樣式會在描述列表的描述部分和描述術語之間產生縮進。一個術語 dt 可以同時有多個描述 dd。
引用
塊引用 用 <blockquote>元素包裹，并在 cite屬性里用URL來指向引用的資源。
行內引用 用 <q>元素包裹，并在 cite屬性里用URL來指向引用的資源。
縮略語 <abbr>
<p>我們使用 <abbr title="超文本標記語言（Hypertext Markup Language）">HTML</abbr>來組織網頁文檔。</p>
我們使用 HTML來組織網頁文檔。
當光標移到HTML上時會出現提示。
上標<sup>和下標<sub>
<p>咖啡因的化學方程式是C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>. 方程式X<sup>2</sup>=4</p>
咖啡因的化學方程式是C8H10N4O2. 方程式X2=4
標記時間和日期
<time datetime="2020-10-10">2020年10月10日</time>
HTML布局元素細節(jié)
<main>存放每個頁面獨有的內容，每個頁面只能用一次，且直接位于<body>中，最好不要把它嵌套進其他元素。<article>包圍的內容即一篇文章。<section>與<article>類似，但<section>更適用與組織頁面按其功能分塊。<aside>包含一些間接信息（術語條目、作者簡介、相關鏈接等等）。<header>若是body元素的子元素，則是網站的全局頁眉；若是article/section的子元素，則是這些部分特有的頁眉。<nav>主導航。<fotter>頁腳。
無語義元素
<p>少年自由少年狂<span class="editor-note">[編輯批注：此刻舞臺燈光應變亮]</span></p>
這里，‘編輯批注’僅對舞臺劇導演提供額外指引；沒有具體語義。
<div>塊級無語義元素，eg:一個電子商務網站頁面上有一個一直顯示的購物車組件，不能用aside/section，因為它既和主內容沒多大關聯，也不是頁面上主內容的一部分，這種情況下要用div。注意：在沒有更好的語義方案時才選擇它，盡可能少用，否則維護成本太高。
換行和水平分割線
<br>可在段落中換行。
<hr>在文檔中生成一條水平分割線。
實戰(zhàn)：規(guī)劃一個簡單的網站(下一篇博客見！)
浙公網安備 33010602011771號