整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础必备-分隔标记,前端小白一看就会

节、分区和分割线

这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面,使其更加友好和易于阅读。

分区 - <div> </div>

div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。

段落 - <p> </p>

p标记用来定义文本的段落,就像你在书中看到的那样,一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时,浏览器将在段落之间添加一些空白。p标记具有以下属性:

  • align="" - 段落中文本的对齐方式:left, center or right
  • width="" - 段落将占据页面的固定宽度或百分比,默认为100%

内联 - <span> </span>

span标记用于将内联元素组合在一起,例如句子中的几个单词,以便仅对这些单词应用css样式。span标记可以在div和p标记中使用,因为它不会创建新的块。

换行 - <br>

br标记相当于一个回车符,用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。

水平分隔线 - <hr>

hr标记通常被称为HTML行分隔符标记,创建一条通常用于视觉上分隔页面的水平线。它具有以下属性:

  • width="" - 线条将占用固定宽度,默认100%宽度
  • color="" - 线条颜色
  • noshade - 取消3D外观,创建一条平的实线分隔线

不换行 - <nobr> </nobr>

出于某种原因,你希望文本在一条直线上继续,而不是在屏幕的边缘换行,可以使用nobr。注意:这将迫使用户向右滚动以查看行的其余部分,这是一种糟糕的设计。

例子

下面是以上标记的示例:

浏览器显示内容如下所示:

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

格式化

>格式化标记通常只能是产生几种不同文本的样式,但在语义上它们各自有着自己的特点

>如果你只是想有着一些自己的文本样式,可以尝试使用“常用html标记”里格式化的内容或css样式表

>但是这样会对搜索引擎不友好

>所以我们强调使用语义化标签,提供给浏览器的语义信息越多,浏览器就可以越好地把这些信息展示给用户。

## `<abbr></abbr>`

作用:用于指示该标签内的内容是一个缩写

注意点:

1. 常与全局属性title配合使用,这样可以在鼠标移动到该处时显示全称

`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

2. 在浏览器内渲染会使其在内容底部加上短虚线

## `<address></address>`

作用:用于定义文档或文章作者/拥有者的联系信息

>如果 `<address>` 元素位于 `<body>` 元素内,则它表示文档联系信息。

>如果 `<address>` 元素位于 `<article>` 元素内,则是它表示文章的联系信息。

注意点:

1. address元素中的文本通常呈现为斜体,大多数浏览器会在address元素前后换行

2. address元素不应该用于描述通讯地址,除非它是练习信息的一部分

3. address元素元素通常连同其他信息被包含在footer元素中

```

<address>

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

```

## `<b></b>`

作用:定义粗体文本

## `<bdi></bdi>`

作用:定义文本的文本方向,使其脱离周围文本的方向设置

注意点:

1. bdi指的是bidi隔离

2. 在发布用户评论或其它难以控制的内容时,可以使用

3. 需要与全局属性dir配合使用

## `<bdo></bdo>`

作用:定义文字方向

注意点:

1. 请与全局属性dir配合使用

```

<p>

如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);

</p>

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用:`<blockquote>`标签用于定义块引用

注意点:

1. 标签内的所有文本都会从常规文本中分离出来,一般会上下换行,左右增加外边距,有时也会使用斜体

2. 换而言之,块引用拥有它们自己的空间

3. 可选属性:

`cite=url`规定引用来源

```

<blockquote cite="http://www.wwf.org">

WWF's ultimate goal is to build a future where people live in harmony with nature.

</blockquote>

```

主流浏览器均不支持cite属性,但是搜索引擎可以因此获得更多的信息

## `<q></q>`

作用:用于定义短引用

注意点:

1. 浏览器经常在引用内容的人左右添加引号

2. `<q>` 与 `<blockquote>` 的区别:

- `<q>` 标签在本质上与 `<blockquote>` 是一样的。不同之处在于它们的显示和应用。`<q>` 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进地块),请使用 `<blockquote>` 标签。

3. 在html4中,firefox和opera中q元素包含的文本必须以引号来开始和结束,但是IE却不支持这个规定,如果我们为了满足其它浏览器而添加了引号,那么在IE中就会显示两组引号。

4. 尽管如此,我们还是推荐使用q元素,因为它在文档处理和信息提取方面将会有很强的效果

5. 可选属性:

`cite=citation`定义引用的出处或来源(citation)

## `<cite></cite>`

作用:表示所含文本是对某个参考文献的引用

注意点:

1. 在显示上与blockquote元素类似,均是斜体

2. 但是它不会有上下左右的外边距

3. 通常情况下还要把引用包裹在一对`<a></a>`标签中,然后把超链接指向引用

`<cite><a href=URL>引用名</a></cite>`

>`<cite>` 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。`<cite>` 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。

## `<code></code>`

作用:定义计算机代码文本

注意点:

1. code元素并不能将元素内的内容以原样显示,浏览器仍然会解析内容而不跳过

2. code只是给内容的字体改为等宽字体,即它只是将内容转变为暗示这是计算机代码的内容

## `<var></var>`

作用:`<var>` 标签表示变量的名称,或者由用户提供的值。

注意点:

1. 用 `<var>` 标签标记的文本通常显示为斜体。

2. `<var>` 标签是计算机文档中应用的另一个小窍门,这个标签经常与 `<code>` 和 `<pre>` 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。

## `<smap></smap>`

作用:用于从一段上下文中抽取一些字符

例子:

`字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。`

效果:

`字符序列 ae 可能会被转换为 æ 连字字符。`

## `<ins></ins>`

作用:定义一个插入文本

注意点:

