day45
HTML
常用的标签
k) 表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小白</td>
<td>女</td>
<td>27</td>
</tr>
<tr>
<td>小黑</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>大雷</td>
<td>女</td>
<td>25</td>
</tr>
<tr>
<td>小化</td>
<td>女</td>
<td>24</td>
</tr>
</table>
</body>
</html>
运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
rowspan="2" -- 占2行
colspan="2" -- 占2列
-->
<table border="1" width="300px" height="400px">
<tr>
<th>C</th>
<th>-></th>
<th>+</th>
<th>-</th>
</tr>
<tr>
<th>7</th>
<th>8</th>
<th>9</th>
<th>*</th>
</tr>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
<th>/</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th rowspan="2">=</th>
</tr>
<tr>
<th colspan="2">0</th>
<th>.</th>
</tr>
</table>
</body>
</html>
运行：
l) 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
输入框：<input type="text" /><br />
密码框：<input type="password"/><br />
单选框：
<input type="radio" name="xxx"/>
<input type="radio" name="xxx"/>
<input type="radio" name="xxx"/>
<br />
多选框：
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<br />
上传文件：<input type="file" /><br />
下拉列表：
<select>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
<option>ddd</option>
<option>eee</option>
</select>
<br />
文本域：
<textarea style="resize: none;" cols="20" rows="5" readonly="readonly">高山流水</textarea>
<br />
<input type="submit" value="提交按钮" /><!--将表单数据提交给服务器-->
<input type="image" src="../img/星空一花.jpg" width="30px"/><!--和提交按钮的功能一致-->
<input type="reset" value="重置按钮" /><!--将表单数据重置，就类似于清除-->
<input type="button" value="普通按钮" onclick="fun01()"/>
<button onclick="fun02()">普通按钮</button>
</form>
<script type="text/javascript">
function fun01(){
//弹框
alert("山好");
}
function fun02(){
//弹框
alert("水好");
}
</script>
</body>
</html>
运行：点击按钮触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="服务器地址" method="get">
账号：<input type="text" name="username" placeholder="请输入账号..." /><br />
密码：<input type="password" name="password" placeholder="请输入密码..." /><br />
性别：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
爱好：
<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
<input type="checkbox" name="hobbies" value="basketball"/>篮球
<input type="checkbox" name="hobbies" value="shop"/>购物
<br />
城市：
<select name="city">
<option value="beijing">北京</option><!--设置value：数据库唯一标识-->
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shengzheng">深圳</option>
<option value="chengdu" selected="selected">成都</option>
<option value="chongqing">重庆</option>
<option value="dongguan">东莞</option>
</select>
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
运行：点击注册后，虽然现在找不到文件，但可以查看get格式显示
补充说明：常见名词的解释
CSS
选择器
通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
运行：
基本选择器
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：基本选择器 -- 标签选择器
*/
p{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
运行：
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：基本选择器 -- 类选择器
* 注意：类选择器使用.开头
*/
.myclass{
color: red;
}
</style>
</head>
<body>
<h1 class="myclass">一级标签</h1>
<h2>二级标签</h2>
<h3 class="myclass">三级标签</h3>
<h4>四级标签</h4>
<h5 class="myclass">五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
运行：
ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：基本选择器 -- ID选择器
*
* 注意：
* id选择器使用#开头
* id唯一，不能重复
*/
#myid{
color: red;
}
</style>
</head>
<body>
<h1 id=myid>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
运行：
三种基本选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{color: red;}
.myclass{color: green;}
#myid{color: blue;}
</style>
</head>
<body>
<p id="myid" class="myclass">用良心做教育</p>
</body>
</html>
运行：
群组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：群组选择器
*/
h1,p,span{color: red;}
</style>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
运行：
派生选择器
后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：派生选择器/上下文关系选择器 -- 后代选择器
*/
ul a{color: red;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
<li>
<a href="#">超链接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
<li>
<a href="#">超链接6</a>
</li>
<li>
<a href="#">超链接7</a>
</li>
</ul>
<a href="#">超链接8</a>
<a href="#">超链接9</a>
<a href="#">超链接10</a>
</body>
</html>
运行：
子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：派生选择器/上下文关系选择器 -- 子代选择器
*/
li>a{color: red;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
<li>
<a href="#">超链接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
<li>
<a href="#">超链接6</a>
</li>
<li>
<a href="#">超链接7</a>
</li>
</ul>
<a href="#">超链接8</a>
<a href="#">超链接9</a>
<a href="#">超链接10</a>
</body>
</html>
运行：
相邻兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：派生选择器/上下文关系选择器 -- 相邻兄弟选择器
*
* 注意：效果作用在后者
*/
a+a{color: red;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
<li>
<a href="#">超链接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
<li>
<a href="#">超链接6</a>
</li>
<li>
<a href="#">超链接7</a>
</li>
</ul>
<a href="#">超链接8</a>
<a href="#">超链接9</a>
<a href="#">超链接10</a>
</body>
</html>
运行：
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：属性选择器
*
* 单个属性：
* input[placeholder]{color: red;}
*
* 单个属性+值：
* input[placeholder="请输入账号..."]{color: red;}
*
* 多个属性：
* input[name][placeholder]{color: red;}
*
* 多个属性+值：
* input[name="name"][type="text"]{color: red;}
*/
input[placeholder="请输入账号..."]{color: red;}
</style>
</head>
<body>
<form action="服务器地址" method="get">
账号：<input type="text" name="username" placeholder="请输入账号..." /><br />
密码：<input type="password" name="password" placeholder="请输入密码..." /><br />
确认密码：<input type="password" name="repassword" /><br />
姓名：<input type="text" name="name" /><br />
性别：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
爱好：
<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
<input type="checkbox" name="hobbies" value="basketball"/>篮球
<input type="checkbox" name="hobbies" value="shop"/>购物
<br />
城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shengzheng">深圳</option>
<option value="chengdu" selected="selected">成都</option>
<option value="chongqing">重庆</option>
<option value="dongguan">东莞</option>
</select>
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
运行：以单个属性+值为例
伪类
锚伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 知识点：锚伪类
* 理解：监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）
*/
a:link {color: #FFCCFF} /* 未访问的链接 */
a:visited {color: #66FF66} /* 已访问的链接 */
a:hover {color: #33FFFF} /* 鼠标移动到链接上 */
a:active {color: #000033} /* 选定的链接 */
</style>
</head>
<body>
<a href="http://www.jd.com">京东</a>
</body>
</html>
运行： 未访问>选中>点击未松开鼠标>访问后返回
样式的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
<!--内部样式表-->
<style type="text/css">
p{color: red;}
</style>
</head>
<body>
<!--行内样式-->
<p style="color: blue;">用良心做教育</p>
</body>
</html>
外部样式css/new_file.css
p{
color: green;
}
运行：
