HTML5教程

html标签和CSS样式

本文主要是介绍html标签和CSS样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 一、继续学习html标签
    • 1.1表单标签
    • 1.2frameset标签
  • 二、CSS的三种引入方式
    • 2.1行内样式
    • 2.2内联样式
    • 2.3外联样式
  • 三、CSS的选择器
    • 3.1标签选择器
    • 3.2class选择器
  • 总结


一、继续学习html标签

1.1表单标签

登录,注册输入框都是表单标签
form 双边标签 有一个子标签是input标签
input是一个单边标签
form标签和input标签主要是干什么的?
是用来提交数据的,这个通过input输入框给别的页面提交数据的

url:是一个网址,也叫统一资源定位符
一个网址就是一个资源,如www.baidu.com这就是一个资源。是通过这个网址找到百度的页面。下载电影,迅雷下载,给你一个网址。这个网址进行下载这个电影资源
url组成部分:
协议+域名(ip)+端口号+文件+ 参数
http://www.baidu.com:80/index.html?username=goudan&password=123456
参数:是问号后面的东西,这个就是input输入框中向另外一个页面带过去的数据

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<!-- form标签属性
			action:提交数据到哪?是一个网址 http://127.0.0.1:8848/code/test.html?username=admin&password=11111
			method:提交方式
			默认的是get的提交方式
			有两种方式:get   post
			get:(开发中查询)
				1.不安全,所以不用登录注册,密码是url直接显示了
				2.传输效率高,所以才查询
				3.通过get请求方式查看你的信息
				4.在url和可以看到咱们的参数
				5.传输的数据是有限制的,在url中,2kb左右
			post:(开发中增删改)
				1.假装很安全
				2.传输慢
				3.数据大小没有限制
				4.在地址栏中看不到传输的数据,但是程序员可以看到
			method="post" enctype="multipart/form-data"
			上传文件所必须的两个重要的属性,为什么要多写,文件是以流的形式传输,平常的信息是字符串
			现在文件是流,mutipart多个表单数据
		-->
		<!-- <form action="test.html" method="get"> -->
		<form action="test.html" method="post" enctype="multipart/form-data">	
			<!-- input 属性
				type:决定了输入框的样式
				属性值:很多
					text:明文
					password:密文
					subit 提交按钮
					value:值
					name:一定要写,如果不写的话,就无法提交数据到另外一个页面
			-->
		账号:<input type="text" name="username"/><br />
			<!-- 密码是用*******来代替的 -->
		密码:<input type="password" name="password"/><br />
			
			<!-- 提交按钮 submit  -->
			<!-- 默认是提交这两个字,但是加上value属性后,就可以变成你自定义的按钮 -->
			<input type="submit" value="登录"/>
			
			<!-- 重置按钮 reset 可以恢复到以前没有数据的状态 -->
			<input type="reset" value="重置" /><br />
			
			<!-- 单选框 radio
				加完name属性以后,我们就只能单选
				如果不写value的话,就无法判断传给另外一个页面的值是什么
			-->
		性别:<input type="radio" name="sex" value="男" />男
			<input type="radio" name="sex" value="女"/>女<br />
			
			<!-- 复选框 checkbox
				name和value的值也不能少,因为要传输数据到另外一个页面
			-->
		爱好:<input type="checkbox" name="hobby" value="唱歌"/>唱歌
			<input type="checkbox" name="hobby" value="跳舞"/>跳舞
			<input type="checkbox" name="hobby" value="rap"/>rap
			<input type="checkbox" name="hobby" value="打篮球"/>打篮球
			<br />
			
			<!-- 日期文本框 date -->
			<input type="date" name="birthday" /><br />
			<input type="datetime" name="datetime" /><br />
			
			<!-- 上传文件框  file
				注意事项:上传文件的时候,必须使用post请求
				form表单还有一个属性:enctype=:"muiltipart/form-data"
				这两个属性都要有
			-->
			<input type="file" name="file" /><br />
			
			<!-- 隐藏文本 hidden 开发中会用 
				不会在我们的页面上显示,但是可以通过name属性和value属性
				带数据到另外一个页面上
			-->
			<input type="hidden" name="hid" value="soga" /><br />
			
			<!-- 下拉列表
				两个标签组成的,一个是select标签,另外一个是子标签option
				name属性必须写
			-->
			<select name="city" size="6">
				<option value="0312">郑州</option>
				<option value="0311">信阳</option>
				<option value="0345">洛阳</option>
				<option value="0323">安阳</option>
				<option value="0324">开封</option>
				<option value="0325">新乡</option>
				<option value="0327">驻马店</option>
				<option value="0328">周口</option>
				<option value="0329">三门峡</option>
			</select><br />
			<br />
			<!-- 文本编辑器 以后会有封装好的 -->
		履历:<textarea name="info">	
			</textarea>
			
		</form>
	</body>
