HTML中的標(biāo)簽是不是都成對(duì)？單個(gè)標(biāo)簽是什么情況？

-尖括號(hào)<html></html>是一組成為“雙標(biāo)記”，可以理解為<html>為始，</html>為終或閉合；

2-所有的標(biāo)簽都有<>開(kāi)始，但不是所有的標(biāo)簽擁有</>結(jié)束，不是所有的標(biāo)簽有始就有終。比如<hr>水平線；

3-單個(gè)的標(biāo)簽叫什么？

單個(gè)的標(biāo)簽叫“單標(biāo)記”，也可以叫不成對(duì)標(biāo)簽。

單標(biāo)記指的是沒(méi)有閉合標(biāo)記的標(biāo)記（沒(méi)有結(jié)束標(biāo)記），即空標(biāo)簽。

4-如果給“單標(biāo)記”加上閉合會(huì)怎么樣？

在空標(biāo)簽上使用閉標(biāo)簽是無(wú)效的，例如：</hr>。這樣的情況是無(wú)效的HTML標(biāo)簽。

總結(jié)，一點(diǎn)小心得。雙標(biāo)記就如一段事件，單標(biāo)記就像一種能力，事件會(huì)有開(kāi)始和結(jié)束，能力的關(guān)閉就是程序的關(guān)閉。

以下是一些練習(xí)截圖

這段代碼的顯示是下圖

這是自學(xué)中的一點(diǎn)點(diǎn)自己的理解，如果有錯(cuò)誤，歡迎留言指正。

前端對(duì)多個(gè)相同的標(biāo)簽元素進(jìn)行有序的排列是非常常見(jiàn)的需求，當(dāng)我們有多個(gè)相似功能出現(xiàn)在同一個(gè)區(qū)域時(shí)我們就需要合理的排列這些元素。比如我這里的云服務(wù)提供了多個(gè)功能模塊展示給用戶，這個(gè)時(shí)候我們就會(huì)將每個(gè)模塊所涉及到的內(nèi)容打包成一個(gè)整體來(lái)設(shè)計(jì)。

HTML元素構(gòu)建

在Vue相似的功能展現(xiàn)我們可以通過(guò)v-for來(lái)實(shí)現(xiàn)，modulars中的數(shù)據(jù)我們口可以通過(guò)登錄直接從后臺(tái)獲取。這樣不管有多少個(gè)模塊我們都可以快速的實(shí)現(xiàn)DOM元素的渲染，也可以減少樣式的書(shū)寫(xiě)，提高代碼執(zhí)行效率。這里每個(gè)mould都是一個(gè)功能模塊的組合，里面包含了標(biāo)題、圖片、和功能描述等信息。

CSS樣式模型

元素排序主要是通過(guò)CSS樣式表來(lái)完成，我們都知道每個(gè)div盒子（class="mould"）的默認(rèn)樣式屬性是獨(dú)占一行顯示，要想解決div獨(dú)占一行方法通常有兩種要么將該div設(shè)置浮動(dòng)要么就設(shè)置display樣式。而父級(jí)的div高度通常由內(nèi)容撐開(kāi)，寬度通常可以用父級(jí)容器的百分百進(jìn)行設(shè)定。

float并排顯示

float可以定義元素的浮動(dòng)屬性，使元素向左或向右移動(dòng)來(lái)實(shí)現(xiàn)布局效果，常用來(lái)配合div標(biāo)簽做網(wǎng)頁(yè)布局。float會(huì)使該元素脫離文檔流但仍然會(huì)占據(jù)位置（浮動(dòng)元素會(huì)生成一個(gè)區(qū)域塊，不管是何種標(biāo)簽元素都可以），其他相鄰的元素則會(huì)無(wú)視設(shè)置float屬性的元素緊跟其后繼續(xù)排列。如果對(duì)當(dāng)前的所有元素設(shè)置浮動(dòng)，那么就會(huì)當(dāng)前的所有元素就會(huì)依次排列。所以利用float屬性可以實(shí)現(xiàn)并排顯示的效果，當(dāng)然用完float浮動(dòng)別忘了清除浮動(dòng)。

overflow:hidden清除浮動(dòng)

