整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML图像标记

TML图像标记

常用的图像格式—GIF,PNG,JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记,要想在网页中显示图像就需要使用图像标记,接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下:

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名,他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
例如:

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种:

图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如:

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。


原文链接:https://blog.csdn.net/dubaiqaq/article/details/103500345

.注释标记(<!--…-->)

语法: <!--注释内容-->

2.文件标记(<html>…</html>)

语法: <html>…</html>

说明:<html>这对标记是HTML文件的标记。<html>处于文件的最前面,表示HTML文件的开始。即浏览器从<html>标记开始解释,直到遇到</html>标记为止。

3.文件头标记(<head>…</head>)

语法: <head>…</head>

说明:

①由head这组标记定义的元素中,并不放置网页的任何内容,是放置关于这份HTML文件的信息。就是说,它并不属于HTML文件的主体,它包含文件的标题、编码方式和URL等。这些信息大部分用于提供索引、辨认或其他应用。

②这对标记在HTML文件中并不是必需的。如果某个HTML文件并不需要提供相关信息,则可省略<head>标记。

4.文件标题标记(<title>…</title>)

语法: <title>文件标题文字</title>

说明:此标记用于设定HTML文件的标题名称,它将显示在浏览器的标题栏中。

注意:<title>标记用于<head>标记中。但如果HTML文件中没有使用<head>标记,则<title>标记仍然起作用。

5.文件主体标记(<body>…</body>)

语法: <body>…</body>

说明:

①由<body>标记所建立的元素是HTML文件的内容主体,也是HTML文件的重点所在。HTML文件中要显示在网页上的所有内容,也都放置在这个元素中。

②<body>具有一些特殊的属性,可以设定背景及字符颜色等。

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。

粗体 - <b> </b>

b标记之间的文本以粗体显示,与周围的文本相对突出。

斜体 - <i> </i>

i标记以一个小角度显示文本。

下划线 - <u> </u>

u标记在文本正文添加一条线,请注意,链接已经有下划线,不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线,通常用来表示文本是旧的,不再相关,删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本,包括空格、回车符和标点符号,都将像在文本编辑器中一样显示在浏览器中(通常浏览器会忽略多个空格)

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示,通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用,并且在块的左右添加额外的边距。

小号字 - <small> </small>

small标记让你无需设置字体大小,就可以使文本呈现比周围稍小的外观。

字体颜色 - <font color="#??????"> </font>

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 - <font size="?"> </font>

font标记的size属性改变字体的大小,值范围从1到7,1是最小,7是最大。

字体大小变化 - <font size="+/-?"> </font>

font标记的size属性还可以相对于其前面的字体大小的作即时更改,此用法将按你指定的数字增减字体大小。例如:<font size="-1">一些文本</font>

字体 - <font face="?"> </font>

font标记的face属性以指定的字体显示文本,值为字体名称,如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 - <em> </em>

em标记用于强调文本,文本通常以斜体显示,可能会根据浏览器的不同而有所不同。

着重强调 - <strong> </strong>

strong标记用于着重强调文本,通常以粗体显示,可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例:

浏览器显示内容如下所示: