国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解

2年前作者：時雨h分類：Toy博客閱讀(39)違法舉報

這篇具有很好參考價值的文章主要介紹了HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

HTML標簽：排版標簽

排版標簽用于對網(wǎng)頁內(nèi)容進行布局和樣式的調(diào)整。下面是對常見排版標簽的詳細介紹：


<h1>: 定義一級標題，通常用于標題欄或頁面主要內(nèi)容的標題。

<p>: 定義段落，用于將文字分段展示，段落之間會有空行。

<hr />: 創(chuàng)建水平線，通常用于分隔不同部分的內(nèi)容。

<br />: 插入換行符，用于在文本中創(chuàng)建換行效果。

<div>: 定義文檔中的一個區(qū)域，可用于分組相關元素，或用于控制元素的樣式。

<span>: 定義文本的一小部分，常用于指定特定的樣式，如顏色、字體等。

<center>: 對其所包含的內(nèi)容進行居中對齊，適用于塊級元素。

<pre>: 保留文本中的空白字符（包括空格和換行符），保持原始格式，適用于展示代碼或預格式文本。

這些排版標簽可以通過HTML語言嵌入到網(wǎng)頁中，配合CSS樣式表進行進一步的樣式調(diào)整，實現(xiàn)網(wǎng)頁的美化和布局。

標題使用至標簽進行定義。定義最大的標題，定義最小的標題。具有align屬性，屬性值可以是：left、center、right。

<h1><h6><h1><h6>

<!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>
	<h1>H1：千古壹號，永不止步</h1>
	<h2>H3：千古壹號，永不止步</h2>
	<h3>H3：千古壹號，永不止步</h3>
	<h4>H4：千古壹號，永不止步</h4>
	<h5>H5：千古壹號，永不止步</h5>
	<h6>H6：千古壹號，永不止步</h6>
</body>
</html>

將給定的HTML代碼轉(zhuǎn)換為Markdown格式的標題標簽如下所示：

# H1：千古壹號，永不止步
## H3：千古壹號，永不止步
### H3：千古壹號，永不止步
#### H4：千古壹號，永不止步
##### H5：千古壹號，永不止步
###### H6：千古壹號，永不止步

效果演示：

H1：千古壹號，永不止步

H3：千古壹號，永不止步

H3：千古壹號，永不止步

H4：千古壹號，永不止步
H5：千古壹號，永不止步
H6：千古壹號，永不止步

HTML 注釋

<!-- 我是 html 注釋  -->

在HTML中，可以使用注釋來向代碼添加說明或注解。HTML注釋不會在網(wǎng)頁上顯示，只是對代碼進行注釋和說明，方便開發(fā)人員理解和維護代碼。

HTML注釋以<!--開始，以-->結(jié)束。在注釋內(nèi)可以寫入任何內(nèi)容，包括文本、標簽等。注釋可以跨越多行，但不能嵌套注釋。

以下是HTML注釋的示例：

<!-- 這是一個HTML注釋 -->
<!-- 注釋可以用于添加說明或注解 -->
<!-- 注釋可以跨越多行 -->
<!-- 
    這是一個多行注釋的示例，
    可以在這里添加更多的注釋內(nèi)容。
-->

請注意，HTML注釋僅對代碼本身起作用，不會影響網(wǎng)頁的顯示效果。

段落標簽< p>

在HTML（超文本標記語言）中，<p> 標簽是一個段落標簽。這個標簽常常用來表示文檔中的一個段落。一個段落是由一個或多個連續(xù)的文本行組成，而且通常會有一個空行（空白或者其它的元素）來隔離它與其它的段落。

例如：

<p>這是一個段落。</p>
<p>這是另一個段落。</p>

上面的HTML代碼會生成兩個段落。

<p> 標簽是一個非常基礎的HTML標簽，它在網(wǎng)頁設計中經(jīng)常被使用。這個標簽通常與其它的HTML標簽（如標題標簽 <h1> 到 <h6>，鏈接標簽 <a>，列表標簽 <ul>, <ol>, <li> 等）一起使用來構(gòu)建一個結(jié)構(gòu)化、有意義的網(wǎng)頁內(nèi)容。

