HTML表单和CSS样式
一 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 控件） |
| 定义用于 e-mail 地址的文本字段 | |
| file | 定义输入字段和 “浏览…” 按钮，供文件上传(掌握) |
| hidden | 定义隐藏输入字段(掌握) |
| image | 定义图像作为提交按钮 |
| number | 定义带有 spinner 控件的数字字段 |
| password | 定义密码字段。字段中的字符会被遮蔽。(掌握) |
| radio | 定义单选按钮。(掌握) |
| range | 定义带有 slider 控件的数字字段。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
| search | 定义用于搜索的文本字段。 |
| submit | 定义提交按钮。提交按钮向服务器发送数据。(掌握) |
| tel | 定义用于电话号码的文本字段。 |
| text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。(掌握) |
| url | 定义用于 URL 的文本字段。 |
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_简单表单title>
head>
<body>
<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 层叠样式表
简单来说专门用于网页美化
初体验
<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>天行健，君子以自强不息font> <br>
<font>地势坤，君子以厚德载物font> <br>
body>
html>
美化好处
实现了样式和内容的分离，提高显示效果和样式的复用性
功能性更强 例如:font设置超大字体
降低耦合性 css样式专门美化页面 html标签专门搭建页面
2.2 html与css结合方式
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_html与css结合方式title>
<style type="text/css">
font {
color: skyblue;
font-size: 30px;
}
style>
<style>
@import "../css/mycss.css";
style>
head>
<body>
<font style="color: red;font-size: 20px;">天行健，君子以自强不息font> <br>
<font>地势坤，君子以厚德载物font> <br>
body>
html>
2.3 css书写规范
<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在同个网页中唯一，不要重复 |
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_基本选择器title>
<style>
div {
color: red;
font-size: 20px;
}
#myDiv {
color: lightpink;
font-size: 30px;
}
.myClass {
color: green;
font-size: 40px;
}
style>
head>
<body>
<div>第一种选择器：标签选择器div>
<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 | 多个选择器的集合 | , 逗号 |
<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>
<div class="div1">
<div>
<span class="sp1">span1span>
<span class="sp2">span1span>
div>
div>
<div class="div2">
<div>
<span class="sp1">span3span>
<span class="sp2">span4span>
div>
div>
<input type="text"> <br>
<input type="password"> <br>
<a href="#">let me see seea> <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 把文本排列到中间。 |
<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>
<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 |
<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>
body>
html>
c）显示属性
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08_显示属性title>
<style type="text/css">
div{
background-color: orange;
display: inline;
}
span{
background-color: orange;
display: block;
}
h3{
display: none;
}
style>
head>
<body>
<div>块级标签：divdiv>
<span>内联标签：spanspan>
<h3>我是隐藏你看不到h3>
body>
html>
d）浮动属性
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动 float 属性
| 取值 | 作用 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动，该属性规定元素的哪一侧不允许其他浮动元素
| 取值 | 作用 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
<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>
<div class="box">1div>
<div class="box">2div>
<div style="clear:both">div>
<div class="box">3div>
<div class="box">4div>
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）普通盒子【企业开发】
<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>
<div class="box">
<div class="obj">div>
div>
body>
html>
b）怪异盒子【了解】
<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>
<div class="box">
<div class="obj">div>
div>
body>
html>
复习
- 能够使用表单form标签创建表单容器
- 能够使用表单中常用的input标签创建输入项
- 能够使用表单select标签定义下拉选择输入项
- 能够使用表单textarea标签定义文本域
- 能够使用CSS的基本选择器选择元素
- 能够使用CSS的扩展选择器选择元素
- 能够使用常见的CSS属性
- 能够说出盒子模型的属性
- 能够制作黑马旅游网的注册页面