html快速入门

html 快速入门

html基础

• HTML 链接：<a>

  <a href="http://www.w3school.com.cn" alt="a link">This is a link</a>

• HTML 图像：<img>

  <img src="w3school.jpg" width="104" height="142" />

• 引用 : <blockquote>, <q>
  这是长的引用：

  这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

  这是短的引用： 这是短的引用。

  使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

• 文本格式 : <b>, <strong>, <big>, <em>, <i>, <small>, <sub>, <sup>
• This text is bold
  This text is strong
  This text is big
  This text is emphasized
  This text is italic
  This text is small
  This text contains _subscript
  This text contains ^superscript
• 删除文本及下划线： <del>, <ins>

  一打有 blablabla hahahaha 件。

  大多数浏览器会改写为删除文本和下划线文本。

  一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

• 预留格式 : <pre>

  pre 标签很适合显示计算机代码：

  for i = 1 to 10
       print i
  next i
  

• 用于显示计算机/编程代码:  <code>, <kbd>,  <tt>, <samp>,  <var>
  Computer code
  Keyboard input
  Teletype text
  Sample text
  Computer variable
  
• 地址：<address>
  Written by Donald Duck.
  Visit us at:
  Example.com
  Box 564, Disneyland
  USA
• 定义与缩写：<dfn>, <abbr>, <acronym>

  WHO 成立于 1948 年。

  etc.
  WWW
  
• 文字方向： <bdo>

  如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

  Here is some Hebrew text
  Here is some Hebrew text
• 注释 ： <!-- blaba  -->
• 列表： <li> list item; <ol> ordered list; <ul> unordered list

带有实体名称的 ASCII 实体

结果	描述	实体名称	实体编号
"	quotation mark	"	"
'	apostrophe	'	'
&	ampersand	&	&
<	less-than	&lt;	&#60;
>	greater-than	&gt;	&#62;

ISO 8859-1 符号实体

结果	描述	实体名称	实体编号
	non-breaking space	 	 
¡	inverted exclamation mark	¡	¡
¢	cent	¢	¢
£	pound	£	£
¤	currency	¤	¤
¥	yen	¥	¥
¦	broken vertical bar	¦	¦
§	section	§	§
¨	spacing diaeresis	¨	¨
©	copyright	©	©
ª	feminine ordinal indicator	ª	ª
«	angle quotation mark (left)	«	«
¬	negation	¬	¬
	soft hyphen	­	­
®	registered trademark	®	®
¯	spacing macron	¯	¯
°	degree	°	°
±	plus-or-minus	±	±
²	superscript 2	²	²
³	superscript 3	³	³
´	spacing acute	´	´
µ	micro	µ	µ
¶	paragraph	¶	¶
·	middle dot	·	·
¸	spacing cedilla	¸	¸
¹	superscript 1	¹	¹
º	masculine ordinal indicator	º	º
»	angle quotation mark (right)	»	»
¼	fraction 1/4	¼	¼
½	fraction 1/2	½	½
¾	fraction 3/4	¾	¾
¿	inverted question mark	¿	¿
×	multiplication	×	×
÷	division	÷	÷

ISO 8859-1 字符实体

结果	描述	实体名称	实体编号
À	capital a, grave accent	À	À
Á	capital a, acute accent	Á	Á
Â	capital a, circumflex accent	Â	Â
Ã	capital a, tilde	Ã	Ã
Ä	capital a, umlaut mark	Ä	Ä
Å	capital a, ring	Å	Å
Æ	capital ae	Æ	Æ
Ç	capital c, cedilla	Ç	Ç
È	capital e, grave accent	È	È
É	capital e, acute accent	É	É
Ê	capital e, circumflex accent	Ê	Ê
Ë	capital e, umlaut mark	Ë	Ë
Ì	capital i, grave accent	Ì	Ì
Í	capital i, acute accent	Í	Í
Î	capital i, circumflex accent	Î	Î
Ï	capital i, umlaut mark	Ï	Ï
Ð	capital eth, Icelandic	Ð	Ð
Ñ	capital n, tilde	Ñ	Ñ
Ò	capital o, grave accent	Ò	Ò
Ó	capital o, acute accent	Ó	Ó
Ô	capital o, circumflex accent	Ô	Ô
Õ	capital o, tilde	Õ	Õ
Ö	capital o, umlaut mark	Ö	Ö
Ø	capital o, slash	Ø	Ø
Ù	capital u, grave accent	Ù	Ù
Ú	capital u, acute accent	Ú	Ú
Û	capital u, circumflex accent	Û	Û
Ü	capital u, umlaut mark	Ü	Ü
Ý	capital y, acute accent	Ý	Ý
Þ	capital THORN, Icelandic	Þ	Þ
ß	small sharp s, German	ß	ß
à	small a, grave accent	à	à
á	small a, acute accent	á	á
â	small a, circumflex accent	â	â
ã	small a, tilde	ã	ã
ä	small a, umlaut mark	ä	ä
å	small a, ring	å	å
æ	small ae	æ	æ
ç	small c, cedilla	ç	ç
è	small e, grave accent	è	è
é	small e, acute accent	é	é
ê	small e, circumflex accent	ê	ê
ë	small e, umlaut mark	ë	ë
ì	small i, grave accent	ì	ì
í	small i, acute accent	í	í
î	small i, circumflex accent	î	î
ï	small i, umlaut mark	ï	ï
ð	small eth, Icelandic	ð	ð
ñ	small n, tilde	ñ	ñ
ò	small o, grave accent	ò	ò
ó	small o, acute accent	ó	ó
ô	small o, circumflex accent	ô	ô
õ	small o, tilde	õ	õ
ö	small o, umlaut mark	ö	ö
ø	small o, slash	ø	ø
ù	small u, grave accent	ù	ù
ú	small u, acute accent	ú	ú
û	small u, circumflex accent	û	û
ü	small u, umlaut mark	ü	ü
ý	small y, acute accent	ý	ý
þ	small thorn, Icelandic	þ	þ
ÿ	small y, umlaut mark	ÿ	ÿ

html 表格

• 带表头及标题的表格: th: Table Header, td:Table Data; tr:Table Row; nbsp: No-Break Space

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

a table sample

Heading	Another Heading
row 1, cell 1	row 1, cell 2
	row 2, cell 2

 

html 元素

• html 块级元素，block level element：<div>, <h1>, <p>, <ul>, <table>, etc. 通常会以新行开始
• html 内联元素，inline element：<span>, <b>, <td>, <a>, <img>, etc. 通常不会以新行开始

html 类

 

html 样式

• ccs