html标签（列表标签和表单标签以及表单控件）-小白学习中
html-6
14.列表标签
14.1无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注：
<ul>中只能放<li>
<li>中可以放任何元素，相当于一个容器
14.2有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
注：<ol>中只能放<li>
14.3
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
注：
<dl>定义列表
<dt>定义项目
<dd>描述每一个项目
例如：
<body>
<!--无序列表-->
<h4>你喜欢的菜</h4>
<ul>
<li>鱼香肉丝</li>
<li>锅包肉</li>
<li>宫保鸡丁</li>
<li>过油肉土豆片</li>
</ul>
<!--有序列表-->
<h4>热爱的游戏</h4>
<ol>
<li>和平精英</li>
<li>铁甲雄兵</li>
<li>骑马与砍杀</li>
<li>CS GO</li>
</ol>
<!--自定义列表-->
<dl>
<dt>娱乐</dt>
<dd>qq</dd>
<dd>微信</dd>
<dt>电影</dt>
<dd>快把我哥带走</dd>
<dd>拯救不开心</dd>
</dl>
</body>
你喜欢的菜
- 鱼香肉丝
- 锅包肉
- 宫保鸡丁
- 过油肉土豆片
热爱的游戏
- 和平精英
- 铁甲雄兵
- 骑马与砍杀
- CS GO
-
娱乐
- 微信 电影
- 快把我哥带走
- 拯救不开心
15.表单标签
15.1表单控件
<form> 会把它范围内的表单元素信息提供交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式。 get是从服务器上获取数据， post是用来向服务器上传递数据 |
| name | 名称 | 用来指定表单的名称 |
15.2表单控件
15.2.1 input 输入
<input type="" name="" value="" checked="" maxlength="">
| type | 设置表单的属性 |
| name | 定义input元素的名称 |
| value | 定义input元素的值（可以给按钮定义显示的名称） |
| checked | 规定此input元素首次加载时应当被选中（按钮） |
| maxlength | 规定输入字段中的字符的最大长度 |
type取值：
| 取值 | 说明 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框（要有相同的name） |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩盖 |
| radio | 定义单选按钮（要有相同的name） |
| submit | 定义提交按钮 |
| reset | 定义重置按钮 |
| text | 定义单行的输入字段，用户在其中输入文本，默认宽度为20个字符 |
<label for="man">男</label>
<input type="radio" name="sex" id="man">
注：
当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到
或者选择对应的表单元素上
15.2.3 select表单元素 下拉列表
<select>
<option>选项</option>
……
</select>
15.2.4 textarea 文本域
<textarea row="行数" cols="每行中的字符数">
文本内容
</textarea>
例如：
<form action="demo.php" method="post" name="name">
<!-- text就是一个文本框-->
用户名：<input type="text" name="username" value="请输入用户名"> <br />
<!-- password就是将输入的文本隐藏起来-->
<!-- maxlength限制最大长度-->
密码：<input type="password" name="password" maxlength="16"><br />
<!-- radio为单选框-->
性别：<label for="man">男</label><input type="radio" name="sex" id="man"> <label for="woman">女</label><input type="radio" name="sex" id="woman"><br />
<select>
<option>内蒙古</option>
<option>黑龙江</option>
<option>山东</option>
<option>江苏</option>
</select>
<br />
<!-- checkbox为复选框-->
<!-- checked为页面打开时就被选中了-->
爱好：足球<input type="checkbox" name="hobby"> 篮球<input type="checkbox" name="hobby"> 乒乓球<input type="checkbox" name="hobby" checked> 游泳<input type="checkbox" name="hobby"><br />
<!-- file 用于上传文件 文件域-->
上传文件：<input type="file"><br />
<!-- submit用于提交文件 reset用于重置 value可以给按钮重新命名-->
<input type="submit" value="确定"> <input type="reset" value="再来一次">
<!-- 普通按钮 button-->
<input type="button" value="我是按钮"><br />
</form>