第二章 HTML基础介绍.doc

第二章 HTML基础介绍掌握HTML文件的基本框架、语法和元素，为编写Web程序打下基础。1 HTML文档结构1.1 基本结构一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可定义标题、样式等，文档的主体内容就是要显示的信息。HTML文档的基本结构如下。如1.html： 一个简单的HTML示例 欢迎光临我的主页标记通常会作为HTML文档的开始代码，出现在文档的第一句，而标记通常作为HTML文档的结束代码，出现在文档的尾部，其它的所有的HTML代码都位于这两个标记之间，该标记用于告知浏览器或其他程序，这是一个Web文档，应该按照HTML语言规则对文档内容的标记进行解释；是HTML文档的头部标记；标记之间的文本是在浏览器中要显示的页面内容。1.2 头部内容通常将头部标记中的内容称为“头部内容”，头部内容不直接在网页上显示，必须通过其它的方式显示，例如：网页的页面标题属于HTML的头部内容，没有显示在网页中，但是在网页的标题栏上显示。1.2.1 设置页面标题HTML文件标题在浏览器的标题栏中显示。每个HTML文件都有一个标题，用于说明文档的属性。在HTML文件中，页面标题标记位于头部标记之间。只要在HTML文件的头部文件的中输入标题信息就可以在浏览器标题栏上显示。如2.html： 请在此输入标题名 请看标题栏！网页效果如图2-1。图2-1 页面标题设置1.2.2设置页面关键字keywords在HTML文件中，标记通过一些属性来定义文件的信息，如文件的关键字、作者信息、网页过期时间等，HTML文件的头部文件可以有多个，标记不是成对的标记。 网页中的关键字主要是为搜索引擎服务的，有时为了提高网站被搜索引擎搜到的几率，需要设置多个跟网站主体相关的关键字，例如：制作一个图书的网站，需要对图书的类型设置多个关键字。 语法格式：keywords用于说明定义的是关键字，value用于说明为该网页定义的关键字，可以是多个关键字。如3.html：设置文件关键字表示在该HTML文件中，定义的关键字为“计算机、英语、经管、财会、职场”，当利用搜索引擎搜索图书时，输入任何一个关键字都可以搜索到该网页。1.2.3 设置页面跳转refresh页面跳转就是指当前页面停留几秒钟后自动跳转至新网页。语法格式：http-equiv属性值设置为refresh时，要求显示url指定的文件；content属性包含两个值：秒数和url，它们之间用;分隔。该链接将在指定的时间后被打开。如4.html：加载新的网页五秒后自动刷新，进入1.html.1.3 主体内容在HTML文件中，主体内容被包含在成对的标记之间，同时标记也有很多本身的属性。例如设置页面背景、设置页面边距等。1.3.1 设置页面背景bgcolor利用标记中的bgcolor属性，可以设置网页的背景颜色。格式：如5.html：设置页面背景网页效果如图2-2。图2-2 页面背景设置bgcolor属性值可以是英文例如red、blue、white或者十六进制数例如#00ff00等。1.3.2设置页面边距topmargin、leftmargin、rightmargin、bottomnargin在HTML文件中，可以设置页面边距，通过设置页面边距属性的属性值来设置页面显示内容与浏览器的距离，使显示的内容更加美观。格式：通过设置topmargin/leftmargin/rightmargin/bottomargin不同的属性值来设置显示内容与浏览器的距离： topmargin设置到顶端的距离 leftmargin设置到左边的距离 rightmargin设置到右边的距离 bottommargin设置到底边的距离。如6.html：设置页面边距    真正掌握DreamWeaver需要理解代码。DreamWeaver仅仅是自动生成代码(HTML、CSS、JavaScript等)DreamWeaver自动生成的代码可能有很多冗余代码，在很多情况下需要进行优化。网页效果如图2-3。图2-3 页面背景设置1.3.3设计正文颜色text在HTML文件中，设置页面的背景颜色以后，网页中可能有部分文字的颜色需要改变才能显示，利用text属性可以给页面中无链接的文字设置颜色。格式：在标记中，利用text属性设置文档的颜色时，还可以进行其他的设置，例如：背景、字体等。如7.html：设置正文颜色     现阶段Ajax技术被广泛应用到大量B/S结构的应用中，改进了传统的Web应用，给浏览者一种更连续的体验。通过使用Ajax技术，可以使互联网网页具有更友好的人机交互和更美观的浏览界面。网页效果如图2-4。图2-4 页面背景设置1.4 编写网页的开头 大多页面的开头，通常使用DOCTYPE标记来声明要使用什么风格的HTML或XHTML。DOCTYPE使浏览器知道应该如何处理文档，并且让验证器知道按照什么样的标准检查代码的语法。然后，用html标记标出实际代码的起始位置。2 HTML基本语法2.1 标记HTML用于描述功能的符号称为标记。比如、等，都是标记，标记表示HTML文档的开始。标记在使用时必须用尖括号“”括起来，有些标记必须成对出现，以开头无斜杠的标记（如:）开始，以有斜杠的标记（如:）结束。比如，表示一个表格的开始，表示一个表格的结束。在HTML中，标记的大小写作用相同，如和都是表示一个表格的开始。2.1.1单标记单标记只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标记是，它表示换行。2.1.2双标记双标记由始标记和尾标记两部分构成，必须成对使用。始标记告诉Web浏览器从此处开始执行该标记所表示的功能。尾标记告诉Web浏览器在这里结束该功能。始标记前加一个正斜杠/即成为尾标记。这类标记的语法是： 内容 其中内容部分就是要被这对标记施加作用的部分。例如，b标记的作用是告诉浏览器介于标记和之间的文本应以粗体显示。这里的b是粗体(bold)的意思。标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套。下面的代码就是错误的：这是错误的交叉嵌套代码。2.2 属性HTML通过标记告诉浏览器如何展示网页，如告诉浏览器显示一个换行。另外还可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例如，标记的作用是在网页中插入一条水平线,那么这条水平线的粗细、对齐方式等就是该标记的属性，如：格式：属性应写在首标记内，并且和标记名之间有一个空格分隔。例如hr标记中，align为属性，center为属性值，属性值最好使用给括起来。2.3 注释注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。可以使用注释对程序代码进行解释，适当的注释对以后代码的阅读和维护产生很大的帮助。格式：左括号后需要写一个惊叹号，右括号前就不需要了。如8.html：注释的作用网页效果如图2-5。图2-5 水平线和注释示例2.4 编写HTML文件的注意事项是任何标记的开始和结束。采用标记嵌套的方式可以为同一个信息应用多个标记，如：同一个信息任何空格或回车在HTML代码中都不起作用，插入空格或回车有专用的标记，分别是 、。标记中不要有空格，否则浏览器可能无法识别，比如不能将写成。为了使浏览器能正常浏览网页，在用记事本或别的HTML开发工具编写好HTML文档后，在保存HTML时，对HTML文件的命名要注意以下几点： 文件的扩展名为.htm或.html结束，建议统一使用html作为文件名的后缀； 文件名中只可由英文字母、数字或下划线组成； 文件名中不要包含特殊符号，比如空格、$等； 文件名区分大小写； 网站首页文件名一般是index.html或default.html。3 综合示例