html表单和css的简单学习

明月清风~~

已于 2022-03-12 18:19:43 修改

阅读量948

点赞数 1

文章标签： html css 学习

于 2022-03-11 22:39:03 首次发布

本文链接：https://blog.csdn.net/qq_50854790/article/details/123434050

版权

【开发者调试工具功能模块介绍】

查看器用于查看或修改HTML元素的属性、CSS属性、监听事件
控制台控制台一般用于执行一次性代码，查看JavaScript对象
网络查看网络页面连接的相关信息
存储存储Cookie信息

在这里插入图片描述

【HTML 表单】

表单：与服务器进行交互的框架，表单里有很多控件

<form> </form>

  action  将数据提交到服务器的url
如果为空则提交到当前界面，也可以采用绝对路径和相对路径
  method  提交方法  
get   默认为get
post
  enctype  编码

表单上传编码格式为：
application/x-www-form-urlencoded(默认值)

<input></input>
       type  属性类型
	password   密码框
	text             文本框
	radio	   单选框
	checkbox   多选框
	checked     预选框
	file             文件域
       reset  重置按钮
       submit  提交按钮

<select></select>  下拉框
     <option><option>     下拉的选项
<textarea></textarea>   标签定义多行的文本输入控件。

在这里插入图片描述

【CSS 层叠样式脚本】

HTML、CSS都是前端的内容
HTML 地基公司
CSS 装修公司
将HTML与CSS分离

CSS样式

元素的内容的颜色 color
元素内容的背景色 background-color
字体大小 font-size
RGB颜色 [0-255]
白色 255 255 255 #ffffff
黑色 0 0 0 #000000

CSS与HTML进行组合的三种方式

1、内联方式

把样式表写在标签内部作为标签的style属性的属性值出现
使用内联方式，在标签内部加一个style属性，" "中写样式
格式：属性吗：值;属性名;值;
作用范围：仅针对于当前元素

<span style="font-size:116px;color:yellow">你好，世界</span>

2、内部样式

Class是类，以"."来命名
id代表标签的身份，以“#”开头命名

<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout{border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY></HTML>

3、外部样式

CSS单独存放，后缀名为.css
需要<link>标签连接
"rel=stylesheet"，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始时将被使用

在这里插入图片描述

关于上文的知识来完成下面的实例

实例：

<!DOCTYPE html>
<html>
<head>
	<title>黄泽鑫——注册界面</title>
	<style type="text/css">
		.demo {
			width: 40px;
		}
		.div {
			width:300px;
			height:400px;
			background-color:green;
		}
		#q {
			height:500px;
			background-color:#9AFF9A;
		}
		#textarea {
			font-size: 20px;
		}
	</style>
	<link rel="stylesheet" href="test.css" type="text/css" >
</head>
<body>

	<center>
		<form action="#" method="post" >

			用户名：<input type="text" name="name"><br>
			密码：<input type="password" name="password"><br>
			再次输入密码：<input type="password" name="name"><br>
			头像：<input type="file" name="phont"><br>
			性别：<input type="radio" name="sex" value="1" checked="1">男
					<input type="radio" name="sex" value="0">女<br>
			爱好：<input type="checkbox" name="hobby" value="yd">运动
					<input type="checkbox" name="hobby" value="lt">聊天
					<input type="checkbox" name="hobby" value="wyx">玩游戏
					<br>
			出生日期：<input type="text" name="year" class="demo">年
					<select>
					    <option>请选择月份</option>
						<option value="1" >1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
					<input type="text" name="day" class="demo">日
					<br>
					<input type="reset" name="reset">
					<input type="submit" name="submit" value="同意以下服务条款，提交注册信息">
		</form>

	<!--内联方式-->
	<span style="font-size: 165px;color: #7FFFD4">你好，世界</span> <br>
	<!--内部方式-->
	<span class="div">你好，2世界</span> <br>
	<span id="q">你好，2.2世界</span> <br>

	<!--内联方式-->
	<ss>你好，3世界</ss> <br>

	<textarea id="textarea">Practice makes perfect</textarea>
	</center>
</body>
</html>

效果图：

在这里插入图片描述

颜色调用可看：

https://www.sojson.com/rgb.html

参考：

https://www.cnblogs.com/john568300/p/6396545.html
https://www.html.cn/qa/css3/12706.html
https://www.php.cn/css-tutorial-420782.html
https://www.cnblogs.com/iamspecialone/p/11172147.html
https://blog.csdn.net/LuLiangJun001/article/details/105868012

明月清风~~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html表单和css的简单学习

【开发者调试工具功能模块介绍】查看器用于查看或修改HTML元素的属性、CSS属性、监听事件控制台控制台一般用于执行一次性代码，查看JavaScript对象网络查看网络页面连接的相关信息存储存储Cookie信息【HTML 表单】表单：与服务器进行交互的框架，表单里有很多控件<form> </form> action 将数据提交到服务器的url如果为空则提交到当前界面，也可以采用绝对路径和相对路径 method
复制链接

扫一扫