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

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

oogle HTML/CSS 規(guī)范

本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規(guī)范，以建立良好的個人編碼習(xí)慣。

通用樣式規(guī)范

省略圖片、樣式、腳本以及其他媒體文件 URL 的協(xié)議部分（http:,https:），除非文件在兩種協(xié)議下都不可用。這種方案稱為 protocol-relative URL，好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面，瀏覽器都會以相同的協(xié)議請求頁面中的資源，同時可以節(jié)省一部分字節(jié)。

<!-- 不推薦 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推薦 */
.example {
 background: url("https://www.google.com/images/example");
}
/* 推薦 */
.example {
 background: url("http://www.google.com/images/example");
}

通用格式規(guī)范

縮進(jìn)

一次縮進(jìn)2個空格，不要使用 tab 或者混合 tab 和空格的縮進(jìn)。

<ul>
 <li>Fantastic
 <li>Great
</ul>
.example {
 color: blue;
}

大小寫

以下都應(yīng)該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。

<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png" alt="Google">
/* 不推薦 */
color: #E5E5E5;
/* 推薦 */
color: #e5e5e5;

結(jié)尾空格

<!-- 不推薦 -->
<p>What?_
<!-- 推薦 -->
<p>Yes please.

通用元規(guī)范

編碼

在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認(rèn)是 UTF-8。

注釋

使用注釋來解釋代碼：包含的模塊，功能以及優(yōu)點。

任務(wù)項

用 TODO 來標(biāo)記待辦事項，而不是用一些其他的標(biāo)記，像 @@。

<!-- TODO: remove optional tags -->
<ul>
 <li>Apples</li>
 <li>Oranges</li>
</ul>

HTML 風(fēng)格規(guī)范

文檔類型

HTML 文檔應(yīng)使用 HTML5 的文檔類型：<!DOCTYPE html>。

孤立標(biāo)簽無需封閉自身， 不要寫成 。

HTML 正確性

盡可能使用正確的 HTML。

<!-- 不推薦 -->
<title>Test</title>
<article>This is only a test.
<!-- 推薦 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

語義化

<!-- 不推薦 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 -->
<a href="recommendations/">All recommendations</a>

多媒體元素降級

對于像圖片、視頻、canvas 動畫等多媒體元素，確保提供其他可訪問的內(nèi)容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。

<!-- 不推薦 -->
<img src="spreadsheet.png">
<!-- 推薦 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

關(guān)注分離

標(biāo)記、樣式和腳本分離，確保相互耦合最小化。

實體引用

如果團(tuán)隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，?，除了一些在 HTML 中有特殊含義的字符（如 < 和 &）以及不可見的字符（如空格）。

<!-- 不推薦 -->
The currency symbol for the Euro is “&eur;”.
<!-- 推薦 -->
The currency symbol for the Euro is “€”.

type 屬性

在引用樣式表和腳本時，不要指定 type 屬性，除非不是 CSS 或 JavaScript。

因為 HTML5 中已經(jīng)默認(rèn)指定樣式變的 type 是 text/css，腳本的type 是 text/javascript。

<!-- 不推薦 -->
<link rel="stylesheet" 
 type="text/css">
<!-- 推薦 -->
<link rel="stylesheet" >
<!-- 不推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"
 type="text/javascript"></script>
<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

HTML 格式規(guī)范

HTML 引號

屬性值用雙引號。

<!-- 不推薦 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推薦 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS 風(fēng)格規(guī)范

ID 和 Class 命名

使用有含義的 id 和 class 名稱。

/* 不推薦: 含義不明確 */
#yee-1901 {}
/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}

ID 和 Class 命名風(fēng)格

id 和 class 應(yīng)該盡量簡短，同時要容易理解。

/* 不推薦 */
#navigation {}
.atr {}
/* 推薦 */
#nav {}
.author {}

選擇器

除非需要，否則不要在 id 或 class 前加元素名。

/* 不推薦 */
ul#example {}
div.error {}
/* 推薦 */
#example {}
.error {}

屬性簡寫

盡量使用 CSS 中可以簡寫的屬性 (如 font)，可以提高編碼效率以及代碼可讀性。

/* 不推薦 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推薦 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 和單位

值為 0 時不用添加單位。

margin: 0;
padding: 0;

開頭的 0

值在 -1 和 1 之間時，不需要加 0。

font-size: .8em;

16進(jìn)制表示法

/* 不推薦 */
color: #eebbcc;
/* 推薦 */
color: #ebc;

前綴

使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護(hù)性。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID 和 Class 命名分隔符

選擇器中使用連字符可以提高可讀性。

/* 不推薦: “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}
/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}

CSS 格式規(guī)范

書寫順序

按照屬性首字母順序書寫 CSS 易于閱讀和維護(hù)，排序時忽略帶有瀏覽器前綴的屬性。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

塊級內(nèi)容縮進(jìn)

為了反映層級關(guān)系和提高可讀性，塊級內(nèi)容都應(yīng)縮進(jìn)。

@media screen, projection {
 html {
 background: #fff;
 color: #444;
 }
}

聲明結(jié)束

每行 CSS 都應(yīng)以分號結(jié)尾。

/* 不推薦 */
.test {
 display: block;
 height: 100px
}
/* 推薦 */
.test {
 display: block;
 height: 100px;
}

