|
|
@@ -0,0 +1,61 @@
|
|
|
+<!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>
|
|
|
+ div {
|
|
|
+ width: 500px;
|
|
|
+ height: 1500px;
|
|
|
+ /* color: #fff; */
|
|
|
+ /* background: #00f; */
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 标签：
|
|
|
+ 1.html文档标签=>文档流
|
|
|
+ 2.按照是否换行区分：
|
|
|
+ a.换行标签 => 块级元素
|
|
|
+ div 区分块，一般页面排版需要先画整体的div盒子 独占一行
|
|
|
+ h标签 h1~h6 逐级递减 放大加粗字体 独占一行
|
|
|
+ p 放置段落文本
|
|
|
+ br 换行
|
|
|
+ hr 分割线
|
|
|
+ 无序列表 ul li组成
|
|
|
+ 属性 type: disc 实心圆（默认样式）; circle 空心圆 ；square 正方形
|
|
|
+ 有序列表 ol li 组成
|
|
|
+ 属性 type: 1 i I A a ; start 从...开始； reversed 倒序
|
|
|
+ -->
|
|
|
+ <div>
|
|
|
+ <h1>今天天气真好</h1>
|
|
|
+ <h2>今天天气真好</h2>
|
|
|
+ <h3>今天天气真好</h3>
|
|
|
+ <h4>今天天气真好</h4>
|
|
|
+ <h5>今天天气真好</h5>
|
|
|
+ <h6>今天天气真好</h6>
|
|
|
+ <p>这是一段文字这是一段文字这是一段文字<br>
|
|
|
+ 这是一段文字这是一段文字这是一段文字<br>
|
|
|
+ 这是一段文字这是一段文字这是一段文字
|
|
|
+ </p>
|
|
|
+ <p>这是一段内容这是一段内容这是一段内容这是一段内容<hr>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <ul type="disc">
|
|
|
+ <li>内容一</li>
|
|
|
+ <li>内容二</li>
|
|
|
+ <li>内容三</li>
|
|
|
+ </ul>
|
|
|
+ <ol type="1" start="1" reversed>
|
|
|
+ <li>内容一</li>
|
|
|
+ <li>内容二</li>
|
|
|
+ <li>内容三</li>
|
|
|
+ <li>内容一</li>
|
|
|
+ <li>内容二</li>
|
|
|
+ <li>内容三</li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e