除了基本的段落表示，<p> 標簽還可以配合一些全局屬性（global attributes）來改變段落的外觀或行為。這些全局屬性包括但不限于：

  • class：為元素指定一個或多個類名，以便通過CSS來樣式化。
  • id：為元素指定唯一的標識符，可以通過JavaScript或者CSS來選擇和操作這個元素。
  • style：直接在元素上應用CSS樣式。
  • title：為元素提供一個描述性信息，通常作為鼠標懸停時的提示文本。

例如：

<p class="intro" style="color:blue;">這是一個藍色的段落。</p>

上面的HTML代碼創(chuàng)建了一個帶有藍色文本的段落，并且給它賦予了一個類名 “intro”。

此外，<p> 標簽不能包含塊級元素，如 <div>, <header>, <footer>, <p>, <section> 等。如果需要在一個段落中嵌入塊級元素，可以考慮使用 <div> 標簽代替。
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
HTML標簽是分等級的，HTML將所有的標簽分為兩種：

文本級標簽:p、span、a、b、i、u、em。文本級標簽里只能放文字、圖片、表單元素。（a標簽里不能放a和input）

容器級標簽:d iv、h系列、li、dt、dd。容器級標簽里可以放置任何東西。

從學習p的第一天開始，就要牢牢記?。簆標簽是一個文本級標簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。

錯誤寫法：（嘗試把 h 放到 p 里）

<p>
	我是一個小段落
	<h1>我是一級標題</h1>
</p>

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
上圖顯示，瀏覽器不允許你這么做，我們使用Chrome的F12審查元素發(fā)現(xiàn)，瀏覽器自己把p封閉掉了，不讓你去包裹h1。

PS：Chrome瀏覽器是HTML5支持度最好的瀏覽器。提供了非常好的開發(fā)工具，非常適合我們開發(fā)人員使用。審查元素功能的快捷鍵是F12。

水平線標簽< hr />

水平線標簽 <hr /> 是在HTML中用于插入水平分隔線的標簽。它是一個自閉合標簽，不需要閉合標簽。

使用 <hr /> 標簽可以在文檔中創(chuàng)建水平線，用于視覺上將內(nèi)容分隔開來或表示不同部分之間的分隔。水平線通常在段落、標題或其他內(nèi)容之間使用，以增加頁面的可讀性和組織性。

以下是一個使用 <hr /> 標簽創(chuàng)建水平線的示例：

<p>這是第一個段落。</p>
<hr />
<p>這是第二個段落。</p>

在瀏覽器中顯示的效果將是這樣的：

這是第一個段落。

-------------------------------------------

這是第二個段落。

你還可以使用CSS樣式來自定義水平線的外觀，例如指定顏色、寬度、樣式等。

<hr /> 標簽用于在HTML中插入水平分隔線，用于在內(nèi)容之間進行分隔和組織。

<!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>
	<p>自古情深留不住</p>
	<hr />
	<p>總是套路得人心</p>
</body>
</html>

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

屬性介紹：

align=“屬性值”：設定線條置放位置。屬性值可選擇：left right center。
size=“2”：設定線條粗細。以像素為單位，內(nèi)定為2。
width=“500"或：設定線條長度?？梢允墙^對值（單位是像素）或相對值。如果設置為相對值的話，內(nèi)定為100%。width=“70%”
color=”#0000FF"：設置線條顏色。
noshade：不要陰影，即設定線條為平面顯示。若沒有這個屬性則表明線條具陰影或立體。

當使用 <hr /> 標簽插入水平線時，你可以通過CSS樣式來自定義水平線的外觀。下面是一些常用的CSS屬性和值，用于自定義水平線：

  1. color: 指定水平線的顏色?？梢允褂妙A定義的顏色名稱或十六進制顏色值。例如：color: red; 或 color: #000000;

  2. width: 指定水平線的寬度?？梢允褂孟袼刂担ㄈ?px）或百分比（如 %）。例如：width: 2px; 或 width: 50%;

  3. height: 指定水平線的高度?？梢允褂孟袼刂祷虬俜直?。默認情況下，水平線的高度是由瀏覽器決定的。

  4. border-style: 指定水平線的邊框樣式。常用的值包括 solid（實線）、dashed（虛線）、dotted（點線）等。例如：border-style: dashed;

  5. margin: 指定水平線的外邊距?？梢允褂孟袼刂祷虬俜直取ＤJ情況下，水平線的外邊距是由瀏覽器決定的。

  6. padding: 指定水平線的內(nèi)邊距。可以使用像素值或百分比。默認情況下，水平線沒有內(nèi)邊距。

