、HTML文本結構

瀏覽器通常會為其文本元素添加不同的樣式，以區別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如，code 元素專門用來格式化腳本或程序中的代碼，該元素中的文本默認使用等寬字體。內容顯示的樣子與其使用的標記沒有關系。因此不應該為了讓文字變為斜體就使用 em 或 cite，添加樣式是 css 的事情。相反，應該選擇能描述內容的 HTML 元素。

1. 添加段落：要在網頁中開始一個新的段落，使用 p元素。（通過 css 可以為段落添加樣式，包括字體、字號、顏色等。以及控制內行間距，段落文本對齊方式等。）

<p> HTML <small> HyperText Markup Language </small> </p> 

1. 指定細則：small元素 表示細則一類的旁注，通常是文本中的一小塊。

<p> HTML <small> HyperText Markup Language </small> </p> 

3.標記重要和強調文本：strong元素 表示內容的重要性，而 em元素 表示內容的著重點。

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>

瀏覽器通常將 strong 文本以粗體顯示，em 文本以斜體顯示?？梢杂?CSS 將任何文本變為粗體或斜體，也可以覆蓋 strong 和 em 等元素的瀏覽器默認顯示樣式。

4.創建圖：圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨立內容。通過引入 figure 和 figcaption，figcaption 是 figure 的標題。

<figure>
<figcaption>
 [標題內容]
