部分表单基础及CSS基础

最新推荐文章于 2022-02-25 19:38:02 发布

meitianjinbuyidiandi

最新推荐文章于 2022-02-25 19:38:02 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/qq_45119314/article/details/107363226

版权

一、表单组成部分

表单包含三个组成部分：
表单域：包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
表单控件（对象、元素）:包含了文本框、密码框、隐藏、多行文本框（文本域）、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。
提示信息：同一个表中还应该添加一些说明性文字，提示用户填写操作。

1.表单域
<form name="表单名称" method="post/get" action=""></form>
属性
action:用于设定表单数据文件的URL的地址，这个文件通常是一个后台程序或是一个电子邮件地址。
method:指定数据传递到服务器的方式。
name：用于设定表单名称，便于其他地方引用表单的值。

表单控件
<input type="控件类型" value="属性默认值" name="" />
type="text"文本框
type="password"密码框
type="submit"提交按钮
type="reset"重置
type="button"按钮

1.文本框
<input type="text" value="默认值"/>
2.密码框
<input type="password" />
<input type="password" placeholder="密码" />
3.重置按钮
<input type="reset" value="按钮内容" />
4.按钮
<input name="'" type="button" value=“按钮内容” />
<input name="'" type="submit" value=“按钮内容” />
<button></button>

二、CSS基础

英文全名：cascading style sheets 层叠样式表
作用：给html标签做修饰的语言
1.CSS语法
CSS语法：选择符{属性：属性值；属性：属性值；}
在这里插入图片描述说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
5）在书写样式过程中，空格、换行等操作不影响属性显示。
6）选择符表示要定义样式的对象
2.样式表

1.内部样式表
语法：
<style type="text/css">
    /*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

2.外部样式
链接方式1 ：在HTML文件头部
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明：
使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
rel（relation）：用于定义文档关联，表示关联样式表；

链接方式2 ：在HTML文件头部
<style type=”text/css”>
         @import  url(样式表路径及全称);
</style>

3.内嵌样式表/内联';
语法：<标签 style="属性：属性值;属性:属性值;"></标签>
<h1 style="css语句"></h1>

**示例**
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<!-- 		<style type="text/css">
			h1{width:400px; height: 100px; background: red;}
		</style> --><!-- 内部样式表 --> -->
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/><!-- 外部样式表，新建一个css 文件名字为new_file.css，在文件 里书写h2{width: 400px; height: 100px; background: yellow;} -->
	</head>
	<body>
<!-- 	<h1>我是一个页面</h1> -->
		<h2>我是外部样式</h2>
		<h3 style="width: 500; height: 100px; background: blue;">我是内嵌样式表</h3>
	</body>
</html>