学习目标
- 能够使用表单form标签创建表单容器
- 能够使用表单中常用的input标签创建输入项
- 能够使用表单select标签定义下拉选择输入项
- 能够使用表单textarea标签定义文本域
- 能够使用CSS的基本选择器选择元素
- 能够使用CSS的扩展选择器选择元素
- 能够使用常见的CSS属性
- 能够说出盒子模型的属性
- 使用Div+CSS完成谷歌搜索页面
案例一注册页面案例
一,案例需求

二,技术分析
1.表单标签【重点】
- 通过form来定义
<form action="http://www.baidu.com" method="post">
...
</form>
常用属性
action:提交路径,默认是当前页面,#
method:提交方式,常用的是get和post. 默认就是get
get和post区别
- get请求参数跟在请求地址(地址栏可以看见)后面,post是不在请求路径后面(请求体)里面
- get请求相对不安全,post相当安全一些
- get请求对参数大小有限制,post请求参数大小没有限制 .
2.form的常见子标签,爱上她
input:输入域, 通过type属性来指定类型
select :选择列表
textarea:文本域
2.1input:输入类型
<input type="xxx"/>
type属性,类型是由属性(type)定义的
- text:文本输入框
- password:密码域
- submit:提交按钮
- reset:重置按钮
- button:空白按钮
- radio:单选框
- checkbox:复选框
- hidden:隐藏字段,隐藏域
- file:文件
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属性
radio checkbox:通过checked属性
select :在option上通过selected属性
textarea:直接在标签体中写
三,思路分析
四,代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--表单元素-->
用户名:<input type="text" name="username" /><br />
密码:<input type="password" name="password" /><br />
性别:<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女<br />
爱好:<input type="checkbox" name="hobby" value="篮球" />篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="看电影"/>看电影
<input type="checkbox" name="hobby" value="敲代码"/>敲代码<br />
图像:<input type="file" name="icon" /><br />
籍贯:<select name="address" >
<option value="深圳" >深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select><br />
自我介绍:<br/><textarea rows="20" cols="30" name="introduce"></textarea><br />
<input type="submit" /><input type="reset" />
<input type="button" value="空白按钮" />
</form>
</body>
</html>
五,扩展
1. HTML5中新增的type类型
<input type="xxx"/>
注:不同的浏览器支持上有差异,有些浏览器依然不支持

2.placeholder输入域属性用来进行:位置占用,给用户提示
案例二使用Div+CSS完成谷歌搜索页面
一,需求分析

二,技术分析
1.div和span
1.1什么是div和spn
div是html里面的一个标签
. 没有特定的含义,作为容器. 一般用于配合css完成网页的基本布局, span也是一个标签,没有特定含义,一般作为文本容器
1.2div和span的区别
div是块级元素会独占一行,span是行内元素不会独占一行
div中可以嵌套其它所有的标签, span标签中只能嵌套文本/图片/超链接
2.CSS概述和体验
2.1什么是CSS
-
层叠 样式表
-
层叠: 样式的层层叠加(eg: 刷墙)
-
样式表: 样式的集合, 说白了就是属性的集合
学习CSS其实就是学习属性
2.2 css能做什么
- 美化页面,修饰页面
- 把html当做毛坯房(骨架), 把CSS当做装修
- html的标签作用展示页面,定义页面的, CSS的作用修饰页面
2.3为什么要学习CSS
-
我们在上次课中已经遇到了一些样式的问题, font标签的字体不能比1还小不能比7还大, 超链接标签的下划线去不掉…
-
通过标签来修改样式的缺点:
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标签引入(拖css文件进来即可)
<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 伪类选择器,巧记:啊,冒出一个虚伪的人,有各种状态,注意缓存清除cookie等

5.CSS常用的属性,巧记bt,cf,完cf的人,要注意背景颜色,背景图片,背景重复,装枪修饰,缩进,对其,巧记小学,背文字
5.1背景属性

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. 注意地方:
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. 注意地方:
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属性清除
三,思路分析

四,代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16谷歌搜索页面</title>
<style>
div{
text-align: center;
}
.right button{
background-color:#4585F3;
color: white;
border-radius: 5px;
border: none;
width: 50px;
height: 28px;
}
.right{
float: right;
margin: 10px;
}
.header{
clear: both;
}
.header .link{
margin-top: 10px;
}
.content{
margin-top: 20px;
}
.content input[type='text']{
width: 400px;
height: 30px;
}
.content input[type='button']{
width: 100px;
height: 30px;
}
.content .viki{
margin-top: 20px;
}
.content .map{
margin-top: 60px;
}
.footer{
margin-top: 120px;
}
.footer .ad{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="right">
<a href="#">Gmail</a>
<a href="#">图片</a>
<button>登录</button>
</div>
<div class="header">
<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"/>
<input type="button" value="谷歌一下"/>
</div>
<div class="viki">
<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><a href="#">把谷歌设为主页</a></div>
<div class="ad">
<a href="#">广告</a>
<a href="#">|</a>
<a href="#">商务</a>
<a href="#">|</a>
<a href="#">Google 大全</a>
<a href="#">|</a>
<a href="#">条款</a>
</div>
<div> ©2018 Google 提供</div>
</div>
</body>
</html>
本文详细介绍HTML表单元素及CSS样式应用,包括表单标签的使用、输入控件类型、选择器及属性设置,并通过具体案例展示了谷歌搜索页面的设计过程。

被折叠的 条评论
为什么被折叠?