</figcaption>
 [插入內容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必須的，但是只有包含它，就必須是 figure 元素內嵌的第一個或最后一個，且只能有一個。 5.指明引用或參考：使用 cite元素 可以指明對某內容源的引用或參考。默認以斜體顯示（不因使用 cite 引用人名）

 <p> he Listend to <cite> Abbey Road </cite> </p>

6.引述文本：有兩個特殊的元素用以標記引述的文本。blockquote元素 表示單獨存在的引述，其默認顯示在新的一行。而 q元素 則用于短的引用，如句子里面的引述。由于q元素存在夸瀏覽器問題，應該避免使用，而是直接輸入引號。

<blockquote>
 text...
</blockquote>
瀏覽器對應q元素中的文本自動加上語音的引號。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定時間：使用 time元素 標記時間、日期或時間段。輸入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

<time> 16:20 </time>  <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>

8.解釋縮寫詞：使用 abbr元素 標記縮寫詞并解釋其含義。（通常是使用括號提供縮寫詞的全稱是解釋縮寫詞最直接的方式）

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>

9.定義術語:在HTML中定義術語時，使用 dfn元素 對其作語義上的區分，首次定義術語通常會對其添加區別于其他文本格式，后續在使用術語時不再需要使用dfn對其進行標記。 （默認以斜體顯示）

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>

10.創建上標和下標:比主體文本稍高或稍低的字母或數字分別成稱為上標和下標?？梢允褂?sub元素 創建下標， sup元素 創建上標。上標和下標字符會輕微地擾亂行與行之間的均勻間距，但可以使用 CSS 修復這個問題。

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>

11.添加作者聯系方式: address元素 用以定于與 HTML 頁面或頁面一部分有關的作者、相關人士信息或組織聯系信息，通常位于頁面底部或相關部分內。

 <footer role = "contentinfo">
  <p> <small> ? 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>

12.標注編輯和不再準確的文本:有時可能需要將在前一版本之后對頁面的編輯標出來，或者對不再準確、不再相關的文本進行標記。有兩種用于標注編輯的元素：代表添加內容的 ins元素 和標記已經刪除內容的 del元素。

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>

通常對已刪除的文本加上刪除線，對插入的文本加入下劃線。標記不再準確或不再相關的文本

  <li> <s> 5 p.m </s> SOLD </li>

13.標記代碼:如果你的內容包含代碼示例或文件名，使用 code元素。

 <p> The <code> showPhoto() </code> ... <code> < ;ul 
 id = "thumbanil" > </code> list </p>

14.使用預格式化的文本：通常瀏覽器會將所有額外的回車和空格壓縮，并根據窗口大小自動換行，預格式化的文本可以保持固有的換行和空格。pre元素。

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>

如果要顯示包含 HTML 元素內容，應將包圍元素名稱的 < 和 > 分別改為對應的字符實體<和 >否則瀏覽器就會試著顯示這些元素。大多數情況下推薦隊 div 元素使用 white-space:pre 以替代 pre，因為空格可能對這些內容的語義非常重要。

15.突出顯示文本：類似文本中的熒光筆！HTML5 使用新的 mark元素 實現，引起讀者對特定文本片段的注意。對原生支持的瀏覽器將對該元素文字默認加上黃色背景。

<p> GSL is <mark> YYDS! </mark>     

16.創建換行：當我們希望在文本中手動強制文字進行換行時，可以使用 br元素 (空元素).

<p> 123 <br />
    456 <br />
</p>

17.創建span：同 div 一樣，span元素 是沒有任何語義的，不同的是，span 只適合包圍字詞或短語內容，而 div 適合包含塊級內容。

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>

18.其他元素：

U元素：用來為文本添加下劃線。

wbr元素：表示可換行處。讓瀏覽器知道在哪里可以根據需要進行換行（存在跨版本問題）。

ruby元素：旁注標記是一種慣用符號，通常用于表示生僻字的發音。

bdi和bdo元素：如果某些頁面中混合了從左至右書寫的字符（如拉丁字符）和從右至左書寫的字符（如阿拉伯語）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分數的值或已知范圍的測量結果。

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>

progress元素:表示某項任務完成的進度，可用它表示一個進度條。不能與 meter 混在一起使用。

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>

二、 HTML圖片

在頁面插入圖片：輸入 <img src=image.url" />

<img src="xxx.jpg" alt="" />      

提供替代文本：在 img 標簽內，src 屬性及值的后面，輸入 alt=""； 輸入圖像出于某種原因沒有顯示時應該出現的文本。指定圖像的尺寸：在 img 標簽內，src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。

三、 HTML鏈接

創建一個指向另一個網頁的鏈接：

輸入 <a href="URL"> 此處輸入鏈接標簽 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>    

創建錨并鏈接到錨： 通常激活一個鏈接會將用戶帶到對應網頁的頂端。如果想用戶跳至網頁特定區域，可以創建一個錨，并在鏈接中引用該錨。

1.創建錨： 輸入 id="anchor-name",其中 name 是在內部用來標識網頁中這部分內容的文字。

2.創建錨鏈接到特定錨鏈接：輸入 <a href="#"anchor-name>，其中 anchor-name 是目標的 id 屬性值。

3.輸入標簽文本（默認帶下劃線藍色字體），用戶激活該字體時將用戶帶到（1）步中引用的區域文本。

```<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Creating and Linking to Anchors</title>
</head>
<body>

<article>
	<header>
		<h1>Frequently Asked Questions (FAQ)</h1>
		
		<nav>
			<ul>
				<li><a href="#question-01">Can an id have more than one word?</a></li>
				<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
				<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
				<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
			</ul>
		</nav>
	</header>

	<h2 id="question-01">Can an id have more than one word?</h2>
	<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>

	<h2 id="question-02">Can visitors bookmark anchor links?</h2>
	<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>

	<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
	<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>

	<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
	<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>

</body>
</html>

作者：excavate
https://juejin.cn/post/6988467705909248014

.概念：一種標記、描述網頁的語言。超文本標記語言（Hype Text Markup Language），用標簽描述網頁中的圖片、文本、音樂、視頻、超鏈接等，將數據可視化展示給用戶）。

2.發展：（XHTML可擴展的超文本語言，相對于html而言語法更加嚴格）

3.組成：

文檔類型聲明<!DOCTYPE>（文檔開頭），指示瀏覽器關于頁面使用哪個html版本進行編譯的指令。

文檔標記<html>，網頁根元素、根標簽、根節點，讓瀏覽器識別其是一個HTML文檔。

文檔頭部<head>，頭元素，主要用來設置字符編碼、關鍵詞，描述網頁標題，引入一些外部CSS文件或者js文件，可加title標簽用來說明網頁標題。

文檔主體<body>，包含文檔所顯示的所有內容。

4.語法：

分為單雙標簽：雙標簽 ， <關鍵字> </關鍵字>

單標簽 ，<關鍵字/> （必須要關閉，留意/位置）

例如，<head><head/>為雙標簽，前括號為開標簽，后者為閉標簽; <meta/>為單標簽。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
<title>網頁標題</title>
</head>
<body>
    <h1>標題</h1>
    <p>段落內容</p>
</body>
</html>

5.html標簽關系

嵌套（head和meta標簽）、并列（head和body標簽）

6.基本標簽

標題標簽：<h1> xx</h1>

段落標簽：<p>xx</p>

斜體（有強調作用）：<em>xx</em>

斜體：<i>xx<i/>

粗體(加重語氣作用): <strong>xx</strong>

粗體：<b>xx</b>

水平線：<hr/>

換行：<br/>

上標注：^xx

下標注：_xx

下劃線：<u>xx</u>

刪除線：<del>xx</del>

注釋標簽：<!--注釋內容-->

7.特殊符號（鍵盤中無法輸入的內容；連續空格；特殊含義的符號）

寫法： &關鍵字；

空格 ： ；

< 小于：<

> 大于 ：>；

版權符號： ©；

8.圖像標簽

<img/> 單標簽

（a）圖片路徑 src 引用圖片的路徑

（b）替換文本 alt 圖片不能加載顯示時的提示語

（c）提示內容 title 鼠標放上時顯示的內容

（d）寬度高度 width/height

<img src="圖片" alt="替換提示語" title=''codeup'' width="x" height="y"/>

html標簽的屬性作用：擴展html標簽的功能

html標簽的屬性寫在標簽中，若有多個屬性則必須用空格分隔，

屬性語法是 屬性=“屬性值”

9.超鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。點擊鏈接可以從一個頁面跳轉到另一個頁面。

使用<a>XX</a>標簽

<a href="鏈接地址" ></a> 點擊后到達目標位置

target ：打開網頁的方式

（1） blank 新建窗口打開網頁

（2） self 自身網頁（默認）

10.錨鏈接：（從A位置到B位置）

(a)同頁面內跳轉

創建跳轉標記：<a name="XXX"></a>

創建跳轉鏈接：<a href="#XXX"></a>

(b)不同頁面跳轉

創建跳轉標記：<a name="XXX"></a>

創建跳轉鏈接：<a href="目標頁面地址#XXX"></a>

(c)到頁面頂部

< a href="#" >：點擊跳回網頁頂端