HTML

老实说，之前多少有些轻视这个题目，想想HTML有啥用，不就是打打tag吗？但现在HTML 5的出现，使我自己想想，自己好像也不会什么HTML。啥也别说了，静下心，好好学吧。

第一节.基础

---tag

有这么几组tag是不可少的，如<html></html>              最外层tag,用来标示类型

                                      <head></head>             标题栏

                                      <body></body>             正文部分

                                      <p></p>                       段落

而我们定义

元素=开标记+内容+闭标记

---css

仅有元素是不够的，我们需要CSS来使页面变得更美观

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

< <

> >

&amp &

新属性 title=”” tooltip

target=”_blank”

网页上的图片宽度最好不要超过800像素

document type definition

http://validator.w3.org

<!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 “>”.

---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

h1,h2
{
color: gray;
}

body
{
font-family:sans-serif;
}

p.green
{
color: green;
}

.green
{
color: green;
}

---Comment

XHTML

/*comment*/ CSS

---Font&&Color

body {
font-family: Verdana, Geneva, Arial, sans-serif;
}

body {
font-size: 14px;
}

h1 {
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;
}

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>

---div,span

#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

<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

<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>

---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;}