HTML中的元素属性

HTML中的元素属性:

在用可视化HTML编 辑 器

Frontpage、Dreamweaver等
由Web 服务器( 或称HTTP 服务器) 一 方实时动态地生成
网页文件命名
*.htm或*.html
无空格
无特殊符号(例如&符号),只可以有下划线“_”,只可以为英文、数字
区分大小写
首页文件名默认为:index.htm 或 index.html
HTML 文件结构
<html>...</html>
<head>...</head>
<body>...</body> 
元素:是HTML语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如<body>),也有一个结束的标记(如</body>)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。
HTML 文件结构 (Document Structures) 
<HTML> 
<HEAD>
<title></title>
<meta>
</HEAD>
<BODY>
 HTML 文件的正文
</BODY>
 </HTML>
第一张网页(01.htm)
<html>
      <head>
        <title>my first page</title>
      </head>
      <body>
      This is my first homepage!
      </body>
</html> 
基本组成部分—— HTML元素属性
HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内,并且和元素名之间有一个空格分隔;属性值用“”引起来。
第二张网页(02.htm)
<html>
      <head>
        <title>my first page</title> 
      </head>
      <body>
         <p align="center">This is my first homepage!</p>
      </body>
</html> 
HTML基本结构的 有关元素和元素属性
HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。 
<title> 
<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
HTML基本结构的 有关元素和元素属性
HEAD元素——2
<meta>元素 
<meta>元素下面可以插入很多很有用的元素属性。下面介绍四种:
<meta name="keywords" content="study,computer"> 
用来标记搜索引擎在搜索你的页面时所取出的关键词。
HTML基本结构的 有关元素和元素属性
HEAD元素——3
<meta>元素 
<meta name="author" content=“wutao"> 
用来标记文档的作者。HEAD元素——4
<meta>元素 
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 
用来标记你的页面的解码方式。 
HTML基本结构的 有关元素和元素属性
HEAD元素——5
<meta>元素 
<meta http-equiv=“refresh” content=“5;URL=http://www.enet.com.cn/eschool”>
用来自动刷新网页
编写一个网页,要求3秒钟后自动跳转到硅谷动力学院的网站。
<html>
      <head>
        <title>my first page</title>
        <meta http-equiv=“refresh” content=“3;URL=http://www.enet.com.cn/eschool”>
      </head>
      <body>
       <p align=“center”>三秒钟后本网页将自动跳转到硅谷动力网络学院首页</p>
      </body>
</html>
<body>元素及元素属性——1
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。
<body>元素及元素属性——2
<body>元素中有下列元素属性: 
(1)bgcolor
bgcolor属性标志HTML文档的背景颜色。如:bgcolor="#CCFFCC"。
例:04.htm
HTML对颜色的控制
HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
常见颜色的代码
颜色 颜色名和RGB值
黑色 Black=”#000000”
银色 Silver=”#c0c0c0”
红色 Red=”#ff0000”
蓝色 Blue=”#0000ff”
白色 White=”#ffffff”
黄色 Yellow=”ffff00”
绿色 Green=”#00ff00”
海蓝色 Aqua=”#00ffff”
<body>元素及元素属性——3
<body>元素中有下列元素属性: 
(2)background
background属性标志HTML文档的背景图片。如:background=“images/bg.gif"。
可以使用的图片格式为GIF,JPG


例:05.htm、06.htm
<body>元素及元素属性——4
<body>元素中有下列元素属性: 
(3)bgproperties=fixed
bgproperties=fixed使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。


例:07.htm和08.htm对比
<body>元素及元素属性——5
<body>元素中有下列元素属性: 
(4)text
text属性标志HTML文档的正文文字颜色。如:text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。
例:09.htm
<body>元素及元素属性——6
<body>元素中有下列元素属性: 
(5)超级链接颜色
link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。
例:10.htm
<body>元素及元素属性——7
<body>元素中有下列元素属性: 
(6) leftmargin和topmargin
设置网页主体内容距离网页顶端和左端的距离如:leftmargin="20" topmargin="30“
例:11.htm




HTML基本结构的 有关元素和元素属性


文字标签属性——1
文字属性标记
1.文字颜色 
指定颜色 <font color=#> ... </font>
#=RRGGBB 16 进制数码
例:01.htm
文字标签属性——2
文字属性标记
2.文字字体
<font face=“#, #, ..., #”> ... </font> #=客户端可获得的字体


02.htm
文字标签属性——3
文字属性标记
3.文字大小
<font size=#> ... </font> 
#=1, 2, 3, 4, 5, 6, 7 or +#, -#


