day08【HTML&CSS】_html+css+bootsstrap教程day08-优快云博客

本文链接：https://blog.youkuaiyun.com/u014551318/article/details/86258021

今日内容

HTML标签：表单标签
CSS

1 HTML标签：表单标签

1.1表单

概念：用于采集用户输入的数据。用于和服务器进行交互
- form：用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
  - 属性：
    *action：指定提交数据的URL
    *method：指定提交方式，一共7种，常用有2种
    get：
    - 请求参数会在地址栏中显示。会封装到请求行中
    - 请求参数大小有限制
    - 不太安全
    post：
    - 请求参数不会在地址栏中显示。会封装在请求体中
    - 请求参数大小没有限制
    - 较为安全
    *表单项中的数据想要被提交：必须指定其name属性

1.2 表单项标签：

input：可以通过type属性值，改变元素战士的样式
- type属性：
  - text：文本输入框，默认值
  - password：密码输入框
  - radio：单选框
    1. 想要多个单选框实现单选效果，则多个单选框的name属性值必须一样。
    2. 一般会给每一个单选框value属性，指定其被选中后提交的值
    3. checked属性，指定默认值
  - checkbox：复选框
    1. 一般会给每一个框value属性，指定其被选中后提交的值
    2. checked属性，指定默认值
  - file：文件选择框
  - hidden：隐藏域，用于提交一些信息
  - 按钮：
    1. submit：提交按钮。可以提交表单
    2. buttom：普通按钮
    3. image：图片提交按钮，src属性指定图片的路径
  - label：指定输入项的文字描述信息
    *label的for属性一般会和input的id属性对应，如果对应了，则点击label区域，会让input输入框获取焦点
  - select：下拉列表
    *子元素：option，指定列表项
  - textarea：文本域
    *cols：指定列数，每一行有多少个字符
    *rows：默认多少行

2 CSS：页面美化和布局控制

2.1 概念：Cascading Style sheets层叠样式表

层叠：多个样式可以作用在同一个html元素上，同时生效

2.2 好处

功能强大
将内容展示和样式控制分离
1. 降低耦合度，解耦。
2. 让分工协作更容易
3. 提高开发效率

2.3 CSS的使用：CSS与html结合方式

内联样式：
- 在标签内使用style属性指定css代码
- 如：<div style="color:red;">hello css</div>
内部样式：
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
- 如：
  <style> div{color:blue;}</style>
  <div>hell css</div>
外部样式：
1. 定义css资源文件
2. 在head标签内，定义link标签，引入外部资源文件
  -*a.css文件
  div{color:green;}
  <link rel="stylesheet" href="css/a.css">
  <div>hell css</div>

注意：
1. 1，2，3种方式，css作用范围依次增大
2. 1方式不常用，后期常用2，3
3. 第三种可以写为<style>@import "css/a.css";</style>

2.4 css语法：

格式：
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
选择器：筛选具有相似特征的元素
注意：每一对属性要使用;隔开，最后一对属性可以不加;

2.5 选择器：筛选具有相似特征的元素

分类：
- 基础选择器
  优先级：行内样式>id>类>元素(就近原则)
  1. id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
    语法：#id属性值{}
  2. 元素选择器：选择具有相同标签名称的元素
    语法：标签名称{}
  3. 类选择器：选择具有相同的class属性值的元素。
    语法：.class属性值{}
- 扩展选择器
  1. 选择所有元素： *{}
  2. 并集选择器：选择器1,选择器2{}
  3. 后代选择器：选择器1 选择器2{}
    *筛选选择器1下的所有子孙元素
  4. 子选择器：选择器1>选择器2{}
    *筛选选择器1下的选择器2元素
  5. 属性选择器：元素名称[属性值=“属性值”]{}
    *选择元素名称，属性名=属性值的元素，=属性值可以省略
  6. 伪类选择器：元素:状态{}
    *选择一些元素具有的状态
    如<a></a>状态
    1. link:初始化的状态
    2. hover：鼠标悬浮状态
    3. active：正在访问状态
    4. visited：被访问过的状态
      a.link{color:red}

2.6 属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对齐方式
- line-height：行高
背景
- bcakground
边框
- border：设置边框，符合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边框
- padding：内边框
  *默认情况下内边距会影响整个盒子的大小
  *box-sizing:border-box;设置盒子的属性。让width和height就是最终盒子的大小
- float：浮动
  *left
  *right

2.7 用户注册页面案例

用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        /*让所有元素更紧凑，且不能改变其边框大小*/
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        /*整体*/
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }
        /*中间大白版*/
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        /*左边*/
        .rg_left{
            float: left;
            margin: 15px;
        }
            /*新用户注册*/
            #p1{
            color: #FFD026;
            font-size: 20px
            }
            /*USER REGISTER*/
            #p2{
            color: #A6A6A6;
            font-size: 20px
            }
        /*中间*/
        .rg_center{
            float: left;
        }
        /*右边*/
        .rg_right{
            float: right;
            margin: 15px;
        }
            /*已有账号*/
            .rg_right>p{
                font-size: 15px;
            }
            /*立即登录*/
            .rg_right>p>a{
                color: pink;
            }
        .td_left{
            width: 150px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#phone,#birthday,#yanzhengma{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #yanzhengma{
            width: 110px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

    <div class="rg_layout">
        <div class="rg_left">
            <p id="p1">新用户注册</p>
            <p id="p2">USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="get">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" placeholder="请输入账号" id="username"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" placeholder="请输入密码"  id="password"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right" ><input type="email" placeholder="请输入Email" id="email"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" placeholder="请输入真实姓名"  id="name"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="phone">手机号</label></td>
                            <td class="td_right" ><input type="text" placeholder="请输入您的手机号" id="phone"></td>
                        </tr>
                        <tr>
                            <td class="td_left">性别</td>
                            <td class="td_right">
                                <input type="radio" name="sex" checked>男
                                <input type="radio" name="sex">女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right" ><input type="date" id="birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="yanzhengma">验证码</label></td>
                            <td class="td_right" ><input type="text" id="yanzhengma" placeholder="请输入验证码"><img id="tupian" style="vertical-align: middle;height: 32px" src="img/verify_code.jpg"></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input style="width: 150px;height: 40px; background-color: #FFD026;border: 0px" type="submit" value="注册"></td>
                        </tr>

                    </table>
                </form>
            </div>
        </div>

        <div class="rg_right">
            <p>已有账号? <a href="#">立即登录</a></p>
        </div>
    </div>

</body>
</html>