R爬虫之 html 简介（续）

点击上方关注我们

继续介绍 html 相关的知识，依然是 web前端开发 公众号的内容。还有练习题可以做哦

---

另外我们建了 老俊俊生信交流群 ，还没进群的小伙伴们加我微信入群哦。微信在 文章末尾。

---

什么是HTML文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

如下代码：

<p>TThis text is normal</p>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>

页面上显示如下：

This text is bold

This text is bold 
This text is strong 
This text is big 
This text is emphasized 
This text is italic 
This text is small

按标签功能可以分为:文本格式化标签、'计算机输出'标签和引用和术语定义标签

文本格式化标签

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除。
<s>	不赞成使用。使用<del>代替。
<strike>	不赞成使用。使用<del>代替。
<u>	不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式化文本。
<listing>	不赞成使用。使用<pre>代替。
<plaintext>	不赞成使用。使用<pre>代替。
<xmp>	不赞成使用。使用<pre>代替。

引用、引用和术语定义

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是文字或图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
通过使用 <a> 标签在 HTML 中创建链接。超链接的代码如：<a href="url">Link text</a> href 属性规定链接的目标，开始标签和结束标签之间的文字被作为超级链接来显示。

如下代码：

<a href="http://f2e.tming.net.cn/">F2E.TMING</a>

页面上显示为 F2E.TMING

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

HTML 链接 - target 属性

<a> 标签的 target 属性规定在何处打开链接文档。
target属性有4个保留的目标名称用作特殊的文档重定向操作：

1) _blank
在一个新打开、未命名的窗口中载入目标文档。如<a href="http://f2e.tming.net.cn/" target="_blank">F2E.TMING</a> 即是在新窗口打开该网站。

2) _self
在相同的框架或者窗口中显示。这个是target属性的默认值，如没有设置target属性，则<a>标签的默认目标就是_self。如: <a href="http://f2e.tming.net.cn/">F2E.TMING</a>或<a href="http://f2e.tming.net.cn/" target="_self">F2E.TMING</a> 即是在当前窗口跳转

3) _parent
这个目标使得文档载入父窗口或者包含了超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

4) _top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

此外，target属性也可以设置为其他目标名，如：<a href="1.html" target="window1">新窗口1</a> 点击后浏览器将打开一个新的窗口，将它标记为 "window1"，然后在其中显示1.html这个文档

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
要使用锚链接，首先需要在 HTML 文档中对锚进行命名。命名锚的语法：<a name="label">锚点1</a>
然后，在文档中用如下方式创建指向该锚的链接：<a href="#label">跳转到锚点1</a>。

例：
页面上已在段落“HTML 链接 - target 属性”的开始位置添加了一个锚点，代码为：<a name="links_target"></a> ，链接代码如下

<a href="#links_target">跳转至段落：HTML 链接 - target 属性</a>

点击试试效果：跳转至段落：HTML 链接 - target 属性

如果锚链接在页面上没有对应的命名锚，点击后会跳转到页面顶部。因此也可通过设置href="#"来实现跳转到顶部的功能。点击试试：回到顶部

注释：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。

其它技巧

1) 链接添加文字提示
可以使用title属性让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
如<a href="http://f2e.tming.net.cn/" title="爱思资源网首页">首页</a> 。鼠标移到链接上查看效果：首页

2) 链接到email地址
只要将链接的href属性设置为mailto:邮箱地址，点击这个链接，就会触发你的邮件客户端，如<a href="mailto:[e-mail]">联系我们</a>。点击查看效果：联系我们

练习题

1.以下哪个HTML代码可以产生超链接（）

A、<a url="http://f2e.tming.net.cn/">F2E.TMING</a>

B、<a href="http://f2e.tming.net.cn/">F2E.TMING</a>

C、<a>http://f2e.tming.net.cn/</a>

D、<a name="http://f2e.tming.net.cn/">F2E.TMING</a>

2.以下哪个是电子邮件链接（）

A、<a href="telnet:[e-mail]">发送反馈</a>

B、<a href="mail:[e-mail]">发送反馈</a>

C、<a href="ftp:[e-mail]">发送反馈</a>

D、<a href="mailto:[e-mail]">发送反馈</a>

3.下列哪一项是在新窗口中打开网页文档（）

A、_self

B、_blank

C、_top

D、_parent

4.<a href="#p1">...</a>表示（）

A、跳转到"p1"页面

B、跳转到页面的"p1"锚点

C、超链接的属性是"p1"

D、超链接的对象是"p1"

5.以下哪个HTML代码可以产生超链接（）

A、<a url="http://f2e.tming.net.cn/">F2E.TMING</a>

B、<a href="http://f2e.tming.net.cn/">F2E.TMING</a>

C、<a>http://f2e.tming.net.cn/</a>

D、<a name="http://f2e.tming.net.cn/">F2E.TMING</a>

6.以下哪个是电子邮件链接（）

A、<a href="telnet:[e-mail]">发送反馈</a>

B、<a href="mail:[e-mail]">发送反馈</a>

C、<a href="ftp:[e-mail]">发送反馈</a>

D、<a href="mailto:[e-mail]">发送反馈</a>

7.下列哪一项是在新窗口中打开网页文档（）

A、_self

B、_blank

C、_top

D、_parent

8.<a href="#p1">...</a>表示（）

A、跳转到"p1"页面

B、跳转到页面的"p1"锚点

C、超链接的属性是"p1"

D、超链接的对象是"p1"

老俊俊微信号：

所以今天你学习了吗？

发现更多精彩

关注公众号

欢迎小伙伴留言评论！

今天的分享就到这里了，敬请期待下一篇！

最后欢迎大家分享转发，您的点赞是对我的鼓励和肯定！

如果觉得对您帮助很大，赏杯快乐水喝喝吧！

推 荐 阅 读