Front Page

Posted on   |  

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<q></q><!--段内引用， 内联元素-->
<blockquote></blockquote> <!--段落引用， 块元素-->

<br> <!--强行换行-->
<img src="">

<ul>
  <li></li> <!--list item = li-->
  <li></li>
</ul> <!--无序，unordered list = ul--> 
<ol>
  <li></li>
  <li></li>
</ol> <!--有序, ordered list = ol-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<em></em> <!--强调-->
<!-- &lt; = < -->
<!-- &gt; = > -->

<code></code><!--显示代码-->

<pre></pre><!--希望浏览器按输入的样式原样显示文本-->

<time></time><!--内容是一个日期或时间或者内容包括日期或时间-->

<h2 id="chai">Chai Tea, $1.85</h2> <!--使用id属性为<a>创建目标-->
...
<a href="index.html#chai">See Chai Tea</a> <!--注意“#”-->

<a target="_blank" href=""></a><!--在新窗口（标签页)打开-->
<a target="_self" href=""></a><!--默认行为-->
<!--关于target更多，请参考http://www.w3school.com.cn/tags/att_a_target.asp-->

<img src="default.png" alt="the picture lost" width="48" height="100">
<!--alt 如果图片未能显示，用alt属性的文本替代-->

<a href=""><img src=""></a><!--把图像作为链接-->

<div></div><!--块元素-->
<span></span><!--内联元素-->

<table>
  <caption> </caption>
  <tr> <th></th> <th></th> </tr>
  <tr> <td></td> <td></td> </tr>
  <tr> <td></td> <td></td> </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><!--html5-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!--HTML 4.01 Strict-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--XHTML 1.0 Strict-->

<!--以下按照html5标准-->

<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="../test.css">
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 481px)">
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width: 480px)">
<link type="text/css" rel="stylesheet" hrel="lounge-print.css" media="print">

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
h1{
  color: gray;
}
h2{
  color: gray;
}

h1,h2{		 /*与上面写法的等价*/
  color: gray;
}

p.greentea{   /* <p class="greentea" ... */
  color:green;
}

.greentea{   /*class="greentea"*/
  color:green;
}

/*css匹配规则，如果一个规则比其他规则更特定，它就会胜出，如果没有特定的赢家，选择最后列出的那个规则*/

/*padding内边距*/

/*margin外边距*/

.guarantee{
  background-image:url(images/background.gif);
}

#footer{  /* id="footer" */
  color:red;
}
p#footer{  /* <p id="footer" */
  color:red;
}

div h2{  /* 选择子孙,作用于h2 且其父元素是 <div> */
  color:black;
}
#elixirs h2{ /* 父元素的id是elixirs */
  color:black;
}

a:link{ /*未访问链接*/
  color:green;
}
a:visitted{  /*已访问链接*/
  color:red;
}
a:hover{  /*悬停在一个链接上时*/
  color:yellow;
}
a:focus{  /*获取焦点，通过tab键*/
  color:white;
}
a:active{  /*元素被按下时*/
  color:gray;
}