from表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互。
表单能够包含input系列标签：比如文本字段、单选框、服务框等等。
表单还可以包含textarea、select、fieldst和label标签。
<!--from属性
action: 提交地址
method: 提交方式(请求方式)
enctype="multipart/form-data": 传图片
-->
input标签
<!--单行输入文本-->
<input type="text" />
<!--密码输入框-->
<input type="password" />
<!--单选框-->
<input type="radio" />
<!--复选框-->
<input type="checkbox" />
<!--文本选择框(选择文件)-->
<input type="file" />
<!--日期输入框-->
<input type="date" />
<!--提交按钮-->
<input type="submit" value="提交按钮" />
<!--重置按钮-->
<input type="reset" valuew="重置按钮" />
<!--普通按钮-->
<input type="button" value="普通按钮" />
<!--隐藏输入框-->
<input type="hidden" />
select标签
<form>
<select>
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
<!--属性说明
multiple: 布尔属性,设置后为多选,否则默认单选
disabled: 禁用
selected: 默认选中该项
value: 定义提交时的选项值
-->
label标签
<label>标签为input元素定义标注(标记)。
label元素不会向用户呈现任何特殊效果。
label标签的for属性值应当与其相关元素的id属性值相同。
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">多行文本</textarea>
<!--属性相关
name: 名称
rows: 行数
cols: 列数
disabled: 禁用
-->
CSS样式
css实例
每个CSS样式由两个部分组成：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
CSS注释
/*这里写注释*/
CSS样式的几种引入方式
1. 行内样式
行内样式是在标签的style属性中设定CSS样式，不推荐大规模使用。
<div style="color: red">这里是div</div>
2. 内部样式
内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>这里是div</div>
</body>
</html>
3. 外部样式
外部样式就是讲CSS样式写在一个单独的文件中，然后在页面进行引入即可。
<link rel="stylesheet" href="style.css" />
CSS选择器
基本选择器
元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d {
color: red;
}
</style>
</head>
<body>
<div id="d">div</div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.sp {
color: red;
}
</style>
</head>
<body>
<span class="sp">span</span>
</body>
</html>
注意：
样式类名不要以数字开头。
标签中的class属性有多个的时候，用空格分隔。
通用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
组合选择器
后代选择器
div内部的span标签设置字体颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div span {
color: red;
</style>
</head>
<body>
<div>div1
<span>span1</span>
<div>div2</div>
<span>span2</span>
</div>
</body>
</html>
儿子选择器
选择所有父级是div元素的p元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div>p {
background-image: url("E:/1.jpg");
}
</style>
</head>
<body>
<div class="di">第一个div
<div>第二个div
<p>段落1</p>
</div>
<p>段落2</p>
</div>
</body>
</html>
毗邻选择器
选择所有紧跟着div元素之后的p元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div+p {
color: red;
}
</style>
</head>
<body>
<div>div1
<p>p1</p>
</div>
<p>p2</p>
</body>
</html>
兄弟选择器
选择div后面所有的兄弟span标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div~span {
color: red;
}
</style>
</head>
<body>
<div>div1</div>
<span>span1</span>
<span>span2</span>
<div>div1</div>
</body>
</html>
属性选择器
用于选取带有指定属性的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p[name="p1"] {
color: red;
}
</style>
</head>
<body>
<p name="p1">p1</p>
<p name="p2">p2</p>
</body>
</html>
分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之前使用逗号分隔的分组选择器来统一设置元素样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div,p {
color: red;
}
</style>
</head>
<body>
<div>div
<p>p1</p>
</div>
</body>
</html>
嵌套
多种选择器可以混合起来使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.d1 p {
color: red;
}
</style>
</head>
<body>
<div class="d1">div
<p>p1</p>
</div>
</body>
</html>
伪类选择器
<!--未访问的链接-->
a:link {
color: red;
}
<!--鼠标移动到链接上-->
a:hover {
color: green;
}
<!--选定的链接-->
a:active {
color: pink;
}
<!--已访问的链接-->
a:visited {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: green;
}
a:active {
color: pink;
}
a:visited {
color: black;
}
</style>
</head>
<body>
<a href="伪类选择器.html">点我</a>
</body>
</html>
伪元素选择器
first-letter
常用的给首字母设置特殊样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:first-letter {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
before
在每个p元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before {
content: "*****";
color: red;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>
after
在每个p元素之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:after {
content: "*****";
color: red;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>
选择器的优先级
行内样式的权重为1000
ID选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重计算永不进位
!import方式可以强制让样式生效
CSS属性相关
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级元素才可以设置宽高，行内元素的宽高由内容决定。
字体属性
文字字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 26px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
字重(粗细)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-weight: normal;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
<!--font-weight
normal: 标准粗细
bold: 粗体
bolder: 更粗
lighter: 更细
100~900: 设置具体粗细,400等同于normal,而700等同于bold
-->
文本颜色
颜色属性被用来设置文字的颜色。
<!--
颜色的名称，如：red
十六进制值，如：#FF0000
一个RGB值，如：RGB(255,0,0)
rgba(255,0,0,0.5),第四个值为alpha,指定了颜色的透明度/不透明度,范围是0.0到1.0之间。
-->