lovecoding
/
VIP30


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<!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>
           <!-- 
            HTML语义化：
            1.方便开发 这个位置的内容含义
            2.方便搜索引擎查找

            行内元素:在一行展示 且无法设置宽高
            b 加粗 单纯的样式加粗
            strong 加粗 具备HTML语义化
            i 倾斜 单纯的样式倾斜
            em 倾斜 具备HTML语义化
            u 下划线
            s 删除线
            sub 下标
            sup 上标
            span 划分区域
            a 跳转 超链接
            href: 
                a.放置跳转的网页路径
                b. # 跳到页面顶部
                c."" 空字符串 刷新页面
            -->

           <p>一段<b>文字</b>一段文字<strong>一段</strong>文字一段<sub>文字</sub>一段文字一<sup>段文</sup>字一段文字</p>
           <p>一段<i>文字</i>一段文字<em>一段</em>文字一段文字一段文字一段文字一段文字</p>
           <p>一段<u>文字</u>一段文字<s>一段</s>文字一段文字<br>一段文字一段文字一段文字</p>
           <p>一段<span style="color: aqua;">文字一</span>段文字一段文字一段文字一段文字一段文字一段文字</p>
           <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
           <a href="#">一个超链接</a>
           <a href="">一个超链接2</a>
           <a href="https://www.bilibili.com/video/av85759008/?from=search&seid=14802132682576891182">我想跳转页面</a>
           <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>