html笔记

1.加入强调语气，使用<strong>和<em>标签

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em>
表示强调，<strong>
表示更强烈的强调。并且在浏览器中<em>
默认用斜体表示，<strong>
用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

2.使用<span>标签为文字设置单独样式

这一小节讲解<span>标签，我们对

<em>

、

<strong>

、

<span>

这三个标签进行一下总结：

1.

<em>

和

<strong>

标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2.

<span>

标签是没有语义的，它的作用就是为了设置单独的样式用的。

3. <q>标签，短文本引用

想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。
语法：
<q>引用文本</q>
如下面例子：

<p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p>

4. <blockquote>标签，长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

等等，上一节<q>标签不是也是对文本的引用吗？不要忘记

<q>

标签是对简短文本的引用，比如说引用一句话就用到

<q>

标签。

如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<

blockquote>

。

语法:

<

blockquote>

引用文本

</blockquote>

如下面例子：

<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>

浏览器对<blockquote>标签的解析是缩进样式。如下图所示：

5.认识<hr>标签，添加水平横线

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：



语法：

html4.01版本

<hr>

xhtml1.0版本

<hr />

注意：

1.

<hr />

标签和

<br />

标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

2.

<hr />

标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

3. 大家注意，现在一般使用 xhtml1.0
的版本（其它标签也是），这种版本比较规范。

6.<address>标签，为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

语法：

<address>

联系地址信息

</address>

如：

<address>

文档编写：

lilian

北京市西城区德外大街

10

号

</address>

<address>

本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>

</address>

在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css
样式来修改它

<address>

标签的默认样式。

7.想加入一行代码吗？使用<code>标签

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。

语法：

<code>

代码语言

</code>

注：如果是多行代码，可以使用<pre>标签。

8.使用<pre>标签为你的网页加入大段代码

在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：



怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。

语法：

<pre>

语言代码段

</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在 pre
元素中的文本通常会保留空格和换行符。

如下代码：

<pre>

var message="欢迎";

for(var i=1;i<=10;i++)

{

alert(message);

}

</pre>

在浏览器中的显示结果为：



在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入

<br>

签，空格需要输入

9.使用mailto在网页中链接Email地址

<a>

标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用

mailto

做许多其它事情。下面一一进行讲解，请看详细图示：



注意：如果mailto后面同时有多个参数的话，第一个参数必须以“

?

”开头，后面的参数每一个都以“

&

”分隔。

下面是一个完整的实例:



在浏览器中显示的结果：

发送

点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：

10. caption标签，为表格添加标题和摘要

表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：



摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

<table summary="

表格简介文本

">

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>

<caption>标题文本</caption>

<tr>

<td>…</td>

<td>…</td>

…

</tr>

…

</table>

11.认识<img>标签，为网页插入图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用

<img>

标签来插入图片。

语法：

<img src="

图片地址

" alt="

下载失败时的替换文本

"
title = "

提示文本

">

举例：

<img src = "myimage.gif" alt = "MyImage" title = "My Image" />

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。