一、有序列表
基本结构
<ol>
<li>文本</li>
</ol>
<!--注释-->
1.li里面可以放其他标签，但是ol里面只能放置li
2.数字是自动生成的
3.ol支持两种属性；
type属性：顺序名称，共有五种类型：1,a,A,i,I
start属性：开始位置，取值只能是数字
<body>
<ol type="1" start="1">
<li>把冰箱打开</li>
<li>把大象装进去</li>
<li>把冰箱关上</li>
</ol>
<ol type="I" start="3">
<li>把冰箱打开</li>
<li>把大象装进去</li>
<li>把冰箱关上</li>
</ol>
<ol type="a" start="27">
<li>把冰箱打开</li>
<li>把大象装进去</li>
<li>把冰箱关上</li>
</ol>
</body>效果：
二、无序列表
基本结构
<ul>
<li>文本</li>
</ul>
<!--注释-->
1.li里面可以放其他标签，但是ul里面只能放置li
2.默认的位黑色实心圆点
3.支持属性：
type： disc(黑色实心圆点) circle(黑色空心圆点） square(黑色实心方点) none(取消显示)
<ul >
<li>要开心</li>
<li>要幸福</li>
<li>要健康</li>
</ul>
<ul type="square">
<li>要开心</li>
<li>要幸福</li>
<li>要健康</li>
</ul>效果：
三、自定义列表
基本结构：
<dl>
<dt>图片</dt>
<dd>文字</dd>
</dl>
多用于图文混排，存在默认间距
四.图片标签的路径
基本结构
<img src=" ">
路径写法：
一、同级目录下有三种写法：
- 相对路径：(相对于自己的目标文件位置)
1. 图片文件名
2. ./图片文件名 （./表示当前路径）
- 绝对路径：(指文件在硬盘上真正存在的路径)
3, 绝对路径（不推荐使用，在live server服务器下无法显示图片，在http协议下无法显示图片，在file协议下可用）
二、下级目录下：
1. 文件夹名/图片文件名
2. ./文件夹名/图片文件名
三、不同文件夹下：
../图片文件名
../图片所属文件夹名/图片文件名 【 ../ （返回上级）】
多级返回可以使用类似 ../../(上一级的上一级)
五、超链接标签
功能：能够实现不同页面的跳转
基本结构
<a href="路径" title="信息" target="规定在何处打开文档">
超链接内容
</a>
三个属性：
href: 网址路径或者相对路径
title：鼠标悬停上去之后显示的提示信息
target：规定在何处打开文档
a. target="_self" 默认值
b. target="_blank" 新窗口打开
六、table表格
基本结构
<table><!--创建表格-->
<tr><!--tr表示行-->
<td>1</td><!--td表示单元格-->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
表格属性：
- 宽度 width
- 高度 height
- 边框 border
- 边框颜色 bordercolor
- 背景颜色 bgcolor
- 水平对齐 align="left或right或center"
- cellsapcing="单元格与单元格之间的间距"
- cellpadding="单元格与内容之间的间隙"
<!--注释-->
width 不只支持px,还支持百分比（相对于父元的占比素）
<body>
<table border="1" width="50%" height="500px"
align="center"
bordercolor="red"
bgcolor="pink"
cellspacing="20"
cellpadding="50"><!--创建表格-->
<tr><!--tr表示行-->
<td>1</td><!--td表示单元格-->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>效果
单元格td属性
宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align="left或right或center"
文字垂直对齐 valign="top或middle或bottom"
<!--注释-->
td: 如果一个单元格被设置了宽度，影响的是这一整列的宽度
td: 如果一个单元格被设置了高度，影响的是这一整行的高度
七、表格合并
表格合并列
Colspan="所要合并的单元格的列数"，必须给td
<body>
<table border="1" width="300" height="300">
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>（ps:一定要记得注释掉超出表格部分 ）
效果
表格合并行
Rowspan="所要合并的单元格的行数"，必须给td
<body>
<table border="1" width="300" height="300">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<!-- <td>3</td> -->
<td>4</td>
</tr>
</table>
</body>（ps:一定要记得注释掉超出表格部分 ）
效果
表格知识学好了之后就可以自己学习做一些很简单的小表格啦，可以尝试做一下下列表格
七、表单标签
表单的作用：收集用户信息
基本结构：
<form action="向何处发送表单数据" method="get或者post">
<input ……>
</form>
input标签属性：
1、type属性定义输入框的类型
a) 文本框 type="text" 密码框 type="password"
b) 提交框 type="submit" 等价于 <button type="submit">提交</button>
c) 重置框 type="reset" 清空重置的效果
d) 按钮框 type="reset" 单纯的普通按钮，以后可以加上js自定义效果
2、placeholder属性用来描述简短的提示信息
3、name属性必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器，相当于给用户输入数据起名字
4、value属性给一些标签改变名字
<!--注释-->
简单来说，就是post的安全性要优于get
<body>
<form action="https://www.jd.com/" method="get">
用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写" name="user name">
<br>
密码: <input type="password" placeholder="请输入你的密码" name="user password" >
<br>
<input type="submit" value="登录">
<br>
<button type="submit">登录</button>
<br>
<input type="reset" value="重置">
<br>
<button type="reset">重置</button>
<br>
<input type="button" value="qasda">
<!-- 自定义按钮 -->
</form>
</body>效果：
这一part的学习是断断续续的，希望能继续下去呀，可能会有很多瑕疵，希望可以给出指正！
3454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
