注：语法不懂可以参照，W3C上的技术文档：http://www.w3school.com.cn/html/html_entities.asp
1.符号实体：html中有一些特殊的符号，需要用html中的字符实体来实现；

实例：
<html>
<head>
<title>无题</title>
</head>
<body><font size=7>
1.  &quot;         2.   &cent<br/>
3.  &pound;        4.   %yen;<br/>
5.  &euro;         6.  &sect;<br>
7.  &copy;         8.   &reg;<br/>
9.  &trade;        10.  &times;<br/>
11. &divide;
</font>
</body>
</html>
结果：
2.html的超链接：
(1)
     使用超链接，可以从一个页面链接到另外一个页面。此链接就相当于一个地址，指向目标网页，目标网页存储着一些相关的信息，往往这些信息在当前页面上不是关键的内容，呈现的仅仅是一个关键词，在目标网页上是对这个关键词的详细解释。

实例3：
<html>
<head>
<title>无题</title>
</head>
<body>
<font size=7>超链接</font></br>
<a href='poem.html'>无题</a>   //href指明所要打开的网页的名称，
<a href='http://www.baidu.com'>
//此处href目标也可以指向外部的网页的比如;href='http://www.baidu.com'
它指定链接的目标；此处目标页面在当前页面打开；其实是属性target默认为“_self”
<a href='poem.html' target="_blank">无题</a>  //此处添加了target="_bank",作用是在另外一个页面打开目标网页；
</body>
</html>
结果：
(2)超链接可以为写邮件
实例4：
<html>
<head>
<title>无题</title>
</head>
<body>
<font size=7>超链接</font></br>
<a href='mailto:abc@sina.cn'>发邮件</a>  //此处outlook需要配置
</body>
</html>
结果：



3.图片元素：
（1）本地图片的加载：
实例：
<html>
<head>
<title>无题</title>
</head>
<body bgcolor=#018720>
<h1 align="center"><font size=5 color=red>图片</font></br></h1>

<img src='1.jpg' width=300px/>

<img src='2.jpg'/>

<img src='3.jpg'/>

<img src='4.jpg'/>
</body>
</html>

（2）网络图片的加载：
<html>
<head>
<title>无题</title>
</head>
<body bgcolor=#018720>
<h1 align="center"><font size=5 color=red>图片</font></br></h1>

<img src='http://www.baidu.com/img/baidu_sylogo1.gif'/>

</body>
</html>
 (3)给图片加边框：
<html>
<head>
<title>无题</title>
</head>
<body bgcolor=#018720>
<h1 align="center"><font size=5 color=red>图片</font></br></h1>

<img src='1.jpg' width=300px border=2/>

<img src='http://www.baidu.com/img/baidu_sylogo1.gif' border=5/>

</body>
</html>

（4）当图片不能现实的时候显示提示文字：
<html>
<head>
<title>无题</title>
</head>
<body bgcolor=#018720>
<h1 align="center"><font size=5 color=red>图片</font></br></h1>

<img src='1.jpg' width=300px border=2/>

<img src="boat.gif" alt="图片不存在">

<img src='http://www.baidu.com/img/baidu_sylogo1.gif' border=5/>

</body>
</html>


（5）为文件添加背景图片：
<html>
<head>
<title>无题</title>
</head>
<body background='bg.jpg'>
<h1 align="center"><font size=5 color=red>图片</font></br></h1>

<img src='1.jpg' width=300px border=2/>

<img src="boat.gif" alt="图片不存在">

<img src='http://www.baidu.com/img/baidu_sylogo1.gif' border=5/>

</body>
</html>

4.颜色

Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

216 跨平台色

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66

5.html表格元素：
表格的主要用途：现实和数据和图片；并且可以布局；
实例6：
<html>
<head>
<title>无题</title>
</head>
<body bgcolor=#02DD30>
<h1 align="center"><font size=5 color=red>表格</font></br></h1>
<table align="center" border=1 bordercolor=red width=500px height=100px cellspacing=5> //align主要是设置文本内容显示的位置；border设置外边框的宽度；bordercolor设置外边框颜色；width ,height分别设置表格的宽度和高度；cellspring主要设置表格之间的分割线宽度；
<tr align="center"><td>1</td><td>2</td><td>3</td><td>4</td></tr>//<tr></tr>表示一行；<tb></tb>表示一列
<tr align="center"><td>1</td><td>2</td><td>3</td><td>4</td></tr>//可以通过align设置每列内容的显示位置
<tr bordercolor=yellow ><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
结果：

综合实例练习：
制作一个菜谱：
<html>
<head>
<title>菜谱</title>
</head>
<body bgcolor=#FFCCFF>
<table border=1 bordercolor=#FF33CC width=500px height=150px  align="center">

<caption align="center">菜单</caption>

<tr><td colspan=3>星期一菜单</tr>

<tr><td rowspan=2 align="center"><font  size=5 color=red>素菜</font></td><td>西红柿炒蛋<img align="right" src="1.jpg" width=80px/></td><td>酸辣土豆丝<img align="right" src="2.jpg" width=80px/></td></tr>
<tr><td>干煸豆角<img align="right"src="3.jpg" width=80px/></td><td>蘑菇炒青菜<img align="right"src="4.jpg" width=80px/></td></tr>

<tr><td rowspan=2 align="center"><font  size=5 color=red>荤菜</font></td><td>麻辣鱼<img align="right" src="a.jpg" width=80px/></td><td>回锅肉<img align="right" src="b.jpg" width=80px/></td></tr>
<tr><td>红烧肉<img align="right" src="c.jpg" width=80px/></td><td>梅菜扣肉<img align="right" src="d.jpg" width=80px/></td></tr>

</table>
</body>
</html>
结果：