示例：

<hr style="color: blue; width: 50%; border-style: dashed; margin-top: 20px; margin-bottom: 20px;">

在上面的示例中，水平線的顏色被設置為藍色，寬度為50%，邊框樣式為虛線，上下外邊距為20像素。

需要注意的是，使用CSS樣式來自定義水平線時，最好將樣式定義在外部的CSS文件或內(nèi)部樣式表中，以提高代碼的可維護性和可重用性。

總結(jié)來說，通過使用 <hr /> 標簽以及CSS樣式，你可以輕松地自定義水平線的外觀，使其與頁面的設計風格相匹配。

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

換行標簽< br />

換行標簽 <br /> 是在HTML中用于插入換行的標簽。它是一個自閉合標簽，不需要閉合標簽。

使用 <br /> 標簽可以在文本中創(chuàng)建強制換行的效果。當瀏覽器解析到 <br /> 標簽時，會在此處插入一個換行符，使文本從下一行開始。

以下是一些使用 <br /> 標簽創(chuàng)建換行的示例：

<p>這是第一行。<br />這是第二行。</p>
<p>這是單獨一行。<br /><br />這是另外一行。</p>

在瀏覽器中顯示的效果將是這樣的：

這是第一行。
這是第二行。

這是單獨一行。

這是另外一行。

需要注意的是， <br /> 標簽只能在文本中使用，不能用于插入空行或分隔其他HTML元素。

總結(jié)來說，通過使用 <br /> 標簽，你可以在HTML文本中插入換行，以改變文本的布局和格式。

HTML 字符實體是一種特殊的編碼序列，用來在 HTML 中表示一些特殊字符或符號。這些特殊字符可能會與 HTML 的基本語法產(chǎn)生沖突，因此需要使用字符實體來進行轉(zhuǎn)義。

常用的字符實體包括：

  • &lt;：小于號 <
  • &gt;：大于號 >
  • &amp;：& 符號
  • &quot;：雙引號 "
  • &apos;：單引號 '

例如，如果你想在 HTML 中顯示一個標題，但標題中包含了小于號和大于號，那么你就需要對這些字符進行轉(zhuǎn)義：

<h1>5 &lt; 10 &gt; 2</h1>

在瀏覽器中顯示的效果將是：

5 < 10 > 2

需要注意的是，在 HTML 中還有一些其他的字符實體，你可以使用它們來表示一些特殊字符或符號。如果你不確定某個字符是否需要進行轉(zhuǎn)義，可以查看相關文檔或使用搜索引擎進行查詢。

總結(jié)來說，使用 HTML 字符實體可以在 HTML 中安全地表示一些特殊字符或符號，避免與 HTML 的基本語法產(chǎn)生沖突，從而確保 HTML 文檔的正確解析和顯示。
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

< div>和標簽< span>

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
<div> 和 <span> 都是 HTML 頁面中常用的容器標簽，它們主要的作用是對頁面的布局和樣式進行處理。

<div> 標簽通常用于表示文檔中的一個區(qū)域或一個塊級元素。你可以在 <div> 中嵌套其他的 HTML 元素，例如文本、圖片、鏈接等。通過添加 class 或 id 屬性來為 <div> 元素應用樣式，從而控制其外觀和位置。

下面是一個使用 <div> 標簽創(chuàng)建區(qū)塊的示例：

<div class="container">
  <h1>這是一個標題</h1>
  <p>這是一個段落。</p>
  <img src="example.jpg" alt="示例圖片">
</div>

在上面的示例中，我們使用了 <div> 標簽來創(chuàng)建一個容器區(qū)塊，并在其中嵌套了一個標題、一個段落和一張圖片。通過添加 class="container" 屬性，我們可以為這個 <div> 元素定義一個樣式類，例如：.container { border: 1px solid black; }，使得這個容器區(qū)塊具有邊框樣式。

