lovecoding
/
Vip0525


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!-- 
    文档流:shift + ！ 回车
 -->
<!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>
      dl {
        width: 200px;
        height: 400px;
        border: 1px solid #000;
      }
      dl dt {
        width: 200px;
        height: 200px;
      }
      dl dt img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 
        标签：
            1.文档标签：文档流
            2.按照是否换行区分：
                换行：块级元素 设置宽高生效
                不换行:行内元素 设置宽高无效
                行内块元素：可以设置宽高 也可以一行展示
            3.按照是否闭合区分：闭合标签 空标签
            闭合标签：由开始标签和结束标签组成 中间允许嵌套内容的标签
            空标签：由开始标签组成且自动闭合的标签
            4.H5新特性（暂时不讲）
     -->
    <!-- 
        换行：块级元素 独占一行
        1.h标签 h1-h6 逐级递减 放大/缩小 加粗 
        2.p标签 放置段落文本内容
        3.br标签 换行
        4.hr标签 分割线
        5.div 划分区域
        6.ul li 无序列表
            属性：type类型
                circle 空心圆
                square 正方形
                disc 实心圆 默认样式
        7.ol li 有序列表
            属性：type类型: 1 a A i I
                start 起始值
                reversed 倒序
        8.dl dt dd 图文混排列表
            dt 图片 
            dd 文字
        不换行：
          1.b标签 加粗 单纯加粗
          2.strong标签 加粗 强调语义
          3.i标签 倾斜 单纯倾斜
          4.em标签 倾斜 强调语义
          5.u标签 下划线
          6.s标签 删除线
          7.sub标签 下标
          8.sup标签 上标
          9.span标签 划分区域
          10.a标签 跳转 超链接
              属性：href
              a.放置跳转的网址路径
              b.# 跳回顶部
              c."" 空字符串 刷新页面
        3.行内块元素
        input 输入框
        图片标签
          img
            属性：
            1.src:放置图片路径
              同级路径 ./ 上级路径 ../
              a.从网上获取的路径  绝对路径
              b.从本地获取的路径  相对路径
            2.alt：当图片无法展示时  所显示的替换文字
      -->
    <div>
      <img src="../images/img01.gif" alt="圣诞老人"/>
      <img src="../images/img01.gif" alt="圣诞老人" style="width: 400px;height: 400px;">
      <img src="../images/img01.gif" alt="圣诞老人">
      <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0" alt="">
      <a href="https://www.baidu.com">跳转1</a>
      <span style="width: 300px;height: 300px;background: #ff0;">哈哈哈</span>
      <b>哒哒哒</b>
      <p>操作文字操作<span style="color: #f00;">文字操作文字</span>操作文字操作文字操作文字操作文字操作文字操作文字操作文字</p>
      <p style="width: 300px;height: 300px;background: #ff0;">这是一<u>段文字这是</u>一段文字<s>这是一段文</s>字这是一段文字<sub>3</sub>这是一段文字<sup>2</sup>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
      <p>这是<b>一段文字</b>这是<strong>一段文字</strong>这是<i>一段文字1</i>这是<em>一段文字2</em>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
      <a href="#">跳转2</a>
      <a href="">跳转3</a>
      <h1>111</h1>
      <h2>222</h2>
      <h3>333</h3>
      <h4>444</h4>
      <h5>555</h5>
      <h6>666</h6>
      <dl>
        <dt>
          <img src="../images/img01.gif" alt="">
        </dt>
        <dd>
          <p>圣诞老人图</p>
        </dd>
      </dl>
    </div>
    <p>
      我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容<br />
      我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容<br />
      我是一段内容我是一段内容
    </p>
    <p>
      我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
    </p>
    <hr />
    <hr />
    <hr />
    <ul type="disc">
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <ol type="1"  reversed>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ol>
  </body>
</html>