HTML基础1

第2章HTML基础涂春梅1HTML概述HTML是用来描述网页的一种语言英文全称：HyperTextMarkupLanguage中文名称：超文本标记语言HTML不是一种编程语言，而是一种标记语言。使用标记标签来描述网页。我们所看到的网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。说明:任何网页页面都是以HTML语言为核心和基础的。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言。通过HTML可以表现出丰富多彩的设计风格、实现页面之间的跳转、展现多媒体的效果。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。网页制作方法编写HTML文档方式记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等软件2元素与标签元素是HTML的重要成分。元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签、内容和尾标签构成。标签指示元素的起始与结束。标签的格式：以小于号“”开头，以大于号“”结尾。标签分为首标签和尾标签。它们唯一的区别在于，尾标签多一条斜杠“/”。通过把内容放在首标签和尾标签之间来对内容进行标记。某些HTML元素没有结束标签，比如br例：b元素作用是，告诉浏览器介于标签b和/b之间的文本应以粗体显示。b这句话应显示为粗体。/b3HTML的基本结构一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。HTML超文本文档分为文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。html----------------------------------------〉开始标签head–提供关于当前文档的信息（例如title/title）头部标签/headbody–HTML文档的正文内容文件主体/body/html---------------------------------------结尾标签知识点播:（1）元素是HTML语言的基本部分，每一对元素都有一个开始标记与一个结束标记。例如，body与/body。（2）html与/html标记表示HTML文档的开始与结束。任何HTML文档都被包含在一对html与/html标记中。（3）head与/head标记之间是网页的头部信息，其中title与/title标记之间指定了网页的标题。（4）body与/body标记之间是网页的主体。（5）HTML元素具有自己的相关属性，每一个属性可以赋予一定的值。元素属性出现在元素的内，并与元素名之间有一个空格分隔，属性值应使用双引号（“”）括起来。（6）书写HTML源代码时，字符不区分大小写，标记之间空格的多少不影响网页的显示。实例一:将网页的标题设置为“重庆信息学院”网页显示内容为“这是我的第一个网页”实验步骤第一步：在D盘建立一个名为mysite的根文件夹。打开记事本程序，新建一个文本文件（page1.txt）。第二步：编写html代码第三步：将文本文件另存为*.htm或者*.html文件（page1.html）4HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=value。属性总是在HTML元素的开始标签中规定，并与元素名之间有一个空格分隔，属性值应使用双引号（“”）括起来。属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：标签名字属性1属性2属性3…内容/标签名字例如：bodybgcolor=“red”text=“#ff0000”/bodyHTML基本结构的有关元素及元素属性head元素head元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。title元素title元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。body元素及元素属性body元素是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素构成HTML文档的主体部分。body元素中有下列元素属性：(1)bgcolor•bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#ffff00”（bgcolor=“yellow”）htmlheadtitle重庆信息技术职业学院/title/headbodybgcolor=“#ffff00”这是我的第一个网页/body/html颜色的设定颜色值是一个关键字或一个RGB格式的数字。颜色是由“red”“green”“blue”三原色组合而成的，在HTML中对颜色的定义是用十六进位的，对于三原色HTML分别给予两个十六进位去定义，也就是每个原色可有256种彩度，故此三原色可混合成16777216种颜色。例如：白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000绿色的组成是red=00,green=ff,blue=00,RGB值即为00ff00蓝色的组成是red=00,green=00,blue=ff,RGB值即为0000ff黑色的组成是red=00,green=00,blue=00,RGB值即为000000应用时常在每个RGB值之前加上“#“符号，如：bgcolor=#336699常见颜色的代码HTML使用16进制的RGB颜色值对颜色进行控制。颜色颜色名和RGB值黑色Black”#000000”银色Silver”#c0c0c0”红色Red”#ff0000”蓝色Blue”#0000ff”白色White”#ffffff”黄色Yellow”#ffff00”绿色Green”#00ff00”海蓝色Aqua”#00ffff”(2)background•background属性标志HTML文档的背景图片。如：background=“images/bg.gif。•可以使用的图片格式为GIF，JPG(3)bgproperties=fixed•bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。(4)text•text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。(5)超级链接颜色•link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。(6)leftmargin和topmargin•设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20topmargin=30“实例二：在当前网页中输入“关于body属性的练习”当前网页的标题栏显示“body属性”将当前网页的背景图片设置为“1.jpg”将网页字体颜色（text属性）设置为“#ff0000”将左边距设置为100和顶部边距设置为50htmlheadtitlebody属性/title/headbodybackground=images\1.jpgtext=#ff0000leftmargin=100topmargin=50body属性的练习/body/html文字版面的编辑换行标签br换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了br标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。请看下面的例子（实例三）：htmlheadtitle换行标签示例/title/headbody无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。br有换行标记：br登鹳雀楼br白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。/body/html换段落标签p及属性由p标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个P的开始就意味着上一个P的结束。良好的习惯是成对使用。格式：ppalign=参数其中,align是p标签的属性,有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.实例四：htmlheadtitle测试分段控制标签/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/ppalign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=“center”而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲。/p/body/html空白占位符 htmlheadtitle测试分段控制标签/title/headbodyp 花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，  就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/ppalign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=“center”而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲/p/body/html水平分隔线标签hrhr标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置hr标签的属性值，可以控制水平分隔线的样式。实例6htmlheadtitle测试分段控制标签/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/phralign=centercolor=“blue”width=“80%”palign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=“center”而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲。/p/body/html标题文字标签hn（n=1~6）hn标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题标签的格式：hnalign=参数标题内容/hn说明：hn标签是成对出现的，hn标签共分为六级，在h1.../h1之间的文字就是第一级标题，是最大最粗的标题；h6.../h6之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为left（左），center（中)，right(右）。hn标