Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML

Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML

不言
不言nach vorne
2018-10-12 17:17:124933Durchsuche

Dieser Artikel bietet Ihnen eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML. Ich hoffe, dass er für Freunde hilfreich ist.

Text-Tag

  • Newline-Tag – br
    ist ein einzelnes Tag, das heißt, es hat kein schließendes Tag. Fungiert als erzwungener Zeilenumbruch

段落中的文字<br>段落中的文字<br>段落中的文字<br>
  • Horizontale Trennlinie – hr

Das Gleiche wie br, es ist auch ein einzelnes Etikett. Kann verwendet werden, um zwischen verschiedenen Absätzen oder Texten und Titeln zu unterscheiden. Die Breite und Höhe der Trennlinie kann eingestellt werden

设置了50%宽度,50像素且右对齐的分割线
<hr>
  • Vorformatierte Text-Tags – vor

Das Originalformat des Textes beibehalten

<pre class="brush:php;toolbar:false">文本
  • Hochgestelltes Tag, tiefgestelltes Tag-- sup/sub

Der im Tag und seinem schließenden Tag enthaltene Inhalt, basierend auf der Hälfte des aktuellen Texthöhe Wird oben links im Text angezeigt
Der im Tag und seinem Schluss-Tag enthaltene Inhalt wird unten links im Text in halber aktueller Texthöhe angezeigt

<sup>上标文字内容</sup>
<sub>下标文字内容</sub>
  • Block quote tag – blockquote

bedeutet, dass der Text ein Zitat ist. Normalerweise hat dieser Teil des Inhalts beim Rendern eine bestimmte Einrückung

<blockquote>引用文字</blockquote>
  • Normale Text-Inline-Tags – span

Wenn span nicht verwendet wird Wenden Sie den Stil richtig an, damit sich der Text im Span-Element optisch nicht von anderem Text unterscheidet. Dennoch fügt das span-Element im obigen Beispiel dem p-Element zusätzliche Struktur hinzu.

Sie können ID- oder Klassenattribute auf Spans anwenden, was eine entsprechende Semantik hinzufügen und die Anwendung von Stilen auf Spans erleichtern kann.
Es ist möglich, entweder Klassen- oder ID-Attribute auf dasselbe -Element anzuwenden, es ist jedoch üblicher, nur eines davon anzuwenden. Der Hauptunterschied zwischen den beiden besteht darin, dass die Klasse für Gruppen von Elementen (ähnliche Elemente oder als eine bestimmte Art von Elementen verstanden werden kann) verwendet wird, während die ID zur Identifizierung einzelner und eindeutiger Elemente verwendet wird.

<span>文本内容</span>
  • Normales Text-Tag – div

Das bedeutet, dass der Inhalt automatisch in einer neuen Zeile beginnt. Tatsächlich sind Zeilenumbrüche das einzige Formatierungsverhalten von
. Zusätzliche Stile können über die Klasse oder ID des
angewendet werden.

Es ist nicht notwendig, zu jedem

eine Klasse oder ID hinzuzufügen, obwohl dies gewisse Vorteile bietet.

Es ist möglich, entweder Klassen- oder ID-Attribute auf dasselbe

-Element anzuwenden, es ist jedoch üblicher, nur das eine oder das andere anzuwenden. Der Hauptunterschied zwischen den beiden besteht darin, dass die Klasse für Gruppen von Elementen (ähnliche Elemente oder als eine bestimmte Art von Elementen verstanden werden kann) verwendet wird, während die ID zur Identifizierung einzelner und eindeutiger Elemente verwendet wird.
<div>文本内容</div>
rrree

Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML

Hyperlink-Tag

Eine Website besteht aus mehreren Webseiten, und die Seiten basieren auf Links, um die Beziehung zwischen ihnen zu bestimmen Durch die Navigationsbeziehung wird jede Webseite miteinander verknüpft, um eine Website zu bilden.

nbsp;html>


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


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

1. Externer Link

Wenn der Link außerhalb des Site-Ordners zeigt, wird er als externer Link bezeichnet. Verwenden Sie beim Hinzufügen eines externen Links einen absoluten Pfad, indem Sie die Pfadadresse direkt eingeben. Beispiel: http://www.baidu.com

2. Interne Links

beziehen sich auf die Linkbeziehung zwischen verschiedenen Seiten innerhalb derselben Website, die auch als Intra-Site-Links bezeichnet werden können . Verwenden Sie beim Erstellen interner Links relative Pfade.

Hyperlink-Attribute – herf
Beim Hinzufügen eines Hyperlinks sind Attributeinstellungen sehr wichtig.

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

Hyperlink-Attribute – Ziel
Standardmäßig öffnet ein Hyperlink eine neue Seite so, dass er sie im aktuellen Fenster öffnet, und die Attribute können verwendet werden, um zu definieren, wie das Zielfenster geöffnet wird.

_parent-->Im Fenster der oberen Ebene öffnen, wodurch die Seite das übergeordnete Fenster lädt
_blank--->Der Browser öffnet die Webseite in einem neuen Fenster

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

Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML

Bild-Tag

Grafische Bilder können die Webseite lebendiger machen und den Menschen einen besseren visuellen Eindruck vermitteln als Text.
Zu den häufig verwendeten Bildformaten auf Webseiten gehören „jpeg“, „jpg“, „gif“, „png“, „bmp“ usw.

![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。


Um ein Bild auf der Seite anzuzeigen, müssen Sie dessen Attribut „src“ verwenden, die Abkürzung für „source“.

图像标签 -- <img  alt="Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML" >

Quelldateiattribute – alt

wird verwendet, um einen interaktiven Text für das Bild anzuzeigen, der vom Benutzer angepasst werden kann. Wenn der Browser das Bild nicht vollständig lädt oder nicht laden kann, wird anstelle des Bildes interaktiver Textinhalt angezeigt.

<img  alt="Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML" >

Ausrichtung von Bildern und Text – Ausrichtung
Die Ausrichtung von Bildern in Textabsätzen umfasst die Ausrichtung nach links und rechts. Die Ausrichtung von Bildern in einzelnen Textzeilen ist die Ausrichtung nach oben. Es gibt drei Arten: oben, mittlere Ausrichtung und untere Ausrichtung unten.

<img  alt="Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML" >
nbsp;html>


    
    小白


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


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



昙花图片:<img alt="Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML" >

Eine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML

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

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in Text-Tags, Hyperlink-Tags und Bild-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen