1. 列表
-
列表的使用
让数据有条理的显示, 在数据之前添加标识
但是现在的页面布局, 经常会使用到无序列表 -
列表的组成
-
有序列表
<ol> <li></li> ... </ol>
- 属性:
type: 设置列表标识的类型
取值: 1 默认值 / a A 字母 / i I 罗马数字
start: 设置标识项的起始值
- 属性:
-
无序列表
<ul> <li></li> ... </ul>
- 属性:
type: 设置列表项标识类型
取值: disc 实心圆 / circle 空心圆 / square 方形 / none 无
ul 在项目中使用非常频繁, 常用于一组相似的内容进行布局和排版
- 属性:
-
-
列表的嵌套 [所有的嵌套内容必须写在 li 中]
- 在列表中嵌套其他元素
- 列表嵌套列表
- 在列表中嵌套其他元素
-
定义列表 [对一个名词进行解释说明时使用的列表,h5新标签]
<dl> <dt>要解释的名词</dt> <dd>对名词的说明内容</dd> </dl>
-
结构标记
-
作用
用于网页布局, h5 新出了一批结构标记, 代替 div 布局
这些结构标记与 div 的作用一幕一样, 只是增加了可读性 -
常用的结构标记
< header > 定义网页的头部, 或者某个区域的头部
< footer > 定义网页的底部, 或者某一区域的底部
< nav > 定义网页导航
< section > 定义网页的主题内容
< aside > 定义侧边栏
< article > 定义文字相关的内容, ex: 论坛回帖, 用户评论
-
2. 表单(重点****)
-
作用
- 提供可视化的输入控件
- 收集用户输入的信息, 并提交请求给服务器
总节:
form 自带提交请求数据的功能
ajax 提交请求, 需要自己去收集数据
使用用 ajax 就不使用 form
-
form 的组成
- 前端: 提供表单空件, 与用户交互的可视化空件
- 后端: 后台的接口对提交的数据进行处理
-
form 表单的使用
-
语法
<form action="接口 url" method="提交方法"></form>
-
form 的属性
action
定义表单提交时发送的动作(向那个 url 发送请求)如果 action 不写, 或者 action 没有值, 默认把请求发给本页
method [定义表单的提交方式]get(默认值)
特点
提交的内容会显示到地址栏
get 提交的数据, 有大小限制, 最大 2kb
使用时机: 向服务器要数据时使用
post
特点
饮食提交, 提交的内容不会显示到地址栏
post 提交没有大小写限制
使用时机: 要传递数据给服务器时使用
其他方式 – 使用 form 表单目前不许使用 delete, put, option 等方法
delete put option — ajax 使用方法 -
enctype
指定表单数据的编码方式
允许将什么样的数据提交给服务器取值:
- text_plain 允许提交普通字符给服务器
- multipart/form-data 允许提交文件给服务器
- application/x-www-form-urlencoded 允许提交任意字符给服务器(文件不能提交)
-
-
表单空件, 在 form 表单中, 能够与用户进行交互的可视化空件
-
分类
input标签 基础 9 种, h5新标签 10 种
textarea 多行文本域
select 和 option 下拉选择框
其他元素 -
input 元素
<input type="值" >
属性:
- type 指定 input 元素的类型
- name 为空件定义名称, 把名称提供给服务器端使用
如果 form 表单想提交数据必须写 name 属性 - value 空件的值, 就时传递给服务器的值
例外, 在 button 中使用的时候, value 是按钮上的文本 - disabled 禁用, 不能修改, 也不可提交(无值属性, 在使用时可以不写值)
-
input 详解
- 文本框和密码框
文本框: type=“text” input 默认就是文本框
密码框: type=“password”属性:
maxlength 设置输入的最大长度
readonly 只读(无值属性)只是不能修改, 但是它可以提交
placeholder 占位提示符, 默认显示在输入框内的提示文本 -
按钮
type=“submit” 将表单中的数据, 收集整理并发送给服务器
type=“reset” 将当前表单恢复到初始化状态
type=“button” 无任何功能, 配合事件, 调用 JS 代码
附加知识点
< button > 替代了 type=“submit” -
单选/复选按钮 [name属性除了作为控件名称以外还作为控件分组]
单选按钮 type=“radio” 必须有 value 才能正确的传递值
复选按钮 type=“checkbox” 必须 有 value 才能正确传值checked 无值属性, 默认选择为当前设置
-
隐藏域
type=“hidden”
想把数据交给服务器, 但是不想展示给用户看
这种数据就放在隐藏中
隐藏域, 用户看不到, 但是又可以提交 -
文件选择框(上传文件时使用)
type=“file” name=“pic”
注意, 使用文件选择框需要保证 form 的属性- method=“POST”
- enctype=“multipart/form-data”
属性: multile 多重, 无值属性
-
多行文本域(大的文本框)
<textarea></textarea>
允许录入多行文本
属性 cols rows 根据计算机硬件的不同有不同的显示, 不准确
-
下拉选择框
<select name="city"> <option value="lc">聊城</option> <option value="zb">淄博</option> <option value="zjk">张家口</option> <option value="tj">天津</option> </select>
注意: 如果 option 没有 value 属性, 那么提交的 select的value就是 option 的内容, 如果 option 有 value 那么 select 的 value 就是选中的 option 的 value
属性:
size=“4” size > 1 变为滚动选择框
multiple 滚动选择框时可以多选 -
其他元素
- label 元素
替代 form 中的 span
文本和表单控件的关联
<input type="radio" name="gender" value="m" id="r3" > <label for="r3">男</label>
- 为控件分组
< fieldset > 控件分组
< leged > 分组的标题
- label 元素
-
3. 浮动框架
在 一个 html 中引入其他 html 文本
<iframe></iframe>
<!--
src: 引入网页的路径
width
height
frameborder: 框架的边框
scrolling: 设置滚动条 yes 或 no
-->
<iframe width="100%" height="400px" src="./01_ex.html"
frameborder="2px" scrolling="no"></iframe>
4. HTML5 新表单元素
-
邮箱
< input type=“email” >
提交时验证填写的邮箱格式是否正确
正确的标准, 有 @ 符号, 并@符号前后有内容 -
搜索类型
< input type=“search” >
自带快速清除的 ❌ -
URL 类型
< input type=“url” >
验证以 http:// 开头 -
电话号码
< input type=“tel” >
移动设备使用时会弹出虚拟键盘 -
数字类型
< input type=“number” >
属性
max 最大值
min 最小值
step 步长 -
范围类型
< input type=“range” >
属性
max / min / step -
颜色类型
< input type=“color” >
-
日期类型
< input type=“date” >
< input type=“datetime” >
< input type=“month” >
< input type=“datetime-local” >
< input type=“week” >