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

最新推荐文章于 2022-07-11 19:11:48 发布

Zh_nn

最新推荐文章于 2022-07-11 19:11:48 发布

阅读量664

点赞数

分类专栏： web前段开发基础

本文链接：https://blog.csdn.net/Zh_nn/article/details/77489097

版权

web前段开发基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

列表：

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代表矩形区域右下角的坐标
“`

Zh_nn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础之列表、超链接、图像

列表：1.无序列表<ul> 格式：<ul> <li>...</li> ---一个列表项 <li>...</li> <li>...</li> .. </ul>属性说明：type=disc(默认值，实心圆）/circle(空心圆）/square(实心方块)2.有序列表<ol></ol> 格式：<ol> <li>
复制链接

扫一扫