CSS+HTML

##HTML+CSS相关知识点 ###标签 1、表单便签 form

相关属性

action:请求路径,确定表单提交到服务器的地址(路径)

method:请求方式,常用的取值:get、post

get:默认值

1、提交到的数据追加在请求路径上,追加使用?连接,之后每一对数据用&连接(/html?username=aaa&password=123)

2、请求数据长度有限,所以get请求提交的数据有限

post:

1、提交的数据不在请求路径上追加(不显示在地址栏上)

2、提交的数据大小不显示

例如:

<body>
		<!--表单-->
	<form action="" method="">
	</form>
	<!--此处的内容在<form>标签外部,数据不能提交到表单-->
</body>

2、输入域标签 input

type属性

text:文本框,单行的输入字段,用户可以在里面输入文本,默认宽度为20个字符

password:密码框,密码字段,字段中的字符用黑圆圈表示

radio:单选框,表示一组互斥选项按钮中的一个,当一个按钮被选中时,其他按钮暂时不起作用

checkbox:复选框,可以多选,刚好和单选框radio效果相反

submit:提交按钮,会把表单上的数据发送到服务器,一般不写name属性,否则“提交”两个字提交到服务器

reset:重置按钮,将表单恢复到默认值

image:图形提交按钮,通过src给按钮设置图片

file:文件上传组件,提供“浏览”按下可以需要上传的文件

hidden:隐藏字段,数据会发送到服务器,但浏览器不会显示

name:元素名,如果需要表单数据提交到服务器,必须提供name属性,服务器通过属性值获得提交的数据

value:设置input标签的默认值,submit和reset为按钮显示数据

size:大小

checked:单选框或者复选框被选中

readonly:是否可读

disabled:是否可用

maxlength:允许输入的最大长度

3、下拉列表标签 select

下拉列表,可以进行单选或者多选,需要使用子标签option指定列表项

相关属性
name:发送给服务器的名称

multiple:不写默认单选,取值为“multiple”表示对选

size:多选时,可见选项的数目

option:子标签,下拉列表中的一个选项(一个条目)

selected:勾选当前列表项

value:发送给服务器的选项值

4、文本域标签 textarea

文本域,多行的文本输入控件

cols:文本域的列数

rows:文本域的行数

5、按钮标签 button

<button type="button|reset|submit">
按钮标签很少 使用,提供“普通、重置、提交”功能,不同浏览器默认值不同

div知识点

div是html的一个普通标签,区域划分,自己独占一行,垂直的,而span是一行内容,用id或者class标记div

CSS样式规则

选择器{属性1:属性值;属性2:属性值;...}

<style>
	h1{
		color:red;
		font-size:50px;
		}
</style>

1、行内样式

通过style属性来设置元素的样式

<a style="color:red; font-size:50px;">琥珀</a>

2、内部样式(内嵌样式)

是把css代码集中卸载html文档的head头部标签体中,并且使用style标签定义

<style type="text/css">
	body{
		background-color:red;
		}
</style>

3、外部样式(链入式)

<link rel="stylesheet" type="text/css" href="css/chapter01.css"/>

rel="stylesheet" 表示样式表

type="text/css" 表示css类型

href 表示css文件位置

优点:同一个css样式表可以被不同的html页面链接使用,同时一个页面也可以通过多个
标记链接多个css样式表

选择器

1、元素选择器

所有的html标记名都可以作为标记选择器

优点:快速为页面标记统一样式

缺点:不能设计差异化样式

h1{
	color:red;
	font-size:50px;
	}
<h1>琥珀</h1>

2、id选择器

#demo{
	color:red;
	font-size:50px;
	}
<h1 id="chapter01">琥珀</h1>

3、类选择器

.lalala{
	color:red;
	font-size:50px;
	    }
<h1 class="lalala">琥珀</h1>

4、属性选择器

<style>
	input[type="text"]{
		background-color:red;
			}
	input[type="passwprd"]{
		background-color:green;
			}
</style>

5、包含选择器

两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式

父标签 后代标签{属性1:属性值1;属性2:属性值2;...}

<style>
	#d1 div{
		color:red;
			}
</style>
原文地址:https://www.cnblogs.com/zly123/p/10486406.html