相比之下，<span> 標簽是一個內(nèi)聯(lián)元素，它通常用于包裹一小段文本或一組行內(nèi)元素。你可以通過為 <span> 元素添加 class 或 id 屬性，來為文本內(nèi)容應用樣式，例如：.highlight { color: red; }。

下面是一個使用 <span> 標簽標記文本樣式的示例：

<p>這是一段包含了 <span class="highlight">高亮</span> 文本的段落。</p>

在上面的示例中，我們使用了 <span> 標簽來包裹一個高亮文本，并為它定義了一個樣式類 .highlight。這樣就可以對這個高亮文本應用特定的樣式，例如：color: red;。

總結(jié)來說，<div> 和 <span> 都是常用的 HTML 容器標簽，它們主要的作用是對頁面的布局和樣式進行處理。<div> 通常用于表示區(qū)塊元素，而 <span> 通常用于包裹行內(nèi)元素或一小段文本，并為它們應用樣式。

除了上面提到的區(qū)別，<div> 和 <span> 還有一些其他的不同點。

  1. 含義不同

<div> 表示一個塊級元素，可以包含其他的塊級或內(nèi)聯(lián)元素，用于布局等。而 <span> 表示一個內(nèi)聯(lián)元素，通常用于為一段文本設置樣式。

  1. 默認樣式不同

默認情況下，<div> 會占據(jù)一整行，寬度默認為父元素的100%。而 <span> 則不會打斷當前的文本行，在水平方向上只會占據(jù)其內(nèi)容所需的寬度。

  1. 嵌套規(guī)則不同

在 HTML 中，<div> 元素可以嵌套其他塊級元素和內(nèi)聯(lián)元素，而 <span> 元素只能嵌套內(nèi)聯(lián)元素。如果嘗試在 <span> 中嵌套塊級元素，則會破壞文檔的結(jié)構(gòu)，導致瀏覽器無法正確顯示這個文檔。

  1. 應用場景不同

由于它們的特性和默認樣式的差異，<div> 和 <span> 通常應該根據(jù)具體的使用場景來選擇。比如：

  • 如果你需要創(chuàng)建一個感覺上像一個方塊的容器，一般會使用 div，例如頁面的主體內(nèi)容區(qū)域、頁面頭部、底部等。
  • 如果你需要為一小段文本或者一個按鈕設置特定的字體、字號、顏色等樣式，一般會使用 span，例如設置某個單詞高亮顯示或?qū)⒛硞€按鈕上的文本設置為粗體。

總之，在使用 <div> 和 <span> 時，需要先了解它們的含義、特性和應用場景，才能更好地選擇合適的標簽并為其應用樣式。

內(nèi)容居中標簽< center>

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
<center> 標簽是一個已經(jīng)被廢棄的 HTML 標簽，它用于將其中的內(nèi)容水平居中顯示。根據(jù) HTML5 規(guī)范，不再建議使用 <center> 標簽，而是通過 CSS 來實現(xiàn)內(nèi)容的居中。

要在網(wǎng)頁中實現(xiàn)內(nèi)容的居中，推薦使用 CSS 的 margin 屬性和 auto 值來設置對應元素的外邊距。具體方法可以采用以下兩種常用的方式來實現(xiàn)：

  1. 使用塊級元素 + 自動邊距
<div style="width: 300px; margin: 0 auto;">
  <!-- 這里是要居中的內(nèi)容 -->
</div>

上述示例中，我們創(chuàng)建了一個 <div> 元素，并設置了固定的寬度（例如 300px）和 margin 屬性為 0 auto。這就使得該 <div> 元素水平居中于父元素中。

  1. 使用 flexbox（彈性布局）
<div style="display: flex; justify-content: center;">
  <!-- 這里是要居中的內(nèi)容 -->
</div>

上述示例中，我們使用了 CSS 的彈性布局 (display: flex)，并設置了 justify-content 屬性為 center，這樣就實現(xiàn)了內(nèi)容的水平居中。

