HTML与CSS

最新推荐文章于 2024-04-29 22:00:56 发布

为学JAVA放弃头发

最新推荐文章于 2024-04-29 22:00:56 发布

阅读量93

点赞数

分类专栏：学习总结文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44729394/article/details/93638306

版权

学习同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

总结

20 篇文章 0 订阅

订阅专栏

表单标签

一、作用

提交浏览器客户端的数据给服务器

二、属性：

action 要提交的服务器地址

method

get 地址栏上可以看到表单提交的参数和值

post 数据安全性更高

三、表单元素

1.input
文本框

<input type="text">

属性
name：
名字，提交数据给服务器时使用
value：
文本框中的内容
readonly：
文本框的内容只读
disabled：
文本框不可用
密码框

	<input type="password">

单选框

	 <input type="radio">

checked 表单默认选中

一组单选框name要相同，如果name值不同，则都可以选中
复选框

		 <input type="checkbox">

checked 表单默认选中此项

一组复选框name相同，可以同时选中多个
隐藏表单域

<input type="hidden" name="id" value="1000">

把数据提交给服务器，但这些数据对用户来说无需看到。
文件域

<input type="file">

打开文件对话框，一般用于文件的上传操作
提交按钮

<input type="submit">
<button>按钮</button>

提交表单数据
重置按钮

	<input type="reset">

回到表单输入前的状态
普通按钮

<input type="button">

主要用于编程使用
图片按钮

	<input type="image"  src="图片地址">

功能与提交按钮一样，提交表单数据给服务器，只是外观是一张图片
email
邮件
tel
手机，但是不校验，只是出现数字键盘
url
url地址
number
数字
dateTime
日期框
2.select
下拉列表，让用户从中进行选择
属性

name：下拉框的名字
multiple：可以多选
option ：代表其中一个选项
value：指定这个选项的值
selected: 默认选中

3.textarea
多行文本域
没有value，元素的主体内容就是出现在文本域中的内容
属性

rows：多少行
cols：多少列

CSS的编写规范

大括号
所有的样式都写在大括号内部
样式名
所有的单词小写，多个单词之间使用短横隔开
样式值
样式名与样式值之间使用冒号隔开
样式结尾：
多个样式之间使用分号隔开
注释
/* 内容 */ 与Java中的多行注释相同

导入CSS的方式

1.行内样式
以style属性的方式存在，只对一个标签起作用

2.内部样式
存在于HTML文件内部，对所有选择的标签起作用，以style标签的方式存在

<style type="text/css">
	div {
		color: blue;
	}
</style>

3.外部样式
以文件的方式存在于HTML文件的外面，要导入才可以使用
导入方式
使用link标签
href：
要导入的CSS文件地址
type:
指定类型为CSS文件
rel:
HTML文件与CSS文件之间关系

<link type="text/css"  href="文件"  rel="stylesheet"/>
				使用@import
					<style type="text/css">
	@import url("css样式名");
</style>

优先级
就近原则，哪个离元素比较近，哪个就起作用，后面的样式会覆盖前面的样式

使用选择器选取标签

1.选择器的作用：
进行样式设置之前，首先要选定要设置样式的元素，选择器的作用就是用来选择元素的
2.基本选择器
标签
通过标签名选择一个或多个元素
标签名 {
}

p { color: blue; }

		**类**
			先要对设置的元素进行分类，给元素添加一个class属性，起一个类名
			.类名 {

}

			<p class="first">
					.first {
   color: red;
}

ID
首先要给标签添加一个唯一的id的属性
#ID名

<div id="feng">
					#feng{
color: yellow;
}

通用

				* {
}

选择所有的元素
优先级：
ID选择器 > 类选择器 > 标签选择器 > 通用选择器
3.扩展选择器
层级
选择父选择器下所有的子孙元素
空格
父选择器子孙选择器 {
}

div p {
    color: blue;
 }

属性
通过元素的属性来选择一个或多个元素
中括号

标签名[属性名]

包含这个属性名的标签

标签名[属性名=“值”]

属性名要等于指定的属性值

<p title="two">属性选择器</p>
						

    p[title] {
    	color: orange;
    }
p[title="two"] {
    	color: orange;
    }

并集
同时选中多个选择器的元素
逗号
选择器1, 选择器2 {
}
伪类
链接

a:link 正常状态

a:hover 鼠标悬浮状态

a:visited 访问过

a:active 激活

文本框

:focus 得到焦点

常用的CSS属性

一.背景样式
背景色
background-color
常量：red
十六进制：#FF00FF
使用rgb()
背景图片
background-image
background-image: url(image/girl2.jpg);
背景图片的起始位置
background-position
background-position: 50px 50px;
背景图片的平铺方式
background-repeat
repeat
平铺默认
no-repeat
不平铺
repeat-x
只是x方向平铺
repeat-y
只是y方向平铺
二.文本样式

设置行高 line-height
设置颜色 color
文字修饰 text-decoration
underline 下划线
none 无线
line-through 中划线
overline 上划线
文本缩进 text-indent
单位：em，缩进多少个字符
文本对齐 text-align
left
right
center

三.字体样式