html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會

節(jié)、分區(qū)和分割線

這些標(biāo)記用于將頁面分成多個部分。熟練地掌握這些標(biāo)記將意味著構(gòu)建出具有良好的結(jié)構(gòu)和布局的頁面，使其更加友好和易于閱讀。

分區(qū) - <div> </div>

div標(biāo)記定義了HTML文件中的一個部分或分區(qū)。它通常包含需要組合在一起的標(biāo)題、段落、表格或其他元素。通過設(shè)置<div class="">與css一起使用來設(shè)置網(wǎng)頁某個部分的顯示。

段落 -

p標(biāo)記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達(dá)到屏幕邊緣就會自動折到下一行。當(dāng)另一個標(biāo)記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標(biāo)記具有以下屬性：

align="" - 段落中文本的對齊方式：left, center or right
width="" - 段落將占據(jù)頁面的固定寬度或百分比，默認(rèn)為100%

內(nèi)聯(lián) -

span標(biāo)記用于將內(nèi)聯(lián)元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應(yīng)用css樣式。span標(biāo)記可以在div和p標(biāo)記中使用，因為它不會創(chuàng)建新的塊。

換行 -

br標(biāo)記相當(dāng)于一個回車符，用于在新行開始文本。一行中的多個 標(biāo)記將在網(wǎng)頁上創(chuàng)建一個很大的垂直空間。

水平分隔線 - <hr>

hr標(biāo)記通常被稱為HTML行分隔符標(biāo)記，創(chuàng)建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：

width="" - 線條將占用固定寬度，默認(rèn)100%寬度
color="" - 線條顏色
noshade - 取消3D外觀，創(chuàng)建一條平的實線分隔線

不換行 -

出于某種原因，你希望文本在一條直線上繼續(xù)，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設(shè)計。

例子

下面是以上標(biāo)記的示例：

瀏覽器顯示內(nèi)容如下所示：

HTML標(biāo)簽相關(guān)的字符串格式化

string nl2br ( string $string )

nl2br() 就是將\n 替換成 //javascript對\n才能夠執(zhí)行換行,對是不能執(zhí)行換行

htmlspecialchars() 把一些預(yù)定義的字符轉(zhuǎn)換為 HTML 實體。

string htmlspecialchars(string,quotestyle,[character-set])

轉(zhuǎn)換以下字符及對應(yīng)的實體

& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >

第二個參數(shù): ENT_COMPAT 只轉(zhuǎn)換雙引號, 保留單引號, 為默認(rèn)值 compat: 兼容性

ENT_QUOTES 同時轉(zhuǎn)換兩種引號 quotes: 引號

ENT_NOQUOTES 不對引號進(jìn)行轉(zhuǎn)換

<html>
<body>
<?php
$str = "John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>

輸出結(jié)果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以將所有的非ASCII碼字符轉(zhuǎn)換為對應(yīng)的實體代碼;除字母、數(shù)字、\外, 漢字和鍵盤上其他字符都轉(zhuǎn)換

<?php
$str = "A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>

返回的結(jié)果:A 'quote' "is bold

A 'quote' "is bold

注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本

htmlspecialchars()和htmlentities()函數(shù)對于轉(zhuǎn)義字符"\"處理,不會轉(zhuǎn)義實體代碼,要么當(dāng)轉(zhuǎn)義字符對待,要么原樣輸出;

PHP中htmlentities和htmlspecialchars的區(qū)別

這兩個函數(shù)的功能都是轉(zhuǎn)換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標(biāo)記被瀏覽器執(zhí)行。

使用中文時沒什么區(qū)別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。

htmlentities轉(zhuǎn)換所有的html標(biāo)記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號

addslashes() 在指定的預(yù)定義字符前添加反斜杠。

這些預(yù)定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)

提示：該函數(shù)可用于為存儲在數(shù)據(jù)庫中的字符串以及數(shù)據(jù)庫查詢語句準(zhǔn)備合適的字符串。

注釋：默認(rèn)情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數(shù)據(jù)自動運行 addslashes()。

不要對已經(jīng)被magic_quotes_gpc轉(zhuǎn)義過的字符串使用 addslashes()，因為這樣會導(dǎo)致雙層轉(zhuǎn)義。

遇到這種情況時可以使用函數(shù) get_magic_quotes_gpc() 進(jìn)行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我們要向字符串中的預(yù)定義字符添加反斜杠：

<?php
$str = "Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>

輸出：

Who's John Adams? This is not safe in a database query.

Who\'s John Adams? This is safe in a database query.

<?php
header("Content-type:text/html; charset=utf-8");
$str = "wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>

輸出:

wo are studying php

wo are studying >wo are studying \0 php< php

stripslashes() 刪除反斜線（"\"）

在提交的表單數(shù)據(jù)中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，

默認(rèn)是打開的，如果不處理則將數(shù)據(jù)保存到數(shù)據(jù)庫時，有可能會被數(shù)據(jù)庫誤當(dāng)成控制符號而引起錯誤。

通常htmlspecialchars()和stripslashes()函數(shù)復(fù)合的方式，聯(lián)合處理表單中的提交的數(shù)據(jù)htmlspecialchars(stripslashes())

strip_tags()

string strip_tags ( string $str [, string $allowable_tags ] )

剝?nèi)?HTML、XML 以及 PHP 的標(biāo)簽。

<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>

輸出結(jié)果:Hello world!

實例:

<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉(zhuǎn)換雙引號,為默認(rèn)參數(shù)
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進(jìn)行轉(zhuǎn)換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉(zhuǎn)換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉(zhuǎn)換為對應(yīng)的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標(biāo)記
?>

輸出結(jié)果:

webserver; & \ 'Linux' & Apache

格式化

>格式化標(biāo)記通常只能是產(chǎn)生幾種不同文本的樣式，但在語義上它們各自有著自己的特點

>如果你只是想有著一些自己的文本樣式，可以嘗試使用“常用html標(biāo)記”里格式化的內(nèi)容或css樣式表

>但是這樣會對搜索引擎不友好

>所以我們強調(diào)使用語義化標(biāo)簽，提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。

## `<abbr></abbr>`

作用：用于指示該標(biāo)簽內(nèi)的內(nèi)容是一個縮寫

注意點：

1. 常與全局屬性title配合使用，這樣可以在鼠標(biāo)移動到該處時顯示全稱

`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

2. 在瀏覽器內(nèi)渲染會使其在內(nèi)容底部加上短虛線

## `<address></address>`

作用：用于定義文檔或文章作者/擁有者的聯(lián)系信息

>如果 `<address>` 元素位于 `<body>` 元素內(nèi)，則它表示文檔聯(lián)系信息。

>如果 `<address>` 元素位于 `<article>` 元素內(nèi)，則是它表示文章的聯(lián)系信息。

注意點：

1. address元素中的文本通常呈現(xiàn)為斜體，大多數(shù)瀏覽器會在address元素前后換行

2. address元素不應(yīng)該用于描述通訊地址，除非它是練習(xí)信息的一部分

3. address元素元素通常連同其他信息被包含在footer元素中

```

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.

Visit us at:

Example.com

Box 564, Disneyland

USA

</address>

```

## ``

作用：定義粗體文本

## `<bdi></bdi>`

作用：定義文本的文本方向，使其脫離周圍文本的方向設(shè)置

注意點：

1. bdi指的是bidi隔離

2. 在發(fā)布用戶評論或其它難以控制的內(nèi)容時，可以使用

3. 需要與全局屬性dir配合使用

## `<bdo></bdo>`

作用：定義文字方向

注意點：

1. 請與全局屬性dir配合使用

```

如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用：`<blockquote>`標(biāo)簽用于定義塊引用

注意點：

1. 標(biāo)簽內(nèi)的所有文本都會從常規(guī)文本中分離出來，一般會上下?lián)Q行，左右增加外邊距，有時也會使用斜體

2. 換而言之，塊引用擁有它們自己的空間

3. 可選屬性：

`cite=url`規(guī)定引用來源

```

WWF's ultimate goal is to build a future where people live in harmony with nature.

</blockquote>

```

主流瀏覽器均不支持cite屬性，但是搜索引擎可以因此獲得更多的信息

## `<q></q>`

作用：用于定義短引用

注意點：

1. 瀏覽器經(jīng)常在引用內(nèi)容的人左右添加引號

2. `<q>` 與 `<blockquote>` 的區(qū)別:

- `<q>` 標(biāo)簽在本質(zhì)上與 `<blockquote>` 是一樣的。不同之處在于它們的顯示和應(yīng)用。`<q>` 標(biāo)簽用于簡短的行內(nèi)引用。如果需要從周圍內(nèi)容分離出來比較長的部分（通常顯示為縮進(jìn)地塊），請使用 `<blockquote>` 標(biāo)簽。

3. 在html4中，firefox和opera中q元素包含的文本必須以引號來開始和結(jié)束，但是IE卻不支持這個規(guī)定，如果我們?yōu)榱藵M足其它瀏覽器而添加了引號，那么在IE中就會顯示兩組引號。

4. 盡管如此，我們還是推薦使用q元素，因為它在文檔處理和信息提取方面將會有很強的效果

5. 可選屬性：

`cite=citation`定義引用的出處或來源（citation）

## `<cite></cite>`

作用：表示所含文本是對某個參考文獻(xiàn)的引用

注意點：

1. 在顯示上與blockquote元素類似，均是斜體

