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

来源：互联网发布：平面设计怎么样知乎编辑：程序博客网时间：2024/06/07 02:26

一.对表单和数据表格应用样式
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比例

阅读全文

0 0