一些基本html标签的使用案例

<!--按!+tab或html:5+tab会自动生成文档结构-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动端开发设置-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--1.div:用来布局的,没有具体含义。层-->
    <div>
        abc
        <div>dbe</div>
    </div>

    <!--2.hx:标题,从1级到6级,1级标题最大,6级最小,会自动加粗,有默认字号-->
    <h1>前端课程内容</h1>
    <h2>Java开发</h2>
    <h6>大前端开发</h6>

    <!--3.p:表示段落。相当于一个回车。-->

    <p>根据国家卫健委最新数据显示,全国除湖北以外地区每日新增的新冠肺炎确诊病例,
        已连续多天呈下降态势,经过艰苦努力,疫情形势出现积极变化,防控工作取得积极成效。然而,
        爬坡过坎之际,还远未到喘口气、歇一歇的时候。我们必须坚持底线思维,把困难想得再充分些,
        把形势估计得再严峻些,把措施定得再周密些,坚决打赢疫情防控阻击战。</p>

    <p>根据国家卫健委最新数据显示,全国除湖北以外地区每日新增的新冠肺炎确诊病例,</p>
    已连续多天呈下降态势,经过艰苦努力,疫情形势出现积极变化,防控工作取得积极成效。
    然而,爬坡过坎之际,还远未到喘口气、歇一歇的时候。我们必须坚持底线思维,
    把困难想得再充分些,把形势估计得再严峻些,把措施定得再周密些,
    坚决打赢疫情防控阻击战。

    <!-- 4.br:生成一个换行符。单标签-->
    <p>根据国家卫健委最新数据显示,全国除湖北以外地区每日新增的新冠肺炎确诊病例,<br />
        已连续多天呈下降态势,经过艰苦努力,疫情形势出现积极变化,防控工作取得积极成效。然而,<br />
        爬坡过坎之际,还远未到喘口气、歇一歇的时候。我们必须坚持底线思维,把困难想得再充分些,<br />
        把形势估计得再严峻些,把措施定得再周密些,坚决打赢疫情防控阻击战。</p>
    <!--5.hr:生成一条水平线,主要起装饰作用。单标签-->
    <hr />
    <hr width="80%" align="center" color="red" height="2px" />

    <!--6.a:实现链接跳转。target:_blank/_self/_parent/_top-->
    <a href="http://baidu.com" title="百度">百度</a>
    <a href="01 HTML文档结构.html" target="_blank">文档结构</a>
    <a href="01 HTML文档结构.html" target="_self">文档结构</a>

    <!--7.img:用来加载外部图片、图像。src:用来设定加载的图片或图像的路径,alt:当图像加载不成功时,将显示其内容,否则将不会显示。-->
    <img src="https://img.alicdn.com/imgextra/i4/785200401/TB2BB3HbeuSBuNjSsplXXbe8pXa_!!785200401-0-beehive-scenes.jpg_250x250xz.jpg" title="test" alt="商品" />
    <img src="http://imgs.alicdn.com/imgextra/i4/785200401/TB2BB3HbeuSBuNjSsplXXbe8pXa_!!785200401-0-beehive-scenes.jpg_250x250xz.jpg" alt="商品" />

    <!-- 8.span:作用与div一样,都是用来布局的,不同的是div会单独占一行,而span不会;span用于行内布局。-->
    <div>div1</div>
    <div>div2</div>

    <span>span1</span>
    <span>span2</span>

    <!--9.ul/ol:列表,前者是无序列表,后者是有序列表,它们的列表内容都用的是li标签。-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <!--复制的快捷键:Ctrl+D-->
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
    <!--注释的快捷键:Ctrl+Shift+/-->
    <!-- 注意:浏览器不会解析注释内容的 -->
    <!--
       ejfds
       dfdfd

       -->
    <br><br><br><br><br>
</body>
</html>

  本案例来自于网络。

posted @ 2020-09-15 22:53  风曳  阅读(181)  评论(0编辑  收藏  举报