HTML标记

最新推荐文章于 2022-11-26 10:25:04 发布

相约1996

最新推荐文章于 2022-11-26 10:25:04 发布

阅读量429

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_43723527/article/details/105529205

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网页构成元素:①文本、②图像、③链接、④表格、⑤表单、⑥导航条

网站建设流程:一、网站需求分析;二、网站整体规划;三、收集资料与素材;四、制作页面;五、域名和服务器空间的申请;六、测试与发布网站;七、后期维护与网站推广

HTML基本结构

<HTML>					HTML文件的开始标记,表示这是一个HTML文件
	<HEAD>				文件头的开始标记,这对标记之间的头部信息
	头部信息				文件头的内容,也叫做文件的头部信息
	</HEAD>				文件头的结束标记
	<BODY>				文件体的开始标记
	<!--文件主体部分-->	文件的主体部分,是文件真正要显示的文件信息
	</BODY>				文件体结束标记
<HTML>					HTML文件的结束标记

由这段HTML结构代码可以看出,<HTML>标记在最外层,在这对标记之内的就是HTML

HTML头标记

标记或属性	功能
<BASE>			用户设置当前文件的URL全程,被称为基地网址
<BASEFONT>		设定基准文字的样式,包括文字的字体、字号、颜色等
<TITLE>			用于设置页面的标题,显示在浏览器的标题栏。该标记属于HTML的基本标记,一般情况下都会设定该标记的内容,它可以帮助浏览者了解页面的主题
<ISINDEX>		用于说明该文件可用于检索的网关脚本,由服务器自动建立
<META>			是文件的元信息标记,用于设置文件本身的一些信息,例如设置关键字、页面的作者等
<STYLE>			用于设定CSS样式表的内容
<LINK>			用于设置该文件相关的外部文件的链接
<SCRIPT>		用于设置页面的脚本程序的内容、语言等

在表中列出的这些标记中,<TITLE>标记是最常用的,一般的页面中都会进行设置。

设置文字大小
在HTML里, 元素可以用来显示文字的属性,包含文字的大小、颜色、字体等。其中设置文字大小的属性为SIZE,其语法代码如下所示:


<FONT SIZE="n">文字</FONT>		其中n的有效范围是数字1~7

数字越大,浏览器显示的文字越大,最大不能大于7,不能小于1,如果设置的数字大于7,则显示的文字大小与SIZE等于7是一样的,如果小于1,则显示的文字大小与SIZE等于1是一样的

设置文字字体
设置文字字体使用元素中的FACE属性,其语法代码如下所示:

在这里插入代码片
<FONT FACE="字体名称">文字</FONT>

设置字体颜色
设置字体颜色使用元素的COLOR属性可以将文字设置成不同的颜色。其语法代码为:

在这里插入代码片
<FONT COLOR="颜色">文字</FONT>

注明:颜色可以有两种表示i方法:颜色名称与RGB颜色数值。颜色名称就是类似于RED、BLUE等颜色的英文名。RGB颜色是由红色、绿色、蓝色的组合来指定的一种颜色,任何一种颜色都可以用0~255之间的一个数值来表示,但必须要使用十六进制的数字来表示这些组合。例如,一种颜色的RGB代码为:"#FFC0CB",这就代表是用强度为FF(也就是255)的红色、强度为C0的绿色与强度为CB的蓝色混合成的颜色,也就是粉红色。----------使用RGB颜色,必须要在十六进制组合前加上"#"字符

加粗与斜体
在HTML元素中,可以用元素来加粗文字,用元素来使文字倾斜。除了元素与元素之外,还可以元素来加粗文字、元素来使文字倾斜。其语法代码如下:

<B>加粗的文字</B>
<I>倾斜的文字</I>
<STRONG>加粗的文字<STRONG/>
<EM>倾斜的文字</EM>

下划线与删除线
在HTML元素中,可以用<DEL>元素(删除线)和<INS>元素(插入线)来代替<STRIKE>元素与<\U>元素,不过它们在浏览器里显示结果都是一样的。
删除线与下划线元素的语法代码如下所示:

在这里插入代码片
<HTML>
	<HEAD>
		<TITLE>删除线与下划线</TITLE>
	</HEAD>
	<BODY>
		<STRIKE></STRIKE>
		<U>下划线</U>
		<DEL>删除线</DEL>
		<INS>插入线</INS>
	</BODY>
</HTML

上标和下标
在描述一些复杂的表达式时,特别是一些数学公式,经常会用到上标和下标,看例如3的平方(3²)。在HTML页面中,上标采用,下标采用元素。其具体语法是:

<HTML>
	<HEAD>
		<TITLE></TITLE>
	</HEAD>
	<BODY>
		<FONT SIZE=4>
		水的分子式:H<SUB>2</SUB>O
		3<SUP>2</SUP>等于9
		</FONT>
	</BODY>
</HTML>

例如:水的分子式:H2O--------H₂O;
三的二次方:32等于9--------3²等于9

文本缩进
文本缩进<BLOCKQUOTE>主要用于设置文本的缩进效果。通过使用该元素,可以实现页面的段落缩进,从而使页面的文字布局更加错落有致。文本缩进元素的语法是:

<BLOCKQUOTE>需要进行缩排的文字</BLOCKQUOTE>

段落标记
在HTML里,使用

元素可以用来区分一个与另一个段落,在"“标签与”"标签之间的文字是一段文字。其语法代码如下:

<p>一段文字</p>

段落居中
如果想要居中显示网页的段落,可以使用<CENTRE>元素。居中对齐元素是双元素,成对出现,以<CENTRE>开始,以</CENTRE>结束。在元素之间的所有内容都居中对齐,包含文字,图像、表格。其具体的语法如下所示:

<CENTER>需要居中对齐的内容</CENTER>

预定义格式
如果想要在浏览器里显示出源代码里所设置的所有格式,包含其文字之间的空白,如空格、制表符,可以使用<PRE>元素。<PRE>元素相当于设置了一个"块",这个块可以将源代码里的所有文本(除HTML标签外)在浏览器中按原样显示出来。其语法如下所示:

<PRE>设定了格式的文字</PRE>

例如:

在这里插入代码片
<PRE>
		春		晓
	春眠不觉晓,处处闻啼鸟。
	夜来风雨声,花落知多少。
</PRE>

水平分隔线
当页面内容比较繁琐时,可以在短与段之间插入一条水平分割线来使页面显得层次分明,便于阅读。在HTML中可以使用<HR>元素来创建一个水平分割线,其语法如下所示:

<HR ALLGN="对齐方式" WIDTH="宽度" SIZE="高度" COLOR="颜色" NOSHADE>

其中,<HR>元素中的属性说明如下所示: ALIGN属性可以为LEFI(左对齐)、CENTER(居中)和RIGHT(右对齐)3钟; WIDTH属性代表宽度,可以有两种表示法,一种是百分数,代表水平分隔线占浏览器窗口宽度的百分比;另一种单位是像素,代表水平分割线宽度占多少个像素; SIZE属性代表水平分割线的高度,其值为数字; COLOR属性代表水平分割线的颜色,默认为黑色; NOSHADE代表水平分割线不显示阴影,默认情况下水平分割线是显示阴影的。

文字闪烁
使用<BLINK>元素可以使网页中的文字闪烁。这是除了粗体与斜体之外的另一种使文字突出显示的方式,通常用来设置比较重要的超链接或文本。其语法代码如下所示:

<BLINK>闪烁的文字</BLINK>

注意:在Internet Explorer浏览器里不支持该元素,因此在Internet Explorer浏览器里浏览该网页是不会显示出闪烁的效果的。除了Internet Explorer Explorer浏览器,其他三大浏览器:Netscape、Opera、Firefox都支持该元素。

设置网页背景颜色
在<BODY>元素里有一个BGCOLOR属性可以用来设置网页的背景颜色,其语法代码如下:

<BODY BGCOLOR="背景颜色">网页内容</BODY>

其中:背景颜色的表示方法与文字颜色的表示方法一样,可以使颜色的英文单词,也可以使RGB颜色代码。

在网页中插入图像
一个网页可以插入如Logo(网站标志)、Babber(横幅广告)、照片等各种图片,当浏览者浏览网页时,这些图片将会自动显示出来。合理地应用图片,可以使网页看起来更漂亮、重点更突出、形式更活泼、浏览更方便。在HTML里通过<IMG>元素来插入图片,其语法代码为:

<IMG SRC="URL" ALT="替代文本" NAME="名字" WIDTH="宽度" HEIGHT="高度" BORDER="边框" ALIGH="对齐方式" ID="编号">

<IMG>元素里的属性很多,上面代码里包含了常用的8中,其说明如下:
SRC:用于指定图片所在的位置,可以是相对路径或绝对路径。
ALT:指定用于替代图片的文本,当图片不能正常显示时,可以使用该文本替代图片。
WIDTH:指定图片的宽度。
HEIGHT:指定图片的高度。
BORDER:指定图片的边框大小。该属性的属性值越大,边款越粗
ALIGN:用于设置图片的对齐方式。该属性有5个属性值:LEFI、RIGHT、TOP、MIDDLE和BOTTOM,其代表含义分别为左对齐、右对齐、顶部对齐、中间对齐和底部对齐方式。
NAME:图片的名称,很多时候可以省略。
ID:图片的编号,也可以省略。在同一个HTML文档里不允许出现相同的ID,但可以出现相同的NAME。

设置背景图片
<BODY>元素里的BACKGROUND属性可以为网页指定背景图片,背景图片作为背景出现在网页文字的下方,其语法代码如下所示:

<BODY BACKGROUND="背景图片地址">网页内容</BODY>

其中背景图片可以是在本地文件夹里的图片,也可以事网络中的图片,如果是网络中的图片,可以用URL地址指定图片位置。

创建超链接
超链接标记
在HTML中,创建超链接的标记是<A>。<A>标记是双标记,以<A>开始,以</A>结束。<A>标记创建的链接能指向一个HTML页面、一幅图像、一个视频文件等任何资源,其语法如下所示:

在这里插入代码片
<A NAME="锚名称" HREF="URL" TITLE="标题" TAGGET="目标">超链接文字</A>

超链接元素的属性有很多,上面的语法代码里只包含了常用的四个属性:
NAME:用于设置超链接当前我i遏制的锚名称
HREF:`用于设置超链接的链接地址
TITLE:用于设置超链接的标题。
TARGET:用于设置打开超链接的目标地址。
从上面的超链接语法代码可以看到,一个超链接的组成主要包括:目标地址、链接文字、标题说明、目标窗口以及锚。

链接地址
链接地址用于设置超链接的路径,可以使用<A>标记中的HEAR属性来进行设置。设置超链接地址的语法是:

<A HREF="链接地址">用来设置超链接的元素</A>

在这段语法中,超链接的链接地址可以是相对地址,也可以是绝对地址。
绝对路径,实际就是完整路径。这种路径可以按照硬盘文件的真正路径,也可以是按照域名的网页路径。使用绝对路径定位链接目标文件比较清晰,但是如果该文件被移动了,就需要重新设置所有的相关链接。例如设置路径为"C:\Program files\1.html",在本地确实可以找到,但是到了网站上该文件不一定在这个路径下,所以就会出问题。
相对路径,顾名思义就是自己相对于目标位置的路径。使用相对路径的时候,不论将这些文件放到哪里,只要他们的相对关系没有变:就不会出错。一般有如下三种相对路径的写法:
同一目录的文件:只需要输入链接文件的额名称即可,如:0.1html
上一级目录的文件,在目录名和文件名之前加入"../",如:../04/02.html;如果是上两级,则需要加入两个"../",如:../../file/0.1.html。
下一级目录:输入目录名和文件名,之间以"/"隔开,如:Html/05/01.html

打开链接的方式
当单击一个网页里的超链接时,通常都会在当前窗口打来超链接目标页面。如果想保留当前网页的内容,让链接的页面从一个新建窗口里打开,需要使用<A>元素的TARGET属性可以实现这个功能。TARGET属性用来设置打开链接的方式,其语法如下所示:

<A HREF="链接地址" TARGET="目标页面的打开方式">用来链接的元素</A>

在HTML语言中,超链接的TARGET属性可以取4个值,这些值得具体含义如下:

属性值			表示的含义
_parent			在上一级窗口打开(常在框架页面中使用)
_blank			新建一个窗口打开
_self			在同一窗口打开,是默认取值
_top			忽略所有的框架结构,在浏览器的整个窗口打开

锚点
在超链接中,有一种特殊的连接形式,称为锚点链接.
锚点的作用:
如果一个网页包含的内容很多,要想在整个网页里快速查找自己感兴趣的内容,就不会那么方便了。这是可以通过锚点帮助用户方便地到达当前页面的其他位置。
创建锚点
要使用锚点引导浏览者,就要首先创建页面中的锚点。创建的锚点将确定连接的目标位置。其语法是:

<A NAME="锚点名称">锚点的链接文字</A>

在这里,通过锚点名称可以标注相应的锚点,该属性是设置锚点所必须的。锚点的链接文字则有助于帮助用户区分不同的锚点,在实际应用中可以不设置链接文字。这是因为设置的锚点仅仅是为链接提供一个位置,浏览页面时并不会在页面中出现锚点的标记。

链接到本页锚点
如果要链接到本页的命名锚上,只要\<A>元素的HREF属性里指定锚点名称,并在该名字前加上"#"字符。锚点的名称就是NAME属性的属性值。链接到本页锚点的语法如下所示:

<A HREF="#锚点名称">锚点的链接文字</A>

例子:当单击"<A HREF="#target01">1.通则</A>"这个超链接时,就会跳转"<A NAME="#TARGET01">1.通则</A>"这个命名锚上。

链接到其他网页的锚点
如果想打开一个网页,并且显示网页的某一个区域,就必须要创建命名锚。使用<A>元素的NAME属性可以在网页上设置链接到其他网页的锚点,其语法如下所示:

<A HREF="页面地址#锚点名称">用于链接锚点的文字</A>

``例子:单击这里查看,也可以<A HREF="3-4.html#target03" TARGET="_blank">单击这里</A>查看。

图像的超链接
将整个图像设为超链接
<A>标记不仅可以为文字设置超链接,还可以为图片设置超链接。为图片设置超链接有两种方式,一种是将整个图片设置为超链接,只要单击该图片,就可以跳转到链接的URL上。另一种是为图片设置为热点区域,将乳片划分为多个区域,单击图片不同的位置将会跳转到不同的连接上。

将整个图像设为超链接

<A HREF="链接地址"><IMG SRC="源文件地址"></A>

当为图片增加超链接之后,会自动在图片上增加一个边框,如第一个超链接的图;如果去掉该图片上的边框,可以在<IMG>元素中设置BORDER的属性值为零,如第二个超链接的图;也可以将图片与文字一起设为超链接,

设置图像热点区域
除了可以为整个图像设置超链接外,还可以为图像设置热点区域,也就是将一盒图片划分成多个可单击的区域,单击不用的区域将跳到不同的链接上。在定义图像热点区域的时候,除了要定义图像热点区域名称之外,还要设置其热区范围。可以使用IMG元素中的USERAP属性和<MAP>标签来创建,其语法是:

<IMG SRC="URL" USEMAP="#MAP">
<MAP NAME="MAP名">
<AREA SHAP="图像热区形状" COORDS="热区坐标" HREF="链接地址">
</MAP>

注解:其中USEMAP属性值中的"MAP名" 必须是<MAP>标签中的NAME属性值,因为可以为不同的图片创建点击区域,每个图片都会对应一个<MAP>标签,不同的图片以USEMAP的属性值来区别不同的<MAP>标签。需要注意的是,USEMAP属性值中的"MAP名"前面必须加上#。
<MAP>标签里至少要包含一个<AREA>元素,如果一个图片上有多个可点击区域,将会有多个<AREA>元素。在<AREA>元素里,必须要指定COORDS属性,该属性值是一组用逗号隔开的数字,通过这些数字可以决定可点击区域的位置,但是COORDS属性值的具体含义取决于SHAPE的属性值,SHAPE属性用于指定可点击区域的形状,其值为:
CLRCLE:指定可点击区域为圆形,此时COORDS的值应该是类似于"x,y,z"的表示方法。其中x和y代表圆心的坐标,该坐标是相对于图片的左上角而言的,也就是说图片左上角的坐标是"0,0";而z代表圆的半径长度,单位为像素。CIRCLE也可以简写为CIRC。
POLYGON:指向可点击区域为多边形,此时COORDS的值应该是类似于"x1,y1,x2,y2,x3,y3...."的表示方法。其中x1和y2是多边形一个顶点的坐标,x2和y2是另一个顶点的坐标,至少有3个顶点才能形成一个区域(三角形区域)。同样这些坐标点也是相对于图片左上角而言的。再HTML里多边形是会自动闭合的,所以在COORDS里不用重复第一个坐标来闭合整个区域。POLYGON也可以简写成POLY。
RECTANGLE:指定可点击区域为矩形,此时COORDS的值应该是类似于"x1,y1,x2,y2"的表示方法。其中x1和y1是矩形的一个角的顶点坐标,x2和y2是该角的顶点坐标。同样这些坐标点也是相对于图片左上角而言的。RECTANGLE也可以简写成RECT

超链接总结:

超链接标记<A >中常用的属性包括:name、href、title、target 4种。
打开链接的方式有:_parent、_blank、_self、_top 4种。

相约1996

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML标记

网页构成元素:①文本、②图像、③链接、④表格、⑤表单、⑥导航条网站建设流程:一、网站需求分析;二、网站整体规划;三、收集资料与素材;四、制作页面;五、域名和服务器空间的申请;六、测试与发布网站;七、后期维护与网站推广HTML基本结构<HTML> HTML文件的开始标记,表示这是一个HTML文件 <HEAD> 文件头的开始标记,这对标记之间的...
复制链接

扫一扫