標(biāo)簽元素通過(guò)float浮動(dòng)后不屬于html文檔流，浮動(dòng)之后的元素如果需要回到文檔流中就需要將前面的浮動(dòng)清除。清除浮動(dòng)有多種方式可以實(shí)現(xiàn)，最簡(jiǎn)單的方式就是在父級(jí)使用overflow:hidden來(lái)清除浮動(dòng)。"overflow:hidden"可以溢出隱藏，設(shè)置該屬性可以將內(nèi)容區(qū)域超出來(lái)的部分隱藏使內(nèi)容區(qū)域完全包含在該包含塊中。利用該屬性可以讓父元素包住這個(gè)脫離了文檔流的浮動(dòng)元素，以達(dá)到清除包含塊內(nèi)子元素的浮動(dòng)影響。

clear:both來(lái)清除浮動(dòng)

當(dāng)然也可以用clear:both來(lái)清除浮動(dòng)，clear可以指定元素對(duì)象不允許有浮動(dòng)。利用clear:both清除浮動(dòng)可以把float的元素拽回文檔流，實(shí)現(xiàn)方法可以在浮動(dòng)元素的尾部添加一個(gè)空的div標(biāo)簽并設(shè)置 clear:both屬性或在下一個(gè)元素上加clear:both，可以可以在父級(jí)div定義創(chuàng)建偽元素:after設(shè)置clear:both屬性。

display并排顯示

display有兩種屬性情況分別是inline（同行顯示）和flex（彈性布局），display:inline屬性可以讓元素對(duì)象實(shí)現(xiàn)同行并排顯示（這個(gè)不是我們現(xiàn)在需要的效果）。display:flex是我們非常喜歡的的彈性布局方式，可以簡(jiǎn)潔、快速的實(shí)現(xiàn)想要的彈性布局效果。定義了display:flex屬性之后可以通過(guò) justify-content 屬性調(diào)整子元素的水平對(duì)齊方式，通過(guò)align-items屬性調(diào)整子元素的垂直對(duì)齊方式。當(dāng)父元素寬度不夠時(shí)flex默認(rèn)會(huì)等比例壓縮（不會(huì)自動(dòng)換行），這時(shí)候我們需要通過(guò)設(shè)置 flex-wrap屬性（默認(rèn)為 nowrap，這里指定wrap）來(lái)使其換行即可。

總結(jié)：

以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)081：多HTML標(biāo)簽元素如何實(shí)現(xiàn)并排顯示詳解】，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：

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

string nl2br ( string $string )

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

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

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

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

& （和號(hào)） 成為 &
" （雙引號(hào)） 成為 "
' （單引號(hào)） 成為 '
< （小于） 成為 <
> （大于） 成為 >

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

ENT_QUOTES 同時(shí)轉(zhuǎn)換兩種引號(hào) quotes: 引號(hào)

ENT_NOQUOTES 不對(duì)引號(hào)進(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)換為對(duì)應(yīng)的實(shí)體代碼;除字母、數(shù)字、\外, 漢字和鍵盤(pán)上其他字符都轉(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ù)對(duì)于轉(zhuǎn)義字符"\"處理,不會(huì)轉(zhuǎn)義實(shí)體代碼,要么當(dāng)轉(zhuǎn)義字符對(duì)待,要么原樣輸出;

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

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

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

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

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

這些預(yù)定義字符是：?jiǎn)我?hào) (') 雙引號(hào) (") 反斜杠 (\) NULL字符(\x00)

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

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

不要對(duì)已經(jīng)被magic_quotes_gpc轉(zhuǎn)義過(guò)的字符串使用 addslashes()，因?yàn)檫@樣會(huì)導(dǎo)致雙層轉(zhuǎn)義。

遇到這種情況時(shí)可以使用函數(shù) get_magic_quotes_gpc() 進(jìn)行檢測(cè)。(如:$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ù)中 ' " \ 等字符前被自動(dòng)加上一個(gè)\ ,這是配置文件php.ini中選項(xiàng)magic_quotes_gpc在起作用，

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

通常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!

實(shí)例:

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

輸出結(jié)果:

webserver; & \ 'Linux' & Apache

在線咨詢

上一篇：如何在Word中批量添加填空題的下劃線？
下一篇：[編程基礎(chǔ)] 常用html標(biāo)簽使用介紹