需要注意的是，以上示例僅僅演示了如何在網(wǎng)頁中水平居中內(nèi)容。如果你還需要垂直居中，需要進一步設置父元素的高度和子元素的垂直布局屬性。例如，可以使用 display: flex 和 align-items: center 等屬性來實現(xiàn)垂直居中。

總結(jié)來說，推薦使用 CSS 的方式來實現(xiàn)內(nèi)容的居中，而不是使用已經(jīng)廢棄的 <center> 標簽。這樣可以更好地與現(xiàn)代的 Web 開發(fā)標準和最佳實踐保持一致。

預定義（預格式化）標簽 < pre>

<pre> 標簽是 HTML 中的一個預定義（預格式化）標簽，用于展示預先格式化的文本內(nèi)容，保留文本中的空格、換行符和其他空白字符。

<pre> 標簽適用于以下情況：

  • 展示計算機源代碼或其他需要保持原始格式的文本。
  • 顯示 ASCII 藝術、表格或其他需要保留空格和換行符的文本。

使用 <pre> 標簽可以確保文本在瀏覽器中按照預先定義的格式進行顯示，而不會將連續(xù)的空格壓縮成一個空格，也不會忽略換行符。

下面是一個使用 <pre> 標簽的示例：

<pre>
  function greet() {
    console.log("Hello, world!");
  }

  greet();
</pre>

上述示例中，<pre> 標簽包裹了一段 JavaScript 代碼。在瀏覽器中渲染時，代碼會按照原始的格式進行展示，保留了縮進、空格以及換行符。

需要注意的是，由于 <pre> 標簽保留文本中的所有空白字符，因此如果你想控制文本的樣式（如字體、顏色等），可能需要為 <pre> 標簽添加額外的 CSS 樣式。

盡管 <pre> 標簽在特定場景下非常有用，但在大多數(shù)情況下，建議使用 CSS 來實現(xiàn)文本的格式化和布局，而不是僅依賴 <pre> 標簽。這樣可以更好地控制樣式，并遵循現(xiàn)代的 Web 開發(fā)標準。
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

字體標簽

<font> 標簽是 HTML 中用于設置文本字體樣式的標簽，不過在 HTML5 中已經(jīng)被廢棄，推薦使用 CSS 來實現(xiàn)文本樣式的設置。

在過去的 HTML 版本中，可以使用 <font> 標簽來指定文本的字體、大小、顏色等屬性。例如：

<font face="Arial" size="4" color="red">This is some text.</font>

上述示例中，<font> 標簽包裹了一段文本，并通過設置 face 屬性指定字體為 Arial，size 屬性設置字體大小為 4，color 屬性設置字體顏色為紅色。然而，這種方式已經(jīng)不再推薦使用，而是使用 CSS 的 font-family、font-size 和 color 等屬性來設置字體樣式。

關于特殊字符（轉(zhuǎn)義字符），你提到的幾個常見的特殊字符和它們的HTML轉(zhuǎn)義字符表示如下：

  • &nbsp;：空格，它是一個不間斷的空格字符，用于在文本中插入一個空格，不會被瀏覽器自動壓縮或忽略。

  • &lt;：小于號（<）的 HTML 轉(zhuǎn)義字符表示。

  • &gt;：大于號（>）的 HTML 轉(zhuǎn)義字符表示。

  • &amp;：符號 & 的 HTML 轉(zhuǎn)義字符表示。

  • &quot;：雙引號的 HTML 轉(zhuǎn)義字符表示。

  • &apos;：單引號的 HTML 轉(zhuǎn)義字符表示。盡管在 HTML 中，可以直接使用單引號而無需轉(zhuǎn)義，但為了保證文檔的一致性，可以使用轉(zhuǎn)義字符。

  • &copy;：版權符號 ? 的 HTML 轉(zhuǎn)義字符表示。

  • &trade;：商標符號 ? 的 HTML 轉(zhuǎn)義字符表示。

  • &#32464;：這是一個 Unicode 編碼的特殊字符，具體是漢字的“文字”。在 HTML 中，可以使用 &# 后面跟著相應字符的 Unicode 編碼來表示特殊字符。

