初始html5(二)

HTML表单和CSS样式

1. HTML表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_简单表单</title>

</head>
<body>
<!--
    表单(只是一个容器)
    <form></form>
        常用属性:
            action:表单的提交地址(服务器的访问地址)  # 代表当前页面
            name:表单的名称
            method:表单的提交方式,有很多种,通常使用的二张:get(默认)、post
                get:提交的参数在url地址后面拼接 01_简单表单.html?password=&birthday=1970-01-01&gender=0&hobby=perm#
                post:提交的参数不会在url后面拼接

                区别:
                    1)get提交相对不安全,post相对来安全
                    2)get提交大小限制,post没有大小的限制

    输入框
    <input/>
        常用属性:
            type:type属性的值不同表示该表单项的功能和样式不同
                常见的值有11个【掌握】
                text:普通文本框(默认)
                password:密码框 特点:输入的掩码
                date:日期选择框 【html5 才提供】
                radio:单选框 特点:name属性相同分为一组,完成互斥效果
                    checked="checked" 该表单项默认被选中
                checkbox:复选框 特点:name属性相同分为一组
                    checked="checked" 该表单项默认被选中

                button:普通按钮 (与js结合完成动态效果)
                submit:提交按钮,点击该按钮发送表单(action地址)
                reset:重置表单,使表单项恢复默认状态
                image:图像提交,与submit一样

                file:文件上传
                hidden:隐藏域 特点:页面看不到,后期会用 非常重要

            name:该表单项的名称
                如果想提交我们表单项的值,那么必须有name属性
                格式:name=value&name=value&name=value
               01_简单表单.html === action # 当前页面
               ?username=豆豆老师
               &password=321
               &birthday=1970-01-01
               &gender=0
               &hobby=perm
            value:该表单的值
    下拉列表
        <select name="">
            <option value=""></option>
        </select>
        注意:select标签name=option标签value
        selected="selected" 该选项的默认值
    文本域
        <textarea name=""></textarea>
            常用属性:
                cols:宽度 30
                rows:高度 10
-->

<form action="#" name="myForm" method="get">
    用户名:<input type="text" name="username" value="豆豆老师"> <br>
    密码:<input type="password" name="password"> <br>
    生日:<input type="date" name="birthday" value="1970-01-01"> <br>
    性别:<input type="radio" name="gender" value="0" checked="checked"><input type="radio" name="gender" value="1"><input type="radio" name="gender" value="2">其他   <br>
    爱好:<input type="checkbox" name="hobby" value="somke">抽烟
          <input type="checkbox" name="hobby" value="drink">喝酒
          <input type="checkbox" name="hobby" value="perm" checked="checked">烫头 <br>

    普通按钮:<input type="button" value="普通按钮"> <br>
    提交按钮:<input type="submit" value="提交按钮"> <br>
    重置按钮: <input type="reset" value="重置按钮"> <br>
    图像按钮:<input type="image" src="../img/sub.png" width="80"> <br>
    个人头像:<input type="file" name="pic"> <br>
    隐藏域: <input type="hidden" name="id" value="110"> <br>
    学历:
    <select name="edu">
        <option value="1">青铜</option>
        <option value="2">白银</option>
        <option value="3" selected>王者</option>
    </select> <br>
    个人简介:
    <textarea name="intro"  cols="30" rows="10">我输入的内容就会被提交</textarea>
</form>
</body>
</html>

2. CSS样式

2.1 html与css结合

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_html与css结合方式</title>
    <!--type="text/css" 声明此标签为css样式,可以省略不写-->
    <style type="text/css">
        font {
            color: skyblue;
            font-size: 30px;
        }
    </style>
    <!--
        href="../css/mycss.css" css文件的路径
        rel="stylesheet" : relation 声明css文件与html文件关系
    -->
    <!--   <link rel="stylesheet" href="../css/mycss.css">-->
    <style>
        @import "../css/mycss.css";
    </style>

</head>
<body>
<!--
    html与css结合方式一共有三种方
        1)行内样式(简单修改、微调)  简单
            标签style属性,在属性中编写css样式
        2)内部样式(单个页面布局css)
            使用
style标签,在标签中编写css样式
        3)外部样式(整个网站的布局css)
            使用link标签,href属性引入外部css文件 【掌握】
            使用style标签,在标签中@import 引入外部css文件【了解,效率不高】

     使用优先级:就近原则 (相同样式,会被覆盖掉)
