lovecoding
/
W0407


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- 
        标签：
            1.html文档标签 => 文档流
            2.按照是否换行区分：
                换行 => 块级元素：独占一行
                    h1-h6、p、ul li、ol li、dl dt dd、div、br、hr
                不换行 => 行内元素：和其他元素在同一行展示 不换行
                b、strong、i、em、sub、sup、u、span、a
                    b  加粗 单纯样式加粗
                 strong 加粗 有语义上的含义
                 i  倾斜 单纯样式倾斜
                 em 倾斜 有语义上的含义
                 u  下划线
                 s  删除线
                 sub 下标
                 sup 上标
                 span 划分行内区域
                 a   超链接 跳转
                 属性：href
                    1.放置跳转的网页路径
                    2.# 回到页面顶部
                    3."" 空字符串是 刷新当前页面
                行内块元素：
                img input
            3.h5新标签(暂时不讲)
            4.按照是否闭合区分:闭合标签和空标签
            闭合标签：由开始标签(<xxx>)与结束标签(</xxx>)组成，中间允许嵌套内容的标签
            空标签：由开始标签组成并自动闭合的标签。

    -->
    <div>
        <!-- 
            img 图片
            src：
                图片路径
                ../ 上一级目录
                ./ 同级目录
                相对路径：本地图片
                绝对路径：网络图片
            alt：图片无法展示时 显示的替换文字
        -->
        <!-- <img src="./images/1.jpg" alt="这是一张风景图">
        <img src="./images/1.jpg" alt="这是一张风景图">
        <img src="./images/1.jpg" alt="这是一张风景图"> -->
        <img src="https://img0.baidu.com/it/u=3591665277,2616537962&fm=253&app=138&f=JPEG?w=800&h=1333" alt="">
        <img src="https://img0.baidu.com/it/u=3591665277,2616537962&fm=253&app=138&f=JPEG?w=800&h=1333" alt="">
        <a href="http://www.baidu.com">你好</a>
        <b
            style="width: 200px;height: 200px;background: #00f;">这是一段文本</b>这是一<strong>段文本这是一段文</strong>本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        <br>
        <!-- <b></b>
        <br> -->
        <i>这是一段文本</i>这是一段<em>文本这是一段文</em>本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        <br>
        这是一段文本<sub>2</sub>这是一段文本<sup>3</sup>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        <br>
        <u>这是一段文</u>本这是一段文 <span style="color: red;">本这是一段</span> 文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
    </div>


    <div>
        区域块
    </div>
    <!-- 分割线 -->
    <hr>
    <hr>
    <hr>
    <hr>
    <!-- 换行 -->
    <br><br><br>
    <!-- 标题 -->
    <h1 style="width: 200px;height: 200px;background: #00f;">你好</h1>
    <h2>你好</h2>
    <h3>你好</h3>
    <h4>你好</h4>
    <h5>你好</h5>
    <h6>你好</h6>
    <!-- p 文本 段落 -->
    <p> 1.今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
    </p>
    <p> 2.今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
    </p>
    <!-- 无序列表 
        type: square  circle desc
    -->
    <ul type="desc">
        <li>哈哈</li>
        <li>哈哈</li>
        <li>哈哈</li>
    </ul>
    <!-- 
        有序列表
        type: I i A a 1
        start 从...开始
        reversed 倒序
    -->
    <ol start="51" reversed>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ol>
    <!-- 图文混排列表 -->
    <dl>
        <dt>图片</dt>
        <dd>文字</dd>
    </dl>

    <a href="">hahh</a>
    <!-- <a href="#">hahh</a> -->
</body>

</html>