HTML语言基础教程

HTML 语言教程(新手版)

HTML基本概念

什么是HTML文件?

?HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语

言”。

?和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,

中文称“标记”。

?一个HTML文件的后缀名是.htm或者是.html。

?用文本编辑器就可以编写HTML文件。

这就试写一个HTML文件吧!

打开你的网页编辑工具(如frontpage Dreamweaver等等),新建一个文件,然后拷贝以下代码到这个新文件,然后将这个文件存成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这个属性,将一个表格设成一个无边框的表格。如下:

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

一些基础的HTML Tag

正文标题

这个示例告诉你如何在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 para
graph with line breaks

HTML注释

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

好地理解你的代码。

注释可以写在之间。浏览器是忽略注释的,你不会在HTML正文中看到你的注释。

一些小建议

HTML文件会自动截去多余的空格。不管你加多少空格,都被看做一个空格。一个空行也被看做一个空格。有些Tag能够将文本自成一段,而不需要使用

来分段。比如

之类的标题Tag。

HTML特殊字符显示

HTML字符实体(Character Entities)有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在

网页中显示一个小于号,该怎么办呢?

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

一个字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand;

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

比如,要显示小于号,就可以写<或者<。

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

浏览器都能处理。

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

如何显示空格通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。为了在

网页中增加空格,你可以使用表示空格。

更多字符实体(Character Entities)

HTML利用超链接打开链接文件

a和href属性

HTML用来表示超链接,英文叫anchor。

可以指向任何一个文件源:一个HTML网页,一个图片,一个影视文件等。用法如下:链接的显示文字 点击当中的内容,即可打开一个链接文件,href

属性则表示这个链接文件的路径。

比如链接到https://www.360docs.net/doc/9e7572539.html,/html站点首页,就可以这样表示:

站长网站长学院https://www.360docs.net/doc/9e7572539.html,/html首

target属性

使用target属性,可以在一个新窗口里打开链接文件。

站长网站长学院

https://www.360docs.net/doc/9e7572539.html,/html首页

title属性使用title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。

站长网站长学院网站 如果希望注释多行显示,可以使用作为换行符。

站长网站长学院网站

name属性使用name属性,可以跳转到一个文件的指定部位。

使用name属性,要设置一对。一是设定name的名称,二是设定一个href指向这个name:参见第一章 第一章 name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接,放在文件的开始处,每个章节的开头都设置Name属性。当用户点击某个章节的链接时,这个章节的内容就显示在最上面。

如果浏览器不能找到Name指定的部分,则显示文章开头,不报错。

链接到email地址在网站中,你经常会看到“联系我们”的链接,一点击这个链接,就会触发你的邮件客户端,比如Outlook Express,然后显示一个新建mail的窗口。用可以实现这

样的功能。

联系新浪

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)指带域名的文件的完整路径。

假设你注册了域名https://www.360docs.net/doc/9e7572539.html,/html,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。

假设你在www根目录下放了一个文件index.html,这个文件的绝对路径就是:

https://www.360docs.net/doc/9e7572539.html,/html。

假设你在www根目录下建了一个目录叫html_tutorials,然后在该目录下放了一个文件

index.html,这个文件的绝对路径就是

https://www.360docs.net/doc/9e7572539.html,/html/html_tutorials/index.html。

HTML图片(Images)

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

url表示图片的路径和文件名。比如 url 可以是

images/logo/blabla_logo01.gif,也可以是个相对路径

"../images/logo/blabla_logo01.gif"。

图片alt属性中有一个alt属性,英文叫alternate text。例句如下:

smile face假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。

其实,现在大多数浏览器都支持图片载入。在此介绍Alt属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT属性写上图片的说明,

便于搜索引擎抓取你网页的内容。

图片align属性用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对

齐方式(居左、居中、居右)。

图片的大小在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难

看。

建议图片相对文字,所占的字节数较多,比如一个全屏的图片,即使经过压缩,也要占去大约50k字节,这相当于25000字的文本。因此浏览器载入图片比较费时,建议一个HTML文件里不要包含过多的图片,否则会影响你的网页显示速度。

HTML字体(Fonts)

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

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

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

字体风格用face属性来设定字体风格。示例代码如下:

这一段的字体风格是arial。

字体颜色用颜色属性

(color)来设定字体颜色。

这一段的字体颜色是红色

注意HTML4的标准中,已经不建议使用font及其属性来设定字体,而是建议用CSS来设定

字体的大小,颜色,字体风格等。

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)的链接。示例代码如下

:

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

如下:

关于网页信息(meta)在计算机语言里,你经常可以看到一个前缀 -- meta,meta就是“关于”(about)的意思。

这meta解释起来比较拗口,比如metadata,意为描述data的data,英文即data about data。还有一个词叫metalanguage,表示一种描述其它语言的语言。再举一个例子,metafile,

表示描述其它文件的文件。

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

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

HTML元素参考手册

a

表示超链接的起始或目的位置。

acronym

表示取首字母的缩写词。

address

表示特定信息,如地址、签名、作者、文档信息。

applet

在页面上放置可执行内容。

area

定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。

b

指定文本应以粗体显示。

base

指定一个显式 URL 用于解析对于外部源的链接和引用,如图像和样式表。

basefont

设置显示文本时作为默认字体的基础字体值。

bdo

允许作者为选定文本片断禁用双向法则。

bgsound

使页面能够带有背景声音或配音。

big

指定所含文本要以比当前字体稍大的字体显示。

