好程序員web前端培訓(xùn)分享HTML元素強(qiáng)制不換行

程序員web前端培訓(xùn)分享HTML元素強(qiáng)制不換行，HTML 中 nowrap是用來強(qiáng)制不換行的

在排版中

對包裹plain text的標(biāo)簽使用nowrap屬性即刻實現(xiàn)強(qiáng)制不換行.

如:

強(qiáng)制不換行

在使用div的超文本中

把div,h1,section,nav,a,li等元素強(qiáng)制變成行內(nèi)元素

display:inline;

然后就能夠像第一種情況一樣對其進(jìn)行操作.

例子: 父級nav限寬下ul元素強(qiáng)制不換行

使子標(biāo)簽ul自身有wrap-content(借用android layout的關(guān)鍵形容詞)的寬度

nav>ul>li*10>a[href='#']{隨機(jī)鏈接$}

nav{ 固定寬度width:40em; nowrap屬性white-space:nowrap; }

ul,li,a{ 行內(nèi)元素display:inline; 消除浮動float:none; }

// li 變成inline是必要的

當(dāng)ul不為inline的時候,ul本身寬度最大值為父級nav的寬度;

當(dāng)ul為inline 的時候,ul寬度為wrap-content寬度.

demo見我的導(dǎo)航

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

string nl2br ( string $string )

nl2br() 就是將\n 替換成 <br> //javascript對\n才能夠執(zhí)行換行,對</br>是不能執(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 <b>bold</b>

A 'quote' "is <b>bold</b>

注意: 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ù)自動運(yùn)行 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

TML標(biāo)簽

基本標(biāo)簽

HTML頁面中內(nèi)容是由HTML標(biāo)簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標(biāo)簽合理地顯示在頁面的各個位置。

1 標(biāo)題標(biāo)簽<h1>～<h6>

標(biāo)題標(biāo)簽表示一段文字的標(biāo)題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)。HTNL.共提供了6級標(biāo)題，分別為<h1>～<h6>，并賦予了標(biāo)題一定的外觀，所有標(biāo)題字體加粗，其中山<h1>字號最大，<h6>字號最小.

2.圖像標(biāo)簽<img>

在網(wǎng)頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數(shù)瀏覽器都可以顯示這些圖像。

顯示圖像的語法：

< img src="ur1" alt="文本" width="x" height="y"/>

在語法中：

a、SrC屬性：表示顯示圖像的地址。

b、alt屬性：指定圖像的替代文本，當(dāng)圖像無法顯示時（如圖片路徑錯誤或網(wǎng)速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網(wǎng)頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有幫助的。

c、width屬性：表示圖像寬度.

d、height屬性：表示圖像高度。

3.段落標(biāo)簽<p>

顧名思義，段落標(biāo)簽表示將一段文字組成一系列段落內(nèi)容，這樣做的目的是內(nèi)容應(yīng)用某些格式和布局，使各個段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標(biāo)簽定義。段落標(biāo)簽<p>表示段落的開始，</p >表示段落的結(jié)束。

4.換行標(biāo)簽<br/>

在希望不產(chǎn)生一個新段落的情況下進(jìn)行換行，則使用<br>標(biāo)簽。<br>是一個空的HTML標(biāo)簽，由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。

注意：

使用<b>和<br>的結(jié)果一樣，在XHTML以及未來的HTML版本中，根據(jù)W3C規(guī)范，不允許使用沒有結(jié)束標(biāo)簽的HTML元素，因此使用<br>頁面更規(guī)范，有更長遠(yuǎn)的保障。

5.水平線標(biāo)簽<hr/>

水平線標(biāo)簽表示一條水平線，注意該標(biāo)簽與<br>標(biāo)簽一樣，沒有結(jié)束標(biāo)簽，直接使用<hr/>表示標(biāo)簽的開始和結(jié)束。

使用以上講解的基本標(biāo)簽，就可以進(jìn)行網(wǎng)頁內(nèi)容排版了。

在線咨詢

上一篇：問卷上線操作教程：如何增加調(diào)研問卷頁面的“顏值”指數(shù)
下一篇：第2天｜16天搞定前端，html頭部標(biāo)簽，只是標(biāo)簽？

您的項目需求

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

整合營銷服務(wù)商

好程序員web前端培訓(xùn)分享HTML元素強(qiáng)制不換行

您的項目需求