html入门教程适合初学者

希望可以帮到大家

一、HTML基本概念 什么是HTML文件？



 HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中

文称“标记”。



 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。

这就试写一个HTML文件吧！

打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。

Title of page

This is my first homepage. This text is bold

要浏览这个first.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。

示例解释

这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是，表示HTML文件到此结束。

在和之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。

在和之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在和之间的信息，是正文。

在和之间的文字，用粗体表示。顾名思义，就是bold的意思。

HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如，等，通过这些Tag，可以告诉浏览器如何显示这个文件。

HTML元素(HTML Elements)

 HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title

就是HTML元素。



 HTML元素用Tag表示，Tag以结束。 Tag通常是成对出现的，比如。起始的叫做Opening Tag，结

尾的就叫做Closing Tag。

 目前HTML的Tag不区分大小写的。比如，和其实是相同的。 HTML元素(HTML Elements)的属性

HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：

再比如，你可以使用border这个属性，将一个表格设成一个无边框的表格。如下：

属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor, border就是name，red和0就是value。属性值一般用双引号标记起来。

属性通常是附加给HTML的Opening Tag，而不是Closing Tag。

二、基础HTML Tag HTML里，比较基础的Tag主要用于标题，段落和分行。

学习HTML最好的方法，就是跟着示例学。

正文标题

这个示例告诉你如何在HTML文件里定义正文标题。

HTML用

到

这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

段落划分

在HTML里用

和

划分段落。

This is a paragraph

This is another paragraph

换行

通过使用这个Tag，可以在不新建段落的情况下换行。没有Closing Tag。 用

换行是个坏习惯，正确的是使用。

This is a paragraph with line breaks

HTML注释

在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。

三、Html常用格式

要查看这个HTML的源代码，有两种方法。一是点击鼠标右键，点击View Source(查看源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。

利用View Source得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。

四、Html特殊字符显示 HTML字符实体(Character Entities)

有些字符在HTML里有特别的含义，比如小于号

这就要说到HTML字符实体(HTML Character Entities)了。

一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫

ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。

比如，要显示小于号，就可以写

用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

注意：Entity是区分大小写的。

如何显示空格

五、HTML的超链接

先看两个示例

建立一个超链接

这个示例演示了如何在HTML文件里创建超链接。

这是一个链接

六、HTML相对路径(Relative Path)和绝对路径(Absolute Path)

HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

为了避免这些错误，正确地引用文件，我们需要学习一下HTML路径。

HTML有2种路径的写法：相对路径和绝对路径。

HTML相对路径(Relative Path)

同一个目录的文件引用

如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。 假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html 在info.html加入index.html超链接的代码应该这样写：

index.html

如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html 在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path)指带域名的文件的完整路径。

假设你注册了域名www.admin5.com/html，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。

假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： http://www.admin5.com/html。

假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是

http://www.admin5.com/html/html_tutorials/index.html。

七、如何在HTML中创建表格

HTML表格用

表示。一个表格可以分成很多行(row)，用

表示；每行又可以分成很多单元格(cell)，用

表示。

这三个Tag是创建表格最常用的Tag。

示例

八、HTML框架(Frames) 使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。

Frameset

决定如何划分Frame。有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。 Frame

用这个Tag设定网页。里有src属性，src值就是网页的路径和文件名。

下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。

Iframe

Iframe是Inline Frame的意思，用可以将Frame置于一个HTML文件内。

示例

列分Frame

这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。

九、HTML列表(Lists)

十、HTML表单(Forms)

用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的

http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp。

至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。

HTML表单(Form)常用控件(Controls)

HTML表单(Form)常用控件有：

表单控件(Form Contros) 说明

input type="text"

input type="submit"

input type="checkbox"

input type="radio"

select

textArea

input type="password" 单行文本输入框 将表单(Form)里的信息提交给表单里action所指向的文件 复选框 单选框 下拉框 多行文本输入框 密码输入框(输入的文字用*表示)

表单控件(Form Control)：单行文本输入框(input type="text")

单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：

演示示例（同上）

表单控件(Form Control)：复选框(input type="checkbox")

十一、HTML图片(Images)

用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：

十二、HTML字体(Fonts)

在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。

字体大小

用字体大小属性(size)来设定字体的大小。示例代码如下：

这一段的字体大小的值是2。

十三、HTML背景颜色和背景图片

HTML的 有两个关于背景的属性，一个是 bgcolor，是设置背景颜色的；另一个是 background，是设置背景图片的。

bgcolor属性

bgcolor属性用来设置HTML网页的背景颜色。

示例

看，这个页面是黄色的。

background属性

background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如：

如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。

示例

十四、HTML头部信息(Head)

HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。

另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)

下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。

标题(title)

标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：

示例代码如下：

HTML中文教程头部信息(head)之标题(title)说明

链接(link)

用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：

有关CSS外部样式表和示例，详见CSS简介。

样式(style)

用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：

有关CSS内部样式表和示例，详见CSS简介。

关于网页信息(meta)

在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。 这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。

在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：

利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：

content="5;url=http://www.admin5.com/html/html_tutorials/index.html">

演示示例