1. 显示效果是加入下划线

## `<dfn></dfn>`

作用:用于标记特殊术语或短语

注意点:

1. 浏览器通常会将dfn元素内的内容显示为斜体

2. 应当尽量少的使用,比如在技术性的文档中,在第一次提到一个术语时,可以加上dfn元素,而在相同文档的后续中,对于同一个术语,应避免使用dfn

## `<em></em>`

作用:定义一个强调文本

注意点:

1. 在显示结果上,它依然是斜体

2. 如果你只是为了定义一个斜体的内容,可以考虑使用`<i></i>`或css样式表

3. 对于强调的内容应当不宜过多,否则无法突出想要表达的内容

## `<strong></strong>`

作用:定义一个语气更加强烈地强调文本

注意点:

1. 常识告诉我们应较少使用em元素的话,那么strong元素出现的次数应该更少,限制其使用可以让这个标记更加的引人注意和有效

## `<i></i>`

作用:定义一个斜体文本或倾斜的文本

## `<kbd></kbd>`

作用:定义键盘文本

注意点:

1. 显示效果为等宽字体

## `<mark></mark>`(HTML5)

作用:定义带有记号的文本

注意点:

1. 与加粗不同,它会将文字加上背景色

## `<meter></meter>`(HTML5)

作用:定义已知范围或分数值内的标量测量,也被称为gauge(尺度)

注意点:

1. 这是一个html5的新标签,假如你把文档类型声明为html4或以下和xhtml,标签本身的效果将会受到影响

2. `<meter>`标签不应用于指示进度条的进度,如果标记进度,请使用`<progress></progress>`标签

可用属性:

1. form=form_id-->规定meter元素所属的一个或多个表单

2. high=number-->规定被视作高的值的范围

3. low=number-->规定被视作高的值的范围

4. max=number-->规定范围的最大值

5. min=number-->规定范围的最小值

6. optimum=number-->规定度量的优化值

7. value=number-->必须。规定度量的当前值

```

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter>

```

## `<progress></progress>`(HTML5)

作用:标示任务的进度(进程)

`<progress value="22" max="100"></progress> `

注意点:

1. 需要与js结合使用,来显示任务的进度

2. progress标签不适合使用来表示度量衡,这种情况请使用meter元素来替代

可用属性:

max=number-->规定任务一共需要多少工作

value=number-->规定任务已经完成多少工作

## `<pre></pre>`

作用:用于定义预格式化的文本,即通常会保留空格和换行,文本会呈现为等宽字体

注意点:

1. pre元素常用于表示计算机的源代码,但是计算机的源代码(html)直接放入浏览器仍会解析(需要使用`<`和`>`等符号实体)

2. 会导致内容截断的标签绝不能包含在pre元素中,如标题、p元素、address元素

3. 可选的属性:

`width=number`定义每行的最大字符数

## `<ruby></ruby>`

作用:可用于定义一个ruby注释(中文注音或字符)

注意点:

1. ruby元素与rt元素一同使用

2. ruby元素由需要一组字符和一个提供信息的rt元素组成

3. 还包括一个可选的rp元素,定义浏览器不支持ruby元素时显示的内容

## `<rt></rt>`

作用:定义字符的解释或发音

## `<rp></rp>`

作用:定义浏览器不支持ruby元素时显示的内容

## `<s></s>`

作用:定义加删除线的文本

注意点:

1. `<s>`标签是`<strike>`标签的缩写版本,但html4和xhtml中已经不再赞成使用它了,就是说,它早晚有一天会消失

2. 请使用`<del></del>`替代它

## `<del></del>`

作用:给元素中的内容上加上删除线

注意点:

1. 请与`<ins></ins>`标签配合使用,来描述文档中的更新与修正

2. 可选的属性:

- cite=URL

- datetime=YYYMMDD (定义文本被删除的日期和时间)

## `<small></small>`

作用:标签内的元素呈现小号字体的效果

注意点:

1. 如果被包裹字体已经是最小号的字体了,那这个标签将不起任何作用

2. `<small></small>`是可以嵌套的,从而把文字连续的缩小,直到到达最小的一号字

## `<sup></sup>`

作用:标签中的内容会以当前文本流中字符高度的一般来显示(上标)

注意点:

1. 虽然显示效果与文本流中其他元素不一样,但是它们的字体字号都是一样的

2. 这个标签在向文档添加注脚以及表示方程式中的指数时非常有效,如果与`<a></a>`标签结合使用可以创建出很好的超链接注脚

## `<sub></sub>`

作用:标签中的内容会以当前文本流中字符高度的一般来显示(下标)

## `<template></template>`

作用:可以作为一个容器,但是它并不会存在于DOM树中

注意点:

1. 多用于包裹一段代码,对其绑定事件,使其可以控制是否隐藏

2. 一个检查方法:

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的浏览器不支持 template!");

}

```

## `<u></u>`

作用:定义下划线文本

注意点:

1. 应尽量避免使用,用户可能会把它混淆为一个超链接

## `<time></time>`(HTML5)

作用:定义一个公历的时间或日期,时间和时区偏移是可选的

可选的属性:

1. datetime=datetime-->规定日期/时间。否则由元素内容给定日期时间

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 时间是文档(或 `<article>` 元素)的发布日期。

## `<wbr>`(HTML5)

一段带有 Word Break Opportunity 的文本:

```

<p>

如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。

</p>

```

作用:Word Break Opportunity (`<wbr>`) 规定在文本中的何处适合添加换行符。

注意点:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 `<wbr>` 元素来添加 Word Break Opportunity(单词换行时机)。