lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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>
    <!-- 
    双标签：由开始标签与结束标签组成，中间允许放置元素或者嵌套
    单标签：由开始标签组成并且可以自动闭合的标签
        https://www.w3school.com.cn/
        标签：
            1.文档标签（文档流）
            2.按照是否换行分：
                换行：块级元素
                宽高可修改 换行展示
                    h标签（标题）
                        h1~h6 逐级递减 字体加粗
                    p 放置文本段落内容
                    div 划分区域
                    br 换行
                    hr 分割线
                    ul li 无序列表
                        属性：type 分类
                            disc 实心圆(默认)
                            circle 空心圆
                            square 正方形
                    ol li 有序列表
                        属性：
                            type 分类： 1 A a  I i(罗马数字)
                            start 从...开始
                            reversed 倒序
                    dl dt dd 图文混排列表
                        dt 图片
                        dd 文字
                不换行：行内元素
                宽高不可修改 在一行展示
                    b 加粗 单纯的加粗
                    strong 加粗 语义上的加粗
                    i 倾斜 单纯的倾斜
                    em 倾斜  语义上的倾斜
                    u 下划线
                    sub 下标
                    sup 上标
                    span 划分区域
                    a 跳转  超链接
                        href:
                         1.跳转的网址
                         2.# 回到顶部
                         3."" 空字符串 刷新页面
                行内块元素：
                  具备块元素及行内元素的特点 但是行内块元素中间有间隔
                  即可以一行展示 也可设置宽高

                img 图片
                属性：
                src:图片的地址
                    1.从网上获取的 绝对路径
                    2.从本地获取的 相对路径
                        同级 ./
                        上级 ../
                alt:当图片无法展示时 所显示的替换文字
                图片什么情况无法展示？
                网速过慢
                图片侵权或违禁
            3.按照是否闭合分：
                
                闭合标签:由开始标签与结束标签组成，中间允许放置元素或者嵌套
                空标签:由开始标签组成并且可以自动闭合(可选)的标签
            4.H5新标签（暂时不讲）
    -->
            <!-- <img src="" alt=""> -->
            <!-- <hr> -->
    <img  style="width: 100px;height: 100px;" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.VC96IQ53w1EhF5yR442lGAHaNK?rs=1&pid=ImgDetMain" alt="">
    <img  style="width: 100px;height: 100px;" src="../images/1.png" alt="这个是雪山的图片">
    <h1 style="width: 100px;height: 100px;background-color: #ff0;">你好</h1>
    <h2>你好</h2>
    <h3>你好</h3>
    <h4>你好</h4>
    <h5>你好</h5>
    <h6>你好</h6>
    <p>
      今天 <i>天气</i> <em> 真好</em> <u> 今天</u> 5<sub>2</sub> 真好6 <sup>3</sup> 真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
    </p>
    <div style="color: aqua;">
      <p>
        今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一
      </p>
      <p>
        今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二
      </p>
    </div>
    <p style="color: red">
      今天 <b  style="width: 100px;height: 100px;background-color: #ff0;">星期三</b> 今天 <strong>星期三</strong> 今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三
    </p>
    <p style="color: red">
      <span style="color: blue;">今天星期四</span>今天星期四<span style="color: blueviolet;">今天星期四</span><b>今天星期四</b>今天星期四 <hr><hr> 今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四
    </p>
    <p style="color: red">
      <br/>
      今天星期五<a href="http://www.baidu.com">今天星期五</a>今天星期五 <a href="#">今天</a> 星期五今天星期五 <br><br> 今天星期五<a href="">今天</a> 星期五今天星期五今天星期五 <br> 今天星期五今天星期五今天星期五
    </p>
    <div>
        <h2>新闻</h2>
        <ul type="disc">
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
        </ul>
        <ol type="1" start="21"  reversed>
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
        </ol>
        <dl>
            <dt>
                <!-- 图片 -->
                 <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
            </dt>
            <dd>
                <!-- 文字 -->
                 一件衣服
            </dd>
        </dl>
        <dl>
            <dt>
                <!-- 图片 -->
                 <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
            </dt>
            <dd>
                <!-- 文字 -->
                 一件衣服
            </dd>
        </dl>
        <dl>
            <dt>
                <!-- 图片 -->
                 <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
            </dt>
            <dd>
                <!-- 文字 -->
                 一件衣服
            </dd>
        </dl>

    </div>
  </body>
</html>