|
|
@@ -0,0 +1,132 @@
|
|
|
+<!--
|
|
|
+ 文档流:shift + ！ 回车
|
|
|
+ -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <!-- 适用于移动端 -->
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ dl {
|
|
|
+ width: 200px;
|
|
|
+ height: 400px;
|
|
|
+ border: 1px solid #000;
|
|
|
+ }
|
|
|
+ dl dt {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ dl dt img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ 标签：
|
|
|
+ 1.文档标签：文档流
|
|
|
+ 2.按照是否换行区分：
|
|
|
+ 换行：块级元素 设置宽高生效
|
|
|
+ 不换行:行内元素 设置宽高无效
|
|
|
+ 行内块元素：可以设置宽高 也可以一行展示
|
|
|
+ 3.按照是否闭合区分：
|
|
|
+ 4.H5新特性（暂时不讲）
|
|
|
+ -->
|
|
|
+ <!--
|
|
|
+ 换行：块级元素 独占一行
|
|
|
+ 1.h标签 h1-h6 逐级递减 放大/缩小 加粗
|
|
|
+ 2.p标签 放置段落文本内容
|
|
|
+ 3.br标签 换行
|
|
|
+ 4.hr标签 分割线
|
|
|
+ 5.div 划分区域
|
|
|
+ 6.ul li 无序列表
|
|
|
+ 属性：type类型
|
|
|
+ circle 空心圆
|
|
|
+ square 正方形
|
|
|
+ disc 实心圆 默认样式
|
|
|
+ 7.ol li 有序列表
|
|
|
+ 属性：type类型: 1 a A i I
|
|
|
+ start 起始值
|
|
|
+ reversed 倒序
|
|
|
+ 8.dl dt dd 图文混排列表
|
|
|
+ dt 图片
|
|
|
+ dd 文字
|
|
|
+ 不换行：
|
|
|
+ 1.b标签 加粗 单纯加粗
|
|
|
+ 2.strong标签 加粗 强调语义
|
|
|
+ 3.i标签 倾斜 单纯倾斜
|
|
|
+ 4.em标签 倾斜 强调语义
|
|
|
+ 5.u标签 下划线
|
|
|
+ 6.s标签 删除线
|
|
|
+ 7.sub标签 下标
|
|
|
+ 8.sup标签 上标
|
|
|
+ 9.span标签 划分区域
|
|
|
+ 10.a标签 跳转 超链接
|
|
|
+ 属性：href
|
|
|
+ a.放置跳转的网址路径
|
|
|
+ b.# 跳回顶部
|
|
|
+ c."" 空字符串 刷新页面
|
|
|
+ 3.行内块元素
|
|
|
+ 图片标签
|
|
|
+ img
|
|
|
+ 属性：
|
|
|
+ 1.src:放置图片路径
|
|
|
+ 同级路径 ./ 上级路径 ../
|
|
|
+ a.从网上获取的路径 绝对路径
|
|
|
+ b.从本地获取的路径 相对路径
|
|
|
+ 2.alt：当图片无法展示时 所显示的替换文字
|
|
|
+ -->
|
|
|
+ <div>
|
|
|
+ <img src="../images/img01.gif" alt="圣诞老人">
|
|
|
+ <img src="../images/img01.gif" alt="圣诞老人" style="width: 400px;height: 400px;">
|
|
|
+ <img src="../images/img01.gif" alt="圣诞老人">
|
|
|
+ <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0" alt="">
|
|
|
+ <a href="https://www.baidu.com">跳转1</a>
|
|
|
+ <span style="width: 300px;height: 300px;background: #ff0;">哈哈哈</span>
|
|
|
+ <b>哒哒哒</b>
|
|
|
+ <p>操作文字操作<span style="color: #f00;">文字操作文字</span>操作文字操作文字操作文字操作文字操作文字操作文字操作文字</p>
|
|
|
+ <p style="width: 300px;height: 300px;background: #ff0;">这是一<u>段文字这是</u>一段文字<s>这是一段文</s>字这是一段文字<sub>3</sub>这是一段文字<sup>2</sup>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
|
|
|
+ <p>这是<b>一段文字</b>这是<strong>一段文字</strong>这是<i>一段文字1</i>这是<em>一段文字2</em>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
|
|
|
+ <a href="#">跳转2</a>
|
|
|
+ <a href="">跳转3</a>
|
|
|
+ <h1>111</h1>
|
|
|
+ <h2>222</h2>
|
|
|
+ <h3>333</h3>
|
|
|
+ <h4>444</h4>
|
|
|
+ <h5>555</h5>
|
|
|
+ <h6>666</h6>
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <img src="../images/img01.gif" alt="">
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <p>圣诞老人图</p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容<br />
|
|
|
+ 我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容<br />
|
|
|
+ 我是一段内容我是一段内容
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
|
|
|
+ </p>
|
|
|
+ <hr />
|
|
|
+ <hr />
|
|
|
+ <hr />
|
|
|
+ <ul type="disc">
|
|
|
+ <li>aaa</li>
|
|
|
+ <li>aaa</li>
|
|
|
+ <li>aaa</li>
|
|
|
+ </ul>
|
|
|
+ <ol type="1" reversed>
|
|
|
+ <li>aaa</li>
|
|
|
+ <li>aaa</li>
|
|
|
+ <li>aaa</li>
|
|
|
+ </ol>
|
|
|
+ </body>
|
|
|
+</html>
|
e
