>  기사  >  웹 프론트엔드  >  HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개

HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개

不言
不言앞으로
2018-10-12 17:17:124933검색

이 글은 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 tag--blockquote

은 그 안의 텍스트가 인용문임을 의미합니다. 일반적으로 렌더링할 때 콘텐츠의 이 부분에는 특정 들여쓰기가 있습니다.

<blockquote>引用文字</blockquote>
  • 일반 텍스트 인라인 태그-span

span에 스타일이 적용되지 않으면 범위 요소의 텍스트가 시각적으로 연결되지 않습니다. 다른 텍스트와 다릅니다. 그러나 위 예의 범위 요소는 p 요소에 추가 구조를 추가합니다.

span에 id나 class 속성을 적용하면 적절한 의미를 추가할 수 있을 뿐만 아니라 스타일을 쉽게 적용할 수 있습니다.
동일한 요소에 class 또는 id 속성을 적용할 수 있지만 둘 중 하나만 적용하는 것이 더 일반적입니다. 둘 사이의 주요 차이점은 클래스는 요소 그룹(유사한 요소 또는 특정 유형의 요소로 이해될 수 있음)에 사용되는 반면 id는 개별 요소와 고유 요소를 식별하는 데 사용된다는 것입니다.

<span>文本内容</span>
  • 일반 텍스트 태그 -- div

는 블록 수준 요소입니다. 이는 해당 내용이 자동으로 새 줄에서 시작됨을 의미합니다. 실제로 줄 바꿈은
에 고유한 유일한 형식 지정 동작입니다.
의 클래스 또는 ID를 통해 추가 스타일을 적용할 수 있습니다.

모든

에 클래스나 ID를 추가할 필요는 없지만 그렇게 하면 특정 이점이 있습니다.

동일한

요소에 class 또는 id 속성을 적용할 수 있지만 둘 중 하나만 적용하는 것이 더 일반적입니다. 둘 사이의 주요 차이점은 클래스는 요소 그룹(유사한 요소 또는 특정 유형의 요소로 이해될 수 있음)에 사용되는 반면 id는 개별 요소와 고유 요소를 식별하는 데 사용된다는 것입니다.
<div>文本内容</div>
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

HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개

하이퍼링크 태그

웹사이트는 여러 웹페이지로 구성됩니다. 페이지는 링크를 사용하여 서로 간의 탐색 관계를 결정합니다.

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

1. 외부 링크

링크가 사이트 폴더 외부를 가리키는 경우 외부 링크라고 합니다. 외부 링크를 추가할 때는 http://www와 같은 경로 주소를 직접 입력하여 절대 경로를 사용하세요. baidu.com

2. 내부 링크

는 동일한 웹사이트 내의 여러 페이지 간의 링크 관계를 말하며, 사이트 내 링크라고도 합니다. 내부 링크를 설정할 때 상대 경로를 사용하십시오.

하이퍼링크 속성 -- herf
하이퍼링크를 추가할 때 속성 설정이 매우 중요합니다.

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

Hyperlink 속성 -- target
기본적으로 하이퍼링크가 새 페이지를 여는 방식은 현재 창에서 열리는 방식입니다. 이 속성을 사용하여 대상 창이 열리는 방식을 정의할 수 있습니다.

_parent-->이전 창에서 열어 페이지가 상위 창을 로드하게 합니다.
_blank--->브라우저가 새 창에서 웹페이지를 엽니다

<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의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개

사진 태그

그래픽 이미지는 웹 페이지에 활기를 불어넣고 텍스트보다 더 나은 시각적 인상을 줄 수 있습니다.
웹페이지에서 일반적으로 사용되는 이미지 형식에는 'jpeg', 'jpg', 'gif', 'png', 'bmp' 등이 있습니다.

图像标签 -- <img  alt="HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개" >

페이지에 이미지를 표시하려면 'source'의 약어인 'src' 속성을 사용해야 합니다.

<img  alt="HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개" >

소스 파일 속성 -- alt

는 사용자가 사용자 정의할 수 있는 이미지에 대한 대화형 텍스트를 표시하는 데 사용됩니다. 브라우저가 이미지를 완전히 로드하지 않거나 로드에 실패하면 이미지 대신 대화형 텍스트 콘텐츠가 표시됩니다.

<img  alt="HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개" >

이미지와 텍스트 정렬--align
텍스트 단락의 이미지 정렬에는 왼쪽 정렬과 오른쪽 정렬이 있습니다. 텍스트 한 줄의 이미지 정렬에는 위쪽 정렬, 중간 정렬, 중간 정렬이 있습니다. 하단 정렬에는 세 가지 유형이 있습니다.

<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의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개

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

위 내용은 HTML의 텍스트 태그, 하이퍼링크 태그 및 이미지 태그에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제