学习目标:
- 掌握HTML的表单标签,能够熟练运用
- 了解基本的CSS概念
- 熟练使用CSS的各种使用方法
学习内容:
一、HTML标签:表单标签
1、表单
- 用于采集用户输入的数据,和服务器进行交互
- form:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围
-
action:指定提交数据的URL
-
method:指定提交方式
- get:
- 请求参数会在地址栏中显示,会封装在请求行中
- URL(请求参数)长度有限制
- 相对不安全
- post:
- 请求参数不会在地址栏中显示,会封装在请求体(HTTP协议)中
- URL(请求参数)长度无限制
- 相对安全
- get:
-
表单项中的数据要想被提交,必须指定其name属性
-
- 表单项标签
- input:可以通过type属性值,改变元素展示的形式
- type属性:
- text:文本输入框,默认值
- placeholder:指定输入框的提示信息,输入内容时自动清空
- password:密码输入框
- radio:单选框
- 要想让多个单选框实现单选的效果,则他们的name属性一样
- 一般会给每一个单选框提供value属性,指定被选中后提交的值
- checked属性,可以指定默认值
- checkbox:复选框
- 一般会给每一个复选框提供value属性,指定被选中后提交的值
- checked属性,可以指定默认值
- file:文件选择框
- hidden:隐藏域,用于提交一些信息
- color:拾色器
- date:日期
- datetime-local:日期加时间
- email:校验邮箱地址
- number:只能输入数字
- 按钮
- submit:提交表单
- button:按钮
- image:图片提交按钮
- text:文本输入框,默认值
- label:指定输入项的文字描述信息
- label的for属性一般对应input的id属性值,点击label,自动跳转到
对应文本输入框
- label的for属性一般对应input的id属性值,点击label,自动跳转到
- type属性:
- select:下拉列表
- 子元素:option,指定列表项
- textarea:文本域
- cols:指定列数,每一行有多少个字符
- rows:指定行数,有多少行
- input:可以通过type属性值,改变元素展示的形式
二、CSS:页面美化和布局
1、概念
- Casading Style Sheets 层叠样式表
- 层叠:多个样式可以作用在同一个HTML元素上,同时生效
2、好处
- 功能强大
- 将内容展示与样式控制分离
- 降低耦合度,解耦
- 让分工更容易,提高开发效率
3、使用:与HTML结合
- 内联样式:在标签内用style属性指定CSS代码
- 内部样式:在head标签内定义style标签,style标签的标签体内容就是CSS代码
- 外部样式:定义CSS资源文件,在head标签内定义link标签,引入外部CSS资源文件
- 注意:
- 上面三种方式作用范围递增
- 一般不用第一种方式
- 第三种方式可以写成 @import “CSS文件路径”
4、CSS语法
- 格式
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
…
} - 选择器:筛选具有相同特征的元素
- 注意:属性之间要用;隔开,最后一个属性后面可以省略;
5、选择器
- 基本选择器
- id选择器:选择具体的id属性值的元素 #id属性值 {}
- 元素选择器:选择具有相同标签名称的元素 标签名称 {}
- 类选择器:选择具有相同class属性值的元素 .class属性值 {}
- 优先级顺序:id选择器>类选择器>元素选择器
- 扩展选择器
- 选择所有元素: * {}
- 并集选择器: 选择器1,选择器2 {}
- 子选择器:筛选选择器1元素中的选择器2元素 选择器1 选择器2 {}
- 父选择器:筛选选择器2的父元素选择器1 选择器1>选择器2 {}
- 属性选择器:选择元素名称,属性名=属性值的元素 元素名称[属性名=“属性值”] {}
- 伪类选择器:选择一些元素具有的状态
- 语法:元素:状态
- link:初始化状态
- hover:鼠标悬浮状态
- active:正在访问状态
- visited:访问过状态
- 语法:元素:状态
6、属性
- 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:字体对齐方式
- line-height:行高
- 背景
- background:设置背景,复合属性
- 边框
- border:设置边框,复合属性
- 尺寸
- width:宽度
- height:高度
- 盒子模型:控制布局
- margin:外边距
- padding:内边距
- 默认情况下会影响盒子的大小
- box-sizing:border-box;设置盒子的属性,让width与height就是最终盒子的大小
- float:浮动
- left:左浮动
- right:右浮动
学习产出:
1、 表单学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
<label>
用户名:<input type="text" name="username"/>
</label>
<br>
<label>
密 码:<input type="password" name="password"/>
</label>
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签:input</title>
</head>
<body>
<form action="#" method="get">
<label>用户名:
<input type="text" name="username"/>
</label><br>
<label>密 码:
<input type="password" name="password"/>
</label><br>
<label>性别:
<input type="radio" name="sex" value="male" checked="checked"/>:男
<input type="radio" name="sex" value="female"/>:女
</label><br>
<label>爱好:
<input type="checkbox" name="favor" value="basketball" />:篮球
<input type="checkbox" name="favor" value="socket"/>:网球
<input type="checkbox" name="favor" value="tennis"/>:羽毛球
</label><br>
<label>文件:
<input type="file" name="file"/>
</label><br>
<label>隐藏域:
<input type="hidden" name="hidden" value="aaa"/>
</label><br>
<label>拾色器:
<input type="color" name="color"/>
</label><br>
<label>日期:
<input type="date" name="date"/>
<input type="datetime-local" name="datetime"/>
</label><br>
<label>邮箱:
<input type="email" name="email"/>
</label><br>
<label>数字:
<input type="number" name="num"/>
</label><br>
<label>按钮:<br>
<input type="button" name="sub"/>:一般按钮<br>
<input type="image" src="image/icon_1.jpg"/>:图片提交按钮<br>
<input type="submit" value="提交" />:提交按钮<br>
</label><br>
</form>
</body>
</html>
2、CSS与HTML结合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<div style="color: red;">
Hello CSS!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
Hello CSS!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="style.css"/>
<!--<style>-->
<!--@import "style.css";-->
<!--</style>-->
</head>
<body>
<div>
Hello CSS!
</div>
</body>
</html>
div {
color: red;
}