HTML5

语法较为宽松

简化也可以 

<input type=checkbox checked> 没有""号

<input type='checkbox' checked> ''也可以用

<input type="checkbox" checked="checked">
可简写成
<input type="checkbox" checked> 建议这样写

允许部分属性值的属性省略
在HTML5中,可以省略属性值的属性如下表所示
属性描述
 省略属性值后
checked
 等价于 checked=" checked"
readonly
 等价于 readonly=" readonly"
defer
 等价于 defer=" defer"
ismap
 等价于 " ismap=" ismap"
nohref
 等价于 notre=" nohref"
noshade
 等价于 noshade=" noshade"
nowrap
 等价于 nowrap=" nowrap"
selected
 等价于 selected=" selected"
Disabled
 等价于 disabled=" disabled"
Multiple
 等价于 multiple=" multiple"
Noresize
 等价于 noresize="noresize
 
<h1 align="center">Vis.Yang</h1>  标题标签居中   页面标题标签多则采用css居中,提高代码的复用性



CSS3

支持动画,节约成本,提高性能

Tip:列表标签也能用

表格常用伪类

tag:first-child{
/*选择它的父元素下的第一个子元素*/
}
tag:first-child{
/*选择它的父元素下的最后一个子元素*/
}
tag:nth-child(1){
/*选择它的父元素下的第一个子元素*/
}
tag:nth-child(2){
/*选择它的父元素下的第二个子元素**/
}
...
tag:nth-child(even){
/*选择它的父元素下的偶数位置子元素*/
}
tag:nth-child(odd){
/*选择它的父元素下的奇数位置子元素*/
}
tag:nth-last-child(n){
/*定义倒数第n子元素;*/
n=1,2,3,....
}
tag:nth-child(函数){
/*
 函数:2n-1
 n从0开始
 */
} tag:nth-last-child(n){
/*倒过来选择*/
} tag:nth-last-child-of-type(n){ /*倒过来选择*/ }

tag:empty{
	/*控制没有内容标签的样式*/
}
tag::before{
	/* 某个元素之前插入类容 */
	content: 文字/url;
}
tag::after{
	/* 某个元素之后插入类容 */
	content: 文字/url;
}

:root 全局样式
简单示例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vis.Yang</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!-- colspan 合并列 rowspan 合并行 加在td-->
		<table>
			<caption>表格标签</caption>
			<thead>
				<tr>
					<th>表格</th>
					<th>描述</th>
				</tr>
			</thead>
			<tbody>
			<tr>
				<td>&lt;table&gt; </td>
				<td>定义表格</td>
			</tr>
			<tr>
				<td>&lt;caption&gt;</td>
				<td>定义表格标题。</td>
			</tr>
			<tr>
				<td>&lt;th&gt;</td>
				<td>定义表格的表头。</td>
			</tr>
			<tr>
				<td>&lt;tr&gt;</td>
				<td>定义表格的行。</td>
			</tr>
			<tr>
				<td>&lt;td&gt;</td>
				<td>定义表格单元。</td>
			</tr>
			<tr>
				<td>&lt;thead&gt;</td>
				<td>定义表格的页眉。</td>
			</tr>
			<tr>
				<td>&lt;tbody&gt;</td>
				<td>定义表格的主体。</td>
			</tr>
			<tr>
				<td>&lt;tfoot&gt;</td>
				<td>定义表格的页脚。</td>
			</tr>
			<tr>
				<td>&lt;col&gt; </td>
				<td>定义用于表格列的属性。</td>
			</tr>
			<tr>
				<td>&lt;colgroup&gt;</td>
				<td>定义表格列的组。</td>
			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td colspan="2">Vis.Yang-制作</td>
			</tr>
			</tfoot>
		</table>

	</body>
</html>

body {
	background: url(../img/bg.jpg) no-repeat center top -7px;
	background-size: 1540px;
}
table {
	border: 1px solid #adadad;
	padding: 0;
	margin: 0 auto;
	margin-top: 150px;
	background-color: #656565;
}

table caption {
	text-align: center;
	font-size: large;
	font-weight: bold;
	color: #d6d36c;
	margin-bottom: 25px;
}

table thead tr th {
	text-align: left;
	padding:5px;
	color: white;
}

table thead tr th:nth-child(1) {
	width: 200px;
}

table thead tr th:nth-child(2) {
	width: 500px;
	border-left: 0;
}
table tbody tr td{
	padding:5px;
}
table tbody tr td:hover{
	background-color:#d6d36c;
}
table tbody tr:nth-child(even) {
	background-color: #C4EBF9;
	color: black;
}

table tbody tr:nth-child(odd) {
	background-color: #ffffff;
	color: black;
}
table tfoot tr{
	height: 30px;
}
table tfoot tr td {
	text-align: center;
	background-color: #656565;
	color: white;
    font-size: 16px;
}
table tfoot tr td:hover{
	background-color:#3f3f3f;
}


复习列表 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-image: url(./img/logo.png);/*替换列表图案*/
			}
			li{
				list-style-position: inside;  /* 图标在里 */
			}
		</style>
	</head>
	<body>
		<ul>
			<li>change</li>
			<li>the</li>
			<li>world</li>
		</ul>
	</body>
</html>