<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
html标签有三种
1.块级元素:独占一行,可以设宽高,默认浏览器宽度
2.行内元素:在一行内显示,不能设置宽高,宽高根据内容去填充
3.行内块元素:在一行内显示,可以设置宽高
-->
<!--<br>换行标签
<hr>分割线
特殊字符对照表:http://tool.chinaz.com/Tools/HtmlChar.aspx
-->
<body>
<!--盒子标签<div> 可定义文档的分区 divsion的缩写,可以把文档分割为独立的不同的部分-->
<!--id属性和class属性可以看成是给div区域起个名字,id是唯一的,一个页面不能有两个重复的id
class可以设置同样的属性值,并且可以设置多个
-->
<div class="p1">
<p style="height: 200px" id="p1">顶部</p>
</div>
<div class="image">
<!--1.可以设置宽高 2.在一行内显示 它叫行内块标签-->
<!--
1.src设置的图片地址可以是本地的地址也可以是一个网络地址
2.图片的格式可以是png、jpg、gif
3.alt属性的值会在图片加载失败时显示在网页上
4.可以为图片设置宽度width和高度heigth,不设置就显示图片默认的宽度和高度
5.与行内元素在一行显示
6.span标签可以单独摘出某块内容,结合css设置相应的样式
-->
<img src="https://hcdn1.luffycity.com/static/frontend/activity/pcbanner_1548913612.0168402.jpeg" alt="新春活动" style="width: 200px;height: 200px">
<img src="https://hcdn1.luffycity.com/static/frontend/index/%E9%AA%91%E5%A3%AB_1547463199.1045399.png" alt="骑士计划" style="width: 200px;height: 200px">
</div>
<!--ul无序列表:unordered lists,type可以定义无序列表的样式
disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识
-->
<div id="list">
<ul type="none">
<li>我的账户 ></li>
<li>我的订单 ></li>
<li>我的优惠券 ></li>
<li>我的收藏 ></li>
<li>退出 ></li>
</ul>
<!--ol有序列表: ordered lists,type可以定义有序列表的样式
1:数字
a:小写字母
A:大写字母
i:小写罗马字符
I:大写罗马字符
起始编号默认为1
-->
<ol type="I">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
<div class="p1">
<p>底部</p>
</div>
</body>
</html>