wlyecn/html0.html

## html0.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- This is a comment.-->
    <p>This is a website.</p>
  </body>
</html>

## html1.css
selector {
    property: value;
	/* comment */
	property: value;
}

## html2.css
p {
	padding: 10px; /* all */
	padding: 10px 10px; /* top-and-bottom right-and-left */
	padding: 10px 10px 10px 10px; /* top right bottom left */
}

## html3.css
/* 逗号分组 */
h1, h2, h3, h4 {
	color: #ccc;
}

/* 连写 */
ul#stu { /* ID为stu的ul元素 */
	padding: 0;
}

/* 上下文 */
ul#stu li { /* ID为stu的ul元素下的li元素 */
	background: #ccc;
}

## html4.css
<style type="text/css">
	p {
	color: #ccc;
	}
</style>

## html5.css
p {
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 13px; /* .8em, 5pt, 5%*/
	font-style: normal; /* italic, oblique, inherit */
	font-weight: bold;/* normal 400==normal/700==bold*
	line-height: 20px;/* 150% usually*/

	font: italic bold 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; /* shorthand */
}

## html6.css
p {
	text-align: center;/* left, right, justify */
	text-decoration: line-through; /* overline, underline, blink*/
	text-indent: 20px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);/* CCS3 */
	text-transform: uppercase;/* lowercase, capitalize */
	letter-spacing: -.5em;
	word-spacing: .25em;
}

## html7.html
<ol>
  <li>Walk the dog</li>
  <li>Fold laundry</li>
  <li>Go to the grocery and buy:
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Mow the lawn</li>
  <li>Make dinner</li>
  <li>
    A Definition List:
    <dl>
      <dt>study</dt>
      <dd>the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books</dd>
      <dt>design</dt>
      <dd>a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
    </dl>
  </li>
</ol>

## html8.html
<ul>
  <li><a href="#" title="Profile">Profile</a></li>
  <li><a href="#" title="Settings">Settings</a></li>
  <li><a href="#" title="Notifications">Notifications</a></li>
  <li><a href="#" title="Logout">Logout</a></li>
</ul>

ul {
  list-style: none;
  margin: 0;
}
li {
  float: left;
}
a {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
a:hover {
  background: #454d59;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: #d0d2d5;
}
li:first-child a {
  border-left: none;
  border-radius: 4px 0 0 4px;
}
li:last-child a {
  border-right: none;
  border-radius: 0 4px 4px 0;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	</head>
	<body>
	<h1>Hello World</h1>
	<!-- This is a comment.-->
	<p>This is a website.</p>
	</body>
	</html>
	p {
	padding: 10px; /* all */
	padding: 10px 10px; /* top-and-bottom right-and-left */
	padding: 10px 10px 10px 10px; /* top right bottom left */
	}
	/* 逗号分组 */
	h1, h2, h3, h4 {
	color: #ccc;
	}

	/* 连写 */
	ul#stu { /* ID为stu的ul元素 */
	padding: 0;
	}

	/* 上下文 */
	ul#stu li { /* ID为stu的ul元素下的li元素 */
	background: #ccc;
	}
	p {
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 13px; /* .8em, 5pt, 5%*/
	font-style: normal; /* italic, oblique, inherit */
	font-weight: bold;/* normal 400==normal/700==bold*
	line-height: 20px;/* 150% usually*/

	font: italic bold 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; /* shorthand */
	}
	p {
	text-align: center;/* left, right, justify */
	text-decoration: line-through; /* overline, underline, blink*/
	text-indent: 20px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);/* CCS3 */
	text-transform: uppercase;/* lowercase, capitalize */
	letter-spacing: -.5em;
	word-spacing: .25em;
	}
	<ol>
	<li>Walk the dog</li>
	<li>Fold laundry</li>
	<li>Go to the grocery and buy:
	<ul>
	<li>Milk</li>
	<li>Bread</li>
	<li>Cheese</li>
	</ul>
	</li>
	<li>Mow the lawn</li>
	<li>Make dinner</li>
	<li>
	A Definition List:
	<dl>
	<dt>study</dt>
	<dd>the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books</dd>
	<dt>design</dt>
	<dd>a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
	</dl>
	</li>
	</ol>
	<ul>
	<li><a href="#" title="Profile">Profile</a></li>
	<li><a href="#" title="Settings">Settings</a></li>
	<li><a href="#" title="Notifications">Notifications</a></li>
	<li><a href="#" title="Logout">Logout</a></li>
	</ul>

	ul {
	list-style: none;
	margin: 0;
	}
	li {
	float: left;
	}
	a {
	background: #404853;
	background: linear-gradient(#687587, #404853);
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	display: block;
	font-size: 11px;
	font-weight: bold;
	padding: 0 20px;
	line-height: 38px;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
	}
	a:hover {
	background: #454d59;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	color: #d0d2d5;
	}
	li:first-child a {
	border-left: none;
	border-radius: 4px 0 0 4px;
	}
	li:last-child a {
	border-right: none;
	border-radius: 0 4px 4px 0;
	}