-->
<font style="color: red;font-size: 20px;">天行健,君子以自强不息</font> <br>
<font>地势坤,君子以厚德载物</font> <br>
</body>
</html>

2.2 css书写规范

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_css书写规范</title>
    <style type="text/css">
        /*
            我是css注释-- 多行注释
            格式:选择器名称{css样式}
                属性名和属性值之间使用冒号分隔
                多个属性之间使用分号分隔
                属性名由多个组成使用减号分隔
                属性值由多个组成使用空格分隔
                属性名推荐使用小写字母

        */
        span {
            color: red;
            font-size: 45px;
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
<span>脚踏实地行,海阔天空飞</span>
</body>
</html>

2.3 选择器

2.3.1 基本选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_基本选择器</title>
    <!--style标签可以在页面的任意为编写
        推荐放入head,浏览器加载顺序自上而下
    -->
    <style>
        div {
            color: red;
            font-size: 20px;
        }

        #myDiv {
            color: lightpink;
            font-size: 30px;
        }

        .myClass {
            color: green;
            font-size: 40px;
        }
    </style>
</head>
<body>
<!--
    基本选择器
        1)标签选择器
            格式:标签名{css样式}
        2)id选择器
            格式:#id属性值{css样式}
            特点:id具有唯一性
        3)类选择器
            格式:.class属性的值
            特点:class代表一组

     选择器优先级:id选择器>类选择器>标签选择器
-->
<div>第一种选择器:标签选择器</div>
<!-- 被标签选择器控制,id选择器控制,类选择器控制-->
<div id="myDiv" class="myClass">第二种选择器:id选择器</div>
<!-- 被标签选择器控制,类选择器控制-->
<div class="myClass">第三种选择器:类选择器</div>
<p class="myClass">第三种选择器:类选择器</p>
</body>
</html>

2.3.1 拓展选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_拓展选择器</title>
    <style>
        .div2 div .sp1 {
            color: red;
        }

        input[type="text"] {
            background-color: lightpink;
        }

        /*获取焦点的状态,修改背景色为白色*/
        input[type="text"]:focus {
            background-color: white;
        }

        input[type="password"] {
            background-color: lightgreen;
        }

        /*正常状态*/
        a:link {
            color: red;
        }

        /*鼠标上移*/
        a:hover {
            color: green;
            text-decoration: none;
        }

        /*鼠标点击*/
        a:active {
            color: blue;
        }

        /*访问过后*/
        a:visited {
            color: gray;
        }

        /*并集选择器*/
        font, p, b {
            color: skyblue;
            font-size: 40px;
        }
    </style>
</head>
<body>
<!--
    拓展选择器
        1)层级选择器
            格式:父选择器 子选择器 孙子选择器...{css样式}
        2)属性选择器
            格式:基本选择器[属性名="属性值"]{css样式}
        3)伪类选择器
            同一个元素(标签)在不同操作下呈现不用的样式(状态)
            普通文本框
                获取焦点 :fouce{css样式}
            超链接
                正常状态 a:link{css样式}
                鼠标上移 a:hover{css样式}
                鼠标点击 a:active{css样式}
         	        访问过后 a:visited{css样式}
        4)并集选择器
            格式:选择器1,选择器2...{css样式}
-->
<!--div.div1 div#.myDiv-->
<div class="div1">
    <div>
        <span class="sp1">span1</span>
        <span class="sp2">span1</span>
    </div>
</div>
<div class="div2">
    <div>
        <span class="sp1">span3</span>
        <span class="sp2">span4</span>
    </div>
</div>
<input type="text"> <br>
<input type="password"> <br>

<a href="#">let me see see</a> <br>

<font>我是font标签</font>
<p>我是p标签</p>
<b>我是b标签</b>
</body>
</html>

2.4 css常见样式

2.4.1 字体和文本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06_字体和文本属性</title>
    <style type="text/css">
        div{
            font-size: 40px;
            font-style: italic;
            font-weight:bolder;
            font-family: 隶书;
            color: red;
            text-align: center;
            line-height: 100px;
            /*一般用在 超链接 干掉*/
            text-decoration: line-through;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<!--
    1)字体
        font-size:大小
        font-style:样式
            取值: italic 斜体
        font-weight:重量
            取值: bolder 粗体
        font-family:类型
            取值: 隶书、楷体、宋体、
    2)文本
        color:颜色
        text-align:对齐方式
        line-heigh:文本高度
        text-decoration:装饰
            取值:none 普通(默认)、underline 下划线、overline 上划线、line-through 中线
