第二章 html5
2.1 常用的组件
<!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 >
<div align="center">
<form action="a.html" method="post">
姓名<input type="text" required><br>
日期<input type="date" readonly><br>
email<input type="email"><br>
年龄<input type="number" min="1" max="200"><br>
数字<input type="number" step="0.01"><br>
调色板<input type="color"><br>
查询<input type="search"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
2.2 组件
2.2.1 指定form表单
<!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 >
<div align="center">
<input name="username" form="fid" value="123"><br>
<form action="a.html" method="get" id="fid"> </form>
<input type="submit" value="提交" form="fid">
</div>
</body>
</html>
2.2.2 自动填充文本框
<!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 >
<div align="center">
<form action="a.html" method="get">
<input name="username" list="auto"><br>
<datalist id="auto">
<option>java</option>
<option>scala</option>
<option>mysql</option>
</datalist>
<input type="submit" value="提交" >
</form>
</div>
</body>
</html>
2.2.3 使用数字求结果
<!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 >
<div align="center">
<form action="a.html" method="post" oninput="money.value=price.value*num.value">
单价：<input name="price" type="number"><br>
数量：<input name="num" type="number"><br>
金额：<input name="money" type="number"><br>
<input type="submit" value="提交" >
</form>
</div>
</body>
</html>
第三章 css
3.1 简介
- CSS是Cascading Style Sheets（级联样式表）的缩写。 ³ 可以用CSS做什么？ ³ CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字 体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
- HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更 多选择，而且更为精确、完善。现在所有浏览器都支持CSS。 ³ CSS跟HTML的区别在哪里？ ³ HTML用于结构化内容；CSS用于格式化结构化的内容。
- 也就是CSS是装饰HTML的 ³ 采用CSS有哪些好处？ ³ 通过单个样式表控制多个文档的布局； ³ 更精确的布局控制； ³ 为不同的媒体类型（屏幕、打印等）采取不同的布局； ³ 无数高级、先进的技巧。 ³ 可以灵活的更换网页风格
3.2 编写css样式
- 3种方式编写：
- 控件中
- 页面中
- 文件
3.2.1 控件中
<body bgcolor="aqua">
</body>
3.2.2 页面中
<!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>
<style>
body{background-color: blue;}
</style>
</head>
<body>
</body>
</html>
3.2.3 编写在文件中(推荐)
- 编写css文件
body{
background-color: chartreuse;
}
- 在网页上引入
<!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>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
</body>
</html>
3.2.4 案例：
- 样式文件
body{
background-color: rgb(196, 202, 238);
}
h1{
color: gold;
}
h2{
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
tr{
text-align: center;
}
p{
text-align: justify;
}
a{
color: red;
}
- 网页使用
<!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>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<p>两端对齐的样式</p>
<h1>使用了样式</h1>
<h2>使用了样式</h2>
<a href="#">连接</a>
<table border="1" style="width: 100%;">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
</table>
</body>
</html>
3.2.5 table边框
- 边框：border
border-width宽度：像素完成设置
border-sytle样式：none无边框、solid实线、double双线
border-color颜色：
- 编写样式
table{
border: 1px solid rgb(0, 0, 0);
border-collapse: collapse;
}
tr{
text-align: center;
}
<!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>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<table border="1" style="width: 100%;">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>曹操</td>
<td>男</td>
<td>11</td>
</tr>
<tr>
<td>蔡文姬</td>
<td>女</td>
<td>11</td>
</tr>
<tr>
<td>貂蝉</td>
<td>女</td>
<td>11</td>
</tr>
</tbody>
</table>
</body>
</html>
3.3 css3
3.3.1 跟选择器
<!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>
<style>
html:root{background-color: aqua;}
</style>
</head>
<body>
</body>
</html>
3.3.2 新控件
<!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>
<style>
</style>
</head>
<body>
<fieldset>
<legend>基本信息</legend>
<label>
<span>姓名</span>
<input>
</label>
<label>
<span>姓名</span>
<input>
</label>
</fieldset>
</body>
</html>
3.3.3 文本框
- 通过样式调节单选的颜色
<!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>
<style>
input:checked+span{background-color: red;}
</style>
</head>
<body>
<input name="sex" type="radio" checked> <span>男</span> <br>
<input name="sex" type="radio"> <span>女</span><br>
</body>
</html>
3.3.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>
<style>
#aid tr:first-child{background-color: red;}
#aid tr:nth-child(odd){background-color: red;}
</style>
</head>
<body>
<table id="aid" border="1" style="width: 100%;">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>曹操</td>
<td>男</td>
<td>11</td>
</tr>
<tr>
<td>蔡文姬</td>
<td>女</td>
<td>11</td>
</tr>
<tr>
<td>貂蝉</td>
<td>女</td>
<td>11</td>
</tr>
</tbody>
</table>
</body>
</html>
3.3.5 添加文字的阴影
text-shadow: 5px 5px 5px black;
水平偏移 垂直偏移 虚化度 颜色
<!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>
<style>
p{
color: red;
font-size: 50px;
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<p>大家好才是真的好！</p>
</body>
</html>
3.3.6 添加文字边框
<!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>
<style>
p{
font-size: 50px;
-webkit-text-fill-color: red;
-webkit-text-stroke: 2px black;
}
</style>
</head>
<body>
<p>大家好才是真的好！</p>
</body>
</html>
3.3.7 图片
- 添加阴影
<!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>
<style>
img{
box-shadow: 5px 5px 8px greenyellow;
}
</style>
</head>
<body>
<img src="images/001.jpeg" width="200px" height="200px">
</body>
</html>
-
倒影
-webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right;
3.3.8 项目
- 登录
<!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="show.html" method="post">
用户<input name="username"><br>
密码<input type="password" name="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>
- 显示
<!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>
<a href="save.html" target="_blank">新增</a>
<table border="1" style="width: 100%;">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>曹操</td>
<td>男</td>
<td>11</td>
<td>删除|
<a href="update.html?id=1001">更新</a></td>
</tr>
<tr>
<td>蔡文姬</td>
<td>女</td>
<td>11</td>
<td>删除|更新</td>
</tr>
<tr>
<td>貂蝉</td>
<td>女</td>
<td>11</td>
<td>删除|更新</td>
</tr>
</tbody>
</table>
</body>
</html>
- 保存
<!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="#" method="post">
用户<input name="username" required><br>
性别<select name="sex">
<option value="男">男</option>
<option value="男">男</option>
</select><br>
年龄<input type="number" name="age"><br>
<input type="submit" value="保存">
<input type="reset" value="重置">
</form>
</body>
</html>
- 更新
<!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="#" method="post">
<input type="hidden" name="id" value="1001">
用户<input name="username" required><br>
性别<select name="sex">
<option value="男">男</option>
<option value="男">男</option>
</select><br>
年龄 <input type="number" name="age"><br>
<input type="submit" value="更新">
<input type="reset" value="重置">
</form>
</body>
</html>
1952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
