CGB2111Html学习第二天

最新推荐文章于 2024-10-06 15:08:35 发布

蒄鱼

最新推荐文章于 2024-10-06 15:08:35 发布

阅读量394

点赞数

分类专栏： Html 文章标签： php css html

本文链接：https://blog.csdn.net/qq_43129111/article/details/122339584

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

单选框需要给name 以及value 服务器才有值
多选框需要给name 以及value 服务器才有值
其他需要给name值才能提交数据
中文一个字节占用3个字节
地址了提交有优点和缺点

优点是方便看数据缺点是不安全

需要在form 加上 method “post”
提交数据的方式:get和post两种方式
get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,
长度受限post方式提交数据:安全,数据大小不受限,但是,不好找数据了
form标签拥有两个重要属性
method属性用来指定数据提交方式,默认是get
action属性用来指定数据提交给哪段java程序来处理**

其他标签

<div> </div> 一个占一行:块元素
<p> <p> 表示一个占一个段落
<span></span> 多个都占一行:行元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在网页中加入音频 -->
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		<!-- 在网页中加入视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
		
		<!-- 一个占一行:块元素(h1~h6,ul+li) -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p> Nice</p>
		<p> Nice</p>
		<p> Nice</p>
		
		<!-- 多个占一行:行元素(img,a,input,button) -->
		<span> hello</span>
		<span> hello</span>
		<span> hello</span>
	</body>
</html>

加入音频
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
网页上加入视频
<video controls="controls">
<source src="b.mp4"></source>
</video>

重点:
音频或视频必须放在同级目录

CSS

是什么CSS?
1.CSS全程叫做层叠样式表stylesheet,用来修饰HTML网页的,就是让网页变漂亮
2.语法:选择器{样式1;样式2;样式3;}
3.使用位置:内联CSS,内部CSS,外部CSS

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		</style>
		<title>测试 css入门案例</title>
	</head>
	<body>
		<!-- 要求把div文字修改成红色 -->
		<div style="color: red;">你好css1</div>
		<div style="color: red;">你好css2</div>
		<div style="color: red;">你好css3</div>
	</body>
</html>

<div style="属性名:属性值;">你好</div>
<div style="color:red;">你好</div>

标签名选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style type="text/css">
			div{
				color: blue;
			}
			span{
				font-size:20px;
			}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

<style>
	选择器{
		属性名:属性值
		属性名:属性值
	}

字体大小
font-size:属性值;
字体设置
font-family:“宋体”;
class选择器
也叫类选择器,比标签名选择器更细致
使用步骤:给你想要修饰的元素加class属性+通过.获取class的值
id选择器

id选择器的属性值不相同,如果要使用id选择器只会选种一个选择器

虚化文本框文字placeholder

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style type="text/css">
			#a{
				background-color:blue;/* 背景色 */
			}
			#b{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="text" id="a" placeholder="用户名..." />
		<input type="text" id="b" placeholder="密码..." />
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

分组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 分组选择器</title>
		<style type="text/css">
			/* 1.分组选择器:使用不同的选择器,来选中多元素 */
			/* 语法:选择器{样式1.样式2} */
			div,#input1{/*分组选择器,多种选择器用逗号隔开*/
				background-color: limegreen;
			}
			/*练习2:把id/class选择器选中的元素设置背景色*/
			input1,.a{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		
		<input type="text" placeholder="账号" id="input1" />
		<input type="text" placeholder="密码" />
		
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 属性选择器</title>
		<style type="text/css">
			/* 1.属性选择器:根据不同属性,选中不同元素 */
			/* 练习1:把有type属性的输入框设置背景颜色 */
			[type]{
				/* 选中了,有type属性的元素 */
				background-color: indianred;
			}
				/* 练习2:把有type属性的input设置背景颜色 */
				input[type]{
					/* 注意语法使用:*/
				border: 3px dashed blue;/*宽度 虚线颜色*/
				border-radius:25px;/* 设置圆角边框,值越大越圆 */
				}
				/* 练习3:type=text属性的input设置背景色 */
				input[type=text]{
					background-color: #55ff00;
					display: none;/*隐藏元素*/
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名..">
		<input type="password" placeholder="密码..">
		<input type="number" placeholder="年龄..">
		<input type="text" placeholder="地址..">
		<a href="#">我是a1</a>
	</body>
</html>

盒子模型

1.概述

外边距: margin , 是指盒子间的距离
内边距: padding , 这是一个盒子的现象,是指内容到边距的距离
边框: 是指每个盒子都能设置边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 盒子模型</title>
	</head>
	<body>
		<!-- 设置了外边距,四个方向同时生效 -->
		<input type="radio" style="margin: 20px;"/>男
		<!-- 设置了外边距,设置上下左右的边距-->
		<input type="radio" style="margin-left: 20px;"/>男
		<input type="radio" style="margin-right: 20px;"/>男
		<input type="radio" style="margin-top: 20px;"/>男
		<input type="radio" style="margin-bottom: 20px;"/>男
			<!-- 设置内边距(内容和边框的距离) -->
		<input type="text" placeholder="用户名.." style="padding: 10px;">
			<!-- 设置上下左右的边距 -->
		<input type="text" placeholder="用户名.." style="padding-left: 10px;">
		<input type="text" placeholder="用户名.." style="padding-right: 10px;">
		<input type="text" placeholder="用户名.." style="padding-top: 10px;">
		<input type="text" placeholder="用户名.." style="padding-bottom: 10px;": 10px;">
	</body>
</html>