整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
-尖括號<html></html>是一組成為“雙標記”，可以理解為<html>為始，</html>為終或閉合；
2-所有的標簽都有<>開始，但不是所有的標簽擁有</>結束，不是所有的標簽有始就有終。比如<hr>水平線；
3-單個的標簽叫什么？
單個的標簽叫“單標記”，也可以叫不成對標簽。
4-如果給“單標記”加上閉合會怎么樣？
在空標簽上使用閉標簽是無效的，例如：</hr>。這樣的情況是無效的HTML標簽。
總結，一點小心得。雙標記就如一段事件，單標記就像一種能力，事件會有開始和結束，能力的關閉就是程序的關閉。
以下是一些練習截圖
這段代碼的顯示是下圖
這是自學中的一點點自己的理解，如果有錯誤，歡迎留言指正。
前端對多個相同的標簽元素進行有序的排列是非常常見的需求，當我們有多個相似功能出現在同一個區域時我們就需要合理的排列這些元素。比如我這里的云服務提供了多個功能模塊展示給用戶，這個時候我們就會將每個模塊所涉及到的內容打包成一個整體來設計。
在Vue相似的功能展現我們可以通過v-for來實現，modulars中的數據我們口可以通過登錄直接從后臺獲取。這樣不管有多少個模塊我們都可以快速的實現DOM元素的渲染，也可以減少樣式的書寫，提高代碼執行效率。這里每個mould都是一個功能模塊的組合，里面包含了標題、圖片、和功能描述等信息。
元素排序主要是通過CSS樣式表來完成，我們都知道每個div盒子（class="mould"）的默認樣式屬性是獨占一行顯示，要想解決div獨占一行方法通常有兩種要么將該div設置浮動要么就設置display樣式。而父級的div高度通常由內容撐開，寬度通?？梢杂酶讣壢萜鞯陌俜职龠M行設定。
float可以定義元素的浮動屬性，使元素向左或向右移動來實現布局效果，常用來配合div標簽做網頁布局。float會使該元素脫離文檔流但仍然會占據位置（浮動元素會生成一個區域塊，不管是何種標簽元素都可以），其他相鄰的元素則會無視設置float屬性的元素緊跟其后繼續排列。如果對當前的所有元素設置浮動，那么就會當前的所有元素就會依次排列。所以利用float屬性可以實現并排顯示的效果，當然用完float浮動別忘了清除浮動。
標簽元素通過float浮動后不屬于html文檔流，浮動之后的元素如果需要回到文檔流中就需要將前面的浮動清除。清除浮動有多種方式可以實現，最簡單的方式就是在父級使用overflow:hidden來清除浮動。"overflow:hidden"可以溢出隱藏，設置該屬性可以將內容區域超出來的部分隱藏使內容區域完全包含在該包含塊中。利用該屬性可以讓父元素包住這個脫離了文檔流的浮動元素，以達到清除包含塊內子元素的浮動影響。
當然也可以用clear:both來清除浮動，clear可以指定元素對象不允許有浮動。利用clear:both清除浮動可以把float的元素拽回文檔流，實現方法可以在浮動元素的尾部添加一個空的div標簽并設置 clear:both屬性 或在下一個元素上加clear:both，可以可以在父級div定義創建偽元素:after設置clear:both屬性 。
display有兩種屬性情況分別是inline（同行顯示）和flex（彈性布局），display:inline屬性可以讓元素對象實現同行并排顯示（這個不是我們現在需要的效果）。display:flex是我們非常喜歡的的彈性布局方式，可以簡潔、快速的實現想要的彈性布局效果。定義了display:flex屬性之后可以通過 justify-content 屬性調整子元素的水平對齊方式，通過align-items屬性調整子元素的垂直對齊方式。當父元素寬度不夠時flex默認會等比例壓縮（不會自動換行），這時候我們需要通過設置 flex-wrap屬性（默認為 nowrap，這里指定wrap）來使其換行即可。
以上內容是小編給大家分享的【Vue實戰081：多HTML標簽元素如何實現并排顯示詳解】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
HTML標簽相關的字符串格式化
string nl2br ( string $string )
nl2br() 就是將\n 替換成 <br> //javascript對\n才能夠執行換行,對</br>是不能執行換行
htmlspecialchars() 把一些預定義的字符轉換為 HTML 實體。
string htmlspecialchars(string,quotestyle,[character-set])
轉換以下字符及對應的實體
& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >第二個參數: ENT_COMPAT 只轉換雙引號, 保留單引號, 為默認值 compat: 兼容性
ENT_QUOTES 同時轉換兩種引號 quotes: 引號
ENT_NOQUOTES 不對引號進行轉換
<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>輸出結果:John & " 'Adams'
John & " 'Adams'
John & " 'Adams'
htmlentities() 可以將所有的非ASCII碼字符轉換為對應的實體代碼;除字母、數字、\外, 漢字和鍵盤上其他字符都轉換
<?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>
?>返回的結果:A 'quote' "is <b>bold</b>
A 'quote' "is <b>bold</b>
注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本
htmlspecialchars()和htmlentities()函數對于轉義字符"\"處理,不會轉義實體代碼,要么當轉義字符對待,要么原樣輸出;
PHP中htmlentities和htmlspecialchars的區別
這兩個函數的功能都是轉換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執行。
使用中文時沒什么區別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。
htmlentities轉換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號
addslashes() 在指定的預定義字符前添加反斜杠。
這些預定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)
提示：該函數可用于為存儲在數據庫中的字符串以及數據庫查詢語句準備合適的字符串。
注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數據自動運行 addslashes()。
不要對已經被magic_quotes_gpc轉義過的字符串使用 addslashes()，因為這樣會導致雙層轉義。
遇到這種情況時可以使用函數 get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)
在本例中，我們要向字符串中的預定義字符添加反斜杠：
<?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() 刪除反斜線（"\"）
在提交的表單數據中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，
默認是打開的，如果不處理則將數據保存到數據庫時，有可能會被數據庫誤當成控制符號而引起錯誤。
通常htmlspecialchars()和stripslashes()函數復合的方式，聯合處理表單中的提交的數據htmlspecialchars(stripslashes())
strip_tags()
string strip_tags ( string $str [, string $allowable_tags ] )
剝去 HTML、XML 以及 PHP 的標簽。
<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>輸出結果:Hello world!
實例:
<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉換雙引號,為默認參數
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉換為對應的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>輸出結果:
webserver; & \ 'Linux' & Apache
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
