html&xhtml笔记整理归类
一、基本的标签
1.<!DOCTYPE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.<html>
<html>
<head>
</head>
<body>
...
...
</body>
</html>
3.<body>
4.<h1>to<h6>
<h1>This is title</h1>
<h2>This is title</h2>
5.<p> (p=paragraph)
<p>This is some text in a very short paragraph</p>
6.<br> (br = break)
<br clear="left" />
7.<hr> (hr=horizontal row line)
<h1>This is header 1</h1>
<hr/>
<p>This is some text</p>
8.<!--...-->
<!--This text is a comment-->
<p>This is a regular paragraph</p>
二、字符格式化
1.<em> (em=emphasize)
2.<strong>
<dfn> (dfn=definition)
<code>
<samp>
<kbd> (Keyboard)
<var>
<cite>
3.<sup> (sup=superscript)
4.<sub> (sub=subscript)
<sub>下标</sub>
<sup>上标</sup>
5.<bdo>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
6.<b> (b=bold)不赞成使用
8.<i> (i=italics)不赞成使用
9.<big>不赞成使用
10.<small>不赞成使用
<tt> (tt=printer fonts)
7.<font>不赞成使用
11.<u> (u=underline)不赞成使用
三、输出
1.<pre> (pre=previous)
四、块级
1.<acronym>
<acronym title="World Wide Web">WWW</acronym>
2.<abbr> (abbr = abbreviation)
<abbr title="etcetera">etc.</abbr>
<body>
<abbr title="etcetera">etc.</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
3.<address>
4.<blockquote>
可选属性：DTD cite
<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>here is a long quotation
5.<q>
可选属性：cite
6.<ins>
可选属性：DTD cite datetime
7.<del>
a dozen is<del>20</del><ins>12</ins>pieces
8.<center>不赞成使用
9.<s>、<strike>不赞成使用
五、链接
1.<a>
可选属性：DTD charset coords href hreflang name rel rev shape target
2.<link>
<head>
<link rel="stylesheet" type="text/css" href="csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
六、框架
1.<frame>
可选属性：frameborder longdesc marginheight marginwidth name
noresize scrolling src
2.<frameset>
必选一属性：cols rows
<frameset rows="150,300,150">
<frameset rows="25%,50%,25%">
<frameset cols="100, *">
<frameset rows="*, 100, *">
<frameset cols="10%, 3*, *, *">
<frameset rows="19%,*" cols="*" framespacing="2"
frameborder="yes" border="1">
<frame src="top.jsp" name="top" scrolling="no" noresize>
<frameset cols="20%,*" frameborder="yes" border="1">
<frame src="left.jsp" name="left" scrolling="no" noresize>
<frame src="right.jsp" name="right" scrolling="yes" noresize>
</frameset>
</frameset>
<noframes>对不起，您的浏览器版本太低！</noframes>
3.<noframe>
<frameset cols="25%,25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src="venus.htm" />
<frame src="sun.htm" />
<frame src="mercur.htm" />
</frameset>
4.<iframe> (iframe = inline frame)
可选属性：align frameborder height longdesc marginheight marginwidth
name scrolling src width
<html>
<body>
<iframe src="eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
七、输入
1.<form>
必需属性：action method
可选属性：accept- charset enctype name target
<form method="post" action="addtelephonecheck.jsp">
<form method="get" action="registerCheck.jsp">
2.<input>
必需属性：type name
可选属性：DTD accept alt checked disabled maxlength readonly src value
<input name="number" type="text">
<input name="sure" type="submit" value="确 认">
<input name="clear" type="reset" value="取 消">
3.<textarea>
必需属性： cols rows
可选属性：DTD disabled name readonly wrap
<textarea rows="3" cols="30">
This is text area... ...
</textarea>
4.<button>
可选属性：disabled name type value
<button type="button">Click Me!</button>
5.<select>
可选属性：disabled multiple name size
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>
6.<optgroup>
必需属性：label
可选属性：disabled
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi>Audi</option>
</optgroup>
</select>
7.<option>
可选属性：disabled label selected value
8.<label>
可选属性：DTD for
<label for="SSN"> Social Security Number: </label>
<input type="text" name="SocSecNum" id="SSn" />
<label> Date of Birth:<input type="text" name="DofB" /> </label>
9.<fieldset>
<fieldset>
<legend>Health information:</legend>
<form>
<label>Height: <input type="text" /></label>
<label>Weight: <input type="text" /></label>
</form>
</fieldset>
八、列表
1.<ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
2.<ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
3.<list>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
4.<dl> (dl = definition list)||dialog
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cokd drink</dd>
</dl>
5.<dt> (dt = definition term)||dialog topic
6.<dd> (dd = definition description)||dialog detail
7.<dir>不赞成使用
<dir>
<li>html</li>
<li>xhtml</li>
</dir>
8.<menu>不赞成使用
<menu>
<li>html</li>
<li>xhtml</li>
</menu>
九、图像
1.<img>
必需属性：alt src
可选属性：DTD align border width height hspace vspace
ismap longdesc usemap
<a href="t1.html">
<img src="test.gif" />
</a>
2.<map>
必需属性：id
可选属性：DTD name
<a >
<img src="test.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
<area coords="0,0,49,49" href="t1.html">
<area coords="50,0,99,49" href="t2.html">
<area coords="0,50,49,99" href="t3.html">
<area coords="50,50,99,99" href="t4.html">
</map>
3.<area>
必需属性： DTD alt
可选属性：coords href nohref shape target
十、表格
1.<table>
可选属性：align bgcolor border cellpadding cellspacing frame rules
summary width
2.<caption>
可选属性：align
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
3.<th> (th=table head)
可选属性：abbr align axis bgcolor char charoff colspan headers
height nowrap rowspan scope valign width
4.<tr> (tr=table row)
可选属性：DTD abbr align axis bgcolor char charoff colspan headers
height nowrap rowspan scope valign width
<table border = "1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
5.<td> (td=table data cell)
可选属性： DTD abbr align axis bgcolor char charoff colspan headers
height nowrap rowspan scope valign width
<table border="1" width="100%">
<tr>
<th id="name">Name</td>
<th id="Email">Email</td>
<th id="Phone">Phone</td>
<th id="Address">Address</td>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">[email protected]</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table>
<table border="1">
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td scope="row">1</td>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td scope="row">2</td>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
6.<thead>
可选属性：DTD align char charoff valign
7.<tbody>
可选属性：DTD align char charoff valign
8.<tfoot>
可选属性：DTD align char charoff valign
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
9.<col> (col=column)
可选属性：align char charoff span valign width
<table border="1">
<colgroup span="3">
<col width="20"></col>
<col width="20"></col>
<col width="20"></col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
10.<colgroup>
可选属性：DTD align char charoff span valign width
<table border="1">
<colgroup span="3" ></colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
十一、样式
1.<style>
必需属性：type
可选属性：media
<head>
<style type="text/css">
h1 {color: red}
h2 {color: blue}
</style>
</head>
2.<div> (div=division)
可选属性：align
十二、元信息
1.<head>
可选属性：profile
2.<title>
3.<meta>
必需属性：content
可选属性：DTD http-equiv name scheme
<meta name="keywords" content="HTML,ASP,PHP,SQL" >
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="w3school.com.cn" />
<meta name="revised" content="David Yang,8/1/07" />
<meta name="generator" content="Dreamweaver 8.0en" />
</head>
4.<base>
必需属性： DTD href
可选属性： target
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
5.<basefont>不赞成使用
十三、Programming
1.<script>
必需属性：type
可选属性：charset defer language src
<script type="text/javascript">
document.write("Hello World!")
</script>
2.<noscript>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
3.<object>
可选属性：align archive border classid codebase codetype data declare height hspace name standby type usemap
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
4.<param>
必需属性：name
可选属性：name type value valuetype
5.<applet>不赞成使用
必需属性：height width
可选属性：align alt archive code codebase hspace name
object title vspace
十四、标准属性
A.核心属性： (除外：base head html meta param script style title)
1.class
2.id
3.style
4.title
B.语言属性： (除外：base br frame frameset hr iframe param)
1.dir
2.lang
C.键盘属性：
1.accesskey
2.tabindex
十五、事件属性
A.窗口事件：
onload
onunload
B.表单元素事件
onchange
onsubmit
onreset
onselect
onblur
onfocus
C.键盘事件
onkeydown
onkeypress
onkeyup
D.鼠标事件
onclick
ondbclick
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup