HTML学习笔记
我学习HTML和CSS的入门书籍是《HTML和CSS入门经典（第七版）》（这里不是在做广告哦，嘿嘿）由于每天要上课，还要去做实验，每天大概只有一个多小时的时间学习<br />这些内容，前前后后大概用了两个星期的时间。好了废话不多说，这一篇写HTML的学习记录，下一篇写CSS的学习记录。
<?xml version = "1.0" encording = "UTF-8"?> <!-- 表明网页时xml文档，版本为1.0，字符编码类型为UTF-8 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/1999/xhtml11/DTD/xhtml.dtd"> <!-- 指出该文档为XNTML1.1文档，允许网页浏览器检查文档，保证代码满足XHTML1.1的要求 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- 这个没说 --> <head> <title>My First Page</title> </head> <body> <p>Hello World!</p> </body> </html>
一个网页的有的标签：<html>,<head>,<title>,<body>。可以用标题标签突出文本，如<h1>,<h2>,<h3>等。下面一些总结:
1.链接
链接到另一个页面：
<a href = "url">click here!</a>
这里的下划线是以带下划线的蓝色字体显示，单击之后变为红色。可用CSS修改这些属性：
a:link{/*链接尚未访问过*/ color:#19619A; /*淡蓝色*/ font-weight:bold; /*将链接的字体设置为粗体*/ text-decoration:none; /*删除下划线*/ } a:hover{/*鼠标指向链接*/ background-color:gold; font-weight:bold; text-decoration:none; } a:active{/*链接被激活，如用鼠标单击*/ color:red; text-decoration:none; } a:visited{/*链接已访问*/ color:red; font-weight:bold; text-decoration:none; }
可用相对地址链接到另一个文件夹的网页，如：
<a href = "another.html"> click here!</a> <!-- 链接到同一个文件夹的网页 --> <a href = "document/another.html">click here!</a> <!-- 链接到另一个文件夹的网页 --> <a href = "../another.html">click here!</a> <!-- 链接到父文件夹下的网页 -->
在新浏览器窗口中打开链接：
<a href = "url", target = "_blank">click here!</a> <!-- W3C在XHTML中删除了target = "_blank" --> <head> <title>My Page</title> <script type = "text/javascript" src = "external.js"></script> </head><!-- 用Javascript来实现 -->
链接到网页内部：
<a href = "#anchor"> click here!</a> <p id = "anchor">I am here</p> <a href = "another.html#anchor">click here!</a> <!-- 链接到另一个网页的特定位置 -->
在网页中链接Email地址：
<a href = "mailto:example@example.com?subject = Question$amp;body = May I ask you a qusetion?">send message to me </a> <!-- subject表示邮件的主题，body表示邮件的内容。这两个属性邮件地址之间用“?"隔开，属性之间用"&"隔开--> <a href = "mailto:example@exaple.com">send message to me</a> <!-- 可用ASCII码代替字符"a"，可以减少垃圾邮件 -->
2.文本对齐和列表
文本对齐:
<p style = "text-align:center">text</p> <!--text-align样式规则的默认值为left，可选值有left，center，right--> <div style = "text-align:center">block</div> <!-- 可为块设置对齐方式 -->
列表：
<ol><!-- 有序列表，自动添加编号，自动缩进和分行--> <li>order one</li> <li>order two</li> <li>order three</li> </ol> <ul><!-- 无序列表，自动添加项目符号，自动缩进和分行--> <li>item</li> <li>item</li> <li>item</li> </ul> <dl><!--自动缩进和分行--> <dt>term</dt> <dd>defination</dd> </dl>
另外，可在<ul>,<ol>,<li>标签中使用"list-style-type"指定项目符号类型。
<pre>可将文本格式化为等宽字体，并且在<pre>中使用的空格和分行将被保留。
3.图像
将图像放到网页中：
<img src = "myimage.gif" alt = "My Image" title = "My Image" /> <!-- "src"标识图像的位置； "alt"指定图像的描述性文本，当图像不可见时，可看到该属性指定的文本； "title"提供在图像可见时对图像的描述；图像可以是GIF，PNG，JPEG格式的图像文件-->
对齐图像：
<img src = "MyImage.gif" alt = "My Image" style = "float:left"/> <!--文本与图像的水平对齐，left表示图像左对齐，文本围绕在图像的右边；right与之相反，没有center对齐--> <img src = "MyImage.gif" alt = "My Image" style = "vertical-align:text-top"/> <!-- 文本与图像的垂直对齐: "text-top"表示图像的顶部与同一行中最高的图像或文本的顶部对齐，"middle"图像的中心与同一行中其他内容的中心对齐； "text-bottom"表示图像的底部与文本的底部对齐；"baseline"表示图像的底部与文本的基线对齐-->
将图像变为链接：
<a href = "MyImage.gif"><img src = "MyImage.gif" alt = "My image" style = "My image" style = "border-style:none"/></a> <!--通常，网页浏览器会在图片链接的周围绘制一个彩色矩形，如果不希望显示之隔边框，可在<img>中包含style = "borde-style:none"-->
图像映射：
<map id = "MyImage"> <area shape = "rect" coords = "0,0,100,100" href = "MyImage_1.gif" alt = "MyImage_1" /> <!--"rect"表示该区域是矩形，"0,0,100,100"表示左上角的坐标和右下角的坐标--> <area shape = "cricle" coords = "10,10,5" href = "MyImage_1.gif" alt = "MyImage_2" /> <!--"circle"表示该区域为圆形，"10,10,5"表示圆心坐标和半径--> <area shape = "poly" coords = "0,0,100,100,234,234,123,123,245,245" href = "MyImage_1.gif" alt = "MyImage_3" /> <!--"poly"表示多边形，"0,0,100,100,234,234,123,123,245,245"表示所有顶点的坐标--> </map> <img src = "MyImage.gif" alt = "My image" title = "My image" usemap = "#MyImage" style = "border-style:none"/> <!--usemap属性的值为<map>标签id的值-->
4.自定义背景和颜色
背景颜色和文本颜色：
<body style = "background-color:green;color:#FF0000"> <!--将背景设置为绿色，文本颜色设定为红色。<body>中的颜色应用于网页中所有的文本，但可以在<span>修改color样式属性，改变特定单词或段落的颜色-->
背景图像：
<body style = "background-image:url(backimage.jpg)"> <!--若要使用透明图像，由于JPEG不支持透明，GIF支持一种透明色，PNG可以指定范围，所以最好用PNG格式的图像-->
好了，这就是我最近学习HTML的简要总结，谢谢大家的浏览。
