11月3日学习内容整理：HTML的列表标签，表单标签

补充：

》》》p标签虽然是块级标签，但不能嵌套其它块级标签，这是个例外

》》》table标签中的标准格式还有<thead>存放表格中标题类的内容    <tbody>存放表格中的实际内容

 

一、列表标签：都是块级标签

1、无序列表：

<ul>  type属性  type="disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)"

　　<li></li>   存放列表中的每一项

</ul>

2、有序列表

<ol>  会把列表中的每一项按照1234这样的顺序显示

　　<li></li>   存放列表中的每一项

</ol>

3、定义列表

<dl>

　　<dt></dt>      标题

　　<dd></dd>    标题下对应的每一项

</dl>

          

 

二、表单标签form：专门用来和服务端交互的标签，并且必须放在<form></form>中

1、form标签属性：action="服务端地址"     就是设置往哪发

老师博客：：：

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

      表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label标签。

表单属性

     action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

     method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

 

2、input标签：内联标签

（1）type属性

》》》type="text"   纯文本

》》》type="password"   密码，网页显示成密文形式

》》》type="submit"   提交按钮，用户使用这个按钮浏览器就会把输入的内容传给服务端

》》》type="checkbox"  复选框

》》》type="radio"    单选框

》》》type="file"    上传文件，会渲染成按钮的效果，form表单需要加上属性enctype="multipart/form-data" 而且请求方式必须是post

》》》type="reset"   把输入的内容都重置，会渲染成按钮的效果

》》》type="button"   按钮效果，只不过这个按钮没有实际的作用，主要用来和css和javascript结合用，和div和span标签作用类似

（2）name属性：

name属性就是设置浏览器传给服务端时的键，所以是必须写的，对于每个类型都是一样的，但要注意以下几点：

》》》复选框的所有name应该写成一样的，用统一的键传给服务端

》》》单选框只有把name属性设置成一样的才能实现单选的效果

（3）value属性

value属性就是浏览器传给服务端的值，也就是键对应的值组成一个一个的键值对，不同类型的用法也不一样，注意以下：

》》》对于纯文本和密码类型，value就是默认值，就是点开登录或者注册等页面默认显示的内容

》》》对提交按钮和重置按钮和button类型，value就是设置按钮中的文字以什么内容显示，若不设置就是浏览器默认的格式

》》》对于复选框和单选框类型，value就是往服务端传时显示的值，意思就是用户点击的内容按照value设置的内容进行传递，因为我们不能用户输入什么就传什么，这样设置value就是让服务端能够识别用户选择的内容，注意浏览器传多个值的话必须用列表（这是对客户端来说，跟html没什么关系）

（4）placeholder属性

》》》placeholder="账户名"

》》》就是用来提示用户该输入什么内容

（5）需要知道的几点

》》》浏览器会把用户输入的内容整合成键值对发给服务端，所以必须要设置name属性作为键，结构是｛"键" ：["value值"]｝

》》》若不写name属性，浏览器整合不了键值对，服务端接受的就是空白，就等于没有发送成功，服务端的数据是不完整的

》》》对某些类型来说，不设置vlue属性的话浏览器会把用户输入的内容自动赋值给value属性，并且会覆盖掉默认值      

 

 3、textarea标签：多行文本框，就是可以输入很多的内容，内联标签

（1）属性：

》》》cols    指定宽度（就是列数）

》》》rows   指定高度（就是行数）

》》》name  设置往服务端发送的键

    

 

4、select标签：用来实现下拉菜单那中效果的，就是让用户自己选择

（1）格式：

<form>

　　<select>    通常跟option标签一起用

　　　　<option>内容</option>   设置在下拉菜单中的内容

　　</select>

</form>

（2）属性：

》》》select的name属性：指定传给服务端的键

》》》option的value属性：设置传给服务端的值

》》》select的multiple属性：multiple="multiple"  设置为可以多选

》》》select的size属性：设置显示的选项个数

》》》select的title属性：设置鼠标悬浮时显示的内容

                      

 

5、label标签：用来和别的标签做关联

<lable  for="别的标签设置的id值"></label>

 

 

注意：id属性是所有标签都有的，但是id值不能重复，是唯一的