老实说，之前多少有些轻视这个题目，想想HTML有啥用，不就是打打tag吗？但现在HTML 5的出现，使我自己想想，自己好像也不会什么HTML。啥也别说了，静下心，好好学吧。
第一节.基础
---tag
有这么几组tag是不可少的，如<html></html> 最外层tag,用来标示类型
<head></head> 标题栏
<body></body> 正文部分
<p></p> 段落
而我们定义
元素=开标记+内容+闭标记
---css
仅有元素是不够的，我们需要CSS来使页面变得更美观
<style type=””></style>
body{}
这样我们可以控制背景的颜色 background-color
边缘空隙 margin-left、margin-right
边界 border
边界与字体之间的填充 padding
字体 sans-serif
---hypertext
页面美观固然重要，当如果没有超文本功能，页面依然是枯燥的而且死气腾腾
我们需要引入链接功能 <a href=””> </a>
从上面我们可以引入新的定义
属性=属性名+=+"+属性值+" 且落于开标记中
属性是为了个性化定制元素
---Quote
不缩进，增加引号 <q></q>
缩进，不增加引号 <blockquote></blockquote>
内联元素 <q> <em> <a>
块元素 <h1><h2>…<h6> <p> <blockquote> <li> <ol><ul><title>
空元素 <br> <img>
---List
列表元素 <li></li> <dt></dt><dd></dd>
列表类型 <ol></ol> or <ul> </ul> <dl></dl>
---Entity
< <
> >
& &
新属性 title=”” tooltip
target=”_blank”
<a id=””></a>
<a href=”#"></a>
<img src=”” alt=”” width=”” height=””>
网页上的图片宽度最好不要超过800像素
document type definition
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The <blockquote> element requires one or more block elements inside it.
Go ahead, put whatever you want in a list item.
---XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
All empty tags should end in “ />”, not “>”.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" href="lounge.css" />
---CSS
each statement in CSS consists of a location (like bedroom),a property in that location (like drapes, or carpet), and a style to apply to that property (like the color blue, or 1 inch tiles).
CSS给我的最大印象就是尽可能的代码重用，从合并同属性代码，到抽出代码成文件,到特定元素的class,到所有class,到id,到div
<p class=”green raspberry blueberry”>
h1,h2
{
color: gray;
}
body
{
font-family:sans-serif;
}
p.green
{
color: green;
}
{
color: green;
}
---Comment
<!--comment--> XHTML
/*comment*/ CSS
---Font&&Color
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
body {
font-size: 14px;
}
font-size: 150%;
}
h2 {
font-size: 1.2em;
}
body {
font-size: small;
}
s xx-small, x-small, small,
medium, large, x-large, or xx-large
body {
font-weight: bold;
}
blockquote {
font-style: italic;
}
body {
background-color: silver;
}
body {
background-color: rgb(80%, 40%, 0%);
}
body {
background-color: #cc6600;
}
body {
background-color: #cc6600;
}
http://en.wikipedia.org/wiki/Web_colors
#ccbb00 can be abbreviated #cb0
body {
color: silver;
}
body {
text-decoration: underline;
}
em {
text-decoration: line-through;
}
em {
text-decoration: underline overline;
}
em {
text-decoration: none;
}
---Box model
body {
line-height: 1.6em;
}
CSS treats every single element as if it were represented by a box
原来整个世界只有一个个鸽子笼
盒子四人众：
content area+padding+border+margin
.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, “Times New Roman”, Times, serif;
color: #444444;
border-color: black;
border- 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
}
#guarantee
p#guarantee
<p id="guarantee"></p>
<link type=“text/css” href=“corporate.css” rel=“stylesheet” />
<link type=“text/css” href=“beverage-division.css” rel=“stylesheet” />
<link type=“text/css” href=“lounge-seattle.css” rel=“stylesheet” />
---div,span
<div id=”example”></div>
#example
{
200px;
}
text-align, despite its name, works on any kind of inline element.
#example h2 //descendant selector
{
}
#example>h2 //descendant selector(direct child)
{
}
#elixirs blockquote h2 //非直接的可指明到哪一级
{
}
padding: 0px 20px 30px 10px; //TOP RIGHT BOTTOM LEFT
margin: 0px 20px 30px 10px;
margin: 0px 20px; //TOP&BOTTOM, RIGHT&LEFT
border: //也可以简写，而且没有顺序要求
background： //同上
font: font-style font-variant font-weight font-size/line-height font-family
<span class=””></span> //对内联元素分组
a:link { //伪类
color: green;
}
a:visited {
color: red;
}
a:hover {
color: yellow;
}
link ,visited , focus , hover, and then active
h1 {
font-size: 200%
!important;
}
id class(包括pseudo) selector
---FLOW
float: right
clear: right
liquid
frozen
Jello
#sidebar {
position: absolute;
top: 100px;
right: 200px;
280px;
}
static absolute fixed relative
---Table
<table summary=””> </table>
<caption></caption>
<tr></tr> //表行
<th></th> //表标题
<td rowspan=”” colspan=””></td> //表元素
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse:collapse;
border-spacing:0px;
}
td, th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
table table th
{
background-color: white;
}
li {
list-style-type: circle;
}
li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}
.mid
{
text-align: center;
}
---Form
<form action=”” method=””></form>
<input type=”” name=”” value=””/> 空元素
text/submit/radio/checkbox
<textarea name=“comments” rows=“10” cols=“48”>initial text</textarea>
<select name=“characters” multiple=”multiple”>
<option value=“Buckaroo”>Buckaroo Banzai</option>
<option value=“Tommy”>Perfect Tommy</option>
<option value=“Penny”>Penny Priddy</option>
<option value=“Jersey”>New Jersey</option>
<option value=“John”>John Parker</option>
</select>
<fieldset>
<legend>Condiments</legend>
</fieldset>
<input type=”radio” name=”hotornot” value=”hot” id=”hot” />
<label for=”hot”>hot</label>
<input type=”password” name=”secret” />
<input type=”file” name=”doc” />
---Pseudo-elements
p:first-letter {
font-size: 3em;
}
p:first-line {
font-style: italic;
}
img[width] { border: black thin solid; }
img[height=”300”] { border: red thin solid; }
image[alt~=”flowers”] { border: #ccc thin solid;}
h1+p {
font-style: italic;
}
div#greentea > blockquote p:first-line { font-style: italic;}
<frameset rows=”30%, *, 20%”>
<frame name=”header” src=”header.html” />
<frame name=”content” src=”content.html” />
<frame name=”footer” src=”footer.html” />
</frameset>