A brief introduction to text tags, hyperlink tags and image tags in HTML

This article brings you a brief introduction to text tags, hyperlink tags and image tags in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Text tag

• Newline tag -- br
  is a single tag, meaning it has no closing tag. Functions as a forced line break

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

• Horizontal dividing line -- hr

is the same as br and is also a single label. Can be used to distinguish between different paragraphs or text and titles. The width and height of the dividing line can be set

设置了50%宽度，50像素且右对齐的分割线
<hr>

• Preformatted text label-- pre

Retain the original format of the text

<pre class="brush:php;toolbar:false">文本

• Superscript tag, subscript tag--sup/sub

The content contained in the tag and its closing tag is half the current text height Displayed on the upper left side of the text
The content contained in the tag and its closing tag is displayed on the lower left side of the text at half the current text height

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

• Block quote tag-- blockquote

means that the text in it is a quotation. Usually when rendering, the content of this part will have a certain indentation

<blockquote>引用文字</blockquote>

• Ordinary text inline tag--span

If span is not used properly Apply the style so that the text in the span element will not be visually different from other text. Still, the span element in the example above adds extra structure to the p element.

You can apply id or class attributes to span, which can not only add appropriate semantics, but also facilitate the application of styles to span.
It is possible to apply either class or id attributes to the same element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

<span>文本内容</span>

• Normal text tag -- div

##

is a block-level element. This means that its contents automatically start on a new line. In fact, line breaks are the only formatting behavior inherent to

. Additional styles can be applied via the

's class or id.

It is not necessary to add a class or id to every

, although there are certain benefits to doing so.

It is possible to apply either class or id attributes to the same

element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

<div>文本内容</div>

nbsp;html>


    <meta>
    <title>张阿机</title>


<h1>一级标题</h1>
<span>pre显示</span>
<pre class="brush:php;toolbar:false">
<strong>雨霖铃·寒蝉凄切</strong>
宋代：柳永
寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
多情自古伤离别，更那堪，冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？

bolckquote显示

雨霖铃·寒蝉凄切 宋代：柳永 寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。 多情自古伤离别，更那堪，冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？

求解数学方程x²+x+6=0.
所得解:x₁=-3,x₂=2

Hyperlink tag

A website is composed of multiple web pages, and the pages rely on links to determine the relationship between them. Navigation relationship, each web page is linked together to form a website.

超链接标签--<a></a>

1. External link

If the link points outside the site folder, it is called an external link. When adding an external link, use an absolute path by directly entering the path address. For example, http://www.baidu.com

2. Internal links

refers to the link relationship between different pages within the same website, which can also be called intra-site links. When establishing internal links, use relative paths.

Hyperlink attributes -- herf

When adding a hyperlink, attribute settings are very important.

<a>设置链接的文字或图片等属性</a>

Hyperlink attributes -- target

By default, the way a hyperlink opens a new page is to open it in the current window, and the attributes can be used to define how the target window is opened.

_parent-->Open in the previous window, causing the page to load into the parent window

_blank--->The browser opens the webpage in a new window

<a>设置链接的文字或图片等属性</a>

![clipboard.png](/img/bVbhvZI)
ml>


    <meta>
    <title>Title</title>


<!--a标签-->

<!--1. 跳转到指定的url地址-->
<a> 百度</a>
<a> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a> 百度</a>

<!--2. 跳转到当前页面的指定位置（锚点）-->
<a>下载python</a>
<a>发展历史</a>
<a>风格</a>
<a>与Matlab对比</a>
<a>设计定位</a>

<h1><a>下载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>发展历史</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>风格</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>与Matlab对比</a></h1>
说起科学计算，首先会被提到的可能是MATLAB。然而除了MATLAB的一些专业性很强的工具箱还无法被替代之外，MATLAB的大部分常用功能都可以在Python世界中找到相应的扩展库。和MATLAB相比，用Python做科学计算有如下优点：
● 首先，MATLAB是一款商用软件，并且价格不菲。而Python完全免费，众多开源的科学计算库都提供了Python的调用接口。用户可以在任何计算机上免费安装Python及其绝大多数扩展库。
● 其次，与MATLAB相比，Python是一门更易学、更严谨的程序设计语言。它能让用户编写出更易读、易维护的代码。
● 最后，MATLAB主要专注于工程和科学计算。然而即使在计算领域，也经常会遇到文件管理、界面设计、网络通信等各种需求。而Python有着丰富的扩展库，可以轻易完成各种高级任务，开发者可以用Python实现完整应用程序所需的各种功能。
<h1><a>设计定位</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。

Picture tag

Graphics and images can make the web page come alive and give people a better visual impression than text.

Commonly used image formats in web pages include 'jpeg', 'jpg', 'gif', 'png', 'bmp', etc.

图像标签 -- <img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >

If you want to display an image on the page, you need to use its 'src' attribute, which is the abbreviation of 'source'.

<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >

Source file attributes -- alt

is used to display an interactive text for the image, which can be customized by the user. When the browser does not fully load the image or fails to load, interactive text content is displayed in place of the image.

<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >

Alignment of images and text--align

The alignment of the image in the text paragraph includes left alignment and right alignment. The alignment of the image in the single line of text is top alignment. There are three types: top, middle alignment, and bottom alignment bottom.

<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >

nbsp;html>


    
    



<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >
  昙花（学名：Epiphyllum oxypetalum  （DC.）Haw ）：附生肉质灌木，高2-6米，老茎圆柱状，木质化。分枝多数，叶状侧扁，披针形至
    长圆状披针形，边缘波状或具深圆齿，基部急尖、短渐尖或渐狭成柄状，深绿色，无毛，中肋粗大，老株分枝产生气根。花单生于枝侧的小窠，漏斗状，于夜间开放，芳香，长25-30厘米，直径10-12厘米；花托绿色，略具角，被三角形短鳞片；瓣状花被片白色，倒卵状披针形至倒卵形，长7-10厘米，宽3-4.5厘米，边缘全缘或啮蚀状。浆果长球形，具纵棱脊，无毛，紫红色。种子多数，卵状肾形，亮黑色，具皱纹，无毛。





<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >
  生长地海拔1000-1200米。喜温暖湿润的半阴、温暖和潮湿的环境，不耐霜冻，忌强光暴晒。昙花享有“月下美人”之誉。当花渐渐展开后，过1-2小时又慢慢地枯萎了，整个过程仅4个小时左右。故有“昙花一现”之说。世界各地区广泛栽培；中国各省区常见栽培。





昙花图片：<img  alt="A brief introduction to text tags, hyperlink tags and image tags in HTML" >

以上就是本篇文章的全部内容，关于HTML的相关知识大家可以参考PHP中文网的HTML开发手册进行学习。

The above is the detailed content of A brief introduction to text tags, hyperlink tags and image tags in HTML. For more information, please follow other related articles on the PHP Chinese website!