1. 表单
- 表单标签 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 不可用 支持特殊写法 只能看 不能改 数据不会提交
- name 提交key
- select标签 : 下拉框
- name 属性: 提交的key
- option 子标签:选项
- value 表示提交的值
- selected="selected" 默认选中
- value 表示提交的值
- 了解属性
- 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 不会折行
- 块元素 div 内容会折行
- 属性值
- block 块
- inline 在行里
- none 隐藏
- block 块
- 作用
- 转换(没用)
- 显示隐藏
- 块和行
- 盒子模型
- 盒子: 任何一个网页元素都可以看成一个盒子
- 内容(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;
- 标准盒子模型
原文地址:https://www.cnblogs.com/cyxy31521/p/9374492.html
时间: 2024-11-05 19:25:23