学习html和css前，我们需要一个text editor文档编辑器，计算机自带的notepad 可以写html文件，但是用文本文档写出来的文件可阅读性不强。我们可以下载notepad++来写html （notepad++也可以用来写很多其他语言的文件）且是免费试用的，很方便。[Notepad++官方下载地址]?
下载安装好Notepad后我们就可以开始写html文件了。
html文件包括很多的<tag>，每个html文件开头都有<!DOCTYPE html>，说明这是一个html文件。
html文件在<!DOCTYPE HTML>下面会有两个tag: <html></html>tag，（html文件里的tag分single tag, double tag，html就是double tag：一个开始标签和结束标签）在这个<html></html>里有<head></head>和<body></body>标签。
head里面可以加<title>这里是网页的title</title>，在body里面可以加上网页的正文。
我们在body里随便写两句话，写好之后保存为html文件然后用浏览器打开，可以看到效果
我们写的网页成功显示出来了，只是在body里写的内容原本是有空一行的，但是网页里面显示是紧挨着的，这是因为html文件会自动忽略代码里的很多空格和空行。
解决这一问题，我们有两种方法可以让两句话分行显示。
段落标签是html里常用的正文标签，每一个标签里的内容都是单独一段，所以如果两句话分别写在两个<p></p>tag里，ta们会自动分为两段：
除了使用<p>，我们还可以通过<br /> （break）做到还行效果：
在html里有h1, h2, h3, h4, h5, h6 不同尺寸的header，h1是最大的，h6是最小的。
<hr /> 为 horizontal row, 即分割线。在希望出现分割线的时候输入<hr />即可，如：
效果如下：
如果想加粗文字，在想加粗的内容两边加上<strong>文本</strong>tag
如果想倾斜文字，在想加斜的内容两边加上<em>文本</em>tag
在文件里添加批注可以用<!--这里的内容都是批注-->
添加链接使用<a></a>tag，这里的a是anchor，我们可以通过这个tag链接到另一个网页，也可以链接到服务器同目录下的其他网页
如果我们要给一个内容加上链接，需要在<a>tag后面加上href属性<ahref=”url”></a>，例如：
如果说链接跳转到同目录下的其他网页，我们可以在href处将完整的url改为目录下的网页文件名即可，如我在目录下新建了网页another_page.html:
点击页面上的文字即可以到另一个页面，当然也可以在第二个页面同样加一个链接实现两个页面互相点击跳转。
这样的link很适用于比较长的页面，比如百科和论文或者博客的目录等，可以更好帮助导航。
要创建页面内的link，首先我们要创建target: 在页面的节点处前面加上<aname=”checkpoint_name”></a>, name属性值可以根据需要命名，然后我们在需要链接的内容处加上<ahref=”#checkpoint_name”即可></a>
如果我们想在网页里加上邮箱链接，我们可以使用
下图为显示效果，如果点击了邮箱链接，默认的邮件程序会弹出，如果没有的话可能会让设置outlook，有时候会有些annoying，也许直接将邮箱地址贴出来放在网页上会更好。
在网页贴上链接后，可以通过a tag的title属性显示链接的提示，如：
当鼠标放在链接上面时，即可看到文字提示
一个tag可以设置多个属性，只要保证他们不互相冲突，基本是可以做出挺多不错的效果哒？
首先我们要有一张图片，可以将图片放到和html文件同文件夹下
<img src=”图片文件名”/> 即可在页面添加图片，有了图片和之前学的知识，可以将图片变为可点击跳转到另一个页面并且显示链接提示的效果，如：
有时候我们需要在网页上放图片但是图片尺寸太大需要修改，比如下面这张poster，如果我们需要ta小一点，比如只是做一个索引什么的，可以在imgtag后面加上height属性设置好高度就可以了
上图比如我们设置高度为200，效果如下：
值得注意的是，我们的这个resize只是将图片shrink显示出来，图片的文件大小是没有变化的，所以虽然看起来是小图，但是不会起到更快加载页面的效果。
如果我们想要放一张更好的图片，还是需要用图片编辑软件来压缩图片大小然后放到网页上去的。
表格的tag即<table></table>
Table有行和列，行是<tr></tr> （table row）， 列是<td></td>。如果我们想做一个两行两列的表格，像下面这样即可，table的border属性显示表格外框的效果，如果没有border表格外框是看不出来的。
<table border=2>
在table里的内容不一定是文本，所有在body里可以加的东西在table里都可以（如图片，链接等数据）
通常一个表格都会有表头以更好理解表格内容。表头tag是<th></th>,默认是加粗居中显示的，如：
有时候我们并不需要一个固定的N行N列的表格，可能希望第一行4列，第二行3列或其他不规则的表格，这个时候colspan属性就可以帮忙了。我们可以在希望占有多于一个格子的地方加上colspan属性，并给其属性值，如colspan=”2”就表示这个地方占两格内容。
如修改了的下面的代码，原先的前两个表头合并为一个且占用两个格子：
在我们没有指定表格宽度的时候，默认尺寸是根据在表格里的内容来的。如果我们希望修改表格的宽度，可以在table tag加属性width:
a.指定宽度table width=”300” width属性后面的数值是像素值
b.指定比例 table width=”100%” 百分比为表格相比较页面宽度比
下图为指定宽度为500
下图为指定100%比例，不论怎么调整页面表格总是充满屏幕
cellpadding属性并指定属性值，设置单元格的内容与单元格的边距
如：
在table后面加cellpadding属性并指定属性值，设置单元格的内容与单元格的边距
在table后面加cellspacing属性并指定属性值，设置单元格与单元格之间的距离
如：
List分有序的和无序的
无序list是unorderedlist，有<ul></ul>标签包围，每个item外有<li></li>tag
比如说我们列一个list写出冰箱里的食物：
有序的list即ordered list，有tag<ol></ol>，list里的每个item同样是有<li></li>tag包围，不同于无序list，有序list会自动帮我们编号。比如我们在列一个to-do-list，基于priority的时候就可以用到有序的list，或者说写一个instruction，rank什么的，用ol会更合适，如下面的步骤：
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61109.shtml
