整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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
oogle HTML/CSS 規范
本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規范，以建立良好的個人編碼習慣。
通用樣式規范
省略圖片、樣式、腳本以及其他媒體文件 URL 的協議部分（http:,https:），除非文件在兩種協議下都不可用。這種方案稱為 protocol-relative URL，好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面，瀏覽器都會以相同的協議請求頁面中的資源，同時可以節省一部分字節。
<!-- 不推薦 -->
<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");
}
通用格式規范
縮進
一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
大小寫
以下都應該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。
<!-- 不推薦 --> <A HREF="/">Home</A> <!-- 推薦 --> <img src="google.png" alt="Google"> /* 不推薦 */ color: #E5E5E5; /* 推薦 */ color: #e5e5e5;
結尾空格
<!-- 不推薦 --> <p>What?_ <!-- 推薦 --> <p>Yes please.
通用元規范
編碼
在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認是 UTF-8。
注釋
使用注釋來解釋代碼：包含的模塊，功能以及優點。
任務項
用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
HTML 風格規范
文檔類型
HTML 文檔應使用 HTML5 的文檔類型：<!DOCTYPE html>。
孤立標簽無需封閉自身，<br> 不要寫成 <br />。
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 動畫等多媒體元素，確保提供其他可訪問的內容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。
<!-- 不推薦 --> <img src="spreadsheet.png"> <!-- 推薦 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
關注分離
標記、樣式和腳本分離，確保相互耦合最小化。
實體引用
如果團隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，?，除了一些在 HTML 中有特殊含義的字符（如 < 和 &）以及不可見的字符（如空格）。
<!-- 不推薦 --> The currency symbol for the Euro is “&eur;”. <!-- 推薦 --> The currency symbol for the Euro is “€”.
type 屬性
在引用樣式表和腳本時，不要指定 type 屬性，除非不是 CSS 或 JavaScript。
因為 HTML5 中已經默認指定樣式變的 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 格式規范
HTML 引號
屬性值用雙引號。
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
CSS 風格規范
ID 和 Class 命名
使用有含義的 id 和 class 名稱。
/* 不推薦: 含義不明確 */
#yee-1901 {}
/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}
ID 和 Class 命名風格
id 和 class 應該盡量簡短，同時要容易理解。
/* 不推薦 */
#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進制表示法
/* 不推薦 */ color: #eebbcc; /* 推薦 */ color: #ebc;
前綴
使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
ID 和 Class 命名分隔符
選擇器中使用連字符可以提高可讀性。
/* 不推薦: “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}
/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}
CSS 格式規范
書寫順序
按照屬性首字母順序書寫 CSS 易于閱讀和維護，排序時忽略帶有瀏覽器前綴的屬性。
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
塊級內容縮進
為了反映層級關系和提高可讀性，塊級內容都應縮進。
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
聲明結束
每行 CSS 都應以分號結尾。
/* 不推薦 */
.test {
display: block;
height: 100px
}
/* 推薦 */
.test {
display: block;
height: 100px;
}
屬性名結尾
屬性名和值之間都應有一個空格。
/* 不推薦 */
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;
}
規則分隔
規則之間都用空行隔開。
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 元規則
分段注釋
用注釋把 CSS 分成各個部分。
CSS樣式表是一個序列通用字符集，傳輸和存儲過程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯
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.
當樣式出現在其它文檔，如 HTML 的 STYLE 標簽或標簽屬性 "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
文檔外鏈樣式表的編碼可以由以下各項按照由高到低的優先級順序決定：
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 "UTF-8";
.jdc{}不推薦：
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
/* @charset規則不在文件首行首個字符開始 */
@charset "UTF-8";
.jdc{}@CHARSET "UTF-8";
/* @charset規則沒有用小寫 */
.jdc{}/* 無@charset規則 */
.jdc{}更多關于樣式編碼：CSS style sheet representation
樣式書寫一般有兩種：一種是緊湊格式 (Compact)
.jdc{ display: block;width: 50px;}一種是展開格式（Expanded）
.jdc{
display: block;
width: 50px;
}團隊約定
統一使用展開格式書寫樣式
樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。
/* 推薦 */
.jdc{
display:block;
}
/* 不推薦 */
.JDC{
DISPLAY:BLOCK;
}/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推薦 */
*{}
#jdc {}
.jdc div{}統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）
.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 );
}屬性值十六進制數值能用簡寫的盡量用簡寫
推薦：
.jdc {
color: #fff;
}不推薦：
.jdc {
color: #ffffff;
}不要為 0 指明單位
推薦：
.jdc {
margin: 0 10px;
}不推薦：
.jdc {
margin: 0px 10px;
}css屬性值需要用到引號時，統一使用單引號
/* 推薦 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推薦 */
.jdc {
font-family: "Hiragino Sans GB";
}建議遵循以下順序：
.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 瀏覽器私有前綴在前，標準前綴在后
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}更多關于瀏覽器私有前輟寫法：#Vendor-specific extensions
Google Code Guide
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
