一.表单
1.简介
(1) HTML 表单是 HTML 文档中的一个区域
(2)HTML 表单这个区域中包含了一系列的可交互元素
(3)HTML 表单主要用于收集用户输入信息
2.表单元素
表单提交后,服务端响应地址 发送数据方式:post/get
<from>
...
</from>
3.常用元素
表单交互元素
(1)文本输入元素:<input type="text">
(2)单选框元素:<input type="radio"
(3)复选框元素:<input type="checkbox">
(4)文本去元素:<textarea>...</textarea>
(5)下拉选择元素:<select>...</select>
(6)按钮元素:<button type="XXX">
4.练习——个人简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<form action="">
<table border="1" align="center">
<h2 align="center">个人简历</h2>
<tr align="center">
<td style="font-weight:bold;">姓名</td>
<td><input type="text"></td>
<td style="font-weight:bold;">性别</td>
<td><input type="text"></td>
<td style="font-weight:bold;">出生年月</td>
<td><input type="text"></td>
<td rowspan="4"><input type="file" style="font-weight:bold;"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">民族</td>
<td><input type="text"></td>
<td style="font-weight:bold;">政治面貌</td>
<td><input type="text"></td>
<td style="font-weight:bold;">身高</td>
<td><input type="text"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">学制</td>
<td><input type="text"></td>
<td style="font-weight:bold;">学历</td>
<td><input type="text"></td>
<td style="font-weight:bold;">户籍</td>
<td><input type="text"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">专业</td>
<td><input type="text"></td>
<td colspan="2" style="font-weight:bold;">毕业学校</td>
<td colspan="2" style="font-weight:bold;"><input type="text" style="width: 97%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">技能、特长或爱好</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">外语等级</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">计算机</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">个人履历</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">时间</td>
<td colspan="2" style="font-weight:bold;">单位</td>
<td colspan="4" style="font-weight:bold;">经历</td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">联系方式</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">通信地址</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">联系电话</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">E-mail</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">邮编</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">自我评价</td>
</tr>
<tr align="center">
<td colspan="7"><textarea name="" id="" cols="30" rows="10" style="width: 99%; height: 100%"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
效果:
二.css
1.简介
(1)CSS 是 Cascading Style Sheets 的缩写,即:层叠样式表单
(2)CSS 是 HTML 语言的一种扩展,其主要作用为:
(3)定义 Web 页面布局以及页面中元素的显示方式
(4)利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离
2.引入方式
(1)内嵌式:又称行内式,在HTML标签上编写样式,如:<p style="color:red">
(2)内部式:包含在HTML的中,只对当前页面有效,如:<style>...</style>
(3)外部式:链接引入外部样式表文件,如:<link href="style.css" ...>
3.选择器
选择器用于定位(选择)需要添加样式的网页元素
(1)标签选择器 :HTML标签名(元素)作为选择器名称,如:div 、h1 、p …
<style type="text/css">
div {
color: blue; /* 蓝色 */
font-size: 30px;
}
</style>
(2)类选择器:类(class)用于描述一组标签的样式,class 可以用在多个标签中
<html>
…
<style type="text/css">
.title {
color: red; /* 红色 */
font-size: 30px;
}
</style>
<body>
<div class=“title”>CSS</div>
<div class=“title” >快速入门</div>
<div>CSS选择器!</div>
</body>
</html>
(3)ID选择器:ID选择器用于为标有特定ID的HTML标签设置样式
<html>
…
<style type="text/css">
#title {
color: green; /* 绿色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
(4)通配选择器:利用 * 为指定范围内的所有标签设置样式
<html>
…
<style type="text/css">
* {
color: purple; /* 紫色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
(5)包含选择器:HTML中为父元素(标签)下的子元素设置样式
<html>
…
<style type="text/css">
div p {
color: gold; /* 金色 */
font-size: 30px;
}
</style>
<body>
<div>
<p>CSS</p>
</div>
<div>快速入门</div>
</body>
</html>
(6)选择器分组:为一组元素设置相同样式,利用逗号分割多个选择器
<html>
…
<style type="text/css">
#title , .logo {
color: brown; /* 棕色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div class=“logo”>CSS快速入门</div>
</body>
</html>
4.超链接
CSS中可以根据超链接元素的状态,设置不同的样式属性
下面为4种超链接状态:
(1)a:link - 正常状态,未访问过的超链接状态
(2)a:visited - 已访问过状态,用户已访问过的超链接状态
(3)a:hover - 鼠标放上状态,当用户鼠标放在超链接上时状态
(4)a:active - 点击状态,超链接被点击的那一刻状态
<html>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.title {
color: #FFFFFF; /* 白色字体 */
background-color: blue; /* 蓝色背景 */
font-size: 34px; /* 34px 字体 */
text-decoration: none;/* 去掉链接文字的下划线 */
cursor:wait; /* 改变鼠标形状 */
}
</style>
<body>
<a href="#">CSS</a>
<a href="#" class="title">CSS超链接</a>
</body>
</html>
5.练习–五彩导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
button{
width: 120px;
height: 60px;
border: none;
font-size: 20px;
text-align: center;
}
.first{
background-image: url(bg1.png);
background-repeat: no-repeat;
background-size: auto;
}
.first:hover{
background-image: url(bg6.png);
}
.two{
background-image: url(bg2.png);
background-repeat: no-repeat;
background-size: auto;
}
.two:hover{
background-image: url(bg5.png);
}
.three{
background-image: url(bg3.png);
background-repeat: no-repeat;
background-size: auto;
}
.three:hover{
background-image: url(bg2.png);
}
.four{
background-image: url(bg5.png);
background-repeat: no-repeat;
background-size: auto;
}
.four:hover{
background-image: url(bg1.png);
}
</style>
</head>
<body>
<button class="first" >五彩导航</button>
<button class="two" >五彩导航</button>
<button class="three" >五彩导航</button>
<button class="four" >五彩导航</button>
</body>
</html>
效果:鼠标放上去,背景颜色会改变
总结:对css的知识点还不太熟悉,接下来继续加油学习!!