lovecoding
/
VIP30


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
            标签
        </title>
    </head>
    <body>
        <!-- 
            标签：
                1.按照是否换行区分:块级元素 行内元素 行内块元素
                2.按照是否闭合区分：闭合标签 空标签
                3.文档流标签
                4.H5的新特性标签（暂时不讲）
         -->
         <!-- 
            闭合标签：由开始标签和结束标签组成的允许承接嵌套内容的
            双标签
            空标签: 由开始标签组成并且自动闭合的标签
            单标签
          -->
          <!-- 
            块级元素:独占一行 可以控制宽高
            划分区域 div
            放置段落文本 p
            分割线 hr
            换行 br
            标题标签 h:h1~h6 逐级递减
            无序列表 ul li 
            默认样式：黑色的实心圆
            属性:type 
                a.circle 空心圆
                b.square 实心的正方形
                c.disc   实心圆
            有序列表 ol li
            属性：type:1 i I A a
                 start 从...开始
                 reversed 倒序

            图文混排列表 dl dt dd
            dt 放置图片
            dd 放置文字
           -->
           <div>划分区域</div><div>划分区域</div><div>划分区域</div><div>划分区域</div><div>划分区域</div>
           <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
           <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
           <p>一段文字一段文字一段文字一段文字<br>一段文字一段文字一段文字</p>
           <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
           <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
           <hr>
           <hr>
           <hr>
           <h1>标题</h1>
           <h2>标题</h2>
           <h3>标题</h3>
           <h4>标题</h4>
           <h5>标题</h5>
           <h6>标题</h6>
           <ul type="disc">
            <li>我的</li>
            <li>你的</li>
            <li>他的</li>
            <li>我的</li>
            <li>你的</li>
            <li>他的</li>
           </ul>
           <ul>
            <li>我的</li>
            <li>你的</li>
            <li>他的</li>
           </ul>
           <ol type="1" start="51" reversed>
            <li>我的</li>
            <li>你的</li>
            <li>他的</li>
           </ol>
           <!-- 
            图片引入
            img 行内块元素：可以一行显示 可以控制宽高
            属性: src:放置图片路径
                同级路径 ./
                上级路径 ../
                    1.从网上获取图片 绝对路径
                    2.本地获取的图片 相对路径
                  alt：当图片无法显示时所展示的替换文字
                  图片无法展示的情况：
                  1.网速过慢
                  2.图片违禁或者侵权
            -->
            <!-- <b>21212</b>
            <b>21212</b>
            <b>21212</b> -->
            <!-- 图文混排列表 -->
            <dl>
                <!-- dt放置图片 -->
                <dt>
                    <img src="./images/1.jpg" alt="">
                </dt>
                <!-- dd放置文字 -->
                <dd>这是一个桃子</dd>
            </dl>
            <img src="./images/1.jpg" alt="桃子">
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?pid=ImgDet&rs=1" alt="">
    </body>
</html>