-->
<div>将来的你一定会感谢,现在拼命的自己</div>
<a href="#">班长暗恋班主任人</a>
</body>
</html>

2.4.2 背景属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07_背景属性</title>

    <style>
        body{
/*            background-color: #e9e9e9;
            background-image: url("../img/girl3.jpg");
            background-repeat: no-repeat;*/
            background: #e9e9e9 url("../img/girl3.jpg")no-repeat ;
        }
    </style>
</head>
<body>
<!--
    背景属性
        background-color:背景颜色
        background-image:背景图像
            格式:url("图像地址")
        background-repeat:平铺方式
            取值:repeat 水平和垂直(默认)、repeat-x 水平、repeat-y 垂直、no-repeat 不平埔
        进入企业开发,一般会简写提高效率
        简写 background:color image repeat;
-->
</body>
</html>

2.4.3 显示属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08_显示属性</title>
    <!--style or css 自己增加的模板 -->
    <style type="text/css">
        div{
            background-color: orange;
            display: inline;
        }
        span{
            background-color: orange;
            display: block;
        }
        h3{
            display: none;
        }
    </style>

</head>
<body>
<!--
    display:显示属性
        取值:block 块级元素、inline 内联元素、none 隐藏
-->
<div>块级标签:div</div>
<span>内联标签:span</span>
<h3>我是隐藏你看不到</h3>
</body>
</html>

2.4.4 浮动属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09_浮动属性</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>
<body>
<!--
    float:浮动属性
        取值:left 向左浮动(国内)、right 向右浮动(台湾)
    clear:清除浮动
        取值:left 清除左浮动、right 清除右浮动、both 清除左右浮动【推荐】
-->
<div class="box">1</div>
<div class="box">2</div>
<div style="clear:both"></div>
<div class="box">3</div>
<div class="box">4</div>
</body>
</html>

2.5 盒子模型

2.5.1 普通盒子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_普通盒子</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            /* padding: 10px 20px 30px 40px;*/
            /* padding: 10px 20px 30px;*/ /*上 左右 下*/
            /* padding: 10px 20px; *//*上下 左右*/
            padding: 10px; /*上下左右*/
            margin: auto;

        }

        .obj {
            width: 300px;
            height: 300px;
            background-color: darkgoldenrod;
            border-radius: 150px;
        }
    </style>

</head>
<body>
<!--
    盒子模型
        1)边框
            border-width:宽度
            border-style:样式
                取值:solid 单线、double 双线、 dashed 虚线
           border-color:颜色
           简写 border:宽度 样式 颜色;
           border-radius:圆角半径
        2)内边距
           padding-top
           padding-right
           padding-bottom
           padding-left
           简写 padding:上 右 下 左
        3)外边距
            margin-top
            margin-right
            margin-bottom
            margin-left
            简写 margin: 上 右 下 左
            margin:auto 水平对齐
-->
<div class="box">
    <div class="obj"></div>
</div>
</body>
</html>

2.5.2 怪异盒子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11_怪异盒子</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            /* padding: 10px 20px 30px 40px;*/
            /* padding: 10px 20px 30px;*/ /*上 左右 下*/
            /* padding: 10px 20px; *//*上下 左右*/
            padding: 10px; /*上下左右*/
            margin: auto;
            /*怪异的盒子*/
            box-sizing: border-box;
        }

        .obj {
            width: 260px;
            height: 260px;
            background-color: darkgoldenrod;
            border-radius: 150px;
        }
    </style>

</head>
<body>
<!--
    盒子模型
        1)边框
            border-width:宽度
            border-style:样式
                取值:solid 单线、double 双线、 dashed 虚线
           border-color:颜色
           简写 border:宽度 样式 颜色;
           border-radius:圆角半径
        2)内边距
           padding-top
           padding-right
           padding-bottom
           padding-left
           简写 padding:上 右 下 左
        3)外边距
            margin-top
            margin-right
            margin-bottom
            margin-left
            简写 margin: 上 右 下 左
            margin:auto 水平对齐

        box-sizing:盒子的类型
            border-content(默认)指定盒子的宽度和高度(300)之外去调整边框和内边距
            border-box 指定盒子的宽度和高度(300)之内去调整边框和内边距
-->
<div class="box">
    <div class="obj"></div>
</div>
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值