HTML03之html列表标签、表单以及一些H5中的新增标签

HTML基本知识

1.列表标签 （块级元素）

• ul：无序列表

li：ul的子标签

• ol：有序列表 （默认序号从1开始）

私有属性：

• reversed：反转 （布尔属性）
• start：number

子标签：

• li

• dl：标题列表

dt：标题标签

dd：设置列表项

2.form表单

当客户端与服务器端发生数据交互时使用的标签

私有属性：

• action：设置表单提交地址
• target：设置页面打开方式
• method：设置表单提交的方式 （浏览器用来提交表单的HTTP方法，常用的get/post。）
  • post：对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。
    • 1.将数据封装在请求体中
    • 2.安全性较高
    • 3.可以提交重量级数据
  • get（默认）：对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔
    • 1. 会将我们的数据拼接在浏览器的地址栏上
    • 2.安全性较低
    • 3.只能提交轻量级数据
  • delete、put...
• enctype：设置表单提交的编码格式

子组件：

• input：用于接收来自用户的数据

私有属性：

• type：用于设定控件类型
  • text：单行文本框 （默认）
  • password：密码框，输入的内容将会被遮挡
  • submit：提交按钮
  • reset：重置按钮
  • image：图片按钮
    • src：
    • alt
    • width
    • height
  • radio：单选框（必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。）
    • checked：布尔值，默认选中，只针对单选框或多选框
    • value：你选中项的属性值，你想让值传给谁就传给谁
  • checkbox：多选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中
  • button：普通按钮
  • hidden：隐藏域，该控件不显示在页面中，但是其值会被提交
  • file：文件上传按钮（文件按钮，该控件用于选中文件系统中的某个文件）
• value：用于控件初始化，可选
  • 1.写在按钮上，修改按钮为其他名称
  • 2.写在输入框上，代表输入框的默认值
  • 3.写在单选框或多选框内，代表交换数据的value
• name：设置前后台交互数据的key值（属性名） （用于设定控件名和提交数据的属性名）
• size：设置文本框的宽度（当前控件的初始宽度，这个宽度以像素为单位。除非控件类型为text、password，这时宽度是整数值，表示字符的数目，默认为20）
• maxlength：文本框的最大输入字符长度
  • 适用于控件类型为text、password
• readonly：只读（布尔值属性，只能设置只给文本框）
• disabled：禁用组件（布尔值属性，禁用组件的值也不能被提交）
  • 可以使用在任何一个组件中

H5中新增：

• autofocus：当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型
• placeholder：对用户的输入进行提示，常用于搜索框，不要出现回车换行。
• pattern：取值为正则表达式，用于表单验证。

• label：关联文件和组件（用于表示某一表单控件的标题）

  • for：与为设定标题的表单控件的ID值一致

• fieldset：用于在一个web表单中对多个控件和标签进行分组

  • legend：设置区域标题 （fieldset的标题由<legend>标签提供）

• button：按钮

• type：
  • submit
  • resset
  • button
    • 如果button写在form标签内，type默认为submit；
    • 如果button写在form标签外，type默认为button
• name：按钮名称

• select：下拉框或列表

私有属性：

• size：设置每次展示的项数（行数）
  • 当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示。
• multiple：布尔属性，是否允许多选
• disabled：禁用组件
• name：

子组件：

• option：用于表示选项，常包含在<select>、<optgroup>
  • disabled：禁用
  • selected：默认选中项
  • value：定义控件的初始值。提交表单时，初始值会被提交给服务器
• optgroup：用于表示包含option的选项组，常包含在<select>中
  • 分组option
    • label属性：设置分组标题（表示选项组的名称）
    • disabled：禁用
• textarea：多行文本输入框，没有value属性，其值被包含在标签内
  • cols：定义文本框的列数
  • rows：定义文本框的行数
  • wrap：表示是否自动换行
    • off：不自动换行
    • hard： 当在表单中提交时，textarea 中的文本不换行。默认值。
    • soft：
      • 当在表单中提交时，textarea 中的文本换行（包含换行符）。
      • 当使用 "hard" 时，必须规定 cols 属性。
  • disabled
  • required：带有必填文本区域的表单：
    • <form action="demo_form.asp"> <textarea name="comment" required></textarea> <input type="submit"></form>
  • readonly：表示该控件只读，其值依然会被提交
  • name：用于指定该控件的名字，会随着其值一同被提交到后台

H5中新增标签

• progress：表示任务的完成情况，常用于进度条

• max：定义进度元素所要求的任务的工作量，默认值为1
• value：定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

• meter：元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占总投票人数的比例等

• value：在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
• min：指定规定范围时允许使用的最小值，默认为0
• max：指定规定范围时允许使用的最大值，默认为1
• low：规定范围的下限值必须小于或等于high属性的值
• high：规定范围的上限值（表示较高危险的意思）
• optimum：最佳值，最优值
  • 如果optium<low,value越低越好
    • value<low，是绿色
    • low<=value<=high，是黄色
    • value>high，是红色
  • 如果low<=value<=high，或者没有optium，value在中间最好
    • low<=value<=high，是绿色
  • 如果optium>high，value越高越好
    • value<low，是红色
    • low<=value<=high，是黄色
    • value>high，是绿色

• datalist：表示其他控件可用的值，其值通过作为datalist的子元素存在

• 与select的option的对比
  • 如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的value，select那边显示的是option的元素内容。
  • 数据提交都提交的是option的value值
  • datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容