上篇回顾
上一篇博文内容是关于HTML的简介，如何查看网页源代码，以及HTML代码的结构，<head>与<body>部分的内容，如何设置背景颜色及图片，设置字体，图片，链接跳转等。
列表
列表在网页中经常可以看到，主要分为两种，有序列表和无序列表，其实主要区别就是列表前面的内容提示
无序列表
在HTML中，无序列表使用<ul>来定义，使用<li>标签来添加元素，列表可以嵌套使用，对于无序列表，默认使用黑色实心圆圈，可以自行设置type属性来控制
<! Doctype html>
<html>
<head>
<title>列表</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>元素1</li>
<ul type="circle">
<li>元素1.1</li>
<li>元素1.2</li>
<li>元素1.3</li>
</ul>
<li>元素2</li>
<ul type="square">
<li>元素2.1</li>
<li>元素2.2</li>
<li>元素2.3</li>
</ul>
<li>元素3</li>
<li>元素4</li>
<ul type="none">
<li>元素4.1</li>
<li>元素4.2</li>
<li>元素4.3</li>
</ul>
<li>元素5</li>
</ul>
</body>
</html>
有序列表
有序列表使用<ol>来定义，会在元素前面加上元素的顺序，可以用字母，阿拉伯数字，罗马数字来表示，根据自己的爱好自行设置，和无序列表一样，设置type属性就可以了
<! Doctype html>
<html>
<head>
<title>列表</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<ol>
<li>元素1</li>
<ol type="a">
<li>元素1.1</li>
<li>元素1.2</li>
<li>元素1.3</li>
</ol>
<li>元素2</li>
<ol type="I">
<li>元素2.1</li>
<li>元素2.2</li>
<li>元素2.3</li>
</ol>
<li>元素3</li>
<li>元素4</li>
<ol type="1">
<li>元素4.1</li>
<li>元素4.2</li>
<li>元素4.3</li>
</ol>
<li>元素5</li>
</ol>
</body>
</html>
当然也可以自行定义列表，使用<dl>来定义，<dt>为列表名，<dd>为列表项
表格
在HTML中，使用<table>来定义表格，在页面中显示布局的时候使用<tr>定义行，<td>定义列
<! Doctype html>
<html>
<head>
<title>表格</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<table border=1px align="center" cellspacing=0px width=300px height=90px>
<tr>
<td align="center">元素11</td>
<td align="center">元素12</td>
<td align="center">元素13</td>
<td align="center">元素14</td>
</tr>
<tr>
<td align="center">元素21</td>
<td align="center">元素22</td>
<td align="center">元素23</td>
<td align="center">元素24</td>
</tr>
<tr>
<td align="center">元素31</td>
<td align="center">元素32</td>
<td align="center">元素33</td>
<td align="center">元素34</td>
</tr>
</table>
</body>
</html>
同时可以设置colspan属性和rowspan属性来合并表格中的行和列
<! Doctype html>
<html>
<head>
<title>表格</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<table border=1px align="center" cellspacing=0px width=300px height=90px>
<tr>
<td align="center" colspan="2">元素11</td>
<td align="center">元素13</td>
<td align="center">元素14</td>
</tr>
<tr>
<td align="center" rowspan="2">元素21</td>
<td align="center">元素22</td>
<td align="center">元素23</td>
<td align="center">元素24</td>
</tr>
<tr>
<td align="center">元素32</td>
<td align="center" colspan="2">元素33</td>
</tr>
</table>
</body>
</html>
表单域
在HTML中经常可以看到很多可以提交的输入框，这就是表单，在了解表单之前，首先先了解一下输入标签，网页中看到的输入框使用<input>标签来定义的，通过设置该标签的type属性来控制输入的方式，value属性是指用户输入的数据，placeholder是提示用户输入的内容，当选择输入文本时自动消失，name属性是该输入框的名字，比如设置一个用户模拟登录界面
<! Doctype html>
<html>
<head>
<title>登录</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<form method="post">
<div><b>登录界面</b></div>
请输入用户名：<input type="text" name="user" placeholder="这里输入的是用户名" />
<br />
请输入密码：<input type="password" name="password" placeholder="这里输入的是密码">
<br />
<input type="submit" name="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>
放入form表单之后可以提交，可以看到已经有提交过一次，信息显示在网址栏内，在输入内容时并不提交，按重置可以清空输入的数据，也就是将type设置为reset，来达到清空表单的目的。
通过设置表单的action属性，可以控制表单提交之后将要跳转的页面，method属性可以控制表单提交的方法，一般是使用HTTP协议中的访问方法，input的类型有很多种，有单选框，type属性为radio，复选框，type属性为checkbox，在设置的时候需要将name属性设置一致，下拉列表框，type属性设置为select，大文本，也就是类似于QQ留言的那种的大型输入框，可以设置这些输入框的属性来控制输入，required为必填项，readonly为不可修改项，checked为默认选中项，selected为默认下拉选中项。
<! Doctype html>
<html>
<head>
<title>登录</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<form action="https://www.baidu.com" method="post">
<div><b>登录界面</b></div>
请输入用户名：<input type="text" name="user" required="required" placeholder="这里输入的是用户名" />
<br />
请输入密码：<input type="password" name="password" required="required" placeholder="这里输入的是密码" />
<br />
<input type="radio" name="ra1" value="单选项1">单选1</input>
<input type="radio" name="ra1" value="单选项2">单选2</input>
<input type="radio" name="ra1" value="单选项3">单选3</input>
<input type="radio" name="ra1" value="单选项4">单选4</input>
<br />
<input type="checkbox" name="ch1" checked=True value="复选项1">复选1</input>
<input type="checkbox" name="ch1" checked=True value="复选项2">复选2</input>
<input type="checkbox" name="ch1" value="复选项3">复选3</input>
<input type="checkbox" name="ch1" value="复选项4">复选4</input>
<input type="checkbox" name="ch1" value="复选项5">复选5</input>
<br />
<input type="file" placeholder="请选择文件">
<br />
<select>
<option value="下拉选项1" selected=True>选项1</option>
<option value="下拉选项2">选项2</option>
<option value="下拉选项3">选项3</option>
<option value="下拉选项4">选项4</option>
</select>
<br />
<br />
<textarea rows="20" cols="100" placeholder="请在这里输入留言"></textarea>
<br />
<input type="submit" name="submit" value="登录" />
<input type="reset" value="重置"/>
</form>
</body>
</html>
标签分类
在HTML中，一般将标签分为块级标签和内联标签，就是单独占一行的标签称之为块级标签，不会默认换行的称之为内联标签，比如段落标签，表格标签，表单，标线等为块级标签，图片也是块级标签，而例如输入标签，字体标签，链接标签，等称之为内联标签，但是这也并不是绝对的，因为这是由标签中的一个display属性来决定的，所以可以通过修改该属性，来控制标签的布局，该属性的值为inline时，不换行，值为block时，默认换行。
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
