前端基础-HTML基础（二）

2019-12-17 13:46:58 浏览数 (1)

本文目录

图片标签

示例列表标签a标签示例：友情链接示例：回到顶部参考

图片标签
代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <!--
            插入下一行 : Ctrl  Enter
            src : 图片的路径
                相对路径 : 参考自己
                    ./ : 同一级目录,可以省略
                    ../ : 上一级目录,不能省略
                绝对路径 : 带有协议或者盘符的路径
            alt : 图片加载失败的时候,显示的文本
        -->
        <img src="img/1.jpg" alt="这是一张图片" width="100px" height="100px"/>
        <img src="https://www.baidu.com/img/baidu_jgylogo3.gif"/>
    </body>
</html
  • 图片标签，用来定义图片
  • 属性：
    • `src`：图片路径。
    • `alt`：当图片显示不对时，代替图片显示的文字。
    • `width`：宽度。
    • `height`：高度。
  • 路径：
    • 相对路径：`./`代表当前目录，可以省略。`../`代表上级目录，不能省略。
    • 绝对路径：带有协议或主机名。

示例

代码语言：javascript复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>程序猿</title>
    </head>

    <body>
        <p align="center">
            <img src="img/logo_efonmark_caihui.png" , width="20%"/></p>

        <p align="center">
            <font color="red">欢迎 / welcome</font>
        </p>

        <p align="center">
            <font face="宋体">
            一番码客<br /> 分享区块链、前后端和数据挖掘相关。</font>
        </p>

        <p align="center">
            <font face="Verdana">
            EfonMark<br /> share blockchain,web and data mining. </font></p>
        <p align="center"> <img src="img/click.png" /></p>
    </body>

</html>

列表标签

代码语言：javascript复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表标签</title>
    </head>

    <body>
        <!--
            ol : ordered list
            li : list item
            ul : unordered list
            type : 指定类型
            start : 指定起始值
        -->
        <ol type="1" start="6">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ol>
        <ul type="square">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>

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

    </body>

</html>
  • ol标签：有序列表。
    • `type`属性，取值1（默认值），a，A，i，I。
  • ul标签：无序列表
    • `type`属性，取值disc（默认值，实心圆），circle（空心圆），square（实心方块）。
  • li标签：列表项

a标签

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>a标签</title>
    </head>
    <body>
        <!--
            href : 跳转的地址.不清楚超链接要跳转到那里去的时候,也要写一个占位符
            target : 指定使用什么样的方式打开新的页面
        -->
        <a href="#"></a>
        <a href="http://www.baidu.com" target="_blank">百度</a>
    </body>
</html>
  • 用于定义超链接。
  • 属性：
    • `href`：指定链接地址。
    • `target`：指定如何打开页面。取值_blank，_parent，_self，_top。

示例：友情链接

代码语言：javascript复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>友情链接</title>
    </head>

    <body>

        <ul>
            <li>
                <a href="http://efonfighting.imwork.net">一番码客</a>
            </li>
            <li>
                <a href="http://www.baidu.com">百度</a>
            </li>
            <li>
                <a href="http://www.csdn.net">CSDN</a>
            </li>
        </ul>

    </body>

</html>
  • 快捷创建：&gt;ul&gt;li*3&gt;a tab

示例：回到顶部

代码语言：javascript复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>回到顶部</title>
    </head>

    <body>
        <p id="top">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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <a href="#top">回到顶部</a>

    </body>

</html>
  • id选择器

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
图片标签

0 人点赞