</html>

结果如下(示例):
在这里插入图片描述

1.2frameset标签

一个页面再套一个页面
【注意事项】:如果使用了framset就不能使用body标签

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
			<!--一个页面再套一个页面  framset标签  -->
	<!-- 用了framset就不能使用了body了 -->
	<!-- 
	 framset有两个属性
		rows:把一个网页分成上下份
		cols:把一个网页分成左右两份
		noresize:禁止页面拖动
		frame: 子标签
	-->
	<frameset cols="200px, *">
		<frame src="http://www.taobao.com" />
		<frameset rows="200px, *">
			<frame src="test.html"/>
			<frame src="1表单标签.html" />
		</frameset>
	</frameset>
</html>

结果如下(示例):
在这里插入图片描述
代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="fsb">百度</a><br />
		<a href="http://www.taobao.com" target="fsb">淘宝</a><br /
		<a href="http://www.sohu.com" target="fsb">搜狐</a><br>
		<a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>you.html</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>zuo.html</title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="fsb">百度</a><br />
		<a href="http://www.taobao.com" target="fsb">淘宝</a><br /
		<a href="http://www.sohu.com" target="fsb">搜狐</a><br>
		<a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a>
	</body>
</html>

结果如下如下(示例):
在这里插入图片描述

二、CSS的三种引入方式

一个网页页面由html,css,javascript组成
html相当于一个简陋的骨架,css相当于对这个股价进行化妆修饰的
css 层叠样式表 cascading style sheets

CSS三种引入方式:①行内样式②内联样式③外联样式
使用CSS的目的:为了修饰标签的,让标签更好看

2.1行内样式

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 行内样式的写法,目的是为了修饰div标签的
		 学过的每一个标签,都有这个属性叫style
		 style属性值写的是css语法格式
		 css语法格式:
			属性1:属性值1;属性2:属性值2;属性3:属性值3;
		eg:border:边框大小 子属性 solid:边框颜色
			width:宽度
			height:高度
			background-color:背景颜色
			color:字体颜色
		-->
		<div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;">
			 一望无际的沙漠里,简直就是一个极度喧嚣的世界,一幕幕优美的画面和热闹的舞台剧总是在轮番
			登场,令人心醉神怡。可是,它们的生存,却给人们留下了太多、太深、太久远的启示和忠告。不信?
			你看,在沙漠里,有一种植物叫胡杨,它是沙漠地区特有的珍贵森林资源,因其超顽强的生命力,还被
			人们赞誉为“长着千年不死,死后千年不倒,倒地千年不腐”的英雄树。为了近观胡杨的独特风范,我
			和我的同伴曾走向塔克拉玛干沙漠的深处,在那荒凉的戈壁滩里,映入眼帘的是晶莹剔透的飞沙,迎接
			我们的是难忍的饥渴和孤独,以及炽热的煎熬,动物、植被的残骸四处呈现,而胡杨则展现出与天地抗
			争的勇气和执着!它们顽强的生命,实在是悲壮又令人惊叹!还有一种叫百岁兰的植物,它一生只生长两
			片叶子,但每一片叶子都可以活到百余年甚至上千年的时间;当然,譬如仙人掌、梭梭、红柳树……无不
			让人惊奇和赞颂!
		</div>
	</body>
</html>

结果如下(示例):
在这里插入图片描述

