day45
HTML
继day44，w3cschool
常用的标签
k) 表格
表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
完整的表格：<!--border设置边框: cellspacing="20px" ：规定单元格之间的空白; cellpadding="5px" ：规定单元格边沿与其内容的空白 th：定义表头 --> <table border="1" cellspacing="20px" cellpadding="5px"> <thead> ---- 表头 <tr><th>Header</th></tr> </thead> <tbody> --- 表内容 <tr><td>Data</td></tr> </tbody> <tfoot> -- 表末尾 <tr><td>Data</td></tr> </tfoot> </table>
常用：
table - 表格【存在，才有方框格子】
border设置边框【1表示一个像素，px省去了】
tr - 行th - 列（加粗、居中） td - 列（向左对齐）案例1：采用表格来展示学员数据
<!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>
运行：
案例2：模拟计算器表格
跨行和跨列的单元格
Colspan:可横跨的列数
Rowspan：可横跨的行数
<!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) 表单
HTML 表单用于收集用户输入
元素定义 HTML 表单：<form> form elements </form>HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input：组件type属性text、password、radio【name属性相同情况下单选】、checkbox、file不同代表不同
submit【按钮，value设置按钮上的字】、image图片按钮、reset、button
默认选中checked
普通按钮扩展：onclick单击事件绑定一个函数【弹窗alert】select：【下拉列表】option里写下拉内容
textarea：【文本域】注意：br会显示换行
可以设置只读属性、宽高、style设置固定大小【样式】
<!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>
普通按钮可以自定义样式；函数相当于java中的方法；绑定单机事件
运行：点击按钮触发
案例： 提交数据
action=“服务器地址” 设置服务器地址
method=“post” 设置请求方式（get/post）
get：服务器地址?键=值&键=值
post：服务器地址 + 数据包
注意：post请求的安全级别比get请求更高，所以表单传输大概率会选择post请求注意：表单里的数据要想传给服务器，表单组件必须有name属性
做实验代码时用get好查看【地址那里可以看结果值】
<!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格式显示
补充说明：常见名词的解释
WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。
W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们学的html、css等标准都是由此机构主导制定。
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
CSS
CSS 概述
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 是为了解决内容与表现分离的问题
• 多个样式定义可层叠为一
• 样式通常存储在样式表中
理解：内容与样式一起写会难处理，即分离
选择器
选择器，选择你所需要修饰的HTML元素
通配符选择器
通配符选择器 – *
style【head标签里面】*{}
<!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>
运行：
基本选择器
基本选择器：
标签选择器：p、h。。。。。。
类选择器：【.开头】class属性标记
ID选择器：【#开头】id属性标记
标签选择器
<!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>
运行：
三种基本选择器的优先级
ID选择器 > 类选择器 > 标签选择器
<!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>
运行：
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
其中属性+值【进一步限制作用范围】
<!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>
运行：以单个属性+值为例
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
注意：颜色网上搜
<!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;
}
运行：
小结
HTML 常用的标签
CSS选择器
1690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
