HTML学习笔记(二)

    15,忽略HTML标记<xmp>
    在HTML文件中利用成对的<xmp></xmp>标记可以忽略HTML标记的作用,让标记之间的包括标记的所有内容直接显示在页面上
    基本语法:
    <body>
    <xmp>
    </xmp>
    </body>
    实例代码:

    <html>
    <head>
        <title>忽略HTML标记</title>
    </head>
    <body>
    哈哈<br>哈哈
        <xmp>
        哈哈<br>哈哈
        </xmp>
    </body>
    </html>


    16,插入并设置水平线<hr>
    在浏览网页时,经常会看到网页中有一条水平的直线,这条直线在网页中被称为水平线,根据需要还可以对网页中的水平线进行一系列的设置
    属性width设置水平线宽度,可以使像素,也可以是百分比size设置水平线的高度noshade设置水平线无阴影color设置水平线颜色align设置水平线居中对齐
    基本语法:
    <body>
    <hr>
    </body>
    实例代码:

    <html>
    <head>
        <title>设置水平线</title>
    </head>
    <body>
        <center>添加水平线后的效果</center>
        <hr width="100%" size="1" color="blue">
        神马都是浮云<br>
        <hr width="400" size="3" color="red" align="center">
    </body>
    </html>


    五 建立和使用列表
    1,插入定义列表<dl>
    在HTML文件中,只要在需要使用列表的地方插入成对的标记<dl></dl>就可以很简单的完成定义列表的插入
    基本语法:
    <dl>
       <dt>名称<dd>说明
       <dt>名称<dd>说明  
       <dt>名称<dd>说明
    </dl>
    <dt>标记定义了组成列表项名称部分,同时此标记只在<dl>标记中使用
    <dd>用于解释说明<dt>标记定的项目的名称,此标记也只能再<dl>标记中使用
    实例代码:

    <html>
    <head>
        <title>插入定义列表</title>
    </head>
    <body>
        <dl>
            <dt>联系人<dd>XXX
            <dt>联系地址<dd>XXX
            <dt>邮政编码<dd>XXX
        </dl>
    </body>
    </html>


    2,插入无序列表<dl>
    在HTML文件中,只要在需要使用列表的地方插入成对的标记<ul></ul>,就可以完成无序列表的插入
    基本语法:

    <ul>
       <li>项目名称</li>
       <li>项目名称</li>
       <li>项目名称</li>
       ...
    </ul>


    在<ul></ul>之间必须使用<li></li>标记添加列表项值
    实例代码:

    <html>
    <head>
        <title>无序列表</title>
    </head>
    <body>
        <ul>
            <li>联系人:</li>XXX
            <li>联系地址:</li>XXX
            <li>邮政编码:</li>XXX
        </ul>
    </body>
    </html>

    3,插入目录列表<dir>
    基本语法:

    <dir>
       <li>项目名称</li>...
       <li>项目名称</li>...
       <li>项目名称</li>...
    </dir>


    在成对的<dir></dir>中间使用成对的<li></li>标记添加列表项值
    实例代码:

    <html>
    <head>
        <title>目录列表</title>
    </head>
    <body>
        <dir>
            <li>联系人:</li>XXX
            <li>联系地址:</li>XXX
            <li>邮政编码:</li>XXX
        </dir>
    </body>
    </html>


    4,插入菜单列表<menu>
    基本语法:

    <menu>
       <li>项目名称
       <li>项目名称
       <li>项目名称
    </menu>

    <menu>与</menu>中间只需要单个<li>标记添加列表项值


    实例代码:

    <html>
    <head>
        <title>菜单列表</title>
    </head>
    <body>
        <menu>
            <li>联系人
            <li>联系地址
            <li>邮政编码
        <menu>
    </body>
    </html>

    5,插入有序列表<ol>
    基本语法:

    <ol>
       <li>项目名称</li>...
       <li>项目名称</li>...
       <li>项目名称</li>...
    </ol>


    实例代码:

    <html>
    <head>
        <title>有序列表</title>
    </head>
    <body>
        <ol>
            <li>联系人:XXX</li>
            <li>联系地址:XXX</li>
            <li>邮政编码:XXX</li>
        </ol>
    </body>
    </html>


    注意:当我们需要改变列表符号时,需要在<ol>中输入TYPE属性,进行属性值的设置。
    属性值    说明
    1    数字1,2...
    a    小写字母a,b...
    A    大写字母A,B...
    i    小写罗马数字i,ii...
    I    大写罗马数字I,II...

    6,嵌套定义列表
    在HTML文件中,只要在需要使用嵌套定义列表的地方,插入成对的定义列表标记<dl></dl>,在一堆<dl></dl>标记之间使用对个<dt>和<dd>标记
    基本语法:

    <dl>
        <dt>名称
        <dd>说明
        <dd>说明
        <dd>说明
        <dt>名称
        <dd>说明
        <dd>说明
        <dd>说明
        ...
    </dl>


    <dl>标记表示插入定义列表
    <dt>标记插入项目名称
    <dd>标记表示多项目名称的说明
    多个<dt>与<dd>的交替使用,构成了定义列表的嵌套
    实例代码:

    <html>
    <head>
        <title>嵌套定义列表</title>
    </head>
    <body>
        <dl>
            <dt>网页三剑客
            <dd>Dreamweaver
            <dd>Flash
            <dd>Fireworks
        </dl>
    </body>
    </html>


    7,嵌套有序与无序列表
    在无序列表<ul></ul>标记之间插入有序列表<ol>,就可以完成嵌套有序与无序列表的插入
    基本语法:

    <ul>
        <li>项目名称</li>
    <ol>
        <li>项目名称</li>
        <li>项目名称</li>
    </ol>
    <ol>
        <li>项目名称</li>
        <li>项目名称</li>
    </ol>
    </ul>


    实例代码:

    <html>
    <head>
        <title>嵌套有序与无序列表</title>
    </head>
    <body>
        <ul>
            <li>体育三大球类</li>
        <ol type="i">
            <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
        </ol>
        </ul>
    </body>
    </html>


    六 超链接
    在HTML文件提供了三种路径:绝对路径,相对路径,根路径
    在HTML文件中,超链接可以分为内部链接,和外部链接,所谓内部链接:指网站内部文件之间的链接;所谓外部链接:是指网站内的文件链接到站点内容外的文件。
    1,设置绝对路径
    绝对路径是指文件的完整路径,包括文件传输协议http,ftp等,一般用于网站的外部链接。例如:http://www.bing.com/
    2,设置相对路径
    相对路径是指相对于当前文件的路径,它包含了从当前文件指向目的文件的路径。同时,只要是处于站点文件夹之内,即使不属于同一个文件目录之下,相对路径
    建立的链接也合适。采用相对路径是建立两个文件之间的相互联系,可以不受站点和所处服务器的影响。
    相对路径的使用方法相对位置    如何输入
    同一目录    输入要链接的文档
    链接上一目录    先输入“../”,再输入目录名
    链接下一目录    先输入目录名,后加“/”
    3,设置根路径
    根路径的设置也适合内部链接的建立,一般情况下不使用根路径,根路径的使用简单,以“/”开头,后面紧跟文件路径,例如/download/index.html
    4,超级链接的建立
    在网页文件中,超链接通常使用标记<a>属性href属性建立,在这种情况下,当前文档便是链接源,href设置的属性值便是目标文件
    例如:<a href="http://www.bing.com/">链接内容</a>
    5,插入内部链接
    基本语法:<a href="URL">链接内容</a>
    在HTML文件中需要使用内部链接时,插入成对的标记将href属性的URL值设置为相对路径
    6,插入外部链接
    基本语法:<a href="URL">链接内容</a>
    在HTML文件中,需要使用外部链接时,插入成对的标记并将href属性的URL值设置为绝对路径
    实例代码:

    <html>
    <head>
        <title>插入外部链接</title>
    </head>
    <body>
        <a href="http://www.bing.com/">必应搜索</a>
    </body>
    </html>


    7,设置图像映射
    浏览网页时,单击网页中的某个图片也可以跳到相应的网页页面,这就是在网页制作过程中设置的图像映射,在网页文件中可以同时对多个图片设置图像映射。
    基本语法:

    <img src="URL" usemap=""></img>
    <map name="">
    <area shape="" cords=", , ," href="URL">
    </map>


    <img>标记表示插入图像文件,src表示插入图像的路径
    <map>表示插入图像映射
    <area>表示图像映射区域
    shape属性表示映射区域形状rect表示矩形区域circle表示椭圆形区域poly表示多边形区域
    coords表示感应区域的坐标


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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值