表单标签；css网页优化

最新推荐文章于 2022-12-20 17:08:36 发布

java音乐家

最新推荐文章于 2022-12-20 17:08:36 发布

阅读量284

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/zzweixun/article/details/122354341

版权

这篇博客介绍了HTML和CSS的基础知识，包括表单元素、数据提交方式（GET和POST）、音频和视频的插入，以及CSS的选择器和盒子模型。通过实例展示了如何使用class和id选择器来精细化页面样式，并探讨了CSS中的属性选择器和盒子模型中的内外边距概念。此外，还涵盖了标签名选择器、分组选择器和属性选择器的用法。

摘要由CSDN通过智能技术生成

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

<html>
	<head>
		<meta charset="utf-8">
		<title>注册表单</title>
	</head>
	<body>
		<h1>注册表单</h1>
		<form>
			<table bgcolor="beige" width="500px" border="1" cellpadding="0">
		<tr>
			<td>用户名</td>
			<td><input type="text" name="na"></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="ps"></tdd>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" name="ps"></td>
		</tr>
		<tr>
			<td>昵称</td>
			<td><input type="name" name="nc"></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="email" name="ps"></td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" name="sex" value="1" /> 男
				<input type="radio" name="sex" value="0"/> 女
			</td>
			
		</tr>
		<tr>
			       <td>爱好</td>
				   <td>
					<input type="checkbox" name="game" value="1"/>蓝球
					<input type="checkbox" name="game" value="2"/>足球
					<input type="checkbox" name="game" value="3"/>乒乓球
				   </td>
			 
		</tr>
		<tr>
			    <td>城市</td>
			<td>
			<select name="location">
				<option value="">请选择</option>
				<option value="1">长春</option>
				<option value="2">北京</option>
				<option value="3">海南</option>
			</select>
			</td>
		</tr>
		<tr>
			<td>头像</td>
			<td>
				<input type="file" name="photo"/>
				
			</td>
			
		</tr>
		<tr>
			<td>验证码</td>
			<td><input type="text">
			    <img src="1.png" width="30" />
				<button>点我换一张</button>
			</td>
			
		</tr>
		<tr>
			<td>自我描述</td>
			<td>
				<textarea placeholder="请在这里输入" name="zwms"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<button type="submit">提交</button>
				<button type="reset">重置</button>
			</td>
		</tr>
		</table>
		</form>
	</body>
</html>

加入音频;视频

<html>
	<head>
		<meta charset="utf-8">
		<title>用于练习视频音频</title>
	</head>
	<body>
		<audio>
			<source src=""></source>
		</audio>
		
		<video controls="controls">
			<source src="2.mp4"></source>
		</video>
		
		
		
	</body>
</html>

CSS

概述
1,全称是层叠样式表stylesheet,专门用来修饰HTML网页的,就是让网页变漂亮.
2,语法: 选择器 { 属性名:属性值;样式2;样式3; }
3,使用位置: 内联CSS , 内部CSS , 外部CSS

<body>
		<!--用于练习行内css -->
		<!-- 把div1,2修饰成蓝色 3修饰成红色-->
		<div style="color: blue;">好好学习1</div>
		<div style="color: blue;">好好学习2</div>
		<div style="color: red;">好好学习1</div>
	</body>

选择器:css为了方便的选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

–1,标签名选择器
按照标签的名字,来选中元素.可能会选中多个.

<head>
		<meta charset="utf-8">
		<title>测试标签名选择器</title>
		<style>
			div{
				color: beige;
			}
			span{
				color: coral;
			}
			
		</style>
		
	</head>
	<body>
		        <div>我是div1</div>
				<div>我是div2</div>
				<div>我是div3</div> 
				<span>我是span1</span>
				<span>我是span2</span>
		
	</body>

–2,class选择器
也叫类选择器,比标签名选择器更细致.
使用步骤: 给你想要修饰的元素加 class属性 + 通过.获取class的值

<html>
	<head>
		<meta charset="utf-8">
		<title>测试类选择器也叫class选择器</title>
		 <style>
			 .a{
				 background-color: aqua;  /*设置背景颜色*/
			 }
			 .b{
				 font-size: 40px;  /*设置字体大小*/
			 }
		 </style>
		
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="b">我是div2</div>
		<div class="a">我是div3</div>
		
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

-3.id选择器
id选择器加id属性(属性值不能相同) 通过#调用

<html>
	<head>
		<meta charset="utf-8">
		<title>用于id练习</title>
		<style>
			#btn1{
			//练习1 给div1设置字体颜色
				background-color: aquamarine;
			}
			#btn2{
			//练习2给span1 设置字体大小
				font-size: 30px;
				}
			
		</style>
	</head>
	<body>
		<div id="btn1">我是div1</div>
		<div>我是div1</div>
		<span id="btn2">我是span1</span>
		<span>我是span2</span>
		
	</body>
</html>

-4.分组选择器 : 使用不同的选择器,来选择多个元素 ,选择器之间用 “逗号” 隔开
格式如
标签名选择器, class选择器 span, .a{ 设置内容 }
ind选择器, 标签名选择器 #btn1,span{设置内容}

-5属性选择器

<html>
	<head>
		<meta charset="utf-8">
		<title>用于练习属性选择器</title>
		<style>
			[type]{
				font-size: 20px;
			}
			input[type]{
				background-color: #FF7F50;
			}
			input[type="text"]{
				border:3px dashed ;
			}
		</style>
	</head>
	<body>
		<input type="text" />
		<input type="password" />
		<input type="text" />
		<input type="number" />
		<span>我是span1</span>
	</body>
</html>

盒子模型

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

<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
	</head>
	<body>
		  <!--设置radio 和"男"之间的距离 -->
		<input type="radio" style="margin: 30px;" />男   <br />
		<input type="radio" style="margin-top: 30px;"/>男<br />
		<input type="radio" style="margin-left: 10px;"/>男<br />
		<input type="radio" style="margin-right: 20px;" />男<br />
		<input type="radio" style="margin-bottom: 30px;"/>男<br />
		 <!--设置内容 和边框之间的距离 -->
		<input type="text" placeholder="请输入用户名"  style="padding:      20px;"/> <br />
		<input type="text" placeholder="请输入用户名" style="padding-left:  20px;"/> <br />
		<input type="text" placeholder="请输入用户名" style="padding-top:   10px;"/> <br />
		<input type="text" placeholder="请输入用户名" style="padding-right: 20px;"/> <br />
		<input type="text" placeholder="请输入用户名" style="padding-bottom:10px;"/> <br />
		
		
	</body>
</html>

java音乐家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单标签；css网页优化

注册表单练习提交数据的方式:get和post两种方式!!!get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限post方式提交数据:安全,数据大小不受限,但是,不好找数据了…form标签拥有两个重要属性:method属性用来指定数据提交方式,默认是getaction属性用来指定数据提交给哪段java程序来处理<html> <head> <meta charset="utf-8"> <title>注册表单<
复制链接

扫一扫