2.2内联样式

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css内联样式的写法</title>
		<!-- 内联样式的写法是在head标签中,有一个子标签叫style
			在style标签中去写CSS样式去修饰标签
		-->
		<style>
			/* 这个是css里面的注释,和html不一样 */
			/* 首先找到被修饰的标签,然后写大括号,在大括号里面写css语法格式 */
			div{
				width: 6.25rem;
				height: 6.25rem;
				background-color: darkgoldenrod;
			}
			/* 修饰p标签 */
			p{
				width: 18.75rem;
				height: 18.75rem;
				background-color: gold;
			}
			/* 修饰span标签 */
			span{
				/* 专门讲一下颜色表示方式
				 1.html规定好的颜色的英文单词
				 2.十六进制的表示形式 0-F
					R   G   B
					00  00  00 黑色
					FF  00  00 红色
					00  FF  00  绿色
					00 00  ff  蓝色
					十六进制组成了好好的颜色
				 一般用吸色器把颜色吸出来*/
				 color:#E1251B;
			}
		</style>
	</head>
	<body>
		<div>
			仰天大笑出门去,我辈岂是蓬蒿人
		</div>
		<p>离开你一百个星期,我回到了这里,寻找我们爱过的证据,
		没有人愿意提起,玫瑰花它的过去,今天这里的主题,我把它叫做回忆
		</p>
		<div>
			
		</div>
		<span>
			天生我材必有用,千金散尽还复来。
		</span>
	</body>
</html>

结果如下(示例):
在这里插入图片描述

2.3外联样式

首先在当前html文件所在的文件夹里面创建一个名为test.css的CSS文件
文件内容为:

footer{
	width: 12.5rem;
	height: 12.5rem;
	background-color: tomato;
	color: #7FFFD4;
}

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的css文件
			在head头里面写一个link标签,目的是为了引入外部的css文件
			属性:
				rel:连接文件的类型 样式表
				type:css文件类型
				href:外部的css所在路径
		-->
		<link rel="stylesheet" type="text/css" href="./test.css"/>
	</head>
	<body>
		<!-- 外联样式
		 在文件的外部写一个后缀为css的文件
		 引入到我们的当前页面中
		 -->
		<footer>东风不与周郎便,铜雀春深锁二乔</footer>
	</body>
</html>

结果如下(示例):
在这里插入图片描述

三、CSS的选择器

目的:为了找到这个被修饰的标签的。

如果连标签都找不到,何谈修饰?好比你买了化妆品,要给你女朋友化妆,。突然想到自己没有女朋友。很扎心。首先找到女朋友,对她进行化妆

1.标签选择器

2.class选择器

3.id选择器

4.层级选择器

5.组合选择器

6.通配选择器

7.伪类选择器

3.1标签选择器

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签选择器</title>
		<!-- 内联样式的写法 -->
		<!-- 标签选择器,通过标签的名字获取找到标签的 -->
		<style>
			/* span就是html标签的名字
			 对span的内容进行修饰
			 */
			span{
				color: red;
			}
			div{
				color: yellow;
			}
			footer{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>蓦然回首,那人却在灯火阑珊处</span>
		<div>借问酒家何处有,牧童遥指杏花村</div>
		<div></div>
		<footer>风萧萧兮易水寒,壮士一去兮不复返</footer>
	</body>
</html>

结果如下(示例):
在这里插入图片描述

3.2class选择器

每一个标签都有一个class属性

给class起一个属性的名字,咱们可以通过这个=属性值可以找到这个标签

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* class选择器
				是在标签中写一个class属性
				属性值是自己定义的
				通过.属性值  在{}中找到当前标签进行修饰
			*/
		   .nb{
			   color: red;
		   }
		   .sb{
			   color: blue;
		   }
		   .qb{
			   color: #7FFFD4;
		   }
		</style>
	</head>
	<body>
		<!-- 任何一个标签都有class属性 
			class的属性值可以随便写
			class可以写多个值,中间使用空格隔开
		例如:
			<div class="wwb wabf nb">
				<!-- class有三个值:
					1.wwb
					2.wabf
					3.nb
					这是我自己定义的三个属性值
		-->
		<div class="wwb wabf nb">君不见黄河之水天上来,奔流到海不复回</div>
		<div class="sb">烹羊宰牛且为乐,会须一饮三百杯</div>
		<p class="qb">
			人生得意须尽欢,莫使金樽空对月。
			天生我材必有用,千金散尽还复来。
		</p>
	</body>
</html>

结果如下(示例):

在这里插入图片描述

总结

提示:这里对文章进行总结:没有想好总结

这篇关于html标签和CSS样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!