今日知识
html 表单标签
总结
表单标签
* 表单:
* 概念: 用于采集用户输入的数据的. 用于和服务器进行交互.
* form: 用于定义表单的. 可以定义一个范围, 范围代表采集用户数据的范围
* 属性:
* action: 指定提交数据的 URL
* method: 指定提交方式
* 分类: 一共 7 种, 2 种比较常用
* get:
1. 请求参数会在地址栏中显示. 会封装到请求行中 (HTTP 协议后讲解).
2. 请求参数大小是有限制的.
3. 不太安全.
* post:
1. 请求参数不会再地址栏中显示. 会封装在请求体中 (HTTP 协议后讲解)
2. 请求参数的大小没有限制.
3. 较为安全.
* 表单项中的数据要想被提交: 必须指定其 name 属性
* input 标签可以通过 type 属性值, 改变样式
type 类型:
1. text: 文本输入框, 默认值
*placeholder: 指定文本框提示信息, 当文本框发生变化是, 自动清空提示信息
2. password: 密码输入框
3. radio: 单选框
* 注意;
1. 要想让你多个单选框实现单选的效果, 就必须让单选框的 name 属性值一样
2. 一般会给单选框提供 value 值, 指定被选中后提交的值
3. checked 属性: 可以默认
4. checkbox: 复选框
* 注意:
1. 一般会给单选框提供 value 值, 指定被选中后提交的值
2. checked 属性: 可以默认
5. file: 文本选择框
6. hidden: 隐藏域, 用于提交一些信息
7. 按钮:
* submit: 提交按钮, 可以 提交表单
* button: 普通按钮
* image: 图片提交按钮
* src 属性指定图片路径
* lable: 指定输入项的文字描述
* 注意:
* label 的 for 属性一般会和 input 的 id 属性值 对应. 如果对应了, 则点击 label 区域, 会让 input 输入框获取焦点.
* select: 下拉列表
* 子元素: option, 指定列表项
* textarea: 文本域
* cols: 指定列数, 每一行有多少个字符
* rows: 默认多少行.
* filedset: 把 input 框起来, 同时设置一个标签
* 如:
- <fieldset name="用户信息">
- <input type="text" value="">
- </fieldset>
* frame 框架:
- <frameset rows="20%,40%,20%">
- <frame src="02.html"/>
- <frame src="02list.html"/>
- <frame src="03 href.html"/>
- </frameset>
CSS: 页面美化和布局控制
1. 概念: Cascading Style Sheets 层叠样式表
* 层叠: 多个样式可以作用在同一个 HTML 的元素上, 同时生效
2. 好处:
1. 功能强大
2. 将内容与样式分离
* 降低耦合
* 让分工更明确
* 提高开发效率
3. CSS 的使用: CSS 与 HTML 结合使用
1. 内联样
* 在标签中使用 style 属性指定 CSS 代码
* 如:<div style="color: darkgray">Hello world</div>
2. 内部样式
* 在 head 标签内定义 style 标签, style 标签内就是 CSS 的内容
* 如: <style>
- div{
- color: #000;
- }
- </style>
- <div>Hello world</div>
3. 外部样式
1. 定义 CSS 资源文件
2. 在 head 标签内, 用 link 标签引入资源文件
3. 如: a.CSS 文件
- :div{
- color: aqua;
- }
- <link rel="stylesheet" href="css/a.css">
- <div>Hello world</div>
- <div>Hello world</div>
* 注意:
* 1,2,3 种方式的 CSS 的作用的信息越来越大
* 1 方式不常用, 后期常用 2,3
* 第 3 种格式可以写为:
<style>@improt "css/a.css"</style>
4. CSS 语法
* 格式:
选择器 {
属性名 1: 属性值 1;
属性名 2: 属性值 2;
- ...
- }
* 选择器: 筛选具有相似的特征元素
* 注意: 每一对属性需要使用; 隔开, 最后一对可以不用隔开.
5. 选择器: 筛选具有相似的特征元素
* 分类:
1. 基础选择器
1. id 选择器
* 语法:#firstname{} 选择所有 id="firstname" 的元素
2. 元素选择器
* 语法: p{} 选择所有 < p > 元素
3. 类选择器
* 语法: .intro{} 选择所有 class="intro" 的元素
2. 扩展选择器
1. 选择所有元素
* 语法: *{} 选择所有元素
2. 并集选择器
* 语法: div,p{} 选择所有 < div > 元素和 < p > 元素
3. 子选择器
* 语法: div p{} 选择 < div > 元素内的所有 < p > 元素
4. 父选择器
* 语法: div>p 选择所有 < p > 元素的父级 < div > 元素
5. 属性选择器:
* 语法:[target=-blank]{} 选择所有使用 target="-blank" 的元素
6. 伪类选择器: 选择一些元素具有的状态
* <a>
* 状态:
* a:link{} 选择所有未访问链接
* a:visited{} 选择所有访问过的链接
* a:active{} 选择活动链接 , 就是正在访问的连接
* a:hover{} 选择鼠标在链接上面时
6. 属性
1. 文字, 文本
* font-size: 字体大小
* color: 文本颜色
* text-align: 对其方式
* line-height: 行高
2. 背景
* background url("图片地址") no-repeat center
3. 边框
* border: 设置边框, 符合属性
4. 尺寸
* width: 宽度
* height: 高度
5. 盒子模型
* Margin(外边距) - 清除边框外的区域, 外边距是透明的.
* Border(边框) - 围绕在内边距和内容外的边框.
* Padding(内边距) - 清除内容周围的区域, 内边距是透明的.
* box-sizing: border-box; 让 width 和 height 就是盒子最终的大小.
* float: 浮动.
* left: 左浮动
* center: 居中
* right: 有浮动
* Content(内容) - 盒子的内容, 显示文本和图像.
* 实例:
- * div {
- width: 300px;
- border: 25px solid green;
- padding: 25px;
- margin: 25px;
- }
实例
代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 注册
- </title>
- <style>
- *{ margin: 0px; padding: 0px; /* 让 width 和 height 就是盒子最终的大小.*/ box-sizing:
- border-box; } body{ background: url("img/register_bg.png") no-repeat center;
- } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background:
- white; margin: auto; margin-top: 30px; } .rg_left{ /* border: 2px solid
- red ;*/ float: left; margin: 20px; width: 150px; } .rg_left p:first-child{
- color: #FFD026; } .rg_left p:last-child{ color:#A6A6A6; } .rg_center{ /*
- border: 2px solid red ;*/ float: left; width: 500px; height: auto; margin-top:20px
- ; } .rg_right{ /* border: 2px solid red ;*/ float: right; margin: 20px;
- } .rg_right p{ font-size:15px ; } .rg_right p a{ color: #ff62ac; } .td_left{
- width: 100px; text-align: right; height: 45px; } .td_right{ width: 400px;
- text-align: left; height: 45px; /* 设置文本框和文字的距离 */ padding-left: 50px; color:
- #A6A6A6; } /* 设置文本框的大小 */ #username,#password,#email,#brithday,#name,#phone{
- width: 251px; height: 30px; border: 1px solid #A6A6A6; /* 设置圆角 */ border-radius:
- 5px; /*input 里面的填充文字, 距离 input 的间距 */ padding-left: 10px; font-size:13px;
- } /* 单独设置验证码的样式 */ #verify{ width: 110px; height: 30px; border: 1px solid
- #A6A6A6; /* 设置圆角 */ border-radius: 5px; /*input 里面的填充文字, 距离 input 的间距 */
- padding-left: 10px; } /* 设置验证码图片 */ #img_checkcode{ height: 30px; /* 垂直居中
- */ vertical-align:middle; padding-left: 15px; } #btn_submit{ width: 110px;
- height: 30px; background: #FFD026; border: 2px solid #FFD026; margin-top:
- 10px; } label{ font-size:14px; color: #A6A6A6; }
- </style>
- </head>
- <body>
- <!-- 第二层 div-->
- <div class="rg_layout">
- <div class="rg_left">
- <p>
- 新用户注册
- </p>
- <p>
- USER REGISTER
- </p>
- </div>
- <div class="rg_center">
- <div class="rg_form">
- <form>
- <table>
- <tr>
- <td class="td_left">
- <label for="username">
- 用户名:
- </label>
- </td>
- <td class="td_right">
- <input name="user" id="username" type="text" placeholder="请输入用户名">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="password">
- 密码:
- </label>
- </td>
- <td class="td_right">
- <input name="password" id="password" type="password" placeholder="请输入密码">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="email">
- Email:
- </label>
- </td>
- <td class="td_right">
- <input name="email" id="email" type="email" placeholder="请输入 email">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="name">
- 姓名:
- </label>
- </td>
- <td class="td_right">
- <input name="name" id="name" type="text" placeholder="请输入真实姓名">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="phone">
- 手机号:
- </label>
- </td>
- <td class="td_right">
- <input name="name" id="phone" type="number" placeholder="请输入你的手机号">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="sex">
- 性别:
- </label>
- </td>
- <td class="td_right">
- <input name="sex" id="sex" type="radio" value="女" checked>
- 女
- <input name="sex" type="radio" value="男">
- 男
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="brithday">
- 出生日期:
- </label>
- </td>
- <td class="td_right">
- <input name="brithday" id="brithday" type="date">
- </td>
- </tr>
- <tr>
- <td class="td_left">
- <label for="verify">
- 验证码:
- </label>
- </td>
- <td class="td_right">
- <input name="verify" id="verify" type="text">
- <img id="img_checkcode" src="./img/verify_code.jpg">
- </td>
- </tr>
- <tr align="center">
- <!--<td colspan="2"><input name="zhuce" type="image" src="img/regbtn.jpg"></td>-->
- <td colspan="2">
- <input name="zhuce" type="submit" id="btn_submit" value="注册">
- </td>
- </tr>
- </table>
- </form>
- </div>
- </div>
- <div class="rg_right">
- <p>
- 已有账号?
- <a href="">
- 立即登录
- </a>
- </p>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3107434.html