HTML中文本标签，超链接标签以及图像标签的简略介绍

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于HTML中文本标签，超链接标签乃至图像标签的简便介绍，有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

文本标签

换行标签 -- br
是单标签，意味着它没有完毕标签。起强迫换行作用

段落中的文字<br>段落中的文字<br>段落中的文字<br>

水平分割线 -- hr

与br雷同，也是单标签。可用来区分不一样段落或正文与标题。可设定分割线的宽度和高度

设定了50%宽度，50像素且右对齐的分割线
<hr width='50%' size='50' align='right'>

预格局化文本标签 -- pre

保存文本的原有格局

<pre>文本</pre>

上标标签、下标标签 -- sup/sub

包括在标签与其完毕标签中的内容，以当前文字高度的一半显示在文本的左上侧
包括在标签与其完毕标签中的内容，以当前文字高度的一半显示在文本的左下侧

<sup>上标文字内容</sup>
<sub>下标文字内容</sub>

块援用标签 -- blockquote

代表其中的文字是援用内容。平常在渲染时，这部分的内容会有必然的缩进

<blockquote>援用文字</blockquote>

一般文本行内标签 -- span

假如不合错误 span 利用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差别。尽管如此，上例中的 span 元素依然为 p 元素增添了额外的构造。

可认为 span 利用 id 或 class 属性，这样既可以增添恰当的语义，又便于对 span 利用样式。
可以对统一个 <span> 元素利用 class 或 id 属性，但是更常见的状况是只利用其中一种。这两者的主要差别是，class 用于元素组（相似的元素，或者可以懂得为某一类元素），而 id 用于标识独自的独一的元素。

<span>文本内容</span>

一般文本标签 -- div

<div> 是一个块级元素。这意味着它的内容主动地开端一个新行。实际上，换行是 <div> 固有的独一格局展现。可以通过 <div> 的 class 或 id 利用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有必然的好处。

可以对统一个 <div> 元素利用 class 或 id 属性，但是更常见的状况是只利用其中一种。这两者的主要差别是，class 用于元素组（相似的元素，或者可以懂得为某一类元素），而 id 用于标识独自的独一的元素。

<div>文本内容</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>张阿机</title>
</head>
<body>
<h1 style="color: green">1级标题</h1>
<span>pre显示</span>
<pre>
<strong>雨霖铃·寒蝉凄切</strong>
宋代：柳永
寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，迷恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
多情自古伤拜别，更那堪，冷落清秋节！今宵酒醒何处？杨柳岸，晨风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
</pre>
<span>bolckquote显示</span>
<blockquote>
<strong>雨霖铃·寒蝉凄切</strong>
宋代：柳永
寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，迷恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
多情自古伤拜别，更那堪，冷落清秋节！今宵酒醒何处？杨柳岸，晨风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
</blockquote>
求解数学方程x<sup>2</sup>+x+6=0.<br/>
所得解:x<sub>1</sub>=-3,x<sub>2</sub>=2
</body>
</html>

超链接标签

一个网站是由多个网页组成的，页面之间依托链接肯定彼此之间的导航关系，各个网页链接在一起后，才构成一个网站。

超链接标签--<a>

1.外部链接

假如链接是指向站点文件夹之外的，就称做外部链接，增加外部链接时，使用绝对途径，办法是直接输入途径地址，如http://www.baidu.com

2.内部链接

是指统一个网站内部，不一样页面之间的链接关系，也可称作站内链接。创立内部链接时，使用相对途径。

超链接属性 -- herf
在增加超链接时，属性设定非常重要。

<a href='超链接途径'>设定链接的文字或图片等属性</a>

超链接属性 -- target
默许状况下，超链接翻开新页面的方式是在当前窗口中翻开，属性可以用来定义目标窗口翻开方式。

_parent-->在上1级窗口中翻开，使得页面载入父窗口
_blank--->阅读器在一个新的窗口中翻开网页

