HTML学习总结-标签（二）

最新推荐文章于 2024-01-17 19:37:27 发布

TynMhxx

最新推荐文章于 2024-01-17 19:37:27 发布

阅读量186

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/TynMhxx/article/details/87194658

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    html标签有三种
    1.块级元素：独占一行，可以设宽高，默认浏览器宽度
    2.行内元素：在一行内显示，不能设置宽高，宽高根据内容去填充
    3.行内块元素：在一行内显示，可以设置宽高
-->
<!--<br>换行标签
    <hr>分割线
    特殊字符对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx
-->
<body>
<!--盒子标签<div> 可定义文档的分区 divsion的缩写，可以把文档分割为独立的不同的部分-->
<!--id属性和class属性可以看成是给div区域起个名字，id是唯一的，一个页面不能有两个重复的id
    class可以设置同样的属性值，并且可以设置多个
-->
    <div class="p1">
        <p style="height: 200px" id="p1">顶部</p>
    </div>
    <div class="image">
        <!--1.可以设置宽高 2.在一行内显示    它叫行内块标签-->
        <!--
            1.src设置的图片地址可以是本地的地址也可以是一个网络地址
            2.图片的格式可以是png、jpg、gif
            3.alt属性的值会在图片加载失败时显示在网页上
            4.可以为图片设置宽度width和高度heigth，不设置就显示图片默认的宽度和高度
            5.与行内元素在一行显示
            6.span标签可以单独摘出某块内容，结合css设置相应的样式
        -->
        <img src="https://hcdn1.luffycity.com/static/frontend/activity/pcbanner_1548913612.0168402.jpeg" alt="新春活动" style="width: 200px;height: 200px">
        <img src="https://hcdn1.luffycity.com/static/frontend/index/%E9%AA%91%E5%A3%AB_1547463199.1045399.png" alt="骑士计划" style="width: 200px;height: 200px">
    </div>
    <!--ul无序列表：unordered lists，type可以定义无序列表的样式
        disc:实心圆（默认值）
        circle:空心圆
        square:实心矩形
        none:不显示标识
    -->
    <div id="list">
        <ul type="none">
            <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>我的优惠券&nbsp;&gt;</li>
            <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
            <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>
        </ul>
        <!--ol有序列表: ordered lists，type可以定义有序列表的样式
            1：数字
            a：小写字母
            A：大写字母
            i：小写罗马字符
            I：大写罗马字符
            起始编号默认为1
        -->
        <ol type="I">
            <li>我的账户</li>
            <li>我的订单</li>
            <li>我的优惠券</li>
            <li>我的收藏</li>
            <li>退出</li>
        </ol>
    </div>
    <div class="p1">
        <p>底部</p>
    </div>
</body>
</html>

TynMhxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结-标签（二）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;!-- html标签有三种 1.块级元素：
复制链接

扫一扫