和HTML标签相关的字符串格式化

HTML标签相关的字符串格式化

string nl2br ( string $string )

nl2br() 就是将\n 替换成 //javascript对\n才能够执行换行,对是不能执行换行

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'

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 bold

A 'quote' "is bold

注意: 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="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
 background: url("https://www.google.com/images/example");
}
/* 推荐 */
.example {
 background: url("//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>。

孤立标签无需封闭自身， 不要写成 。

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" href="//www.google.com/css/maia.css"
 type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
 type="text/javascript"></script>
<!-- 推荐 -->
<script src="//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("//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

文档外链样式表的编码可以由以下各项按照由高到低的优先级顺序决定：

HTTP “Content-Type” 字段参数 “charset”（或其它协议相似的参数）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元数据设置（如果有的话）
引用样式表字符集或文档编码（如果有的话）
假定为 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规则一定要在样式文件的第一行首个字符位置开始，否则的话就会有机会让 BOM 设置生效（如果有设置 BOM 的话）而优于 [@charset ]() 作为样式表的编码
@charset ""; 一定要写上，并且用小写字母，不能出现转义符

团队约定

样式文件必须写上 [@charset ]() 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
字符 [@charset ]() ""; 都用小写字母，不能出现转义符，编码名允许大小混写
考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍和「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？）

推荐：

@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;
}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.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";
}

属性书写顺序

建议遵循以下顺序：

布局定位属性：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 浏览器私有前缀在前，标准前缀在后

.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

在线咨询

上一篇：前端：JS延长加载的方式有哪些？
下一篇：4个点击显示玩法，让你的图文排版锦上添花~

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

和HTML标签相关的字符串格式化

码规范

文档内嵌样式表编码

文档外链样式表编码

样式表编码

团队约定

代码风格

代码格式化

代码大小写

选择器

代码缩进

分号

代码易读性

属性值引号

属性书写顺序

CSS3浏览器私有前缀写法

参考阅读

您的项目需求