請注意，使用 HTML 轉(zhuǎn)義字符能夠確保在 HTML 文檔中正確地顯示這些特殊字符，避免被解析為 HTML 標簽或其他特殊字符。

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

下劃線、中劃線、斜體

在 HTML 中，可以使用以下標簽來設置文本的下劃線、中劃線和斜體樣式：

  • <u> 標簽：用于在文本中添加下劃線。

    <u>This is underlined text.</u>

  • <s> 或 <del> 標簽：用于在文本中添加中劃線（刪除線）。

    <s>This text has a strikethrough.</s>
<del>This text has a strikethrough.</del>

  • <i> 或 <em> 標簽：用于將文本設置為斜體。

    <i>This is italic text.</i>
<em>This is italic text.</em>

需要注意的是，雖然上述標簽可以實現(xiàn)相應的效果，但在 HTML5 中，更推薦使用 CSS 來設置文本樣式，而不是僅依靠標簽。

例如，可以使用 CSS 的 text-decoration 屬性來設置文本的下劃線和中劃線樣式：

<span style="text-decoration: underline;">This is underlined text.</span>
<span style="text-decoration: line-through;">This text has a strikethrough.</span>

而斜體則可以使用 CSS 的 font-style 屬性：

<span style="font-style: italic;">This is italic text.</span>

通過使用 CSS，可以更靈活地控制文本樣式，并且與 HTML 結(jié)構(gòu)和內(nèi)容分離，提高了代碼的可維護性和可擴展性。

粗體標簽或（已廢棄）

在 HTML 中，可以使用 <b> 和 <strong> 標簽來設置文本的粗體樣式。

  • <b> 標簽：用于將文本設置為粗體。不過需要注意的是，<b> 標簽只表示文本的粗體展示，并不強調(diào)重要性或語義上的強調(diào)。

    <b>This is bold text.</b>

  • <strong> 標簽：也用于將文本設置為粗體，但同時表達文本的重要性或語義上的強調(diào)。在語義上，<strong> 標簽比 <b> 更加準確。

    <strong>This is important text.</strong>

需要注意的是，雖然 <b> 標簽和 <strong> 標簽都可以用于設置粗體樣式，但在語義上存在差異。如果想要強調(diào)文本的重要性或語義上的強調(diào)，推薦使用 <strong> 標簽。

另外，需要說明的是 <b> 和 <strong> 標簽并沒有被廢棄。盡管在一些場景中，CSS 可以更好地控制文本樣式，但 <b> 和 <strong> 標簽仍然是有效的 HTML 標簽，并且在某些特定的使用情況下仍然具有一定的實用性。

上標 下標< sup>< sub>

在 HTML 中，可以使用 <sup> 和 <sub> 標簽來設置文本的上標和下標。

  • <sup> 標簽：用于將文本設置為上標（上面位置較高的文字）。

    X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>

  • <sub> 標簽：用于將文本設置為下標（下面位置較低的文字）。

    H<sub>2</sub>O

這些標記常用于數(shù)學公式、科學化學式、腳注等需要顯示上標和下標的場景。

需要注意的是，<sup> 和 <sub> 標簽僅改變文本的垂直位置，并不會改變其字體樣式。如果還需要對上標和下標的樣式進行定制，可以使用 CSS 來實現(xiàn)，例如通過 vertical-align 屬性設置垂直對齊方式，或者使用其他樣式屬性對上標和下標進行自定義。

HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5

超鏈接

超鏈接是 HTML 中常用的元素，用于在網(wǎng)頁中創(chuàng)建可點擊的鏈接，將用戶導航到其他頁面、文件或指定位置。下面介紹三種常見的超鏈接形式：

  1. 文本鏈接：
    文本鏈接是最常見的超鏈接形式，可以將文本內(nèi)容轉(zhuǎn)換為可點擊的鏈接。使用 <a> 標簽來創(chuàng)建文本鏈接，其中 href 屬性指定鏈接目標的 URL。

    <a href="https://www.example.com">點擊這里</a> 跳轉(zhuǎn)到示例網(wǎng)站

  2. 圖像鏈接：
    圖像鏈接是將圖像轉(zhuǎn)換為可點擊的鏈接，點擊圖像時將導航到指定的目標。使用 <a> 標簽包裹 <img> 標簽來創(chuàng)建圖像鏈接，同樣需要使用 href 屬性指定鏈接目標的 URL。

    <a href="https://www.example.com">
  <img src="image.jpg" alt="示例圖像">
