本人所使用浏览器为chrome，使用编辑器为vscode。
目录
列表
使用列表标签可以使相关内容以一种整齐划一的方式排列显示，所以通常用以在页面上展示数据。根据列表项排列方式的不同，可以将列表分为：有序列表和无序列表。下面对此两种列表进行逐一的讲解。
有序列表ol
有序列表语法与示例
用数字或字母等可以表示顺序的符号来排列列表项的列表，称为有序列表。基本语法如下；
<ol>
<li>列表项一</li>
<li>列表项二</li>
...
</ol>此处再举一个简单的示例以及展示效果图；
<h3>看完文章要做的事</h3>
<ol>
<li>点赞</li>
<li>收藏</li>
<li>评论</li>
</ol>
有序列表属性type与start
| 属性 | 说明 |
| type | 默认情况下列表属性值为阿拉伯数字，可以通过该属性的设置修改列表项前的标号。 |
| start | 用于设置列表项序号开始标号的起点。 |
type属性：
type属性的值有五种：
- 1 表示标号为阿拉伯数字
- a 表示标号为英文小写
- A 表示标号为英文大写
- i 表示标号为小写罗马数字
- I 表示标号为大写罗马数字
示例：
<h3>看完文章要做的事</h3>
<ol type="A">
<li>点赞</li>
<li>收藏</li>
<li>评论</li>
</ol>效果图(此处只展示英文单个属性的展示，其余值效果大致一样，自己可以动手试试)：
start属性示例
<ol start="5">
<li>点赞</li>
<li>收藏</li>
<li>评论</li>
</ol>效果图：
无序列表ul
无序列表语法与示例
项目列表的列表标号使用无次序含义的符号来排列列表项，默认列表标号是实心圆点。基本语法如下；
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>此处添加一个简单的示例：
<h3>重要的事情说三遍</h3>
<ul>
<li>看完记得点赞</li>
<li>看完记得点赞</li>
<li>看完记得点赞</li>
</ul>效果图：
无序列表属性type
| 属性 | 描述 | 属性值及其说说明 | |
| type | 设置项目列表的列表标号标识符 | disc | 列表标号为实心圆点(默认属性值) |
| circle | 列表标号为空心圆点 | ||
| square | 列表标号为实心小方块 | ||
对三种不同属性进行逐一展示：
<h3>重要的事情说三遍</h3>
<ul type="disc">
<li>看完记得点赞</li>
</ul>
<ul type="circle">
<li>看完记得点赞</li>
</ul>
<ul type="square">
<li>看完记得点赞</li>
</ul>效果图：
元素属性
根据标签不同的属性和效果分为三种不同的元素类型，分别为；block块级元素、inline行内元素和inline-block行内块元素。
block块级元素
块级元素具有以下特点：
- 独占一行
- 不设置宽度样式会自动填满父元素的宽度
- 和相邻的块级元素依次垂直排列
- 可以设置元素宽高和内外边距
| div | p | h1~h6 | ul | ol | dt |
| dd | (html5新增) | section | header | footer | nav等 |
示例：
<div>这是一个div标签</div>
<p>这是一个p标签</p>
<h1>这是一个h1标签</h1>效果图：
此处使用给div标签设置了背景颜色，用于验证以上块级元素第2条属性。
inline行内元素
行内元素具有以下特点：
- 不会独占一行，且相邻元素会依次从左到右排列在一行
- 不可以设置宽度和高度
- 可以设置内边距和左右方向的外边距，但不能设置上下方向的外边距
- 行内元素的高度由元素高度决定，宽度由内容的长度控制
| span | a | em | strong等 |
示例：
<span>这是一个span标签</span>
<a href="https://baidu.com">这是一个链接向百度的标签</a>
<strong>这是一个strong标签</strong>效果图：
inline-block行内块属性
行内块元素可以理解为行内元素和块级元素的结合体，同时拥有二者的一些特性；
- 相邻元素依次从左到右排列在同一行，当排列不下时才会换行
- 可以设置宽度和高度
- 可以设置四个方向的内外边距
| img | input |
示例：
<img src="./image/green girl.jpg" alt="">
<input type="text">效果图：
图片尺寸过大，一行内显示不完。input属性隔行显示。
有问题欢迎在评论区指出！