继续接上回,HTML快速入门
时代变了,拖更王也回来了,
3.列表的属性
①有序列表的属性
type 指定标识项的类型 取值 1 默认值 数字 a/A i/I 罗马数字 start 指定启示编号的位置 |
②无序列表的属性
type 指定列表标识类型 disc 默认 实心圆 circle 空心圆 square 实心方块 none 无 |
4.列表的嵌套
①列表中嵌套其他元素
ex: ul>li>a |
②列表嵌套列表
被嵌套列表,必须在li中 ex:ul>li>ul>li |
5.定义列表
需要一个名词+对这个名词的解释 <dl> <dt>名词<dt> <dd>对这个名词的解释说明</dd> </dl> |
九.结构标记
1.用于描述整个网页结构,取代div做布局一套标记
为什么要使用结构标记,而不用div 结构标记跟div的作用是一模一样 但是结构标记有语义,方便阅读 使用有语义的标签,可以让页面在被搜索的时候更靠前 |
2.常用的结构标记
1.<header></header> 定义网页的头部或者某个区域的顶部 2.<footer></footer> 定义网页脚部,或者某个区域的底部 3.<nav></nav> 定义网页导航部分 4.<section></section> 定义网页主体内容 5.<aside></aside> 定义网页侧边栏 6.<article></article> 定义与文字相关的内容,比如论坛,回帖,用户评论 |
十.表单(重点+难点*****)
1.作用
1.提供了可视化的输入控件 2.收集用户输入的信息,并提交请求给服务器 form自带收集数据,提交请求的功能 使用ajax,就不需要form |
2.表单的组成
1.前端部分 提供表单控件,与用户交互的可视化控件 2.后端部分 后台接口对提交的数据进行处理 |
3.表单
<form></form> |
①action属性
定义表单提交时发生的动作(接口url) action="url" 如果action没有定义接口,默认提交给当前页面本身 |
②.method属性
定义了表单提交请求的方式(请求的方法) method不写,默认get方法 restful API规范中 1.get 默认值 提交的数据有大小限制,最大为2KB 向服务器要数据的时候,使用get(查) 2.post 提交的数据没有大小限制 要传递给服务器数据的时候使用post,restful要求,只有增加操作的时候,使用post 3.delete 同get,是明文提交 restful要求,删除使用delete方法 4.put 同post,隐式提交,提交的数据在请求主体中 restful要求,修改使用put方法 |
③enctype属性
指定表单数据的编码方式 设置允许将什么样的数据提交给服务器(文本,文件) enctype="" 取值:1.text/plain 允许提交普通字符给服务器 2.multipart/form-data允许提交文件给服务器 3.application/x-www-form-urlencoded 允许提交任意字符给服务器 对于form表单这个值是默认值 |
4.表单控件
在form标签中,能够与用户进行交互的可视化元素
①分类
input 9种,H5新出10种 textarea 多行文本域 select和option 下拉选 其它元素 |
②input元素
属性: type,指定input的类型,如果不写type,默认是文本框 name 为控件定义名称,在form中,input控件不写name 无法提交.name属性的值必须对应后台,获取数据的值
value 真正提交给服务器的值 例外对于按钮,value是按钮上文本 disabled 禁用 不能修改,并且不能提交 无值属性 |
③input元素详解
1.文本框和密码框 文本框 type="text" 密码框 type="password" 属性: maxlength 指定输入的最大长度 readonly 只读,无值属性,只能看不能改,但是可以提交 placeholder 占位提示符,默认显示在控件上的提示文本 |
2.按钮 提交按钮 type="submit" 将表单中的数据,收集整理,发送给服务器 普通按钮 type="button" 没有功能,配合事件调用js代码 重置按钮 type="reset" 将当前表单的内容恢复到初始状态 |
3.单选和复选按钮 单选按钮 type="radio" 必须有name属性,有了name属性才能 提交,name属性为单选按钮分组,有了name属性, 取值还要相同,才会出现单选效果 必须有value值,不然提交的是on 复选按钮 type="checkbox" 必须有name属性分组 name属性,必须用数组,必须有value值 属性 checked 默认选中,无值属性 |
4.隐藏域 想把数据提交给服务器,但是又不想展示给用户看 这种数据,使用隐藏域 type="hidden" 用户看不到,但是可以提交给服务器 |
5.文件选择框(上传文件) type="file" 注意 form的method要使用post方法 form的enctype要使用multipart/form-data 传输文件 属性 multiple 无值属性,同时传输多个文件 但是name值此时要是数组 |
④textarea 多行文本域
理解成一个大文本框 <textarea></textarea> 允许录入多行文本 属性 cols="" rows="" 根据计算机硬件的不同,设置数字不准确 |
⑤下拉选
<select> <option></option> </select> 注意: 1.如果option没写value属性,select的value等于选中option的内容 2.如果option写了value,select的value等于选中option的value 属性 select的属性 name value size 默认为1,1的时候是下拉选 >1,变成滚动选择框 multiple 无值属性,设置多选,需要name使用数组 option 默认选中 selected |
⑥其它元素
1.label 关联文本与表单控件 <label for="关联控件的ID">文本</label> 效果,点击文本 ,被关联的控件也会被点中 |
2.为控件分组 <fieldset></fieldset> 分组 <legend></legend> 分组的标题 写在fieldset中 |