|
|
@@ -3,6 +3,22 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>Document</title>
|
|
|
+ <style>
|
|
|
+ h1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ background: #f00;
|
|
|
+ }
|
|
|
+ #jump {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!--
|
|
|
@@ -11,7 +27,12 @@
|
|
|
<!--
|
|
|
标签：开始标签 结束标签
|
|
|
1.文档标签： 文档流
|
|
|
- 2.按照是否换行去分：块级元素 与 行内元素
|
|
|
+ 2.按照是否换行去分：块级元素 与 行内元素
|
|
|
+ 行内块元素：一行显示 可以设置宽高
|
|
|
+ 3.按照是否闭合区分
|
|
|
+ 闭合标签：由开始标签与结束标签组成中间允许嵌套内容
|
|
|
+ 空标签：由开始标签组成自动闭合
|
|
|
+ 4.h5标签 （暂时不讲）
|
|
|
-->
|
|
|
<!--
|
|
|
块级元素：独占一行
|
|
|
@@ -31,8 +52,32 @@
|
|
|
属性：type:1 i I a A
|
|
|
reversed 倒序
|
|
|
start 起始值
|
|
|
+ 8.dl dt dd 图文混排列表
|
|
|
+ dt 图片
|
|
|
+ dd 文字
|
|
|
-->
|
|
|
-
|
|
|
+ <!--
|
|
|
+ 图片标签 img
|
|
|
+ 属性：
|
|
|
+ 1.src:图片的路径
|
|
|
+ 同级路径 ./
|
|
|
+ 上级路径 ../
|
|
|
+ a.从网上获取的 绝对路径
|
|
|
+ b.从本地获取的 相对路径
|
|
|
+ 2.alt:当图片无法展示时 所显示的替换文字
|
|
|
+ -->
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <img src="./images/img01.gif" alt="">
|
|
|
+ </dt>
|
|
|
+ <dd>这是对圣诞老人的描述信息</dd>
|
|
|
+ </dl>
|
|
|
+ <img src="./images/img01.gif" alt="圣诞老人">
|
|
|
+ <img src="./images/img01.gif" alt="圣诞老人">
|
|
|
+ <!-- <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg" alt=""> -->
|
|
|
+ <a id="jump" href="">跳转3</a>
|
|
|
+ <!-- <a href=""></a> -->
|
|
|
+ <!-- <br/> -->
|
|
|
<div>
|
|
|
<div>头部</div>
|
|
|
<div>主体</div>
|
|
|
@@ -66,5 +111,27 @@
|
|
|
<li>bb</li>
|
|
|
<li>cc</li>
|
|
|
</ol>
|
|
|
+ <!--
|
|
|
+ 行内元素:在一行内显示
|
|
|
+ b 加粗 单纯加粗
|
|
|
+ strong 加粗 语义上的加粗
|
|
|
+ i 倾斜 单纯的倾斜
|
|
|
+ em 倾斜 语义上的倾斜
|
|
|
+ u 下划线
|
|
|
+ s 删除线
|
|
|
+ sub 下标
|
|
|
+ sup 上标
|
|
|
+ 跳转 超链接 a
|
|
|
+ 属性：href
|
|
|
+ 1.要跳转的路径
|
|
|
+ 2.# 回到顶部
|
|
|
+ 3."" 空字符串 刷新页面
|
|
|
+ -->
|
|
|
+ <div>
|
|
|
+ <a href="#">跳转2</a>
|
|
|
+ <a href="https://www.baidu.com">跳转1</a>
|
|
|
+ 这是一些<u>测试内容1</u>这是一些<s>测试内容2</s>这是一些测试内容<sub>这是一些测试内容3</sub>这是一些测试内容<sup>这是一些测试内容4</sup>这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是
|
|
|
+ 这是一些<b>测试内容</b>这是<strong>一些测试内容</strong>这是一些<i>测试内容</i>这是一些<em>测试内容这</em>是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容这是一些测试内容
|
|
|
+ </div>
|
|
|
</body>
|
|
|
</html>
|
e
