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样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航