</a>

  3. 錨點鏈接：
    錨點鏈接用于在頁面內(nèi)部創(chuàng)建跳轉(zhuǎn)鏈接，它將用戶引導到同一頁面上的特定位置。使用 <a> 標簽中的 href 屬性指定錨點位置的 ID，然后在要跳轉(zhuǎn)到的位置使用 <a> 標簽的 id 屬性指定相同的 ID 值。

    <a href="#section2">跳轉(zhuǎn)到第二節(jié)</a>

<!-- ... -->
<h2 id="section2">第二節(jié)內(nèi)容</h2>

需要注意的是，以上三種超鏈接形式都使用 <a> 標簽創(chuàng)建，通過 href 屬性指定鏈接目標。超鏈接可以幫助用戶在網(wǎng)頁間進行導航、分享相關資源，并提高頁面的交互性和導航性。
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解,小程序,前端,前端,html,html5
超鏈接（Hyperlink）是網(wǎng)頁中用來在不同頁面之間建立關聯(lián)的元素。超鏈接通常通過標簽來創(chuàng)建，其中包含了一些屬性來定義鏈接的目標和行為。

常用的超鏈接屬性包括：

  1. href：這是最重要的屬性，用于指定鏈接的目標網(wǎng)址?？梢允且粋€絕對URL（如http://example.com）或相對URL（如…/page.html）。例如：
<a >點擊這里</a>
  1. title：這個屬性用于設置懸停文本，當鼠標懸停在鏈接上時會顯示。通常用來提供鏈接的額外描述或說明。例如：
<a  title="訪問示例網(wǎng)站">點擊這里</a>
  1. name：name屬性主要用于設置一個錨點的名稱，用于在同一頁面內(nèi)進行跳轉(zhuǎn)。它通常與錨點標簽配合使用。例如：
<a href="#section1" name="section1">跳轉(zhuǎn)到第一節(jié)</a>
...
<a href="#section1">回到頂部</a>
...
<h2 id="section1">第一節(jié)</h2>
  1. target：這個屬性告訴瀏覽器用什么方式來打開目標頁面。常見的取值有：
  • _self：在當前窗口或標簽頁中打開目標頁面（默認值）。
  • _blank：在新的窗口或標簽頁中打開目標頁面。
  • _parent：在父級窗口或框架集中顯示目標頁面。
  • _top：在最頂級的窗口或框架集中顯示目標頁面。

例如：

<a  target="_blank">在新窗口中打開示例網(wǎng)站</a>
  1. rel：這個屬性用于指定鏈接與當前頁面之間的關系。常見的取值有：
  • nofollow：告訴搜索引擎不要追蹤這個鏈接，通常用于避免被垃圾郵件等惡意信息濫用。
  • noreferrer：告訴瀏覽器不要發(fā)送Referrer數(shù)據(jù)（即來源網(wǎng)址），通常用于保護用戶隱私。
  • noopener：告訴瀏覽器在新打開的頁面中不要保留原頁面的JavaScript環(huán)境（即window.opener對象），通常用于防范安全漏洞。

例如：

<a  rel="nofollow">不要追蹤我</a>
  1. download：這個屬性用于告訴瀏覽器下載鏈接指向的文件，而不是在瀏覽器中打開它?？梢灾付ㄎ募?，也可以讓瀏覽器使用默認文件名。例如：
<a  download>下載ZIP文件</a>
  1. type：這個屬性用于指定鏈接指向的資源的MIME類型，通常用于確保瀏覽器正確地處理鏈接指向的文件類型。例如：
<a  type="video/mp4">觀看視頻</a>

超鏈接屬性可以根據(jù)實際需要來定義，使得鏈接更加豐富多彩、可讀性更好，并且更加符合Web標準。文章來源地址http://www.zghlxwxcb.cn/news/detail-727995.html

到了這里，關于HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標簽詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包