html_css

本文详细介绍HTML表单元素及CSS样式应用,包括表单标签的使用、输入控件类型、选择器及属性设置,并通过具体案例展示了谷歌搜索页面的设计过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习目标

  1. 能够使用表单form标签创建表单容器
  2. 能够使用表单中常用的input标签创建输入项
  3. 能够使用表单select标签定义下拉选择输入项
  4. 能够使用表单textarea标签定义文本域
  5. 能够使用CSS的基本选择器选择元素
  6. 能够使用CSS的扩展选择器选择元素
  7. 能够使用常见的CSS属性
  8. 能够说出盒子模型的属性
  9. 使用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标签结合
  1. 创建一个css文件(后缀是css)
  2. 通过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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值