blockquote

表示文本中的一段引用语。

body

指明文档主体的开始和结束。

br

插入一个换行符。

button

指定一个容器,其中所含的 HTML 会被显示为一个按钮。

caption

表格的标题,对表格的简单描述。

center

将指定文本和图像居中显示。

cite

用斜体显示标明引文。

code

表示代码范例。

col

说明基于列的表格缺省属性。

colgroup

说明表格中一列或一组列的缺省属性。

comment

表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。

dd

在定义列表中表示定义。定义通常在定义列表中缩进显示。

del

表示文本已经从文档中删除。

dfn

表示术语的定义。

dir

表示目录列表。

div

表示一块可显示 HTML 的区域

dl

表示定义列表。

dt

在定义列表中表示定义术语。

em

强调文本,通常以斜体显示。

embed

允许嵌入任何类型的文档。

fieldset

在字段集包含的文本和其它元素外面画一个方框。

font

用于说明所包含文本的新字体、大小和颜色。

form

说明所包含的控件是某个表单的组成部分。

frame

在 FRAMESET 元素内表示单个框架。

frameset

表示一个框架集,用于组织多个框架和嵌套框架集。

head

提供了关于文档的无序信息集合。

hn

以标题样式显示文本。

hr

画一条横线。

html

表明文档包含 HTML 元素。

i

指定文本应以斜体显示。

iframe

创建内嵌漂浮框架。

img

在文档中嵌入图像或视频片断。

input

创建各种表单输入控件。

input type=button

创建按钮控件。

input type=checkbox

创建复选框控件。

input type=file

创建文件上载控件,该控件带有一个文本框和一个浏览按钮。

input type=hidden

传输关于客户/服务器交互的状态信息。

input type=image

创建一个图像控件,该控件被点击后将导致表单立即被提交。

input type=password

创建与 INPUT type=text 控件类似的单行文本输入控件,不过并不显示用户输入的内容。

input type=radio

创建单选钮控件。

input type=reset

创建一个按钮,点击该按钮后,将重置表单控件回其初始值。

input type=submit

创建一个按钮,点击该按钮后,即提交表单。

input type=text

创建一个单行的文本输入控件。

ins

表示插入到文档中的文本。

isindex

使浏览器显示一个对话框,提示用户输入单行文本。

kbd

以定宽字体显示文本。

label

为页面上的其它元素指定标签。

legend

在 fieldSet 对象绘制的方框内插入一个标题。

li

表示列表中的一个项目。

link

允许当前文档和外部文档建立连接。

listing

以固定宽度的字体显示文本。

map

包含客户端图像映射的坐标数据。

marqueee

创建一个滚动的文本字幕。

menu

创建一个无序列表。

meta

向服务器和客户端传达关于文档的隐藏信息。

nobr

不换行显示文本。

noframes

包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。

noscript

指定在不支持脚本的浏览器中显示的 HTML。

object

在 HTML 页面中插入对象。

ol

编制排序列表。

optgroup

允许作者对 select 元素中的选项进行逻辑分组。

option

表示 SELECT 元素中的一个选项。

p

表示一段。

param

设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。

pre

以固定宽度字体显示文本。

q

分离文本中的引语。

s

带删除线方式显示文本。

samp

表示代码范例。

script

指定由脚本引擎解释的页面中的脚本。

select

表示一个列表框或者一个下拉框。

small

指定内含文本要比当前字体稍小的字体显示。

span

指定内嵌文本容器。

strike

带删除线显示文本。

strong

以粗体显示文本。

style

指定页面的样式表。

sub

说明内含文本要以下标的形式显示,比当前字体稍小。

sup

说明内含文本要以上标的形式显示,比当前字体稍小。

table

说明所含内容组织成含有行和列的表格形式。

tbody

指明哪些行作为表格的主体。

td

指定表格中的单元格。

textarea

多行文本输入控件。

tfoot

指明哪些行作为表尾。

th

指定标题列。标题列将在单元格中居中并以粗体显示。

thead

指定哪些行作为表头。

title

文档的标题。

tr

指定表格中的一行。

tt

以固定宽度字体显示文本。

u

带下划线显示文本。

ul

表示不排序的项目列表。

var

定义程序变量,通常以斜体显示。

wbr

向一块 NOBR 文本中插入软换行。

HTML颜色参考

在HTML里,颜色有两种表示方式。一种是用颜色名称表示,比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red,Green,Blue意思,RGB每个原色的最小值是0,最大值是255,如果换算成16进制表示,就是(#00),(#FF)。比如白色的RGB(255,255,255),就用#FFFFFF表示;还有黑色的RGB(0,0,0),就用#000000表示。

注:在W3C制定的HTML 4.0标准中,只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow),其它的颜色都要用16进制RGB颜色值表示。

当然,现在的浏览器支持更多的颜色名称。不过为保险起见,建议你还是采用16进制RGB 颜色值来表示颜色。并且在值前加上#这个符号。

为了方便大家找到合适的颜色,我们在这里列了一些颜色说明,以供大家参考,不妨作为一

种速查工具。

Web安全颜色

以前,很多电脑显示器最多支持256色,因此出现了216种Web安全颜色,以保证网页的颜色能够正确显示。那为什么不是256种Web安全颜色呢?因为Microsoft和Mac操作系统有

40种不同的系统保留颜色。

以下就是216种Web安全颜色:

微软支持的颜色名称

下面是微软IE4.0以上都支持的颜色名称:

相关主题