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

你可能感兴趣的:(html,XHTML,iframe,border,Dreamweaver)