-
表单标签 form
-
<form action="#" method="get"></form>
-
作用: 用于将客户端浏览器的数据提交给服务器
-
常用的属性
-
action: 用来指定数据提交的路径 # 表示本页面
-
method: 提交的方式
-
-
两种提交方式
-
GET:数据会出现在地址栏的后面以?分隔,?前面是地址,后面是参数 如果是多个参数,参数之间使用&分隔
-
POST: 提交的参数不会显示在地址栏上,相对更加安全。
-
2.表单中的控件
-
input2.select3.textarea
-
-
input标签
-
type属性
-
text 文本框 password 密码框,输入不可见 radio 单选按钮 checkbox 复选框 多选框 date html5属性 有的浏览器不支持 file 上传文件 image 图形提交按钮 点击就提交表单 submit 提交 reset 重置(初始化),注意 不等于清空 hidden隐藏域 页面上看不到效果,不想让用户看的数据一般放在隐藏域
-
type属性(H5,了解)
-
button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
-
-
color 定义拾色器。
-
date 定义日期字段(带有 calendar 控件)
-
datetime 定义日期字段(带有 calendar 和 time 控件)
-
datetime-local 定义日期字段(带有 calendar 和 time 控件)
-
month 定义日期字段的月(带有 calendar 控件)
-
week 定义日期字段的周(带有 calendar 控件)
-
time 定义日期字段的时、分、秒(带有 time 控件)
-
email 定义用于 e-mail 地址的文本字段
-
number 定义带有 spinner 控件的数字字段
-
range 定义带有 slider 控件的数字字段。
-
search 定义用于搜索的文本字段。
-
tel 定义用于电话号码的文本字段。
-
url 定义用于 URL 的文本字段。
-
其他属性
-
name 提交key
-
需要提交数据的组件必须加上name属性
-
特殊用法: 在radio中除了表示提交的key以外 还表示 一组标签(互斥)
-
特殊用法: 在checkbox中也表示一组标签
-
value 提交的值 key=value
-
如果文本框中有 使用文本框的值 如果没有.则使用默认值
-
-
特殊用途 radio 中表示提交值 不可见
-
特殊用途 checkbox 中表示提交值 不可见
-
-
checked 单选或者复选的默认选中状态
-
标准写法: checked="checked"
-
特殊写法: checked="" 或者 checked
-
-
了解:
-
size 尺寸 默认20
-
maxlength 最大输入长度
-
readonly 只读 支持畸特殊写法 只能看 不能改 数据会提交
-
disabled 不可用 支持特殊写法 只能看 不能改 数据不会提交
-
-
-
-
select标签 : 下拉框
-
name 属性: 提交的key
-
option 子标签:选项
-
value 表示提交的值
-
selected="selected" 默认选中
-
-
-
了解属性
-
multiple 多选
-
size属性 显示的个数
-
-
-
textarea标签: 文本域
-
name 属性: 提交的key
-
value值: 在标签体内添加即可
-
属性 : cols="40" rows="40"
-
举例代码:
<form action="fristhtml.html" method="post"> 手机号吗:<input type="text" name="phone"/><br /> 创建密码:<input type="password" name="pwd"/><br /> <!-- 描述:实现默认选中的属性 cheched="checked" --> 性别:<input type="radio" name="sex1" value="nv" checked="checked"/>女<input type="radio" name="sex1" value="nan"/>男<br /> 爱好:<input type="checkbox" name="love" value="y"/> 羽毛球 <input type="checkbox" name="love" value="p"/>乒乓球 <input type="checkbox" name="love" value="lq"/>篮球<br /> 文件:<input type="file" /><br /> 生日:<select name="brith"> <option value="0">请选择</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> </select><br /> 自我介绍: <textarea cols="100" rows="10" name="tex"></textarea><br /> 隐藏项:<input type="hidden" name="hid"/> <!-- 作者:offline 时间:2018-07-03 描述:提交按钮 --> <input type="submit" value="注册"/> <br /> <!--<input type="image" src="img/t.jpg"/> 使用点击图片提交--> <!-- 作者:offline 时间:2018-07-03 描述:重置 --> <input type="reset" value="重置注册"/> <input type="button" value="普通按钮" /> </form>
2. CSS选择器
-
CSS概述
-
CSS:Cascading Style Sheet 层叠样式表,专门用于网页的美化
-
CSS的好处
-
功能上更强 比HTML美化的功能更加强大,可以实现HTML不能实现的功能。如:给H2加颜色
-
降低耦合度 分工更加明确,CSS专门用于美化,HTML专门用于结构搭建
-
-
编写规范
-
大括号: 所有的样式都写在大括号内部
-
样式名: 全部字母小写,如果多个单词使用-分隔
-
样式值: 所有样式名样式值是固定的,名字与值之间使用冒号
-
样式结尾: 每个样式使用分号结尾
-
-
-
css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起 ○ <div style="background-color: red; color: green;"> (2)使用html的一个标签实现<style>标签,写在head里面 ○ <style type="text/css"> § css代码; ○ </style> ○ <style type="text/css"> § div{ background-color: blue; color: red; } ○ </style> (3)在style标签里面 使用语句(某些浏览器不起作用) ○ @import url(css文件的路径) (4)使用头标签 link,引入外部css文件 ○ 第一步 创建css文件 <link rel="stylesheet" type="text/css" href="css文件的路径"/>
-
样式优先级
-
行内样式的优先级最高
-
以标签为中心 离标签越近 优先级越高 -> 就近原则
-
-
-
CSS的基本选择器
-
作用:选择器用来辅助我们从页面上获得标签的
-
格式选择器{
样式
}
-
-
需要使用内部样式或者外部样式 来控制选择器
-
三种基本选择器
-
-
· 标签选择器 使用标签名 · class选择器 .名称 · id选择器 #名称 id唯一 · 优先级 style > id > class > 标签
-
CSS常见属性
-
背景: background
-
文本
-
浮动
-
display
-
块和行
-
块元素 div 内容会折行
-
行内元素 span 不会折行
-
-
-
属性值
-
block 块
-
inline 在行里
-
none 隐藏
-
-
-
作用
-
转换(没用)
-
显示隐藏
-
-
-
-
盒子模型
-
盒子: 任何一个网页元素都可以看成一个盒子
-
内容(content)就是盒子里装的东西;
-
内边距(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
-
边框(border)就是盒子本身了;
-
外边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
-
-
-
边框 border : 2px solid red; 上下左右 botder-top border-bottom border-left border-right 内边距 padding : 20px 上下左右 外边距 margin : 20px 上下左右 对数据进行操作,需要把数据放到一个区域里面(div)
属性
-
width 宽度
-
height 高度
-
margin 外边距
-
padding 内边距
-
border 边框的属性
-
标准盒子和怪异盒子
-
标准盒子模型
-
box-sizing: border-box;
-
内容(不变的) + 额外的边框 + 额外的内边距 = 盒子的大小
-
-
怪异盒子模型: 内容+边框+内边距 = 盒子(不变的)
-
box-sizing: border-box;
-
-
-