首页 > 代码库 > 五月六日 HTML标签 超链接、图片属性和列表

五月六日 HTML标签 超链接、图片属性和列表

2024-09-20 13:09:27   208人阅读

今天的内容主要是HTML标签的超链接 图片属性 列表的用法

一、超链接，锚点和下载。

（1）超链接

　　　　<a href="http://www.mamicode.com/URL" targe="_blank">网站名</a> 可以直接点击中间的文字打开网址，target是点击超链接打开的网页的属性，_self是直接在当前页面打开， _blank是在新的空白标签页中打开。

（2）锚点

　　　　<a name="锚点">   定义 一个锚点

　　　　<a href="http://www.mamicode.com/#锚点">返回锚点</a>  点击返回锚点  如果没定义锚点 href的属性值为#，是返回网页顶部

（3）下载

　　　　<a href="http://www.mamicode.com/文件路径">下载文件</a>  点击会开启文件下载 但是如果文本 网页 图片不会触发下载  这些文件浏览器会直接打开  需要另存为

二、图片标签属性

　　　　<img src="http://www.mamicode.com/图片地址" alt="图片加载失败" title="这是图片" /> alt属性是在图片加载失败时显示的内容 title则是鼠标移到图片上时显示的内容 

三、列表

（1）无序列表

　　　　<ul type="square" style="list-style:none"> type属性为列表前的符号 有实心方块（square）circle（空心圆）实心圆（disc）三种 还可以style="list-style:none"去掉符号

　　　　　　<li>第一行</li>

　　　　　　<li>第二行</li>

　　　　　　<li>第三行</li>

　　　　</ul>

（2）无序列表　　　　

　　　　<ol type="a/A/1/I/i"> type属性为序号 a是abcd小写字母 A是ABCD大写字母 1是1234数字 I是罗马数字ⅠⅡⅢⅣ i是小写罗马数字i ii iii iv  还可以list-style:none 去掉列表序号

　　　　　　<li>第一行</li>

　　　　　　<li>第二行</li>

　　　　　　<li>第三行</li>

　　　　</ol>

四、注释

　　　　<!--需要注释掉的内容--> VS的注释快捷键是Ctrl+k,Ctrl+c  其他编辑器大部分是Ctrl+/   我把VS的快捷键换成了Ctrl+/  但是和转到命令行有冲突 所以我把两个命令的快捷键互换了。

五、分隔符 <hr />

六、表格和图片的宽度/高度除了固定值 还可以写成百分比的形式  这样在缩放页面是宽度也会跟着变化以适应页面

七、课上练习

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>超链接</title>
</head>
<body>
    <!--超链接练习-->
    <a href=http://www.mamicode.com/"http://www.baidu.com">百度</a><br />
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><a name="top">锚点</a><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <a href=http://www.mamicode.com/"download/blank.rar">点击下载空白压缩文件</a><br />
    <a href=http://www.mamicode.com/"img/tu.jpg" target="_blank">点击下载图片</a>
    <img src=http://www.mamicode.com/"img/tu.jpg" width="200" alt="图片加载失败" title="夜夜" /><!--图片大小可以用百分比写，会随着网页大小按比例缩放-->
    <!--超链接结束-->
    <!--无序列表-->
    <ul>
        <li type="disc">第一行</li>
        <li type="circle">第二行</li>
        <li type="square">第三行</li>
    </ul>
    <ul style="list-style:none">
        <li>
            <a href=http://www.mamicode.com/"http://www.baidu.com">百度</a>
        </li>
        <li>
            <a href=http://www.mamicode.com/"http://www.zhihu.com" >知乎</a>
        </li>
    </ul>
    <!--无序列表结束-->
    <hr /> <!--分隔符-->
    <!--有序列表-->
    <ol type="1">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ol>
    <ol type="a">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ol>
    <ol type="I">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
    </ol>
    <!--有序列表结束-->
    <a href=http://www.mamicode.com/"#top">返回锚点</a><br />
    <a href=http://www.mamicode.com/"#">返回顶部</a> <br />
    <!--这行字是注释内容-->
</body>
</html>

效果图

技术分享

五月六日 HTML标签 超链接、图片属性和列表


联系
我们