HTML与源代码

HTML与源代码计算机科学与技术系HTML基本概念通过浏览器访问的网站，通常是基于HTML形成的。HTML超文本标记语言，是一种用来制作超文本文件的简单标记语言。超文本文件中可以包含图片、声音、动画、视频等内容，还可以通过链接从一个页面跳转到另一个页面。HTML的基本构成元素被称为标签，例如：font、p等，html标签被认为是一个页面的开始，称为开始标签，/html被认为是页面的结束，称为结束标签。大部分的HTML标签都是成对出现的。HTML基本结构HTML文件包括文件头和文件体两部分。在文件头里，主要是对这个HTML文件进行一些必要的定义，在文件体中的内容才是真正要显示的各种文件信息。一般情况下，HTML文件的结构如下所示。HTMLHEAD头部信息/HEADBODY文件主体，正文部分/BODY/HTML一个简单的HTML实例Html文件对编写工具要求不高，可以用Dreamweaver，也可以用记事本。HTMLHEADTITLE一个简单的实例/TITLE/HEADBODYh2align=“center”第一个html文件/h2hrwidth=“70%”p下面跟我进入html的领域/pp来领略这个奇妙而多彩的世界/p/BODY/HTML网页文字和图片网页的文字是设计一个网页的基础，而网页图片则使网页内容更加的丰富。使用HTML代码来编辑网页文字和图片可以达到在Word软件里设计文档几乎一样的效果。当然，与Word软件相比较起来，使用标签来设计网页文字和图片没有使用菜单来设计Word文档方便，但是正因为网页的这种标签属性，使得网页具有跨平台的特性，可以在任何一种平台上显示。网页文字文字格式主要是用一些HTML元素来标记文本的方式，用来更改文字的大小、字体、颜色等属性。另外还能为文本增加如粗体、斜体、上标、下标等修饰效果。在HTML里，FONT元素可以用来显示文字的属性，包括文字的大小、颜色、字体等。其中设置文字大小的属性为SIZE，其语法代码如下所示：FONTSIZE=“n”文字/FONT网页文字语法结构：FONTSIZE=“n”文字/FONT设置字体文字可以设置成多种字体，中文的有宋体、仿宋、黑体等，英文字体也有Arial、TimesNewRoman等。设置网页字体设置文字字体使用FONT元素中的FACE属性，其语法代码如下所示：FONTFACE=”字体名称”文字/FONT设置字体语法结构：FONTFACE=”字体名称”文字/FONT设置字体颜色如果一个网页不能设置文字字体的颜色，那么这个网页就是黑白的，失去了其缤纷的色彩。使用FONT元素的COLOR属性可以将文字设置成不同的颜色。其语法代码为：FONTCOLOR=“颜色”文字/FONT几乎所有浏览器都能识别以下16种预定义的颜色：Red（红色）、Yellow（黄色）、Blue（蓝色）、Navy（深蓝色）、Green（绿色）、Lime（浅绿色）、Aqua（浅绿色）、Olive（橄榄绿）、Black（黑色）、Gray（灰色）、Silver（银色）、Maroon（原色）、Purple（紫色）、Fuchsia（紫红色）、Teal（深青色标题标题元素有6种，分别是h1,h2….,h6，用于表示网页中的各种标题，标题号n越小，字体越大。语法结构：H1这是标题1文字/H1hn元素可以有对齐属性align，对齐方式：left表示标题居左，center表示居中，right表示居右例如：h2align=“center”标题2居中/h2加粗和倾斜通常在进行文字处理时，都会对比较重要的内容使用加粗、斜体来引起读者的注意。在网页上同样可以使用加粗与斜体来达到相同的效果。在HTML元素中，可以用B元素来加粗文字，用I元素来使文字倾斜。除了B元素与I元素之外，还可以使用STRONG元素来加粗文字、EM元素来使文字倾斜的。其语法代码如下B加粗的文字/BI倾斜的文字/ISTRONG加粗的文字/STRONGEM倾斜的文字/EM加粗和倾斜B加粗的文字/BI倾斜的文字/ISTRONG加粗的文字/STRONGEM倾斜的文字/EM上标和下标在描述一些复杂的表达式时，特别是一些数学公式，经常会用到上标和下标，例如3的平方（32）。在HTML页面中，上标采用SUB元素，下标采用SUP元素。其具体语法是：SUB作为上标的文字/SUBSUP作为下标的文字/SUP与文字排版相关的元素在与文字排版相关的元素就是对某段文字进行设置的元素，包括文本缩进、段落、换行、段落居中等。一个好的网页，文字段落的设置是必不可少的，它可以使网页更加的简洁和漂亮。本节就来详细讲解与文字排版相关的一些元素文本缩进1、文本缩进元素BLOCKQUOTE主要用于设置文本的缩进效果。通过使用该元素，可以实现页面文字的段落缩排，从而使页面的文字布局更加错落有致。文本缩进元素的语法是：BLOCKQUOTE需要进行缩排的文字/BLOCKQUOTE2、利用空格缩进文字通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。为了在网页中增加空格，你可以使用 表示空格。换行HTML里的换行元素在前面的章节里已经多次提到并且也多次使用过了。BR元素就是用来对文字进行换行的。BR元素没有结束标签，也就是说，一个BR元素就是换一次行。段落在HTML里，使用P元素可以用来区分一个与另一个段落，在“P”标签与“/P”标签之间的文字是一段文字。p元素会自动在段落前后创建一些空白。其语法代码如下：P一段文字/Pp元素有多种属性，比较常用的是对齐方式align属性Palign=“center”一段居中的文字/PPalign=“right”一段居右的文字/P段落居中如果想要居中显示网页中的内容，可以使用CENTER元素。居中对齐元素是双元素，成对出现，以CENTER开始，以/CENTER结束。在元素之间的所有内容都居中对齐，包括文字、图像、表格等。其具体的语法如下所示：CENTER需要居中对齐的内容/CENTER预定义格式在HTML源代码里，即使文字已经换行，但是只要没有使用“BR”标签，那么在浏览器里显示出来的文字是不会被换行的。如果想要在浏览器里显示出源代码里所设置的所有格式，包括其文字之间的空白，如空格、制表符等，可以使用PRE元素。PRE元素相当于设置了一个“块”，这个块可以将源代码里的所有文本（除HTML标签外）在浏览器中按原样显示出来。其语法如下所示：PRE设定了格式的文字/PRE预定义格式春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。例如：PRE春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。/PRE水平分割线当页面内容比较繁琐时，可以在段与段之间插入一条水平分隔线来使页面显得层次分明，便于阅读。在HTML中可以使用HR元素来创建一个水平分隔线，其语法如下所示：HRALIGN=对齐方式WIDTH=宽度SIZE=高度COLOR=颜色NOSHADEAlign属性值：left（左对齐）、center（居中）、right（右对齐）Width：表示宽度，可以使用百分数，也可以用像素表示Size：表示高度，其值是数字Color：代表颜色，默认黑色Noshade：代表不显示阴影，默认情况是显示阴影水平分割线HRALIGN=对齐方式WIDTH=宽度SIZE=高度COLOR=颜色NOSHADE设置网页背景在前面多次使用过BODY元素，不过在使用BODY元素时，都没有对其属性值进行过设定。BODY元素里有一个BGCOLOR属性可以用来设置网页的背景颜色，其语法代码如下：BODYBGCOLOR=”背景颜色”网页内容/BODYBODY元素里有一个BLACKGROUND属性可以用来设置网页的背景图片，其语法代码如下：BODYBLACKGROUND=”图片路径”网页内容/BODY设置网页背景例1:BODYBGCOLOR=green网页内容/BODY插入图像一个网页中可以插入如Logo（网站标志）、Banner（横幅广告）、照片等各种图片，当浏览者浏览网页时，这些图片将会自动显示出来。合理的应用图片，可以让网页看起来更漂亮、重点更突出、形式更活泼、浏览更方便。在HTML里可以通过IMG元素来插入图片，其语法代码为：IMGSRC=URLALT=替代文本NAME=名字WIDTH=宽度HEIGHT=高度BORDER=边框”ALIGN=对齐方式ID=编号Src:用于指定图片所在位置Alt:替代图片的文本Width:指定图片的宽度Height:图片高度border:边框大小,数值越大,边框越粗插入图像IMGSRC=URLALT=替代文本NAME=名字WIDTH=宽度HEIGHT=高度BORDER=边框”ALIGN=对齐方式ID=编号无序列表无序列表是一个对列表项目出现次序不作要求的列表，列表项目之间是并列关系，不存在先后次序。浏览器显示无序列表时，会在列表项目前加上一个列目符号无序列表是以UL标记开始，以/UL标记结束的。在无序列表内的列表项用LI表示，其具体的语法如下所示：ULLI无序列表项1/LILI无序列表项2/LI……/UL无序列表ULLI无序列表项1/LI……/UL无序列表默认情况下，无序列表的列表项符号是圆点，如果希望将列表项符号更改，可以使用TYPE属性将其设置为空心圆点或者空心方块。无序列表的符号类型修改语法如下所示：ULTYPE=符号取值LI无序列表项/LILI无序列表项/LI……UL其中，TYPE的取值有3种，其具体内容如下表所示。有序列表与无序列表相对应的是有序列表，有序列表中的列表项目通常是有先后次序的，并且不能随意更换这些次序。浏览器显示有序列表时，会在列表项目前加上一个编号，用来标识项目出现的次序。有序列表是以OL标记开始，以/OL标记结束的。在有序列表内的列表项也是用LI表示，其具体的语法如下所示：OLLI有序列表项1/LILI有序列表项2/LI……/OL有序列表OLLI有序列表项1/LILI有序列表项2/LI……/OL有序列表有序列表的列表项是阿拉伯数字，而通过TYPE属性也可以修改有序列表的序号类型OLOLTYPE=符号取值LI有序列表项/LILI有序列表项/LI……OLhtmlheadtitle了不起的盖茨比/title/headbodyh1了不起的盖茨比/h1p菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为b“爵士乐时代/b吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。/phrsize=10color=greenpalign=centerimgsrc=3.17.jpg/p/body/html1.img2./html3.b4.p5.hr6.bodyAFDECB练习题超链接超链接是网站中最重要的组成部分，HTML有了超链接才显得与众不同。超链接可以方便用户的使用，允许浏览者从一个网页跳转到另一个网页，多个网页因为有了超链接才会形成了一个网站。超链接不仅仅可以链接网页，还可以链接图片、视频、音频，甚至是任何一种文