|
|
@@ -0,0 +1,113 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ https://www.w3school.com.cn/
|
|
|
+ 标签：
|
|
|
+ 1.文档标签（文档流）
|
|
|
+ 2.按照是否换行分：
|
|
|
+ 换行：块级元素
|
|
|
+ h标签（标题）
|
|
|
+ h1~h6 逐级递减 字体加粗
|
|
|
+ p 放置文本段落内容
|
|
|
+ div 划分区域
|
|
|
+ br 换行
|
|
|
+ hr 分割线
|
|
|
+ ul li 无序列表
|
|
|
+ 属性：type 分类
|
|
|
+ disc 实心圆(默认)
|
|
|
+ circle 空心圆
|
|
|
+ square 正方形
|
|
|
+ ol li 有序列表
|
|
|
+ 属性：
|
|
|
+ type 分类： 1 A a I i(罗马数字)
|
|
|
+ start 从...开始
|
|
|
+ reversed 倒序
|
|
|
+ dl dt dd 图文混排列表
|
|
|
+ dt 图片
|
|
|
+ dd 文字
|
|
|
+ 不换行
|
|
|
+ 3.按照是否闭合分
|
|
|
+ 4.H5新标签（暂时不讲）
|
|
|
+ -->
|
|
|
+ <h1>你好</h1>
|
|
|
+ <h2>你好</h2>
|
|
|
+ <h3>你好</h3>
|
|
|
+ <h4>你好</h4>
|
|
|
+ <h5>你好</h5>
|
|
|
+ <h6>你好</h6>
|
|
|
+ <p>
|
|
|
+ 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
|
|
|
+ </p>
|
|
|
+ <div style="color: aqua;">
|
|
|
+ <p>
|
|
|
+ 今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一今天星期一
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二今天星期二
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <p style="color: red">
|
|
|
+ 今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三今天星期三
|
|
|
+ </p>
|
|
|
+ <p style="color: red">
|
|
|
+ 今天星期四今天星期四今天星期四今天星期四今天星期四 <hr><hr> 今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四
|
|
|
+ </p>
|
|
|
+ <p style="color: red">
|
|
|
+ 今天星期五今天星期五今天星期五今天星期五今天星期五 <br><br> 今天星期五今天星期五今天星期五今天星期五 <br> 今天星期五今天星期五今天星期五
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <h2>新闻</h2>
|
|
|
+ <ul type="disc">
|
|
|
+ <li>星期一</li>
|
|
|
+ <li>星期二</li>
|
|
|
+ <li>星期三</li>
|
|
|
+ <li>星期四</li>
|
|
|
+ <li>星期五</li>
|
|
|
+ </ul>
|
|
|
+ <ol type="1" start="21" reversed>
|
|
|
+ <li>星期一</li>
|
|
|
+ <li>星期二</li>
|
|
|
+ <li>星期三</li>
|
|
|
+ <li>星期四</li>
|
|
|
+ <li>星期五</li>
|
|
|
+ </ol>
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <!-- 文字 -->
|
|
|
+ 一件衣服
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <!-- 文字 -->
|
|
|
+ 一件衣服
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <!-- 文字 -->
|
|
|
+ 一件衣服
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|
e