HTML大总结（四）小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。【详细+超基础】前端之旅软件工程专业学

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

【详细+超基础】前端之旅

软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Node.js、Vue、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。

11.列表标签

列表容器里面装载着结构，样式一致的文字或图表的一种形式叫列表。列表最大的特点就是整齐、整洁、有序，跟表格类似，但是它可组合自由度会更高。一般网站的底部链接部分就是用列表标签制作。

无序列表：<ul>
有序列表：<ol>
自定义列表：<dl>

标签名	定义	说明
`<ul></ul>`	无序列表	里面只能包含li，没有顺序，li里面可以包含任何标签。
`<ol></ol>`	有序列表	里面只能包含li，有顺序。
`<dl></dl>`	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签。

  <ul>
         <ul>hahaha</ul>
         <ul>hahaha</ul>
     </ul>
     <ol>
         <ul>xixixi</ul>
         <ul>xixixi</ul>
     </ol>
     <dl>
         <dt>关注我们</dt>
         <dd>新浪微博</dd>
         <dd>联系我们</dd>
     </dl>

代码效果：

12.表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息这3部分组成，表单目的是为了收集用户信息。

如图世纪佳缘网站中注册界面中就存在表单，该表单目的是为了收集用户信息。

表单域

表单域是一个包含表单元素的区域

<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

 <form action="url地址" method="提交方式" name="表单域的名称">    
 </form>

GET 和 POST 的区别（后面学 ajax 后台交互的时候用得到）

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

表单控件（表单元素）

表单元素三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素

input输入表单元素

input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),type属性的属性值及描述如下：

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清楚表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
name 是表单元素的名字，要求单选框和复选框要有相同的name值。
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素。

1、文本框与密码框

type 属性设置为 text 是文本框
type 属性设置为 password 是密码框

<body>
    <form>
        用户名：<input type="text"> <br/> 
        密码：<input type="password">
    </form>
</body>

2、单选框和复选框

type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name 是表单元素的名字，要求单选框和复选框要有相同的name值

<form>
        用户名：<input type="text"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        性别：男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
</form>

3、name和value属性

name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单。

<form>
        用户名：<input type="text" value="请输入用户名"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
        性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox" name="habby" value="吃饭">  睡觉<input type="checkbox" name="habby" value="睡觉">   打游戏<input type="checkbox" name="habby" value="打游戏"> 
</form>

4、checked和maxlength

单选按钮和复选框可以设置checked 属性
当页面打开时候就可以默认选中这个按钮
单选框只能给其中一个加checked，复选框可以多加

性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">

5、submit和reset

type 属性设置为submit：提交按钮会把表单数据发送到服务器
``type` 属性设置为reset：重置按钮会清除表单中的所有数据

6、button和文件域

type 属性设置为button：是一个按钮
type 属性设置为file：是一个文件域，可以上传文件

<input type="button" value="获取短信验证码"> <br>
    <!-- 文件域：上传文件使用的 -->
    上传头像：<input type="file">

7、label

label标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验

label标签的 for属性应当与相关元素的id 属性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />

select下拉表单元素

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。

<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>

textarea文本域元素

用于定义多行文本输入的控件

<textarea>
    文本内容
</textarea>

cols = “每行中的字符数”， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小