lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      h1 {
        width: 200px;
        height: 100px;
        background: #f00;
      }
      #jump {
        width: 100px;
        height: 100px;
        background: #ff0;
      }
      img {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 
        文档流快捷键 shift + ! 回车
     -->
    <!-- 
        标签：开始标签 结束标签
        1.文档标签： 文档流
        2.按照是否换行去分：块级元素 与 行内元素 
        行内块元素：一行显示 可以设置宽高  
          img input
        3.按照是否闭合区分 
          闭合标签：由开始标签与结束标签组成中间允许嵌套内容
          空标签：由开始标签组成自动闭合
        4.h5标签 （暂时不讲）
      -->
    <!-- 
        块级元素：独占一行
            1.h 标签 标题标签
            h1~h6 逐级递减
            特点：放大/缩小 加粗
            2.p 标签 放置段落文本
            3.br 换行
            4.hr 分割线
            5.div 划分块级区域
            6.ul li 无序列表标签
                属性：type
                square 正方形
                circle 空心圆形
                disc 实心圆 默认样式
            7.ol li 有序列表标签
                属性：type:1 i I a A
                reversed 倒序
                start 起始值
            8.dl dt dd 图文混排列表
              dt 图片
              dd 文字
       -->
       <!-- 
        图片标签 img
        属性：
            1.src:图片的路径
                同级路径 ./
                上级路径 ../
                a.从网上获取的 绝对路径
                b.从本地获取的 相对路径
            2.alt:当图片无法展示时 所显示的替换文字
        -->
        <dl>
          <dt>
            <img src="./images/img01.gif" alt="">
          </dt>
          <dd>这是对圣诞老人的描述信息</dd>
        </dl>
        <img src="./images/img01.gif" alt="圣诞老人">
        <img src="./images/img01.gif" alt="圣诞老人">
        <!-- <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg" alt=""> -->
       <a id="jump" href="">跳转3</a>
       <!-- <a href=""></a> -->
       <!-- <br/> -->
     <div>
        <div>头部</div>
        <div>主体</div>
        <div>尾部</div>
     </div>  
    <div>1111</div>
    <div>222</div>
    <h1>第一天</h1>
    <h2>第一天</h2>
    <h3>第一天</h3>
    <h4>第一天</h4>
    <h5>第一天</h5>
    <h6>第一天</h6>
    <p>
      这是一段熟悉技能这是一段熟悉技能这是一段熟悉技能这是一段熟悉技能<br /><br />
      这是一段熟悉技能这是一段熟悉技能这是一段熟悉技能这是一段熟悉技能<br />
      这是一段熟悉技能这是一段熟悉技能
    </p>
    <hr />
    <hr />
    <p>
      这是一段自我介绍这是一段自我介绍这是一段自我介绍这是一段自我介绍这是一段自我介绍这是一段自我介绍这是一段自我介绍这是一段自我介绍
    </p>
    <ul type="disc">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol type="1" start="51">
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ol>
    <!-- 
        行内元素:在一行内显示
        span 行内元素分块
        b 加粗 单纯加粗
        strong 加粗 语义上的加粗
        i 倾斜 单纯的倾斜
        em 倾斜 语义上的倾斜
        u 下划线 
        s 删除线
        sub 下标
        sup 上标
        跳转 超链接 a 
            属性：href
                1.要跳转的路径
                2.# 回到顶部
                3."" 空字符串 刷新页面
     -->
     <div>
        <a href="#">跳转2</a>
        <a href="https://www.baidu.com">跳转1</a>
        这是一些<u>测试内容1</u>这是一些<s>测试内容2</s>这是一些测试内容<sub>这是一些测试内容3</sub>这是一些测试内容<sup>这是一些测试内容4</sup>这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是
        这是一些<b>测试内容</b>这是<strong>一些测试内容</strong>这是一些<i>测试内容</i>这是一些<em>测试内容这</em>是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容
     </div>
  </body>
</html>