精通CSS（7.1对数据表格应用样式&7.2简单的表单布局）&R语言课堂笔记（王中贤老师）-CSDN博客

本文链接：https://blog.csdn.net/m0_37851778/article/details/73558058

一.对表单和数据表格应用样式
1.表格真正的用途：显示表格数据，而非用于页面布局。
2.目标：
①创建有吸引力且可访问的数据表格。
②创建简单和复杂的表单布局。
③对各种表单元素应用样式。
④提供可访问的表单反馈。
3.表格特有的元素：
①summary（摘要，相当于img中的alt）&caption（标题）
②thead/tbody/tfoot，首尾仅有一个，主体可有多个。
③th表示行、列标题。
④td表示某些内容既是标题又是数据。
⑤th元素的scope属性的属性值row&col分别代表行、列标题。
⑥整行应用样式用tr/整列应用样式用colgroup&col
4.有用的表单元素
①fieldset：对相关信息快进行分组。

②表单标签（label元素），真正的优点：增强了表单对于使用辅助设备的用户的易用性。

5.calendar

code:

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	td{
		padding: 0.2em 0.8em;
		background-color: #32deef;
	}                                                                                                                               
	td.null{
		background-color: #fff;
	}
	.selected{
		background-color: #ffb7dd;
	}
	/*
	为了使用双边框创建斜面效果：
	①把border-collapse设置为separate.
	②表格中所有文本居中。
	③删除默认的内外边距。
	*/
	table.cal{
		border-collapse: separate;
		border-spacing: 0;
		text-align: center;
		color:#333;
	}
	.cal th, .cal td{
		padding: 0;
		margin:0;
	}
	.cal caption{
		font-size: 1.25em;
		padding-top: 0.692em;
		padding-bottom: 0.692em;
		background-color: #d4dde6;
	}
	/*
	如何移动January 2008左右两边的<>？
	①在HTML文档相应位置设置rel="prev"&rel="next"。
	②在CSS中通过[rel="prev"]&[rel="next"]设置样式。
	*/
	.cal caption [rel="prev"]{
		float: left;
		margin-left: 0.2em;
	}
	.cal caption [rel="next"]{
		float: right;
		margin-right: 0.2em;
	}
	.cal caption a:link,
	.cal caption a:visited{
		text-decoration: none;
		color:#333;
		padding:0 0.2em;
	}
	.cal caption :hover,
	.cal caption :focus,
	.cal caption :active{
	background-color: #6d8ab7;
	}
	.cal thead th{
		background-color: #d4dde6;
		border-bottom: 1px solid #a9bacb;
		font-size: 0.875em;
	}
	.cal tbody{
		color:#a4a4a4;
		text-shadow:1px 1px 1px white;
		background-color: #d0d9e2;
	}
	.cal tbody td{
		border-top: 1px solid #e0e0e1;
		border-right:1px solid #9f9fa1;
		border-bottom: 1px solid #acacad;
		border-left: 1px solid #dfdfe0;
	}
	.cal tbody a{
		display: block;
		text-decoration: none;
		color:#333;
		background-color: #c0c8d2;/*1-31的背景颜色*/
		font-weight: bold;
		padding: 0.385em 0.692em 0.308em 0.692em;
	}
	.cal tbody a:hover,
	.cal tbody a:focus,
	.cal tbody a:active,
	.cal tbody .selected a:link,
	.cal tbody .selected a:visited,
	.cal tbody .selected a:hover,
	.cal tbody .selected a:focus,
	.cal tbody .selected a:active{
		background-color: #e29aa7;
		color: #fff;
		text-shadow:1px 1px 2px #22456b;
	}
	.cal tbody td:hover,
	.cal tbody td.selected{
		border-top: 1px solid #2a3647;
		border-right: 1px solid #465977;
		border-bottom: 1px solid #576e92;
		border-left: 1px solid #466080;
	}
	</style>

