基础知识教程: 购买域名主机交易防骗 域名解析教程 域名绑定教程 程序上传教程 程序安装 快速收录技巧 快速推广网站
具体搭建教程: 论坛 商城 博客 资讯网站 分类信息网站 企业网站 交友网站 小说网站 下载网站 网址导航网站
本站推荐内容: HTML教程 网页制作教程 新手建站过程 本站定位 加入我们  赞助我们 广告位:300元/月(QQ 78315851)
‹‹ 上一主题 | 下一主题 ››
 73 12345678
发新话题
打印

[教程] HTML 语言教程(新手版)

本主题由 数据百度 于 2008-8-13 11:54 分类
老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

1楼 大 中 小 发表于 2008-4-30 22:08 只看该作者

HTML 语言教程(新手版)

HTML基本概念

 

什么是HTML文件？

  • HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
  • 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
  • 一个HTML文件的后缀名是.htm或者是.html。
  • 用文本编辑器就可以编写HTML文件。

这就试写一个HTML文件吧！

打开你的网页编辑工具(如frontpage Dreamweaver等等)，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

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

示例解释

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

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

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

在<body>和</body>之间的信息，是正文。

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

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

HTML元素(HTML Elements)

  • HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。 
  • HTML元素用Tag表示，Tag以<开始，以>结束。
  • Tag通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结尾的就叫做Closing Tag。
  • 目前HTML的Tag不区分大小写的。比如，<HTML>和<html>其实是相同的。

HTML元素(HTML Elements)的属性

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

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

<body bgcolor="red">

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

<table border="0">

 

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

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

搜索更多相关主题的帖子: 手版 语言 教程 HTML

北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

2楼 大 中 小 发表于 2008-4-30 22:10 只看该作者

一些基础的HTML Tag

 

正文标题

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

HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

段落划分

在HTML里用<p>和</p>划分段落。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

换行

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

用<p>换行是个坏习惯，正确的是使用<br>。

<p>This <br> is a para<br>graph with line breaks</p>

HTML注释

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

注释可以写在<!--和-->之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。

<!-- This is a comment -->

一些小建议

HTML文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。 一个空行也被看做一个空格。

有些Tag能够将文本自成一段，而不需要使用<p></p>来分段。比如<h1></h1>之类的标题Tag。

[ 本帖最后由 老动 于 2008-4-30 22:22 编辑 ]
本帖最近评分记录
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

3楼 大 中 小 发表于 2008-4-30 22:24 只看该作者
HTML常用格式
常用文本格式Tag
TagTag说明
<b>粗体bold
<i>斜体italic
<del>文字当中划线表示删除
<ins>文字下划线表示插入
<sub>下标
<sup>上标
<blockquote> 缩进表示引用
<pre>保留空格和换行
<code>表示计算机代码，等宽字体


