a标签 靠右对齐_HTML标签属性

大部分HTML标签都可以添加属性,常见的属性有宽度、高度、颜色、背景、字体等。

  • HTML属性一般都出现在HTML标签中,是HTML标签的一部分。

  • 标签可以有属性,它包含了颜色的信息,属性的值一定要在双引号中。

  • 标签可以拥有多个属性。

  • 属性由属性名和值成对出现。

语法格式
<标签名属性名1=“属性值”属性名2=“属性值”…“>…标签名>示例:(如图2-8所示)47c055b43ca31d8e821934ca1401333d.png

  1. 1.       HTML文档

HTML文档就是HTML页面,也就是网页,是由HTML元素组成的,互联网的所有内容都是由一个个HTML文档体现的,如图2-9所示。fd63d7368d207f782ee1327df889bcf9.png

上图红色边框的是主体,之间的文本是可见的页面内容,蓝色边框是网页标题,是标签中中的内容。

整个网页就是一个HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是用标签来解释页面的内容。

2.HTML注解

在实际开发中需要在一些代码段做HTML注解,这样做有很多好处,如方便查找,方便比对,方便项目组里的其他程序员了解其他人的代码,而且可以方便对代码的理解与修改等等。

语法格式(如图2-10所示):

这里写注解内容-->

注解:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

ea4ca2e0322c7de91930d4c9c40be4a8.png

3.字的字体(font)和颜色(color)定义文字大小和颜色使用font标签对。

基本语法:

……

它的属性值有:face(字体)color(颜色)等

示例(图2-11):

4bd9e5145cb0ba091d1c285f5d804732.png

在浏览网页中最先关注的是文章的标题,字体很大很突出。通常使用

对标签.h 标签分为6 种,分别是

-----

字体从大到小。

示例(图2-12)

1         

2         

3         标签演示

4         

5         

6         

我是h1 标签

7         

我是h2 标签

8         

我是h3 标签< /h3>

9         

我是h4 标签

10     

我是h5 标签

11     

我是h6 标签

12     

13     

运行结束:

1c36e83af986da9363fc6e5cbc53f641.png

5.标题字的对其属性(align)

1

2

3标题字的对齐属性

4

5

6< h2 zlign = left >左对齐

7< h2 zlign = center >居中对齐

8< h2 zlign = right >右对齐

9

10

运行结束(图2-13):

dab356ad40b46b197b62df3cd9157a16.png

6.字体加粗(b标签)

1

2

3B标签演示

4

5

6这是没有使用b标签的正常字体

7使用b标签加粗的字体

8

9

运行结束(图2-14):

fb78b0f24b03e33df875216036641c07.png

可能学员会有疑问,HTML代码明明是两行,为何显示结果是一行。这是因为HTML代码中的换行、空格、tab缩进等是不会在浏览器中显示的,如图2-15所示。

示例:

158845b475a2e043ccb4ec72a8bf08d7.png

那么在HTML如何实现换行?只需要在源码中需要加上一个换行标签,如图2-16所示。

2ed1b86349eecfd8b12d371afc58ffc1.png

7.斜体标记

基本语法:

……

……

……

示例:

1

2

3斜体标记

4

5

6斜体标记i演示

7斜体标记em演示

8斜体标记cite演示

9

10

42829ecad83e04a3412a7a5fefb95586.png

说明:有一些标签用来指出包含的文本有特殊的意义,胡(表示缩写),(表示强调),(表示更强地强调),(表示引用),

(表示地址)等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。

8.段落标记

浏览器解析HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出那些文字是属于统一段落的,这就用到了标签,标签式段落标记,浏览器会自动地在段落的前后添加空行。

1

2

3p标记示例

4

5

6这是第一个段

7这是第二个段

8

9

显示结束(图2-18):

911af34b3680fc97eb16274c263fd046.png

9.换行标签只表示换行,不表示段落的开始或结束,所以通常没有结束标签。

1

2

3BR标签演示

4

5

6这是第一段

7 这是第二段

8

9

显示结束(图2-19)

从p标签和br标签在浏览器显示的结果中可以看出,使用标签换行上下文有间距(浏览器会自动地在段落的前后加上空行),而标签换行是软换行,上下文没有间距。

f03973371ede21dc931909778f440088.png

关于和标签的使用,学员可能会发现有的网页没有/符号,浏览器也能正常显示。那么和的区别是什么呢?

HTML升级版也就是HTML5标志规定,不允许使用结束标签(闭合标签)的HTML元素。虽然现在在所有浏览器中的显示都没有问题,标志推荐使用有闭合标签的。

10.水平线标记(hr)

  • Width(水平线的宽度显示)

  • Size(水平线的高度)

  • Color(水平线的颜色)

  • Noshade水平线去掉阴影属性标记

  • Align水平线对齐属性

