lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        标签：
            <x>:开始标签

            </x>:结束标签
            1.文档标签 => 文档流
            2.按照是否换行区分
                a.换行标签 独占一行 块级元素 宽高生效
                    h(h1-h6) 逐级递减 放大/缩小 加粗
                    p 放置段落文本
                    br 换行
                    hr 换行标签
                    div 划分区域
                    ul li 组成 无序列表
                        属性：type类型
                        circle 空心圆 square正方形  disc实心圆（默认）
                    ol li 组成 有序列表
                        属性：type类型
                        i I a A 1
                        start 从...开始
                        reversed 倒序
                    dl dt dd 组成 图文混排列表
                    dt 放置图片
                    dd 放置文字
                b.不换行标签 在一行显示 行内元素 宽高不生效
                    em 倾斜 语义上的
                    i  倾斜 形式上的
                    strong 加粗 语义上的
                    b  加粗 形式上的
                    u 下划线
                    s 删除线
                    sub 下标
                    sup 上标
                    span 划分区域
                    a 跳转 超链接
                    href:
                    1.放置要跳转的路径
                    2.# 跳回顶部
                    3."" 刷新页面
            3.按照是否闭合区分:
                闭合(双)：由开始标签与结束标签组成，中间允许嵌套内容
                空（单）：由开始标签组成，并且自动闭合的标签
            4.H5新特性标签（暂时不讲）
    -->
    <div style="color: #f00">
        <a href="">你好3</a>
        <!-- 
            锚点：
         跳转到指定位置
         在a标签中:
         href属性中 #xxx
         在指定位置的标签上：
         id="xxx"       
        -->
        <a href="#child">你好4</a>
      <h1 style="width: 200px;height: 200px;background: #ff0;">你好</h1>
      <h2 style="width: 200px;height: 200px;background: #ff0;">你好</h2>
      <h3>你好</h3>
      <h4>你好</h4>
      <h5>你好</h5>
      <h6>你好</h6>
      <p>
        我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫
      </p>

      哈哈哈哈哈哈哈
    </div>
    111111111111111

    <!-- <p></p> -->
    <p style="color: #00f">
      <em>明天星期</em>一明天<i>星期一</i>明天星期一明天星期一明天星期一<br />
      <b>明天星期</b>一明天<strong>星期一</strong>明天星期一明天星期一明天星期一<br />
      <u  style="width: 200px;height: 200px;background: #ff0;">明天星期2</u>一明天<s>星期一</s>明天星期一明天星期一明天星期一<br />
      明天 <sub>2</sub>一明天<sup>1</sup>明天星期一明天星期一
    </p>
    <hr />
    <hr />
    <p style="color: plum">
      明天<span style="color: red;">星期一</span>明天<span style="color: blue;">星期一</span>明天<span style="color: aqua;">星期一</span>明天<span style="color: purple;">星期一</span>明天<span style="color: orange;">星期一</span>111<br>
      明天星期一明天星期一明天星期一明天星期一明天星期一<br />
      明天星期一明天星期一明天星期一明天星期一明天星期一<br />
      明天星期一明天星期一明天星期一明天星期一
    </p>
    <a href="https://www.baidu.com">你好</a>
    <a href="https://detail.tmall.com/item.htm?spm=a2113w.29464347.9033939260.2.39ec70e1SZO8zF&id=765762068121&utparam=%7B%22ald_res%22%3A%2234816083%22%2C%22ald_solution%22%3A%22commonHorseRace%22%2C%22ald_biz%22%3A443%2C%22utcP%22%3A%2215_161%22%2C%22ump_item_price%22%3A%226.47%22%2C%22traceId%22%3A%222150426317293915515217292edec3%22%2C%22ald_st%22%3A%221729391551605%22%2C%22sourceTypeKey%22%3A%2234_promotionVenue%22%2C%22item_price%22%3A%228.08%22%2C%22ump_invoke%22%3A%222%22%2C%22t_s%22%3A%221729391552584%22%2C%22sku_id%22%3A%225437662487562%22%2C%22price_stage%22%3A%220%22%7D&xxc=promotionVenue&skuId=5437662487562&priceTId=2150426317293915515217292edec3">你好1</a>
    <a href="#">你好2</a>
    <ul type="disc">
        <li id="child">小孩</li>
        <li>小花</li>
        <li>妹妹</li>
    </ul>
    <ul>
        <li>小孩</li>
        <li>小花</li>
        <li>妹妹</li>
    </ul>
    <ol type="1" start="56" reversed>
        <li>小孩</li>
        <li>小花</li>
        <li>妹妹</li>
    </ol>
    <ol>
        <li>小孩</li>
        <li>小花</li>
        <li>妹妹</li>
    </ol>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <dl>
        <dt>放置图片</dt>
        <dd>描述图片的文字</dd>
    </dl>
    <!-- 
        行内块元素：宽高可生效 在一行显示
        img 图片标签 
        属性：
        同级路径 ./
        上级路径 ../
        src:放置图片路径
        1.从网上获取的 绝对路径
        2.从本地获取的 相对路径
        alt:当图片无法展示时 所显示的替换文字
        图片为什么无法展示？
        1.图片侵权 违禁
        2.网速过慢
    -->
        <img style="width: 200px;height: 200px;" src="../images/1.jpg" alt="月亮">
    <img style="width: 200px;height: 200px;" src="https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg" alt="">
  </body>
</html>