HTML课堂笔记02-21
列表类型和标记符号
列表类型 |
标记符号 |
定义列表 |
dl |
无序列表 |
ul |
有序列表 |
ol |
无序列表
语法:
<ul>
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
</ul>
<ul>:符号标签(○●■)
type属性:disc ● ( 默认) circle ○ square ■
ul二层嵌套的时候,如果都没有说明type的属性是什么,那么第一个ul下显示的是disc ●,第二个显示的是circle ○。
有序列表
语法:
<ol>
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
</ol>
ol的属性type的默认属性是阿拉伯数字,type的值类型有1、a、A、i、I,5种。
超链接标签
创建超链接的标签为<a>和</a>,使用格式如下:
<a href=“资源地址” target=“是否在新窗口显示” title=“指向链接时显示的文字”>
_parent |
在上一级窗口中打开,一般使用分桢的框架页会经常使用 |
_blank |
在新窗口打开 |
_self |
在同一个框架或窗口中打开,该项一般不用设置 |
_top |
在浏览器的整个窗口中打开,忽略任何框架 |
链接路径
绝对路径:包含了标识Internet上的文件所需要的所有信息,包括完整的协议名称、主机名称、文件夹名称和文件名称。格式为:
通信协议://服务器地址:端口号/文件位置…/文件名
http://ww.sina.com.cn/web/index.html
– 根路径:根路径文件夹地址的写法,首先以一个斜线开头,代表根目录,然后书写文件夹名,最后书写文件名。例如,/myweb/index.html
!!!不建议使用根路径
相对路径:是以当前文件所在路径为起点,进行相对文件的查找。
相对路径 |
含义 |
href=“index.html” |
index.html是本地当前路径下的文件 |
href=“web/index.html” |
Index.html是本地当前路径下web子文件夹下的文件 |
href=“../index.html” |
index.html是本地当前文件夹的上一级文件夹下的文件 |
Href=“../../index.html” |
index.html是本地当前文件夹的上两级文件夹下的文件 |
锚记标
<a name=”标记名”> </a>
<a href=”#标记名”> </a>
发送E-mail:在html页面中,可以建立e-mail链接,当浏览者单击链接后,系统会启动默认的本地邮件服务系统发送邮件,格式为:
<a href=“mailto:e-mail地址?subject=邮件主题”>
描述文字
</a>
subject:电子邮件主题 cc:抄送收件人
body:主题内容 bcc:暗送收件人
多个参数间用“&”分隔
地址和邮件主题之间要用?隔开
LINK 颜色的设置
• 基本格式:<body link=”颜色” alink=”颜色” vlink=”颜色”>
• link 超链接尚被选中的文字
• alink 超链接点选但未被放开的颜色
• vlink 超链接已被点选过的颜色
图像标签
<img>标签:用于在网页中插入图像内容。
– src属性:用于设置图像文件的相对或绝对URL地址。
HTML的图像文件类型有以下三种:
– GIF:是图形和图片的最佳格式,适用于透明或动画图形。
– JPG或JPEG:更适合存放照片
– PNG:拥有许多JPEG与GIF的共同优点,所以最近越来越流行。
图像文件名的路径分为绝对路径和相对路径两种:
– 绝对路径指的是将图像文件的全部路径都写出来,一般用于显示其他网站上的图像文件。
– 相对路径就是写出相对于当前html文件所在的目录,一般用于图像文件在本网站中的情况。
注意:
ü 通过设置width属性和height属性可以控制图像的显示宽度和高度,他们的长度单位可是百分比,也可是像素。
ü Width属性和height属性的设置只是改变了图像的显示尺寸,图像文件的实际大小不会因此而发生变化。如果width和height的设置值和图像实际尺寸不一致时,还会影响图像的显示效果。
ü 因此,图像的大小应该在图像处理软件中进行调整。设置width和height的另一个好处是他们可以在图像被完全下载之前让浏览器知道该用多大的空间来显示图片,这样浏览器可以更快显示出美观的页面。
<IMG> 标签用于在 HTML 文档中插入图像。<IMG>标签的两个常用属性是 SRC和 ALIGN。
SRC 属性用于指定要插入的图像位置。
ALIGN 属性用于指定图像相对于文本的对齐方式。
图像的边框的属性border的属性值是数字,如果属性值是0,那么图像无边框。
空隙的设置
Vspace的属性值是像素是表示垂直上下两端与物体的距离
Hspace的属性值是像素是表示水平左右两端与物体的距离
用图像作为超链接
格式:
<a href="URL"><img src="URL"></a>
注意点:边框的问题.
可通过border=“0”去掉边框
图像的映射
语法:
<img src=”URL”usemap=””></img>
<map name=””>
<area shape=”” cords=” , , , ” href=”URL”>
</map>