HTML基础之列表、超链接、图像

来源：互联网发布：英语学霸软件编辑：程序博客网时间：2024/05/29 16:20

列表：

1.无序列表<ul>
格式：

<ul>        <li>...</li>  ---一个列表项        <li>...</li>        <li>...</li>        ..    </ul>

属性说明：type=disc(默认值，实心圆）/circle(空心圆）/square(实心方块)

2.有序列表<ol></ol>
格式：

<ol>        <li>...</li>        <li>...</li>        <li>...</li>        ..    </ol>

属性说明： type=1/a/A/i/I
start 设置列表起始值（ol的属性）
value设置列表项的值（li的属性）

3.无序列表和有序列表的嵌套
格式：

<ul>    <li>        <ol>            <li>…</li>            …        </ol>    </li>    …</ul>

4.自定义列表：
格式：

<dl>-----------自定义列表的开始        <dt>…</dt>---------定义项            <dd>…</dd>---------定义描述            <dd>…</dd>        <dt>…</dt>            <dd>…</dd>            <dd>…</dd>    </dl>

超链接：（URL）资源定址器

1.基本格式：

 <a href="path" target="目标窗口位置">链接文本或图像</a>

2.属性介绍：
属性名称属性值说明
(1)href 相对路径 page/index.html
绝对路径 http://www.163.com/images/logo.html
(2)target

_blank 新窗口打开
_self 当前窗口打开
_top 清除所有被包含的框架并将文档载入整个浏览器窗口
_parent 父窗口打开

(3)accesskey 键盘字符快捷键
(4)tabindex 数值设置激活次序

3.超链接路径的种类：
–相对路径 ./ 当前目录（也可以地址之前什么都不写）
rel/ 当前目录的子目录
../ 当前目录的父目录

–绝对路径：

http声明   <a href=”http://www.baidu.com”>百度首页</a>ftp声明    <a href=”ftp://ftp.hp.com”>惠普官网FTP</a>mailto      <a href=”mailto:youxiang@123.com”>邮箱E-MAIL</a> file声明    <a href= “file:///D:/index01.html”>无漂白薄皮核桃</a>

4.链接颜色的设置：

基本格式：<body link=”颜色” alink=”颜色”  vlink=”颜色”>

link :超链接尚被选中的文字alink: 超链接点选,但未被放开的颜色vlink: 超链接已被点选过的颜色

5.为链接创建快捷键

基本格式：    <a href="http://www.baidu.com" accesskey="p" >百度首页</a>

说明：按下“Alt+p”或“shift+Alt+p”键后，再按“Enter”键打开链接（IE支持）

6.设置激活次序：

基本格式：<a href="http://www.baidu.com" tabindex="n" >百度首页</a>           <!--n为数字-->

这里写图片描述
7.页面内的链接（书签的链接）
的属性：name—字符串—-设置锚点名称

基本格式：        链接点<a href=”#music”>…</a>        锚点：<a name=”music”>…</a>              <p id=”music”>段落一</p>

链接到别的网页的书签项目：基本格式：        链接点<a href=”index.htm#music”>…</a>        锚点  <a name=”music”>…</a>        <p id=”music”>段落一</p>

图像

1.常见的图像格式:
png/gif/jpg(jpeg)/bmp

2.图像标记的基本格式

    <img src="URL" alt=” ” width=” ” height=” ”>

3.用图像作为超链接
基本格式:

<a href="URL"><img src="URL"></a>

4.带有可点击区域的图像链接：
基本格式：

```<map name="图象名称" id="图象名称"<area href="URL" alt="文字说明" shape="选取区块的形状" coords="坐标" target=”_blank”></map><img src="URL" usermap="#图象名称">

sharp属性说明：
sharp 属性值含义 coords属性值含义
circle 圆形 x,y,z x、y代表圆心坐标，r代表圆形的半径
poly 多边形 x1,y1,x2,y2… X1,y1…代表多边形区域的每一个顶点坐标
rect 矩形 x1,y1,x2,y2 x1、y1代表矩形区域左上角的坐标
x2、y2代表矩形区域右下角的坐标
“`

阅读全文

0 0