2. 但是它不會有上下左右的外邊距

3. 通常情況下還要把引用包裹在一對`<a></a>`標(biāo)簽中，然后把超鏈接指向引用

`<cite><a href=URL>引用名</a></cite>`

>`<cite>` 標(biāo)簽還有一個隱藏的功能：它可以使你或者其他人從文檔中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器，它能夠自動整理引用表格，并把它們作為腳注或者獨立的文檔來顯示。`<cite>` 標(biāo)簽的語義已經(jīng)遠(yuǎn)遠(yuǎn)超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實用的方式來向用戶表達(dá)文檔的內(nèi)容。

## `<code></code>`

作用：定義計算機代碼文本

注意點：

1. code元素并不能將元素內(nèi)的內(nèi)容以原樣顯示，瀏覽器仍然會解析內(nèi)容而不跳過

2. code只是給內(nèi)容的字體改為等寬字體，即它只是將內(nèi)容轉(zhuǎn)變?yōu)榘凳具@是計算機代碼的內(nèi)容

## `<var></var>`

作用：`<var>` 標(biāo)簽表示變量的名稱，或者由用戶提供的值。

注意點：

1. 用 `<var>` 標(biāo)簽標(biāo)記的文本通常顯示為斜體。

2. `<var>` 標(biāo)簽是計算機文檔中應(yīng)用的另一個小竅門，這個標(biāo)簽經(jīng)常與 `<code>` 和 `<pre>` 標(biāo)簽一起使用，用來顯示計算機編程代碼范例及類似方面的特定元素。

## `<smap></smap>`

作用：用于從一段上下文中抽取一些字符

例子：

`字符序列 <samp>ae</samp> 可能會被轉(zhuǎn)換為 æ 連字字符。`

效果：

`字符序列 ae 可能會被轉(zhuǎn)換為 ? 連字字符。`

## `<ins></ins>`

作用：定義一個插入文本

注意點：

1. 顯示效果是加入下劃線

## `<dfn></dfn>`

作用：用于標(biāo)記特殊術(shù)語或短語

注意點：

1. 瀏覽器通常會將dfn元素內(nèi)的內(nèi)容顯示為斜體

2. 應(yīng)當(dāng)盡量少的使用，比如在技術(shù)性的文檔中，在第一次提到一個術(shù)語時，可以加上dfn元素，而在相同文檔的后續(xù)中，對于同一個術(shù)語，應(yīng)避免使用dfn

## ``

作用：定義一個強調(diào)文本

注意點：

1. 在顯示結(jié)果上，它依然是斜體

2. 如果你只是為了定義一個斜體的內(nèi)容，可以考慮使用``或css樣式表

3. 對于強調(diào)的內(nèi)容應(yīng)當(dāng)不宜過多，否則無法突出想要表達(dá)的內(nèi)容

## ``

作用：定義一個語氣更加強烈地強調(diào)文本

注意點：

1. 常識告訴我們應(yīng)較少使用em元素的話，那么strong元素出現(xiàn)的次數(shù)應(yīng)該更少，限制其使用可以讓這個標(biāo)記更加的引人注意和有效

## ``

作用：定義一個斜體文本或傾斜的文本

## `<kbd></kbd>`

作用：定義鍵盤文本

注意點：

1. 顯示效果為等寬字體

## ``(HTML5)

作用：定義帶有記號的文本

注意點：

1. 與加粗不同，它會將文字加上背景色

## `<meter></meter>`(HTML5)

作用：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量，也被稱為gauge（尺度）

注意點：

1. 這是一個html5的新標(biāo)簽，假如你把文檔類型聲明為html4或以下和xhtml，標(biāo)簽本身的效果將會受到影響

2. `<meter>`標(biāo)簽不應(yīng)用于指示進(jìn)度條的進(jìn)度，如果標(biāo)記進(jìn)度，請使用`<progress></progress>`標(biāo)簽

可用屬性：

1. form=form_id-->規(guī)定meter元素所屬的一個或多個表單

2. high=number-->規(guī)定被視作高的值的范圍

3. low=number-->規(guī)定被視作高的值的范圍

4. max=number-->規(guī)定范圍的最大值

5. min=number-->規(guī)定范圍的最小值

6. optimum=number-->規(guī)定度量的優(yōu)化值

7. value=number-->必須。規(guī)定度量的當(dāng)前值

```

```

## `<progress></progress>`(HTML5)

作用：標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）

`<progress value="22" max="100"></progress> `

注意點：

1. 需要與js結(jié)合使用，來顯示任務(wù)的進(jìn)度

2. progress標(biāo)簽不適合使用來表示度量衡，這種情況請使用meter元素來替代

可用屬性：

max=number-->規(guī)定任務(wù)一共需要多少工作

value=number-->規(guī)定任務(wù)已經(jīng)完成多少工作

