img标签和a标签及列表标签

图形标签: <img>

# src: 要显示图片的路径.

# alt: 图片没有加载成功时的提示.

# title: 鼠标悬浮时的提示信息.

# width: 图片的宽

# height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

超链接标签(锚标签)<a>

# href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

# target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

# name: 定义一个页面的书签.

# 用于跳转 href : #id.(锚)

列表标签:

# <ul>: 无序列表

# <ol>: 有序列表
         # <li>:列表中的每一项.

# <dl>  定义列表

         # <dt> 列表标题
         # <dd> 列表项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="python">
    <meta name="description" content="好好学习,天天向上">

    <meta http-equiv="Refresh" content="60;URL=https://www.baidu.com">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    <title>学习网站</title>
    <link rel="icon" href="https://www.baidu.com/favicon.ico">
    <!--<link rel="stylesheet" href="css.css">-->
    <!--<script src="hello.js"></script>-->
</head>

<body>
    <p style="color: red; background-color: yellowgreen; font-size: 30px; text-align: center; width: 50%">NBA总决赛&#9749;</p> <!--p标签是块级标签-->
    <span style="color: red; background-color: yellowgreen; font-size: 30px">谁会是总冠军&#9819;</span> <!--span和div一样,但span是内联标签-->
    <div style="color: red; background-color: yellowgreen; font-size: 30px; text-align: center; width: 50%">大家拭目以待&#9760;</div> <!--div是块级标签-->
    
    <div>
        <p>div标签内嵌p标签</p>
        <div>
            <span>1</span>
            <span>2</span>
        </div>
    </div>
    <!--块级标签内嵌(不要让块级标签和内联标签并列)-->
    
    2<sup>
        3<sub>2</sub>
    3</sup><br>
    <!--内联标签内嵌内联标签-->

    <img src="gz.png" alt="获取失败" title="优化点" width="1500px" height="800px"><br>
    <!--img标签,src属性是显示图片的路径;alt当图片加载失败时的提示;title鼠标悬浮的提示信息,width宽height高-->

    <a href="https://www.baidu.com" target="_blank">百度</a><br>
    <a href="https://www.baidu.com" target="_blank"><img src="gz.png" alt="获取失败" title="优化点" width="1500px" height="800px"></a><br>
    <!--a超链接标签(锚标签),href要连接的资源路径;target:-blank:在新的窗口打开超链接.框架名称:在指定框架中打开连接内容-->

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
    <!--ul无序列表(unorder list),ul和li要配套使用-->

    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <!--ol有序列表(order list),ol和li要配套使用-->

    <dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dt>第二章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
    </dl>
    <!--dl定义列表,dt列表标题,dd列表项-->
</body>

</html>

 

上一篇:【ASP.NET MVC】jqGrid 增删改查详解


下一篇:php弹窗后跳入另一个页面