<a href='超链接途径' target='页面翻开方式'>设定链接的文字或图片等属性</a>

![clipboard.png](/img/bVbhvZI)
ml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签-->

<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> baidu</a>
<a href="http://www.baidu.com" target="_parent"> baidu</a>
<!--创建一个阅读器窗口并翻开-->
<a href="http://www.baidu.com" target="_blank"> baidu</a>

<!--2. 跳转到当前页面的指定位置（锚点）-->
<a href="#C1">下载python</a>
<a href="#C2">开展历史</a>
<a href="#C3">风格</a>
<a href="#C4">与Matlab对照</a>
<a href="#C5">设计定位</a>

<h1><a name="C1">下载python</a></h1>
在您开端此前，在你的运算机将需要Python，但您大概不需要下载它。第一检查(在命令行窗口输入python)有没有安置Python!假如你看到了一个Python说明器的响应，那么就能在她的显示窗口中得到一个版本号。平常较新的版本都可以做到Python的向后兼容。
假如您需要安置， 您无妨下载比来不乱的版本。 就是阿谁以没有被标志作为alpha或Beta发行的最高的版本。当前最不乱的版本是Python3.0以上
假如你使用的操纵系统是Windows：最不乱的Windows版本下载是"Python 2.5 for Windows"
假如你使用的是Mac，MacOS 10.2 (Jaguar), 10.3 (Panther) and 10.4 (Tiger)已经集成安置了Python，但是你大约需要安置比来通用的构架(build)。
关于Red Hat，安置python2和python2-devel包。
关于Debian，安置python2.5和python2.5-dev包
<h1><a name="C2">开展历史</a></h1>
自从20世纪90年代初Python说话产生至今，它已被逐步广泛利用于系统治理任务的处置和Web编程。
Python的开创人为Guido van Rossum。1989年圣诞节期间，在阿姆斯特丹，Guido为了打发圣诞节的无趣，决心开发一个新的足本说明程序，作为ABC 说话的一种继承。之所以选中Python（大蟒蛇的意思）作为该编程说话的名字，是由于他是一个叫Monty Python的喜剧集体的喜好者。
ABC是由Guido参加设计的一种教学说话。就Guido本人看来，ABC 这种说话非常美丽和强大，是专门为非专业程序员设计的。但是ABC说话并没有成功，究其缘由，Guido 认为是其非开标识
放造成的。Guido 决心在Python 中幸免这一错误。同时，他还想实此刻ABC 中出现过但不曾实现的东西。
就这样，Python在Guido手中产生了。可以说，Python是从ABC开展起来，主要受到了Modula-3（另一种相当美丽且强大的说话，为小型集体所设计的）的影响。并且结合了Unix shell和C的习惯。
Python已经成为最受欢迎的程序设计说话之一。自从2004年今后，python的使用率呈线性增长。2011年1月，它被TIOBE编程说话排行榜评为2010年度说话。
由于Python说话的简约性、易读性乃至可扩展性，在国外用Python做科学运算的研讨机构日益增多，一些知名大学已经采纳Python来教授程序设计课程。例如卡耐基梅隆大学的编程根基、麻省理工学院的运算机科学及编程导论就使用Python说话讲授。众多开源的科学运算软件包都供给了Python的调取接口，例如闻名的运算机视觉库OpenCV、三维可视化库VTK、医学图像处置库ITK。而Python专用的科学运算扩展库就更多了，例如如下3个十分经典的科学运算扩展库：NumPy、SciPy和matplotlib，它们离别为Python供给了快速数组处置、数值运算乃至画图功效。因此Python说话及其众多的扩展库所构成的开发环境十分适合工程技术、科研人员处置实验数据、制作图表，乃至开发科学运算利用程序。
2018年3月，该说话作者在邮件列表上公布Python 2.7将于2020年1月1日终止支撑。会员假如想要在这个日期之后连续得到与Python 2.7有关的支撑，则需要付费给商业供给商。
<h1><a name="C3">风格</a></h1>
Python在设计上坚持了清楚划一的风格，这使得Python成为一门易读、易保护，并且被大量会员所欢迎的、用处广泛的说话。
设计者开发时总的引导思想是，关于一个特定的问题，只要有一种最好的办法来解决就好了。这在由Tim Peters写的Python格言（称为The Zen of Python）里面表述为：There should be one-- and preferably only one --obvious way to do it. 这恰好和Perl说话（另一种功效相似的高级动态说话）的中心思想TMTOWTDI（There's More Than One Way To Do It）完全相反。
Python的作者成心的设计限制性很强的语法，使得不好的编程习惯（例如if语句的下一行不向右缩进）都不克不及通过编译。其中很重要的一项就是Python的缩进规则。
一个和其他大多数说话（如C）的不同就是，一个模块的界线，完全是由每行的首字符在这一行的位置来决议的（而C说话是用一对花括号{}来明白的定出模块的边界的，与字符的位置毫无关系）。这一点曾经引发过争议。由于自从C这类的说话产生后，说话的语法含义与字符的摆列方式别离开来，曾经被认为是一种程序说话的进步。不外不成否认的是，通过强迫程序员们缩进（包罗if，for和函数定义等所有需要使用模块的地方），Python确实使得程序愈加清楚和美妙。
<h1><a name="C4">与Matlab对照</a></h1>
说起科学运算，第一会被提到的大概是MATLAB。然而除了MATLAB的一些专业性很强的工具箱还没法被替换之外，MATLAB的大部分常用功效都可以在Python世界中寻到响应的扩展库。和MATLAB比拟，用Python做科学运算有如下长处：
● 第一，MATLAB是一款商用软件，并且价钱不菲。而Python完全免费，众多开源的科学运算库都供给了Python的调取接口。会员可以在任何运算机上免费安置Python及其绝大多数扩展库。
● 其次，与MATLAB比拟，Python是一门更易学、更严谨的程序设计说话。它能让会员编写出更易读、易保护的代码。
● 最后，MATLAB主要专心于工程和科学运算。然而即便在运算领域，也经常会碰到文件治理、界面设计、网络通讯等各种需求。而Python有着丰硕的扩展库，可以轻易完成各种高级任务，开发者可以用Python实现完全利用程序所需的各种功效。
<h1><a name="C5">设计定位</a></h1>
Python的设计哲学是“文雅”、“明白”、“简便”。因此，Perl说话中“总是有多种办法来做统一件事”的理念在Python开发者中平常是难以忍耐的。Python开发者的哲学是“用一种办法，最好是只要一种办法来做一件事”。在设计Python说话时，假如面临多种选中，Python开发者一样会回绝花俏的语法，而选中明白的没有或者很少有歧义的语法。由于这种设计不雅念的差别，Python源代码平常被认为比Perl具备更好的可读性，并且能够支撑大规模的软件开发。这些原则被称为Python格言。在Python说明器内运转import this可以获得完全的列表。
Python开发人员尽量躲开不成熟或者不重要的优化。一些针对非重要部位的加快运转速度的补丁平常不会被合并到Python内。所以许多人认为Python很慢。不外，按照二八定律，大多数程序对速度要求不高。在某些对运转速度要求很高的状况，Python设计师倾向于使用JIT技术，或者用使用C/C++说话改写这部分程序。可用的JIT技术是PyPy。
Python是完全面向对象的说话。函数、模块、数字、字符串都是对象。并且完全支撑继承、重载、派生、多继承，有益于增强源代码的复用性。Python支撑重载运算符和动态类型。相关于Lisp这种传统的函数式编程说话，Python对函数式设计只供给了有限的支撑。有两个标准库(functools, itertools)供给了Haskell和Standard ML中久经考查的函数式程序设计工具。
虽然Python大概被粗略地分类为“足本说话”（script language），但实际上一些大规模软件开发方案例如Zope、Mnet及BitTorrent，Google也广泛地使用它。Python的支撑者较喜爱称它为一种高级动态编程说话，缘由是“足本说话”泛指仅作简便程序设计任务的说话，如shellscript、VBScript等只能处置简便任务的编程说话，并不克不及与Python等量齐观。
Python本身被设计为可扩大的。并非所有的特性和功效都集成到说话中心。Python供给了丰硕的API和工具，以便程序员能够轻松地使用C说话、C++、Cython来编写扩大模块。Python编译器本身也可以被集成到其它需要足本说话的程序内。因此，许多人还把Python作为一种“胶水说话”（glue language）使用。使用Python将其他说话编写的程序停止集成和封装。在Google内部的许多项目，例如Google Engine使用C++编写机能要求极高的部分，然后用Python或Java/Go调取响应的模块。《Python技术手册》的作者马特利（Alex Martelli）说：“这很难讲，不外，2004 年，Python 已在Google 内部使用，Google 召募很多 Python 高手，但在这此前就已决议使用Python，他们的目的是 Python where we can, C++ where we must，在操控硬件的场合使用 C++，在快速开发时候使用 Python。

