HTML表单和CSS样式

最新推荐文章于 2024-05-19 22:16:25 发布

你的pizza到了

最新推荐文章于 2024-05-19 22:16:25 发布

阅读量1.3k

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/qq_38353993/article/details/83048459

版权

一 HTML表单

作用：将用户在页面输入的信息发送给（java服务器）

1、form中常用属性

常用属性	作用
action	数据提交给服务器的地址，如果没有这个属性，默认提交给自己。
method	提交的方式，有2种常用的提交方式：get或post，默认是get方式，一般使用post方式。（get数据会显示在地址栏且会有限制，post会将提交的数据进行隐藏，且没有大小限制，更加安全）

2、input标签type常用属性

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。(掌握)
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 “浏览…” 按钮，供文件上传(掌握)
hidden	定义隐藏输入字段(掌握)
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。(掌握)
radio	定义单选按钮。(掌握)
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。(掌握)
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。(掌握)
url	定义用于 URL 的文本字段。

<!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" 该表单项默认被选中

                buttom：普通按钮 (与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>

二 CSS样式

2.1 概述

Cascading Style Sheet 层叠样式表

简单来说专门用于网页美化

初体验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_初体验</title>
    <style type="text/css">
        font{
            color: red;
            font-size: 4500px;
        }
    </style>
</head>
<body>
<!--<font size="70" color="red">天行健，君子以自强不息</font> <br>
<font size="70" color="red">地势坤，君子以厚德载物</font> <br>-->

<font>天行健，君子以自强不息</font> <br>
<font>地势坤，君子以厚德载物</font> <br>
</body>
</html>

美化好处

实现了样式和内容的分离，提高显示效果和样式的复用性

功能性更强例如:font设置超大字体

降低耦合性 css样式专门美化页面 html标签专门搭建页面

2.2 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.3 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.4 选择器

a）基本选择器

选择器分类	作用	语法	细节
标签选择器	通过标签名选择同名的所有的标签	标签名 { }
类选择器	通过标签的class属性的值选择元素	.类名 { }	前提：先给标签进行分类使用class属性分类类名：不能以数字开头
ID选择器	通过属性ID选择元素	#ID { }	前提：先给标签指定ID属性唯一：ID在同个网页中唯一，不要重复

<!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>

b）拓展选择器

扩展选择器	格式	作用	语法符号
层级选择器	父选择器子孙选择器{ }	选择父元素下所有的子孙元素	空格
属性选择器	标签名[属性名] 标签名[属性名=“属性值”]	只要包含属性名就被选中某个属性名=属性值的元素选中	[ ] 中括号
伪类选择器	链接： a:link 正常状态 a:visited 访问过的 a:hover 鼠标悬停 a:active 正在激活文本框： :focus 得到焦点	同一个元素在不同的操作状态下呈现不同的样式文本框如果有光标在中间，表示得到焦点	: 冒号
并集选择器	选择器1,选择器2	多个选择器的集合	, 逗号

<!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.5 css常见属性

a）字体和文本属性

功能	属性名	作用
字体名	font-family	设置字体，本机必须要有这种字体
设置大小	font-size	单位：像素
设置样式	font-style	italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。
设置粗细	font-weight	bolder加粗

功能	属性名	属性取值
颜色	color	颜色常量，如：red 使用十六进制，如：#123 (常用方式) 使用rgb(红，绿，蓝)函数
设置行高	line-height	单位是像素
文字修饰	text-decoration	none 默认,标准的文本 underline 下划线 overline 上划线
文本对齐	text-align	left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。

<!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>

b）背景属性

功能	属性名	属性取值
背景色	background-color	1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	background-image	url(图片文件)
平铺方式	background-repeat	repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。
背景位置	background-position	left top

<!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>

c）显示属性

<!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>

d）浮动属性

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动 float 属性

取值	作用
left	元素向左浮动
right	元素向右浮动

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动，该属性规定元素的哪一侧不允许其他浮动元素

取值	作用
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。

<!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.6 盒子模型

属性	作用
width	宽度
height	高度
margin	外边距
padding	内边距
border	边框的属性

属性	边框样式	取值
border-width	边框宽度	length 允许您自定义边框的宽度。
border-style	边框线型	solid：定义实线。 double：定义双线。双线的宽度等于 border-width 的值。 dotted：定义点状边框。在大多数浏览器中呈现为实线。 dashed：定义虚线。在大多数浏览器中呈现为实线。
border-color	边框颜色	常量：规定颜色值为颜色名称的边框颜色（比如 red）。十六进制：十六进制值的边框颜色（比如 #ff0000）。函数: 为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
border-radius	边框圆角	指定圆角的半径

a）普通盒子【企业开发】

<!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>

b）怪异盒子【了解】

<!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>

复习

能够使用表单form标签创建表单容器
能够使用表单中常用的input标签创建输入项
能够使用表单select标签定义下拉选择输入项
能够使用表单textarea标签定义文本域
能够使用CSS的基本选择器选择元素
能够使用CSS的扩展选择器选择元素
能够使用常见的CSS属性
能够说出盒子模型的属性
能够制作黑马旅游网的注册页面

你的pizza到了

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML表单和CSS样式

一 HTML表单作用：将用户在页面输入的信息发送给（java服务器）1、form中常用属性常用属性作用action数据提交给服务器的地址，如果没有这个属性，默认提交给自己。method提交的方式，有2种常用的提交方式：get或post，默认是get方式，一般使用post方式。（get数据会显示在地址栏且会有限制，post会将提交的数据进行隐藏，且没有大小限制，...
复制链接

扫一扫