学习目标
- 能够使用表单form标签创建表单容器
- 能够使用表单中常用的input标签创建输入项
- 能够使用表单select标签定义下拉选择输入项
- 能够使用表单textarea标签定义文本域
- 能够使用CSS的基本选择器选择元素
- 能够使用CSS的扩展选择器选择元素
- 能够使用常见的CSS属性
- 能够说出盒子模型的属性
案例一注册页面案例
一,案例需求
二，技术分析
1.表单标签【重点】
- 通过form来定义
<form action="" method="">
//表单元素
//1.input
//2.select
//3.textarea
</form>
常用属性
action:提交路径,默认是当前页面,#
method:提交方式,常用的是get和post. 默认就是get
get和post区别
1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的
2.form的常见子标签
input:输入域, 通过type属性来指定类型
select :选择列表
textarea：文本域
2.1input：输入类型
<input type="xxx"/>
type属性,类型是由属性（type）定义的
- text:文本输入框
- password:密码域
- submit：提交按钮
- reset：重置按钮
- button:空白按钮
- radio:单选框
- checkbox:复选框
- file:文件
- hidden:隐藏字段
2.2select :选择菜单
<select name="">
<option value="">显示的内容</option>
</select>
- option：选择菜单的选项
注意：
- name在select里面指定
- value在option里面指定
- option定义在select里面
2.3textarea:文本域
<textarea rows="20" cols="30" name="introduce"></textarea>
属性：
- cols列
- rows:行
3.通用属性
1.name
- 作为单选和多选框的分组
- 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性
2.value
- 给按钮起名字
- 设置提交到服务器的值 name=value
4.设置默认值
- text,password:通过value属性
用户名: <input type="text" name="username" value="zs"/>
- radio checkbox:通过checked属性
性别: <input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0" checked="checked" />女
- select :在option上通过selected属性
籍贯: <select name="address">
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select><br/>
- textarea:直接在标签体中写
自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>
三，思路分析
- 创建html, 创建form标签
- 创建输入框, 创建密码域,创建单选按钮,创建复选框,创建文件组件,创建select,创建textarea
- 创建提交按钮, 创建重置按钮, 创建普通按钮
四，代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--一, 表单标签: 作用提交用户输入的数据的(收集用户输入的信息)
action属性: 提交的路径(写远程的,也可以写本地的页面)
method属性: 指定的提交的方式 get(get方式提交,默认) post(post方式提交)
get和post方式区别:
1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的
name属性作用: 1. 作为单选,复选的分组
2. 作为key把数据提交(如果你想把数据提交, name一定要设置)
value属性作用: 1,给按钮取名字
2.作为值提交到服务器
-->
<form action="#" method="get">
<!--隐藏字段: 页面不想看到, 但是又需要把数据提交到服务器的时候-->
<input type="hidden" name="key" value="aaa"/>
用户名: <input type="text" name="username" value="zs"/> <br/>
密码: <input type="password" name="password"/><br/>
性别: <input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0" checked="checked" />女
<br/>
爱好: <input type="checkbox" name="hobby" value="basketball"/> 篮球
<input type="checkbox" name="hobby" value="football" checked="checked"/> 足球
<input type="checkbox" name="hobby" value="film" checked="checked"/> 看电影
<input type="checkbox" name="hobby" value="coding"/> 敲代码
<br/>
图像: <input type="file" name="icon"/><br/>
籍贯: <select name="address">
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select><br/>
自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>
<input type="submit"/> <input type="reset" /> <input type="button" value="空白按钮"/>
</form>
</body>
</html>
五,扩展
- HTML5中新增的type类型
<input type="xxx"/>
注：不同的浏览器支持上有差异，有些浏览器依然不支持
2.placeholder:用户提示
六,小结
- 作用: 收集用户的数据, 把数据进行提交
- 格式
<form action="提交的路径" method="提交方式">
<input type="" name=""/>
<select name="">
<option value=""></option>
</select>
<textarea name=""></textarea>
</form>
- get/post区别 (今天先有个印象, 后面HTTP再【重点】讲)
案例二:使用Div+CSS完成谷歌搜索页面
一,需求分析
二,技术分析
1.div和span
1.1什么是div和span
div是html里面的一个标签<div></div> . 没有特定的含义, 作为容器. 一般用于配合css完成网页的基本布局,
span也是一个标签,没有特定含义,一般作为文本容器
1.2div和span的区别
div是块级元素(eg:标题,p)会独占一行,span是行内元素(img,i,b...)不会独占一行
div中可以嵌套其它所有的标签(除了body,html,head), span标签中只能嵌套文本/图片/超链接
2.CSS概述和体验
2.1什么是CSS
- 层叠样式表
- 层叠: 样式的层层叠加(eg: 刷墙)
- 样式表: 样式的集合, 属性的集合
学习HTML是学标签, 学习CSS学习属性和选择器…
2.2 css能做什么
- 美化页面,修饰页面
- HTML负责展示内容,CSS负责样式. 让内容和样式进行分离
- HTML当做毛坯房, CSS当做精装修
2.3为什么要学习CSS
- 我们在上次课中已经遇到了一些样式的问题, font标签的字体不能比1还小不能比7还大, 超链接标签的下划线去不掉, 大量进行嵌套来设置样式(eg: 段落里面嵌套font, 在font里面再设置color属性)
- 通过标签来修改样式的缺点:
1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
2.当需求变更时我们需要修改大量的代码才能满足现有的需求 - 所以在企业开发中修改样式都是交给CSS来做,通过CSS来修改样式的好处:
1.不用记忆哪些属性属于哪个标签
2.当需求变更时我们不需要修改大量的代码就可以满足需求
2.4CSS语法
{
属性:属性值 属性值;
属性:属性值 属性值
}
注意
- 属性和属性值用:连接
- 如果有多个属性值用空格隔开
- 如果有多个属性,属性和属性之间用;隔开 最后一个;可以不写
3.html和css常见的结合方式
3.1通过标签的style属性来结合【了解】
<!--通过style属性-->
<p style="属性名称:属性值;..."></p>
3.2通过style标签来结合【掌握】
<head>
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
}
</style>
</head>
注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略
3.3通过link标签结合【掌握】
- 创建一个css文件(后缀是css)
- 通过link标签引入
<head>
<link rel="stylesheet" href="../../css/myCss.css" />
</head>
link标签属性:
- href:css文件路径
3.4 三种结合方式优先级
就近原则(相对于代码,也就是要修饰的标签)
4.选择器
4.1什么是选择器
css修饰页面,作用某个标签.CSS选择器就是控制html标签,说白了就是找到标签的
4.2基本选择器【掌握】
- 通用选择器 < 标签选择器 < 类选择器 < ID选择器
4.3组合选择器
由基本选择器组合而成，可以有更加灵活的选择方式
4.4 伪类选择器【了解】
5.CSS常用的属性
5.1背景属性
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*背景图片*/
background-image: url("../../img/a.gif");
/*设置平铺*/
background-repeat: repeat;
}
div{
width: 200px;
height: 200px;
/*背景颜色
background-color: red;
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.2文本样式
5.3字体属性
6.盒子模型
任何一个网页元素(标签)包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)，
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。整个网页由各种小盒子组成。
6.1盒子属性
6.2 外边距属性 margin
-
标签和标签之间的距离就是外边距
一,设置外边距
1.连写
margin: 上 右 下 左;2.非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;- 注意地方:
3.1 连写注意的地方- margin:10px; 上下左右都是10px
- margin:10px,20px; 上下是10px,左右20px
- margin:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置外边距特点
外边距的那一部分是没有背景颜色的
- 注意地方:
6.3内边距属性
-
就是标签里面的内容距离边框距离
一,设置内边距
1.连写
padding: 上 右 下 左;2.非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;- 注意地方:
3.1 连写注意的地方- padding:10px; 上下左右都是10px
- padding:10px,20px; 上下是10px,左右20px
- padding:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置内边距特点
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
- 注意地方:
6.4边框属性
7.浮动属性
7.1 概述
当某一个元素设置浮动之后, 那么这个元素就会脱离文档流. 感觉就像在上面一层覆盖着,有点像PS里面图层. 之前用来做图文混排,后面通常和div一起做页面的布局了
7.2设置浮动
-
语法
float: 取值 left(左浮动)
right(右浮动) -
特点:在浮动流中是不区分块级元素/行内元素/行内块级元素的, 都可以设置宽度和高度
-
浮动规则
1.相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2.不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3.浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
7.3清除浮动
-
语法
clear: 取值 none: 默认取值,不清除
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素 -
清除浮动的方式
方式一: 在当前的元素里面添加clear属性清除
方式二: 添加一个新的盒子添加clear属性清除
三,思路分析
四,代码实现
- 案例二下的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>谷歌搜索页面</title>
<style>
div{
text-align: center;
}
input[type='text']{
width: 400px;
height: 30px;
}
input[type='submit']{
width: 100px;
height: 30px;
}
.content{
margin-top: 60px;
}
.wiki{
margin-top: 20px;
}
.map{
margin-top: 60px;
}
.footer{
margin-top: 100px;
}
.info{
margin-top: 20px;
}
.right{
float: right;
}
.header{
clear: both;
}
button{
border: none;
width: 60px;
height: 28px;
background-color:#5891F4 ;
color: white;
border-radius: 4px;
}
</style>
</head>
<body>
<!--右边的部分-->
<div class="right">
<a href="#">Gmail</a>
<a href="#">图片</a>
<button>登录</button>
</div>
<!--头部-->
<div class="header">
<!--logo-->
<div class="logo">
<img src="../img/logo.png">
</div>
<!--链接-->
<div class="link">
<a href="#">全 部</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
<a href="#">首 页</a>
</div>
</div>
<!--中间内容部分-->
<div class="content">
<!--搜索-->
<div class="search">
<input type="text" name="key"/>
<input type="submit" value="谷歌一下"/>
</div>
<!--wiki-->
<div class="wiki">
<!--维基百科 维基文库 自由的图书馆 | 更多>>-->
<a href="#">维基百科</a>
<a href="#">维基文库</a>
<a href="#">自由的图书馆</a>
|
<a href="#">更多>></a>
</div>
<!--谷歌地图-->
<div class="map">
<img src="../img/ic.jpg"/>
<a href="#">谷歌地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
</div>
<!--底部部分-->
<div class="footer">
<!--谷歌设置主页-->
<div class="home">
<a href="#">把谷歌设为主页</a>
</div>
<div class="info">
<a href="#">广告 |</a>
<a href="#">广告 |</a>
<a href="#">广告 |</a>
<a href="#">广告 |</a>
<br/>
©2018 Google 提供
</div>
</div>
</body>
</html>
清除浏览器缓存: Ctrl+Shift+Delete
总结
一,表单【重点】 2/3
- 作用: 提交数据 收集用户的数据
- 格式
<form action="提交的路径" method="提交的方式">
<input type="" name=""/>
<select name="">
<option value=""></option>
</select>
<textarea name=""></textarea>
</form>
- get和post方式区别【http协议里面重点讲】
二,CSS 1/3
- 学的东西能看懂就OK
- 基本的能够使用(选择器, 字体颜色, 背景色…)
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