</body>
</html>

图片标签

图形图像可以使网页活泼起来，带给人的视觉印象要优于文字。
网页中常用的图像格局包罗'jpeg'、'jpg'、'gif'、'png'、'bmp'等。

图像标签 -- <img>

想要在页面上显示一个图像，需要使用它的'src'属性，是'source'的缩写。

<img src='图像文件所在位置'>

源文件属性 -- alt

用来给图像显示一个交互文本，会员可自定义。当阅读器没有完全加载图像或加载失败时，会显示交互文本内容来替换图像。

<img src='图像文件所在位置' alt='图像的交互文本'>

图像与文本的对齐方式 -- align
图像在文字段落中位置的对齐方式有左对齐left、右对齐right两种，图像在单行文本中的对齐方式有顶部对齐top、中部对齐middle、底部对齐bottom三种。

<img src='图像文件所在位置' align='图像与文本的对齐方式'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小白</title>
</head>
<body>
<p>
<img src="flower_01.jpg" alt="昙花" align="left" width="160px" height="160px" >
&nbsp;&nbsp;昙花（学名：Epiphyllum oxypetalum  （DC.）Haw ）：附生肉质灌木，高2-6米，老茎圆柱状，木质化。分枝多数，叶状侧扁，披针形至
    长圆状披针形，边沿波状或具深圆齿，基部急尖、短渐尖或渐狭成柄状，深绿色，无毛，中肋粗大，老株分枝发生气根。花单生于枝侧的小窠，漏斗状，于夜间开放，芬芳，长25-30厘米，直径10-12厘米；花托绿色，略具角，被三角形短鳞片；瓣状花被片白色，倒卵状披针形至倒卵形，长7-10厘米，宽3-4.5厘米，边沿全缘或啮蚀状。浆果长球形，具纵棱脊，无毛，紫红色。种子多数，卵状肾形，亮黑色，具皱纹，无毛。
</p>
<br  />
<p>

<img src="flower_02.jpg" alt="昙花" align="right" width="200px" height="300px" >
&nbsp;&nbsp;生长地海拔1000-1200米。喜暖和潮湿的半阴、暖和和湿润的环境，不耐霜冻，忌强光暴晒。昙花享有“月下美人”之誉。当花慢慢展开后，过1-2小时又渐渐地枯萎了，整个历程仅4个小时摆布。故有“过眼云烟”之说。世界各地区广泛栽培；我国各省区常见栽培。
</p>
<br/>
<br/>
昙花图片：<img src="flower_02.jpg" alt="昙花" align="middle"  width="200px" height="300px">

</body>
</html>