目录
列表
一.无序列表
二.有序列表
三.自定义列表
表单
一.表单域
method中get/post的区别
二.表单元素
2.1 input输入表单元素
2.2 select下拉表单元素
2.3 textarea表单元素
列表
列表主要用来布局页面，可以使页表更加自由和方便。可以分为无序列表、有序列表和自定义列表三种，适用于不同的情况。
一.无序列表
顾名思义无序列表指列表内部排列是无序的，不存在优先级的概念。
如图是无序列表的一个案例，各个新闻之间并无顺序
无序列表基本语法格式：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
注：<ul></ul>中只能存放<li></li>标签，但<li></li>中可以存放其他元素
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<h4>无序列表</h4>
<ul>
<li>详解保障性租赁住房惠民政策 姜冉馨/庞伟获得金牌</li>
<li>对病毒溯源政治化说“不” 病毒溯源须全球立体开展</li>
<li>王毅明确中方对中美关系的三条底线</li>
<li> 这两场重磅外交 中国的态度对比很强烈！</li>
</ul>
</body>
</html>结果：
二.有序列表
有序列表内部的列表项排列依据顺序排列。
如图是有序列表的一个案例，小说之间存在排行
小说排行榜
有序列表基本语法格式：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
注：<ol></ol>中只能存放<li></li>标签，但<li></li>中可以存放其他元素
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<h4>有序列表</h4>
<ol>
<li>大奉打更人</li>
<li>夜的命名术</li>
<li>从红月开始</li>
<li>深空彼岸</li>
</ol>
</body>
</html>结果：
三.自定义列表
自定义列表指由开发者自己设计的列表。
如图是自定义列表的一个案例
自定义列表基本语法格式：
<dl>
<dt>名词1</dt>
<dd>名词解释<dd>
<dd>名词解释<dd>
<dt>名词2</dt>
<dd>名词解释<dd>
<dd>名词解释<dd>
...
</dl>
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<h4>自定义列表</h4>
<dl>
<dt>合作伙伴</dt>
<dd>Nvidia Edge</dd>
<dd>英特尔 + 虚幻</dd>
<dd>学术合作伙伴</dd>
<dd>培训合作伙伴</dd>
</dl>
</body>
</html>结果：
表单
表单的目的是为了收集信息，通过由用户自己填写表单获取数据信息。
一个完整的表单通常由表单域、表单元素、提示信息三部分组成。
表单域：一个包含表单元素的表单区域，将所有表单包含进去。
表单元素：也叫表单控件，表单中包含的按钮、文本框之类的，允许用户输入或选择信息。
提示信息：表单中的文字信息，起提示作用的文字。
如图是一个表单的案例
一.表单域
<form>标签用于定义表单域，实现信息的收集与传递。
<form>会把在它范围内的表单元素信息传递给服务器。
语法规范
<form action = "url地址" method= "提交方式" name = "表单域名称">
表单元素
</form>
属性 | 属性值 | 作用 |
action | url地址 | 接受数据的服务器地址 |
method | get/post | 设置表单信息的提交方式 |
name | 名称 | 区分表单域 |
method中get/post的区别
get把表单内的元素，转化成url参数提交，get方式提交表单，参数有限，不能提交大量数据，而且安全性不高
post方式提交，不会使用url传参数，而且数据量几乎没有限制，这样可以提交大量的数据，安全性高
二.表单元素
表单元素是为了方便用户输入信息的存在。
主要可以分为：
1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素
HTML5 增加了如下表单元素：
- <datalist>
- <keygen>
- <output>
2.1 input输入表单元素
<input>标签用于输入信息,通过设置不同的属性值可以进行不同形式输入。<input>type为必须属性，除此之外还有许多常用属性。
语法规范
<input type = "属性值" name="名称" value="默认内容" />
type的部分属性值
属性值 | 描述 |
button | 设置按钮 |
check | 复选框 |
file | 定义输入字段和预览按钮，进行文件上传 |
password | 密码字段，输入信息会被掩盖 |
radio | 单选按钮 |
reset | 重置按钮 |
submit | 提交按钮，将表单信息发送到服务器 |
text | 单行的输入字段，默认长度为20个字符 |
input标签的部分属性
属性 | 属性值 | 描述 |
name | 用户自己定义 | input元素的名称（其中单选框和复选框要求有相同名称） |
value | 用户自己定义 | input元素的值 |
checked | checked | 初试加载显示的数据 |
maxlength | 正整数 | 输入字符最大长度 |
<label>标签
<label>标签并不是表单标签中的，但可以与input标签联用，优化网页。
为input元素定义标注。（可以通过鼠标触及提示信息选中控件）
语法规范
<label for="username">用户名</label>
<input type = "text" id = "username" name = user />
注：label中的for属性值等于input中的id属性值
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="POST">
<!-- 文本框 -->
<label for="username">用户名：</label><input type="text" name="username" value="请输入用户名" id="username"><br />
<!-- 密码框 -->
密码： <input type="password" name="pwd"> <br>
<!-- 单选框 需要加name属性 -->
性别：<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nu"><label for="nu"> 女</label> <br>
<!-- 复选框 -->
爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby">
打游戏 <input type="checkbox" name="hobby"> <br>
<!-- 文件 -->
上传文件：<input type="file" > <br>
<!-- 提交 -->
<input type="submit" value="注册" name="submit">
<!-- 重置按钮 -->
<input type="reset" name="reset">
</form>
</body>
</html>结果：
2.2 select下拉表单元素
下拉表单元素适用于页面有多个选项，为了节约空间而使用。
如图为下拉表单元素案例
语法规范
<select >
<option >选项</option>
<option >选项</option>
<option >选项</option>
...
</select>
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
学历：
<select name="学历" >
<option >专科</option>
<option>本科</option>
<option >研究生</option>
<option >博士生</option>
</select>
</form>
</body>
</html>结果：
2.3 textarea表单元素
textarea用于定义多行文本输入。多用于留言板、评论等。
语法规范
<textarea cols = "" row = "">
</textarea>
cols可以设置一行写多少个字符 row设置有多少行
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
自我评价：<br><textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>结果：
