HTML编程基础
来源：尚品中国|
类型：网站百科|
时间：2014-06-16
通常情况下，人们应用Dreemwcave以可视化的方式设计网页。而直接用HTML标记符设计网页的情况则较少，对HTML标记符也了解不多，但在动态网页设计中，常常需要利用ASP代码摘出网页的部分HTM L代码，此时必须熟悉HTML标记符，因此，本章将对常用的HTMI标记符进行介绍。
1. 1. 1什么是HTML
HTML(街pertext Markup Language)即超文本标记语育，是一种用来在WWW (World Wide Web) L表示信息的描述性的标记语言。
HTML文本是由HTML标记组成的描述性文本。HTML标记可以描述文字、图形、动网、声音、表格、链接等。生成一个HTMI文本述常可以通过以下四种方法:
I)利用各种文本编辑器(如Windows记事本)i is接使用HTML语言编写。
2)借助一钱HTMI.的编辑工其，如FroniPage、HotDog等。
3)其他格式的文档(如Word文档)转换成HTML文本。
4)山Web服务器端实时动态地生成。
下面应用第一种方法完成一个简单的实例
1. 1.2一个简单的HTM 1.实例
I例1-1)创建一个简单的网贞，步骤如下:
1)选择“开始”一“程序”，“附件”一“记事本”命令，打开记事本程序。翰人以
下HTML代码
<HTMI)
<HEAD>
< TITLE > I ITM L实例</TITLE>
</HEAD)
< BODY Bgcolor = "#FFFFFF">
<P》这是一个简单的HTML实例</P>
</BODY>
</HTMI>
2)选择“文件.菜单下的“保存，命令.打开“保存”对话框，在输人文件名和文件扩展名(1-1. him),选择合适的目录.然后单击“保存”
3)在浏览器中打开运行该文件(1-1. him)，运行结果如图1-1所示。
从以上过程可以看出，使用HTML语言确实能够很容易地制作网页，但是这样的网页距离关观实用的要求显然还有一定差距。因此后面的章节将会详细地介绍如何利用HTML诸言的其他标记符来修饰文字和图像等页面元素。
1.2 HTML常用标记
标记符是HTML语言中定义网页内容格式和显示的指令.制网贞内容的显示效果。
1.2.1页面基本属性标记
而标记符的属性用于进一步控制网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。
1.网页的基本结构
如下所示:
<HTML>
<HEAD)
< TITLE>文档标题<,TITLE》
</HEAD>
< BODY>
这是HTMI文档的主要部分
</BODY>
</HTML>
HTML的结构包括头部(HEAD)、主体(BODY)两大部分.其中头部描述浏览器所需的信息，而主体则包含页面的具体内容及格式说明。
2.语官字符维，(Charsets)的信息
<META HTTP-EQUIV ="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=#">
#=US-ASCII,ISO-8859-I,X-MAC-ROMAN, 150-8859-2, X-MAC-CE, ISO-2022-JP, X-SJIS,X-EUC-JP, EUC-KR, ISO-2022-KR, GB2312, GB_ 2312-80, X-EUC-TW, X-CNS11643-1，X-CNSI 1643-2, BIG5
可在HTML文件中设置MIME字符集(i息。您在浏览主页时.最好自己在浏览器的选项菜单内选择相应的语言(language encoding),但是如果HTML文件里写明了设置，浏览器就会自动设置语言选项。如果主页里用到了字符实体(entities),则该主页就应该写明字符集信息，否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。
3.背.色彩和文字色影
设置网贞的背景色彩和文字色彩可通过设置BODY标记的属性来实现，具体格式如下:
<BODY Rgcolor=# Text=#Link# Alink=# Vlink=#>
BODY标记各参数的含义见表1-l
4.添加注释
由于Web站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面必须易于维护，而添加增强文件可读性的重要手段。
HTML中的注释是由<!一(开始标记符)和一>(结束标记符)组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。
5.画线
在网页中产生分隔线可用<HR>标记来实现，其用法为:
<HR Width=宽度值Size=线的高度Align，=对齐方式Noshade>
属性说明:
I) Width用于指定分隔线的宽度.宽度优的指定方式有两种.一是用像素点来指定，
例如.若要产生宽度为500像素的直线，则实现代码为:
<HR Width=500>
另一种方法是用百分比表达，例如，若要产生宽度是网页宽度的75%分隔线，则实现代码如下:
<HR Width二.75%.>
2) Si，用于指定直线的高度。例如.要绘制宽度为80%,高度为l的直线，则实现代
码如下:
<HR Width ="80%" Size=1>
3) Align指定直线的对齐方式，取值有left、Center、Right。
4) Noahade指定直线是否有阴形。如果带有该参数，则直线无阴影。
<HR>标记一般用于产生水平分隔线，若要产生竖直线，可将Width设置为1, Size设置为竖直线的高度谊。例如:< HR Width= I Size= 500 Noshade >
1.2.2文字属性标记
文字是网页中最主要的页面元素，HTML语言提供了一些用来修饰文字的标记符，可以川它们来设置文字的字体、颜色、大小和样式等属性。
1.字体控制
<FONT >标记符是用来控制文字的字体、大小和颜色的。其语法格式为:
<FONT Face=“fonlname" Size=“fontaize" Color="#RRGCBB">文本</FONT>
属性说明:
Face属性用于指定字体;Size用于指定字体的大小;Color用于设置字体的颜色。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置优可以是1~7, 1号最小，7号最大，默认字号为3，可利用< BASEFONT Size=字号>设置或更改默认字号。例如，若要以绿色，宋体4号字输出“HTML实例”，则实现代码为:
< FONT Face=“宋体”Size=4 Color=“#008000">HTML实例</FONT >
另一种设置为相对字号大小，此时的用法为<FONT Size=±n>，其中n代表字号改变的量，+表示字体在默认字号的基础上增大字号，- 表示在默认字号的基础上递减字号。例如:
< BASEFONT Size=3)
<FONT Size= +2>HTML实例</FONT >
2.标题的字号
语法格式为:
< Hn)</Hn>
说明:n是1 -6的数字，<HI>表示最大的标题，<H6>表示最小的标题。在默认状态下，<Hn>标记符中的文字在浏览器中显示时都是黑体，而且文字将自动在</Hn>标记符后换行。
【例1-2】在网页中分别用六级标题标记符拍出一个侧试效果的文本。
<HTML >
<HEAD >
<TITLE>标越字体演示</TITLE》
</HEAD >
<BODY Bgcolor = " #FFFFFF" Text=“#000000”>
<Hl>这是第一级标题</H1>
<H2》这是第二级标肠</H2>
<H3>这足第三级标题</H3>
<H4>这是第四级标肠</H4 >
<115》这是第五级标题</HS>
<H6>这是第六级标题</H6>
</BODY)
</HTML>
运行结果如图，1-2所示。
HTML(街pertext Markup Language)即超文本标记语育，是一种用来在WWW (World Wide Web) L表示信息的描述性的标记语言。
HTML文本是由HTML标记组成的描述性文本。HTML标记可以描述文字、图形、动网、声音、表格、链接等。生成一个HTMI文本述常可以通过以下四种方法:
I)利用各种文本编辑器(如Windows记事本)i is接使用HTML语言编写。
2)借助一钱HTMI.的编辑工其，如FroniPage、HotDog等。
3)其他格式的文档(如Word文档)转换成HTML文本。
4)山Web服务器端实时动态地生成。
下面应用第一种方法完成一个简单的实例
1. 1.2一个简单的HTM 1.实例
I例1-1)创建一个简单的网贞，步骤如下:
1)选择“开始”一“程序”，“附件”一“记事本”命令，打开记事本程序。翰人以
下HTML代码
<HTMI)
<HEAD>
< TITLE > I ITM L实例</TITLE>
</HEAD)
< BODY Bgcolor = "#FFFFFF">
<P》这是一个简单的HTML实例</P>
</BODY>
</HTMI>
2)选择“文件.菜单下的“保存，命令.打开“保存”对话框，在输人文件名和文件扩展名(1-1. him),选择合适的目录.然后单击“保存”
3)在浏览器中打开运行该文件(1-1. him)，运行结果如图1-1所示。
从以上过程可以看出，使用HTML语言确实能够很容易地制作网页，但是这样的网页距离关观实用的要求显然还有一定差距。因此后面的章节将会详细地介绍如何利用HTML诸言的其他标记符来修饰文字和图像等页面元素。
1.2 HTML常用标记
标记符是HTML语言中定义网页内容格式和显示的指令.制网贞内容的显示效果。
1.2.1页面基本属性标记
而标记符的属性用于进一步控制网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。
1.网页的基本结构
如下所示:
<HTML>
<HEAD)
< TITLE>文档标题<,TITLE》
</HEAD>
< BODY>
这是HTMI文档的主要部分
</BODY>
</HTML>
HTML的结构包括头部(HEAD)、主体(BODY)两大部分.其中头部描述浏览器所需的信息，而主体则包含页面的具体内容及格式说明。
2.语官字符维，(Charsets)的信息
<META HTTP-EQUIV ="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=#">
#=US-ASCII,ISO-8859-I,X-MAC-ROMAN, 150-8859-2, X-MAC-CE, ISO-2022-JP, X-SJIS,X-EUC-JP, EUC-KR, ISO-2022-KR, GB2312, GB_ 2312-80, X-EUC-TW, X-CNS11643-1，X-CNSI 1643-2, BIG5
可在HTML文件中设置MIME字符集(i息。您在浏览主页时.最好自己在浏览器的选项菜单内选择相应的语言(language encoding),但是如果HTML文件里写明了设置，浏览器就会自动设置语言选项。如果主页里用到了字符实体(entities),则该主页就应该写明字符集信息，否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。
3.背.色彩和文字色影
设置网贞的背景色彩和文字色彩可通过设置BODY标记的属性来实现，具体格式如下:
<BODY Rgcolor=# Text=#Link# Alink=# Vlink=#>
BODY标记各参数的含义见表1-l
由于Web站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面必须易于维护，而添加增强文件可读性的重要手段。
HTML中的注释是由<!一(开始标记符)和一>(结束标记符)组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。
5.画线
在网页中产生分隔线可用<HR>标记来实现，其用法为:
<HR Width=宽度值Size=线的高度Align，=对齐方式Noshade>
属性说明:
I) Width用于指定分隔线的宽度.宽度优的指定方式有两种.一是用像素点来指定，
例如.若要产生宽度为500像素的直线，则实现代码为:
<HR Width=500>
另一种方法是用百分比表达，例如，若要产生宽度是网页宽度的75%分隔线，则实现代码如下:
<HR Width二.75%.>
2) Si，用于指定直线的高度。例如.要绘制宽度为80%,高度为l的直线，则实现代
码如下:
<HR Width ="80%" Size=1>
3) Align指定直线的对齐方式，取值有left、Center、Right。
4) Noahade指定直线是否有阴形。如果带有该参数，则直线无阴影。
<HR>标记一般用于产生水平分隔线，若要产生竖直线，可将Width设置为1, Size设置为竖直线的高度谊。例如:< HR Width= I Size= 500 Noshade >
1.2.2文字属性标记
文字是网页中最主要的页面元素，HTML语言提供了一些用来修饰文字的标记符，可以川它们来设置文字的字体、颜色、大小和样式等属性。
1.字体控制
<FONT >标记符是用来控制文字的字体、大小和颜色的。其语法格式为:
<FONT Face=“fonlname" Size=“fontaize" Color="#RRGCBB">文本</FONT>
属性说明:
Face属性用于指定字体;Size用于指定字体的大小;Color用于设置字体的颜色。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置优可以是1~7, 1号最小，7号最大，默认字号为3，可利用< BASEFONT Size=字号>设置或更改默认字号。例如，若要以绿色，宋体4号字输出“HTML实例”，则实现代码为:
< FONT Face=“宋体”Size=4 Color=“#008000">HTML实例</FONT >
另一种设置为相对字号大小，此时的用法为<FONT Size=±n>，其中n代表字号改变的量，+表示字体在默认字号的基础上增大字号，- 表示在默认字号的基础上递减字号。例如:
< BASEFONT Size=3)
<FONT Size= +2>HTML实例</FONT >
2.标题的字号
语法格式为:
< Hn)</Hn>
说明:n是1 -6的数字，<HI>表示最大的标题，<H6>表示最小的标题。在默认状态下，<Hn>标记符中的文字在浏览器中显示时都是黑体，而且文字将自动在</Hn>标记符后换行。
【例1-2】在网页中分别用六级标题标记符拍出一个侧试效果的文本。
<HTML >
<HEAD >
<TITLE>标越字体演示</TITLE》
</HEAD >
<BODY Bgcolor = " #FFFFFF" Text=“#000000”>
<Hl>这是第一级标题</H1>
<H2》这是第二级标肠</H2>
<H3>这足第三级标题</H3>
<H4>这是第四级标肠</H4 >
<115》这是第五级标题</HS>
<H6>这是第六级标题</H6>
</BODY)
</HTML>
运行结果如图，1-2所示。
来源声明：本文章系尚品中国编辑原创或采编整理，如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络，如有侵权，请及时与本站联系（010-60259772）。
TAG标签：
.png)
推荐新闻
更多行业-
网络营销环境的改变影响哪些因素
网络营销环境的变化是绝对且永恒的，企业的网络营销观念、消费者需求和购买...
2014-06-12 -
企业网站开发设计怎样制作自己的网站？
随着网民对网络信息的依赖性越来越强，网站开发页面的感官和体验决定了品牌...
2022-03-25 -
HTML编辑软件
虽然前面讲过，HTML文件可以直接在记事本中进行编写，但是这种方式工作...
2012-08-27 -
百度算法给SEO优化带来的影响
所以我也无法验证以上所说的不是会对排名有所协助。博客没有挂任何联盟的广...
2012-06-21 -
建设外贸网站容易出现的几点误区
随着中国经济的持续快速增长和国家出口贸易政策的支持，许多规模更大、实力...
2020-05-28 -
品牌网站设计技巧介绍
随着网民对网络信息的依赖性越来越强，网站开发页面的感官和体验决定了品牌...
2022-04-26
如果您的网站可以增加转化次数并提高客户满意度，该怎么办？
预约专业咨询顾问沟通！
Copyright © 2024 恒久尚品 版权所有 | 京ICP备09066521号
| 公安机关备案号:11011502003910
免责声明
诚信企业
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
免责声明
非常感谢您访问我们的网站。在您使用本网站之前，请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络，涉及到的部分文章和图片版权属于原作者，本站转载仅供大家学习和交流，切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
4、如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!
联系方式：010-60259772
电子邮件：394588593@qq.com
