|
|
@@ -0,0 +1,175 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<!-- only -->
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>标签</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ 标签：
|
|
|
+ 1.按是否闭合分类：
|
|
|
+
|
|
|
+ 开始标签：<head> <body> <title>
|
|
|
+
|
|
|
+ 结束标签：</head> </body> </title>
|
|
|
+ 闭合标签:由开始标签和结束标签组成的可以嵌套标签，承接内容的标签；
|
|
|
+ 空标签：由开始标签组成 不承接内容的标签；
|
|
|
+
|
|
|
+ 2.按是否换行分类：
|
|
|
+ a.块级元素：独占一行 ，块级元素可以包含行内元素 可以设置宽高
|
|
|
+ b.行内元素：在一行显示的标签，行内元素不可以包含块级元素 设置宽高不生效
|
|
|
+ c.行内块元素：可以设置宽高 在一行展示 中间有空白间隙
|
|
|
+ 3.HTML文档标签（文档流）
|
|
|
+ 4.H5新标签（移动端标签 暂时不讲）
|
|
|
+
|
|
|
+ 双标签：成对出现的标签
|
|
|
+ 单标签：单独出现的标签
|
|
|
+ -->
|
|
|
+
|
|
|
+ <!--
|
|
|
+ 保存操作 ctrl + s 刷新页面 浏览器及时更新
|
|
|
+ -->
|
|
|
+ <!--
|
|
|
+ 页面检查操作：点击浏览器页面 出现操作框 点击检查 出现元素审查
|
|
|
+ -->
|
|
|
+ <!-- 块级元素
|
|
|
+ div 划分区域
|
|
|
+ h 标题
|
|
|
+ p 段落
|
|
|
+ hr 分割线
|
|
|
+ br 换行
|
|
|
+ ul li 无序列表
|
|
|
+ ol li 有序列表
|
|
|
+ dl dt dd 图文混排列表
|
|
|
+ -->
|
|
|
+
|
|
|
+ <!--
|
|
|
+ div标签：划分区域
|
|
|
+ 特点：独占一行
|
|
|
+ -->
|
|
|
+ <!-- 文章盒子 -->
|
|
|
+ <div>
|
|
|
+ <a href="">跳转3</a>
|
|
|
+ <a href="https://cn.bing.com/search?q=%e6%9c%80%e6%96%b0%e8%96%aa%e9%85%ac%e6%8e%92%e8%a1%8c%e5%87%ba%e7%82%89&efirst=0&ecount=50&filters=tnTID%3a%22DSBOS_1136DEFA5C0441CDBE1D22C0D88B2CF3%22+tnVersion%3a%22701d00abd03f40eaa92705879143676b%22+Segment%3a%22popularnow.carousel%22+tnCol%3a%220%22+tnOrder%3a%225870b959-b536-4e01-9877-31e72cd0b409%22&form=HPNN01">跳转1</a>
|
|
|
+ <a href="#">跳转2</a>
|
|
|
+ <!-- 文章标题盒子 -->
|
|
|
+ <div>
|
|
|
+ <!--h标签： 标题标签
|
|
|
+ h1~h6特点：逐级减小
|
|
|
+ 权重最大的是 h1
|
|
|
+ 权重最小的是 h6
|
|
|
+ 特点： 独占一行
|
|
|
+ -->
|
|
|
+ <h1>第一天</h1>
|
|
|
+ <h2>第一天</h2>
|
|
|
+ <h3>第一天</h3>
|
|
|
+ <h4>第一天</h4>
|
|
|
+ <h5>第一天</h5>
|
|
|
+ <h6>第一天</h6>
|
|
|
+ <!-- 超链接标签:跳转操作
|
|
|
+ a标签：超链接
|
|
|
+ 属性：href
|
|
|
+ 1.要跳转的页面路径
|
|
|
+ 2.# 跳会页面顶部
|
|
|
+ 3."" 空字符串 刷新当点页面
|
|
|
+ -->
|
|
|
+ </div>
|
|
|
+ <!-- 文章内容盒子 -->
|
|
|
+ <div>
|
|
|
+ <!-- 段落 文本标签: p标签
|
|
|
+ 特点： 独占一行
|
|
|
+ -->
|
|
|
+ <!-- 换行标签：br 特点：独占一行 -->
|
|
|
+ <!-- 分割线标签：hr 特点独占一行 -->
|
|
|
+ <!--
|
|
|
+ b 加粗字体 只是UI层面的加粗，不具备HTML语义化
|
|
|
+ strong 加粗字体 不仅是UI层的加粗，具备HTML语义化 语气上的加粗
|
|
|
+ -->
|
|
|
+ <!--
|
|
|
+ i 倾斜 只是UI层面的倾斜，不具备HTML语义化
|
|
|
+ em 倾斜 不仅是UI层的倾斜，具备HTML语义化 强调倾斜
|
|
|
+ -->
|
|
|
+ <!--
|
|
|
+ sup 上标
|
|
|
+ sub 下标
|
|
|
+ u 下划线
|
|
|
+ s 删除线
|
|
|
+ span 定义文本块
|
|
|
+ a 超链接
|
|
|
+ -->
|
|
|
+
|
|
|
+ <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
|
|
|
+ <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
|
|
|
+ <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
|
|
|
+ <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
|
|
|
+ <p>
|
|
|
+ 新的内容新的<span style="background-color: aqua;">内容222</span>新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容
|
|
|
+ </p>
|
|
|
+ <p>这是一段<b>内容</b>222这是一段<strong>内容</strong>这是一段内容这是一段内容这是一段内容
|
|
|
+ <br>这是一段内容这是一段<i>内容</i>333这是一段<em>内容</em>这是一段内容<hr>这是一段内容这是一段内容</p>
|
|
|
+ <hr><hr><hr><hr>
|
|
|
+ <p>1这是一段<sub>内容1</sub>这是一段<sup>内容</sup>这是一段<u>内容2</u>这是一段<s>内容3</s>这是一段内容这是一段内容这是一段内容
|
|
|
+ <hr>这是一段内容这是一段内容这是一段内容这是一段内容</p>
|
|
|
+ <!-- 无序列表
|
|
|
+ ul li标签组成 无序列表
|
|
|
+ 默认样式：实心圆
|
|
|
+ 属性：
|
|
|
+ type: square 实心的正方形
|
|
|
+ circle 空心圆
|
|
|
+ disc 实心圆（默认的）
|
|
|
+ -->
|
|
|
+ <ul type="disc">
|
|
|
+ <li>内容1</li>
|
|
|
+ <li>内容2</li>
|
|
|
+ <li>内容3</li>
|
|
|
+ </ul>
|
|
|
+ <!-- 有序列表
|
|
|
+ ol li 标签组成 有序列表
|
|
|
+ 属性： type: A a i(罗马数字) 1（默认：阿拉伯数字）
|
|
|
+ start 从...开始
|
|
|
+ reversed 倒序
|
|
|
+ -->
|
|
|
+ <ol type="1" reversed>
|
|
|
+ <li>内容</li>
|
|
|
+ <li>内容</li>
|
|
|
+ <li>内容</li>
|
|
|
+ <li>内容</li>
|
|
|
+ <li>内容</li>
|
|
|
+ <li>内容</li>
|
|
|
+ </ol>
|
|
|
+ <!-- 图片文件夹名称：images -->
|
|
|
+ <!-- 图文混排列表
|
|
|
+ dl dt dd
|
|
|
+ dt中放一张图片
|
|
|
+ -->
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <!-- 房子图片 -->
|
|
|
+ <!-- 图片标签：img
|
|
|
+ 行内块元素
|
|
|
+ 属性：
|
|
|
+ src：放置引入的图片地址
|
|
|
+ 地址的获取方法：
|
|
|
+ 1.从网上直接获取 绝对路径
|
|
|
+ 2.本地下载引入 相对路径
|
|
|
+ 同级目录 ./
|
|
|
+ 上级目录 ../
|
|
|
+ alt:当图片无法加载时所展示的替换文字
|
|
|
+ 图片无法加载情况：
|
|
|
+ 1.网络问题
|
|
|
+ 2.图片违禁或侵权
|
|
|
+ -->
|
|
|
+ <img src="../images/R-C.jpg" alt="风景图">
|
|
|
+ <!-- <img src="https://ts1.cn.mm.bing.net/th/id/R-C.df4462fabf18edd07195679a5f8a37e5?rik=FnNvr9jWWjHCVQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50059%2f8720.jpg_wh1200.jpg&ehk=ofb4q76uCls2S07aIlc8%2bab3H5zwrmj%2bhqiZ%2fyw3Ghw%3d&risl=&pid=ImgRaw&r=0" alt=""> -->
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <!-- 文字 -->
|
|
|
+ 这是一段文字
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
e