## `<pre></pre>`

作用：用于定義預(yù)格式化的文本，即通常會保留空格和換行，文本會呈現(xiàn)為等寬字體

注意點：

1. pre元素常用于表示計算機的源代碼，但是計算機的源代碼（html）直接放入瀏覽器仍會解析（需要使用`<`和`>`等符號實體）

2. 會導(dǎo)致內(nèi)容截斷的標(biāo)簽絕不能包含在pre元素中，如標(biāo)題、p元素、address元素

3. 可選的屬性：

`width=number`定義每行的最大字符數(shù)

## `<ruby></ruby>`

作用：可用于定義一個ruby注釋（中文注音或字符）

注意點：

1. ruby元素與rt元素一同使用

2. ruby元素由需要一組字符和一個提供信息的rt元素組成

3. 還包括一個可選的rp元素，定義瀏覽器不支持ruby元素時顯示的內(nèi)容

## `<rt></rt>`

作用：定義字符的解釋或發(fā)音

## `<rp></rp>`

作用：定義瀏覽器不支持ruby元素時顯示的內(nèi)容

## `<s></s>`

作用：定義加刪除線的文本

注意點：

1. `<s>`標(biāo)簽是`<strike>`標(biāo)簽的縮寫版本，但html4和xhtml中已經(jīng)不再贊成使用它了，就是說，它早晚有一天會消失

2. 請使用`<del></del>`替代它

## `<del></del>`

作用：給元素中的內(nèi)容上加上刪除線

注意點：

1. 請與`<ins></ins>`標(biāo)簽配合使用，來描述文檔中的更新與修正

2. 可選的屬性：

- cite=URL

- datetime=YYYMMDD （定義文本被刪除的日期和時間）

## ``

作用：標(biāo)簽內(nèi)的元素呈現(xiàn)小號字體的效果

注意點：

1. 如果被包裹字體已經(jīng)是最小號的字體了，那這個標(biāo)簽將不起任何作用

2. ``是可以嵌套的，從而把文字連續(xù)的縮小，直到到達(dá)最小的一號字

## ``

作用：標(biāo)簽中的內(nèi)容會以當(dāng)前文本流中字符高度的一般來顯示（上標(biāo)）

注意點：

1. 雖然顯示效果與文本流中其他元素不一樣，但是它們的字體字號都是一樣的

2. 這個標(biāo)簽在向文檔添加注腳以及表示方程式中的指數(shù)時非常有效，如果與`<a></a>`標(biāo)簽結(jié)合使用可以創(chuàng)建出很好的超鏈接注腳

## ``

作用：標(biāo)簽中的內(nèi)容會以當(dāng)前文本流中字符高度的一般來顯示（下標(biāo)）

## `<template></template>`

作用：可以作為一個容器，但是它并不會存在于DOM樹中

注意點：

1. 多用于包裹一段代碼，對其綁定事件，使其可以控制是否隱藏

2. 一個檢查方法：

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的瀏覽器不支持 template！");

}

```

## ``

作用：定義下劃線文本

注意點：

1. 應(yīng)盡量避免使用，用戶可能會把它混淆為一個超鏈接

## `<time></time>`(HTML5)

作用：定義一個公歷的時間或日期，時間和時區(qū)偏移是可選的

可選的屬性：

1. datetime=datetime-->規(guī)定日期/時間。否則由元素內(nèi)容給定日期時間

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 時間是文檔（或 `<article>` 元素）的發(fā)布日期。

## ``(HTML5)

一段帶有 Word Break Opportunity 的文本：

```

如果想學(xué)習(xí) AJAX，那么您必須熟悉 XMLHttpRequest 對象。

```

作用：Word Break Opportunity (``) 規(guī)定在文本中的何處適合添加換行符。

注意點：如果單詞太長，或者您擔(dān)心瀏覽器會在錯誤的位置換行，那么您可以使用 `` 元素來添加 Word Break Opportunity（單詞換行時機）。

在線咨詢

上一篇：“圖片滑動樣式”修改HTML教程
下一篇：怎么入門html5繪制圖形？你需要了解這幾點！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會

節(jié)、分區(qū)和分割線

分區(qū) - <div> </div>

段落 - <p> </p>

內(nèi)聯(lián) - <span> </span>

換行 - <br>

水平分隔線 - <hr>

不換行 - <nobr> </nobr>

例子

您的項目需求

整合營銷服務(wù)商

html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會

節(jié)、分區(qū)和分割線

分區(qū) - <div> </div>

段落 - <p> </p>

內(nèi)聯(lián) - <span> </span>

換行 - <br>

水平分隔線 - <hr>

不換行 - <nobr> </nobr>

例子

您的項目需求

html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會

節(jié)、分區(qū)和分割線