一 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 的文本字段。 |
<!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属性
- 能够说出盒子模型的属性
- 能够制作黑马旅游网的注册页面