例:03.htm
文字标签属性——4
文字属性标记
4.文字标题
<h#> ... </h#> 
#=1, 2, 3, 4, 5, 6


例:04.htm
文字布局
行的控制 
段(Paragraph) (可以看作是空行) <p>
空白占位符&nbsp;
例:05.htm
行的控制 
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。
例:06.htm
不换行<nobr>
   07.htm
HTML文字与段落格式控制
<body>……
     <i>倾斜文本</i>
     <b>粗体文本</b>
     <u>下划线文本</u>
 <s>删除线文本</s>
     ……</body> 


例:08.htm、09.htm、10.htm、11.htm(综合练习)
基本组成部分—HTML注释
HTML文档可以插入注释。注释内容不会在浏览器窗口显示
HTML注释的格式为: <!-- 注释内容 -- > <!--多行注释内容 -- >


例:12.htm
文字的对齐
<hn align=#>...</hn> (n=1,2,3,4,5,6) 
<p align=#>...</p> (#=left, center, right)


例:13.htm
文字的分区显示
<div align=#> ... </div>                   (#=left, center, right) 


例:14.htm
3.HTML段落与分行控制
居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
例如:<center>居中段落</center>
15.htm
标尺线
<hr size = #>:设定线宽
<hr width=#>:设定线长
<hr align=#>:设定对齐方式 #=left, right 
<hr color=#> :设定线的颜色


例:16.htm
无序列表元素—1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。
无序列表元素—2
无序列表是由<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
例:17.htm
无序列表元素—3
无序列表的默认符号是圆点。 <ul>元素有type属性,通过定义不同的type属性可以改变列表的项目符号。目前,type属性的属性值有: disc(圆)、circle(圆圈)、square(方块)
例:18.htm
有序列表元素—1
有序列表由<ol>和<li>定义:
<ol>
    <li>sports</li>
  <li> drink</li>
  <li> friends</li>
</ol>
例:17.htm
有序列表元素—2 <ol>元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列表的编号 例: 19.htm
<ol>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<ol>元素的start属性
例:20.htm
超级链接—普通超级链接1
超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。
超级链接是用锚元素<a>定义的 
在<a>元素下,有元素属性href,href的属性值为一个URL地址
如:<a href=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a> 
如:<a href=“29.htm">普通超级链接</a>
例:21.htm
超级链接—E-mail超级链接 
超级链接可以指向E-mail地址
如:<a href=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a>


例:22.htm
超级链接—新开链接窗口
开一个新的(浏览器)窗口 (Target Window) 
<a href="URL" target=“_blank"> ... </a>
例:26.htm
超级链接—去除下划线
去掉超级连接的下划线:style=“text-decoration: none”


超级链接——其他超级链接 
WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;
指向其他Internet应用的超级链接不是我们掌握的重点。 
超级链接——锚点(书签) 1 
<a name="aa">
<a href="#aa">指向本页面锚点aa的超级链接</a>
例:23.htm
<a href=“23.htm#top”>指向23页面的锚点top的超级链接</a>
例:24.htm
HTML对图片的控制--1
基本语法:
<img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。
src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址
例:28.htm
所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是:
<img src=“图片名称” alt=“这是一张图片”>
例:28.htm
图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
定义图片的显示大小的方法是:
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。 
例:29.htm
图片的边框
我们可以为一幅图片加一个边框以突出显示:
 <img src="sample.jpg" border= " 2 " >
border的属性值为象素数


例:30.htm
图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是:
<img src=“sample.jpg” align=“left” >
<img rc=“sample.jpg” align=“right”>


例:31.htm
图片的对齐方式
定义图片的垂直对齐方式:
<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >
对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。
例:32.htm
定义图片与左、右的文本之间的间距
图片在显示时,与左右的文本之间可以有一定的间距
 <img src="sample.jpg" hspace=5 vspace=5 >
Hspace(horizontal)定义水平间距; Vspace(vertical)定义垂直间距。单位都是象素数.
图象的超级链接 
图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是:
<a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a>
所以,所谓超级链接实际上就是用<a>元素标志一个图象的引用;
图象映射
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接;点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。
图象映射(只要求理解标记含义)
图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名,这个命名将会被<img>元素用usemap属性引用。所以,图象上的图象映射实际上是对<map>定义的映射的一个引用。
<map>在定义图象映射时,可以定义三种形状的映射: circle(圆形)、rect(矩形rectangle)、poly(多边形)
图象映射实例(35.htm)
<img src="bear.jpg" usemap="#Map" > 
<map name=“Map"> 
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > 
</map>







  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值