</head>
<body>
	<table class="cal" summary="A calendar style data picker">
		<caption>
			<a href="" rel="prev"><</a>January 2008<a href="" rel="next">></a>
		</caption>

		<colgroup>
			<col id="sun" />
			<col id="mon" />
			<col id="tue" />
			<col id="wed" />
			<col id="thur" />
			<col id="fri" />
			<col id="sat" />
		</colgroup>
		<thead>
			<tr>
				<th scope="col">Sun</th>
				<th scope="col">Mon</th>
				<th scope="col">Tue</th>
				<th scope="col">Wed</th>
				<th scope="col">Tur</th>
				<th scope="col">Fri</th>
				<th scope="col">Sat</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="null">30</td>
				<td class="null">31</td>
				<td><a href="">1</a></td>
				<td><a href="">2</a></td>
				<td><a href="">3</a></td>
				<td><a href="">4</a></td>
				<td><a href="">5</a></td>
			</tr>

			<tr>
				<td><a href="">6</a></td>
				<td><a href="">7</a></td>
				<td><a href="">8</a></td>
				<td><a href="">9</a></td>
				<td><a href="">10</a></td>
				<td><a href="">11</a></td>
				<td><a href="">12</a></td>
			</tr>

			<tr>
				<td><a href="">13</a></td>
				<td><a href="">14</a></td>
				<td><a href="">15</a></td>
				<td><a href="">16</a></td>
				<td class="selected"><a href="">17</a></td>
				<td><a href="">18</a></td>
				<td><a href="">19</a></td>
			</tr>

			<tr>
				<td><a href="">20</a></td>
				<td><a href="">21</a></td>
				<td><a href="">22</a></td>
				<td><a href="">23</a></td>
				<td><a href="">24</a></td>
				<td><a href="">25</a></td>
				<td><a href="">26</a></td>
			</tr>

			<tr>
				<td><a href="">27</a></td>
				<td><a href="">28</a></td>
				<td><a href="">29</a></td>
				<td><a href="">30</a></td>
				<td><a href="">31</a></td>
				<td class="null">1</td>
				<td class="null">2</td>
			</tr>
		</tbody>
	</table>
	

</body>
</html>

Result:

6.简单的表单布局

code:

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">

	fieldset{
		margin:1em 0;
		padding: 1em;
		border:1px solid #ccc;
		background: #f8f8f8;/*非常浅的灰色*/
		width: 25em;
	}
	legend{
		font-weight: bold;
	}
	label{
		display: block;
		cursor:pointer;
	}

	</style>
</head>
<body>
	<!--
	1.将标签和表单控件关联起来有两种方式：
	①隐式方式：<label>email: <input name="email" type="text"></label>
	②显示方式：<label for="email">email:</label>
	<input name="email" id="email" type="text">
	2.显示相较于隐式的一个优点：不必为上下排列的参差不齐而烦恼（只要是因为标签文字的长短导致整个长度的长短不一）。
	-->
	<fieldset>
		<legend>Your Contact Details</legend>
		<div>
			<label for="author">Name:(Required)</label>
			<input name="author" id="author" type="text">
		</div>

		<div>
			<label for="email">Email Address:</label>
			<input name="email" id="email" type="text">
		</div>

		<div>
			<label for="url">Web Address:</label>
			<input name="url" id="url" type="text">
		</div>
	</fieldset>
</body>
</html>

Result:

二.R语言

1.Bernoulli（伯努利）/poisson（泊松）/uniform（均匀）/exponential（指数）/Normal（正态）/gamma distribution
2.一个班上，有两个相同生日的同学的概率？
设该班有x个人：1-[365*364*...*(365-x+1)/365^x]
3.pnorm（分布函数）面积，dnorm（概率密度函数）高度
4.quantiles分位数，分点数/quartile
5.simulation模拟
6.standard deviation标准差
7.histogram矩形图
8.set.seed随机分配
9.IQR：interquartile range四分位距
√?10.mtcars：Metor Trend Car Road Tests
11.mpg：mile per gallon（每加仑跑多少英里）
12.cylinder气缸
13.decimal小数
14.stem and lead plots茎叶图
15.variance方差
16.covariance协方差 correlation相关，相互
17.linear regression线性回归
18.Multivariate Analysis多变量分析
19.anova方差分析
20.coefficient系数，率
21.discrete离散的
22.geometric几何学的
23.extracted萃取
24.comprise组成，包含
25.ratio比例