HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介-htmlチュートリアル-php.cn

この記事では、HTML のテキストタグ、ハイパーリンクタグ、イメージタグについて簡単に説明します。必要な方は参考にしてください。

テキストタグ

改行タグ -- br
は単一のタグであり、終了タグがないことを意味します。強制改行として機能します

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

ログイン後にコピー

水平分割線 -- hr

は br と同じであり、シングルレーベルも。さまざまな段落、テキスト、タイトルを区別するために使用できます。分割線の幅と高さは設定できます

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

ログイン後にコピー

書式設定済みのテキストラベル -- pre

テキストの元の書式を保持します

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

ログイン後にコピー

上付きタグ、下付きタグ -- sup/sub

タグとその終了タグに含まれるコンテンツは、現在のテキストの高さの半分ですテキストの左上に表示されます
タグとその終了タグに含まれるコンテンツは、テキストの左下に現在のテキストの高さの半分で表示されます

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

ログイン後にコピー

# #Block quote タグ -- blockquote

は、その中のテキストが引用であることを意味します。通常、レンダリング時に、この部分のコンテンツには特定のインデントが付きます。

<blockquote>引用文字</blockquote>

ログイン後にコピー

通常のテキストインラインタグ --span

span が指定されていない場合適切に使用してください。span 要素内のテキストが他のテキストと視覚的に異ならないようにスタイルを適用します。それでも、上記の例のspan要素は、p要素に追加の構造を追加します。

id または class 属性をスパンに適用すると、適切なセマンティクスを追加できるだけでなく、スパンへのスタイルの適用も容易になります。

class 属性または id 属性のいずれかを同じ要素に適用することは可能ですが、どちらか 1 つだけを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。

<span>文本内容</span>

ログイン後にコピー

通常のテキストタグ -- div

はブロックレベルの要素です。これは、その内容が自動的に新しい行で始まることを意味します。実際、改行は

に固有の唯一の書式設定動作です。

のクラスまたは ID を介して追加のスタイルを適用できます。

すべての

にクラスまたは ID を追加する必要はありませんが、追加すると一定の利点があります。

class 属性または id 属性のいずれかを同じ

要素に適用することは可能ですが、どちらか 1 つだけを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。

<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

HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介ハイパーリンクタグ

Web サイトは複数の Web ページで構成されており、各ページはリンクに依存して Web ページ間の関係を決定します。ナビゲーション関係、各 Web ページが相互にリンクされて Web サイトを形成します。

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

ログイン後にコピー

1. 外部リンク

リンクがサイトフォルダーの外を指している場合、それを外部リンクと呼びます。外部リンクを追加する場合は、パスアドレスを直接入力して絶対パスを使用します。たとえば、http://www.baidu.com

2. 内部リンク

は、同じ Web サイト内の異なるページ間のリンク関係を指し、サイト内リンクとも呼ばれます。。内部リンクを確立する場合は、相対パスを使用します。

ハイパーリンク属性 -- herf

ハイパーリンクを追加する場合、属性設定は非常に重要です。

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

ログイン後にコピー

ハイパーリンク属性 -- targetデフォルトでは、ハイパーリンクで新しいページを開く方法は、現在のウィンドウで開くことであり、属性を使用してターゲットウィンドウを開く方法を定義できます。

_parent-->前のウィンドウで開くと、ページが親ウィンドウに読み込まれます

_blank--->ブラウザは新しいウィンドウで Web ページを開きます

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

ログイン後にコピー

HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介画像タグ

グラフィックや画像は Web ページに活気を与え、テキストよりも優れた視覚的な印象を人々に与えることができます。

Web ページで一般的に使用される画像形式には、「jpeg」、「jpg」、「gif」、「png」、「bmp」などがあります。

图像标签 -- <img  alt="HTML のテキスト タグ、ハイパーリンク タグ、イメージ タグの簡単な紹介" >

ログイン後にコピー

ページに画像を表示したい場合は、「source」の略語である「src」属性を使用する必要があります。

<img  alt="HTML のテキスト タグ、ハイパーリンク タグ、イメージ タグの簡単な紹介" >

ログイン後にコピー

ソースファイル属性 -- alt

は、画像のインタラクティブテキストを表示するために使用され、ユーザーがカスタマイズできます。ブラウザーが画像を完全に読み込まない場合、または読み込みに失敗した場合、画像の代わりにインタラクティブなテキストコンテンツが表示されます。

<img  alt="HTML のテキスト タグ、ハイパーリンク タグ、イメージ タグの簡単な紹介" >

ログイン後にコピー

画像とテキストの配置--align

テキスト段落内の画像の配置には、1 行のテキスト内の画像の配置が上揃えとなります。上揃え、中揃え、下揃えの3種類です。

<img  alt="HTML のテキスト タグ、ハイパーリンク タグ、イメージ タグの簡単な紹介" >

ログイン後にコピー

nbsp;html> 小白

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

<img alt="HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介" > 生长地海拔1000-1200米。喜温暖湿润的半阴、温暖和潮湿的环境，不耐霜冻，忌强光暴晒。昙花享有“月下美人”之誉。当花渐渐展开后，过1-2小时又慢慢地枯萎了，整个过程仅4个小时左右。故有“昙花一现”之说。世界各地区广泛栽培；中国各省区常见栽培。

昙花图片：<img alt="HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介" >

ログイン後にコピー

HTML のテキストタグ、ハイパーリンクタグ、イメージタグの簡単な紹介