前面已经简单通过了hr标签,这次为其添加上属性。

示例(图2-20)

1

2 标签演示

3

4

带属性值的HR 标签演示

5

6

7

581c621823962ef7ce9de4e1a43ab05b.png

11.输入特殊符号

基本语法:&nbsp: &quot &amp

如果想在网页显示多个空格,可是在源码中无论你敲多少空格,实际的显示页面只能显示一个如图2-21所示,显示的结果并没有我们预期的结果,同样的我们想在网页上显示和HTML代码有冲突的符合加大于号(>)或小于号(<)等怎么办呢?HTML语言中专门为显示这些特殊的符号设定了标签。常用的特HTML殊符号对应代码的如图2-22所示。

c644c834037157d73bc553dd0b9bd977.png

12.插入图片

网页中常用的图片格式有jpg、gif、png等。HTML中插入图片使用标签

基本语法:

图片路径” width=宽度 height=高度>

语法解释:宽度和高度的单位都是像素,是插入图片的HTML标签,src是描述图片路径的属性,它的值表示图片的路径。

示例(图2-23);

7ae659cb442b7aca4ea46ca6526fd28a.png

这里的图片路径表示logo.gif图片和html文件在不在同一目录下。如果图片则可把所有的图片放在图像专有子文件夹中如images中,那么上面的路径应改为,关于路径问题,在后面“相对路径与绝对路径”课程中详细讲解。

标签除了src属性,外还包含的属性有:

  • alt:设置图像的提示文字属性。

  • width、height:设置图像的宽度和高度。

  • border:设置图像的边框。

  • align:设置图像的排列属性。

  • 设置图片的提示文字(alt)

基本语法:

图片路径” 埃立特“提示文字”>

示例(2-24):

JMG标签的alt属性是指鼠标放在网页的图片上没弹出一行提示性的文字。

8b730ba3519b8cb7f0cfd60ffa663997.png

14.设置图片的边框

基本语法:

图片路径” border=边框宽度>

示例(图2-25):

46ae27178b13c6ec0b5020f5c45a3c79.png

图片的超链接

图片的超链接就是在图片上建立链接。和文字的链接相同,就是单击过链接的图片和文字后就会跳到对应的目标地址上。

图片的超链接与文字相同都是标记。

基本语法:

目标地址”>图片路径” />

示例(图2-26):

1918d6ebca6c9a87855abf334d42193b.png

15.HTML链接(Link)

超链接:从一个页面指向另一个目的端的链接,超级链接可以使用标签来定义,其链接文档的地址在属性“href“中指定。链接分为内部链接:链接指向站点文件夹之内的文件(如)和外部链接:链接指向站点文件夹之外的文件(如。标签又叫做锚标签,用来建立一个指向其他文档的链接。锚可以可以链接到网络上任一文档:一html页面,一张图片,一个音频或视频文件等。

语法格式:

链接文字

url是需要链接文档的地址,开始标签和结束标签包围的文本是作为超链接显示的文本。

A标签的属性包含:

  • href:链接地址。

  • target:指定链接的目标窗口。

  • name:给链接命名。

  • title:给链接提示文字。

  • 设置链接的目标窗口(target)属性

基本语法:

文件名” target=”属性值”>链接文字

Target属性用来定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口打开)。默认的被连接的文档是在原来的窗口中打开的。如果将target属性设为”_dlank”文档就会在新窗口打开,例如:

贵州商学院

Target属性的值及含义:

  • _parent:在上一级窗口中打开。

  • _blank:在新窗口中打开。

  • _self:在同一窗口中打开(默认)。

  • _top:在浏览器的整个窗口中打开,忽略任何框架。

1         

3)链接到其他页面中的书签。

基本语法:

文件名#书签名”>文字

示例:

1 发展历史”>HTML发展历史

18.文件下载链接

基本语法:

链接文字

“file_url”表示文件所在路径。

有两种方式:

第一种是网站内部的相对路径,用“路径/完整文件名(主文件名.扩展名)”表示:

第二种是使用互联网上的绝对路径http://网站域名/目录/完整文件名。

示例:

1 图片素材.rar>文件下载演示

19.E-mail链接

发送E-mail(建立e-mil链接),实际制作中使用的频率很低,学员只需了解基本用法即可。

基本语法:

电子邮件地址”>链接文字

邮件地址:

1 联系管理员

2 解析:发送邮件给admin@gzcc.edu.cn-->

20. 空连接

空连接:是指向链接后,鼠标变成手形,单击后无任何链接效果仍停留在当前页面。空连接的使用是网页前端开发布局时,临时加空连接,主要为了能让鼠标动作引发的行为结果。

基本语法:

”#”>链接文字

其中“#”表示空连接。

示例

1 ”#”>空连接演示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值