如何看HTML的源代码在浏览器看到的HTML网页，是浏览器解释HTML源代码后产生的结果。
要查看这个HTML的源代码，有两种方法。一是点击鼠标右键，点击View Source(查看源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。
利用View Source得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

4楼 大 中 小 发表于 2008-4-30 22:25 只看该作者
HTML特殊字符显示
HTML字符实体(Character Entities)有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？
这就要说到HTML字符实体(HTML Character Entities)了。
一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。
比如，要显示小于号，就可以写<或者&#60;。
用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。
注意：Entity是区分大小写的。
如何显示空格通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
最常用的字符实体(Character Entities)
显示结果说明Entity NameEntity Number
显示一个空格  
<小于<&#60;
>大于>&#62;
&&符号&&#38;
"双引号"&#34;

其他常用的字符实体(Character Entities)
显示结果说明Entity NameEntity Number
©版权©©
®注册商标®®
×乘号××
÷除号÷÷

更多字符实体(Character Entities)
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

5楼 大 中 小 发表于 2008-4-30 22:26 只看该作者
HTML利用超链接打开链接文件

a和href属性

HTML用<a>来表示超链接，英文叫anchor。
<a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
<a href="url">链接的显示文字</a> 点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。
比如链接到www.cnzhanzhang.com/html站点首页，就可以这样表示：
<a href="http://www.cnzhanzhang.com/html">站长网 站长学院www.cnzhanzhang.com/html首页</a>

target属性

使用target属性，可以在一个新窗口里打开链接文件。
<a href="http://www.cnzhanzhang.com/html" target=_blank>站长网 站长学院www.cnzhanzhang.com/html首页</a>

title属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.cnzhanzhang.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a> 如果希望注释多行显示，可以使用作为换行符。
<a href="http://www.cnzhanzhang.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a>

name属性使用name属性，可以跳转到一个文件的指定部位。
使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name：
<a href="#C1">参见第一章</a> <a name="C1">第一章</a> name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。
如果浏览器不能找到Name指定的部分，则显示文章开头，不报错。

链接到email地址在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。
<a href = "mailto:info@sina.com">联系新浪</a>

[ 本帖最后由 老动 于 2008-4-30 22:29 编辑 ]
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

6楼 大 中 小 发表于 2008-4-30 22:31 只看该作者
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超链接的代码应该这样写：

<a href = "index.html">index.html</a>


如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

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


<a href = "../index.html">index.html</a>

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


<a href = "../../index.html">index.html</a>

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


<a href = "../wowstory/index.html">index.html</a>

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

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


<a href = "html/index.html">index.html</a>

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


<a href = "html/tutorials/index.html">index.html</a>
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。
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

7楼 大 中 小 发表于 2008-4-30 22:33 只看该作者

HTML图片(Images)

用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：
<img src="url"> url表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif，也可以是个相对路径 "../images/logo/blabla_logo01.gif"。

图片alt属性<img>中有一个alt属性，英文叫alternate text。例句如下：
<img src = "../images/html_tutorials/smile.jpg" alt="smile face">假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。
其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。

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

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

建议图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

8楼 大 中 小 发表于 2008-4-30 22:34 只看该作者

HTML字体(Fonts)

在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。
字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：
<p><font size="2">这一段的字体大小的值是2。</font></p>
字体风格用face属性来设定字体风格。示例代码如下：
<p><font fac="arial">这一段的字体风格是arial。</font></p> 字体颜色用颜色属性(color)来设定字体颜色。
<p><font color="#FF0000">这一段的字体颜色是红色</font></p>

注意HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

9楼 大 中 小 发表于 2008-4-30 22:35 只看该作者

HTML背景颜色和背景图片

background属性background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如：
<body background="../images/html_tutorials/blabla_logo.gif"><body background="http://www.cnzhanzhang.com/html/gifs/blabla_logo01.gif">如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

老动

娱乐版导师


超级版主

Rank: 14Rank: 14Rank: 14Rank: 14

魅力奖 活力之星 专家小组

10楼 大 中 小 发表于 2008-4-30 22:37 只看该作者
HTML头部信息(Head)HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。
另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)
下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。
标题(title)标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：


示例代码如下：
<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>链接(link)用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下
:<link rel="stylesheet" href="mainstyles.css" type="text/css">
样式(style)用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：
<head><style>   body {background-color:white; color:black;}   h1 {font: 18pt arial bold;}</style></head>关于网页信息(meta)在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。
这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。
在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：
<meta name="description" c><meta name="keywords" c><meta name="author" c>
利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：
<meta http-equiv="Refresh" c>
北京经典景点系列图:http://www.cnzhanzhang.com/thread-3095-1-1.html
关于站内广告与非广告的判定原则http://www.cnzhanzhang.com/thread-3077-1-1.html
http://www.gopic.com.cn

TOP

‹‹ 上一主题 | 下一主题 ››
 73 12345678
发新话题
返回顶部
CNzhanzhang.com

Processed in 0.031859 second(s), 10 queries, Gzip enabled.

当前时区 GMT+8, 现在时间是 2008-10-12 08:42 豫ICP备08002104号

清除 Cookies - 联系我们 - 中国站长论坛 - Archiver - WAP - 界面风格