屬性名結(jié)尾

屬性名和值之間都應(yīng)有一個空格。

/* 不推薦 */
h3 {
 font-weight:bold;
}
/* 推薦 */
h3 {
 font-weight: bold;
}

聲明樣式塊的分隔

在選擇器和 {} 之間用空格隔開。

/* Not recommended: missing space */
#video{
 margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
 margin-top: 1em;
}
/* 推薦 */
#video {
 margin-top: 1em;
}

選擇器分隔

每個選擇器都另起一行。

/* 不推薦 */
a:focus, a:active {
 position: relative; top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
 font-weight: normal;
 line-height: 1.2;
}

規(guī)則分隔

規(guī)則之間都用空行隔開。

html {
 background: #fff;
}
body {
 margin: auto;
 width: 50%;
}

CSS 引號

屬性選擇器和屬性值用單引號，URI 的值不需要引號。

/* 不推薦 */
@import url("http://www.google.com/css/maia.css");
html {
 font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);
html {
 font-family: 'open sans', arial, sans-serif;
}

CSS 元規(guī)則

分段注釋

用注釋把 CSS 分成各個部分。

碼規(guī)范

CSS樣式表是一個序列通用字符集，傳輸和存儲過程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯

文檔內(nèi)嵌樣式表編碼

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

當(dāng)樣式出現(xiàn)在其它文檔，如 HTML 的 STYLE 標(biāo)簽或標(biāo)簽屬性 "style"，樣式的編碼由文檔的決定。

文檔外鏈樣式表編碼

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文檔外鏈樣式表的編碼可以由以下各項按照由高到低的優(yōu)先級順序決定：

HTTP “Content-Type” 字段參數(shù) “charset”（或其它協(xié)議相似的參數(shù)）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元數(shù)據(jù)設(shè)置（如果有的話）
引用樣式表字符集或文檔編碼（如果有的話）
假定為 UTF-8 編碼

樣式表編碼

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

@charset規(guī)則一定要在樣式文件的第一行首個字符位置開始，否則的話就會有機(jī)會讓 BOM 設(shè)置生效（如果有設(shè)置 BOM 的話）而優(yōu)于 [@charset ]() 作為樣式表的編碼
@charset ""; 一定要寫上，并且用小寫字母，不能出現(xiàn)轉(zhuǎn)義符

團(tuán)隊約定

樣式文件必須寫上 [@charset ]() 規(guī)則，并且一定要在樣式文件的第一行首個字符位置開始寫，編碼名用 “UTF-8”
字符 [@charset ]() ""; 都用小寫字母，不能出現(xiàn)轉(zhuǎn)義符，編碼名允許大小混寫
考慮到在使用“UTF-8”編碼情況下 BOM 對代碼的污染和編碼顯示的問題，在可控范圍下，堅決不使用 BOM。（更多關(guān)于 BOM 可參考 BOM的介紹和「帶 BOM 的 UTF-8」和「無 BOM 的 UTF-8」有什么區(qū)別？）

推薦：

@charset "UTF-8";

.jdc{}

不推薦：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規(guī)則不在文件首行首個字符開始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset規(guī)則沒有用小寫 */

.jdc{}

/* 無@charset規(guī)則 */
.jdc{}

更多關(guān)于樣式編碼：CSS style sheet representation

代碼風(fēng)格

代碼格式化

樣式書寫一般有兩種：一種是緊湊格式 (Compact)

.jdc{ display: block;width: 50px;}

一種是展開格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

團(tuán)隊約定

統(tǒng)一使用展開格式書寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。

/* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的標(biāo)簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進(jìn)

統(tǒng)一使用四個空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

.jdc {
    width: 100%;
    height: 100%;
}

分號

每個屬性聲明末尾都要加分號；

.jdc {
    width: 100%;
    height: 100%;
}

代碼易讀性

左括號與類名之間一個空格，冒號與屬性值之間一個空格

推薦：

.jdc { 
    width: 100%; 
}

不推薦：

.jdc{ 
    width:100%;
}

逗號分隔的取值，逗號之后一個空格

推薦：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推薦：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個css選擇器或新申明開啟新行

推薦：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推薦：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

.jdc {
    color: rgba(255,255,255,.5);
}

不推薦：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進(jìn)制數(shù)值能用簡寫的盡量用簡寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為 0 指明單位

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引號

css屬性值需要用到引號時，統(tǒng)一使用單引號

/* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

屬性書寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法

CSS3 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多關(guān)于瀏覽器私有前輟寫法：#Vendor-specific extensions

參考閱讀

Google Code Guide

在線咨詢

上一篇：前端：JS延長加載的方式有哪些？
下一篇：4個點擊顯示玩法，讓你的圖文排版錦上添花~

您的項目需求

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

整合營銷服務(wù)商

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

碼規(guī)范

文檔內(nèi)嵌樣式表編碼

文檔外鏈樣式表編碼

樣式表編碼

團(tuán)隊約定

代碼風(fēng)格

代碼格式化

代碼大小寫

選擇器

代碼縮進(jìn)

分號

代碼易讀性

屬性值引號

屬性書寫順序

CSS3瀏覽器私有前綴寫法

參考閱讀

您的項目需求