第5章 HTML语言和动态交互.pptVIP

参考网址：/songbo/ 第5章 HTML语言和动态交互 本章要点 网页与HTML语言的对应关系 JavaScript程序应用 HTML语言 (超文本标记语言，Hypertext Markup Language) 一个网页就是一个HTML文件。 浏览器软件阅读HTML文件，并将其翻译为丰富多彩的文字和画面。 Dreamweaver实质上是一个可视化的HTML设计程序。 5.1.1 网页和HTML语言的关系 在Dreamweaver的可视化窗口中制作网页时，形成的目标文件仍然是HTML代码，如果切换到代码窗口中，马上就可以看到对应的HTML代码。 切换方法： 点击代码，拆分，设计按钮 5.1.1 网页和HTML语言的关系 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象，这就是一个空白页，现在看一下空白页的HTML代码。 在启动Dreamweaver时，系统已经自动地加入了两段代码： meta http-equiv=“Content－Type” content=“text/html; charset=gb2312” bgcolor=#FFFFFF text=#000000 第一行代码的意思是： 本网页的HTML文件使用了国标gb2312字符集，是简体中文主页。如果该网页是英语，那么charset=en。 第二段代码的意思是： 页面背景色为白色（“#FFFFFF”）， 文本的颜色为黑色（#000000）。 完全空白网页的代码： html head title /title /head body /body /html 2．在空白网页上输入一行文本 在空白的网页上输入一行文本，从代码窗中可以看到文本添加在两个Body之间。 注意： 在代码窗口调试HTML代码时，如果有语法或格式错误，代码将会用黄色显示。 5.1.2 HTML语言的语法规则 1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： html head 文档标题部分 /head body 页面主体部分 /body /html 总结： 文档内容以标记符开始，以/标记符结束。 head文档标题/head 是文件标题标记。 body文档标题部分/body 是页面主体部分标记。 html /html是一个页面的开始和结尾。 5.1.3常用的HTML文本格式标记和含义 ·h1/h1 创建最大的标题。 ·h6/h6 创建最小的标题。 ·b/b 创建黑体字。 ·i/i 创建斜体字。 ·font face=#…/font 字体标记。 ·cite/cite 创建一个引用，通常是斜体。 ·p/p 创建一个新的段落。 ·strong/strong 加重文本，通常是斜体加黑体。 ·strong/strong 加重文本，通常是斜体加黑体。 ·h1 align=#…/h1 字体对齐的三个标记，为左齐、右齐、居中。 ·p align=#…/p 将文本段落按左、中、右对齐。 ·font size=#…/font 设置字体大小，从1到7。 ·font color=#…/font 设置字体的颜色，使用16进制代码。 ·br 不分段的换行符。 ·blackquote/blackquote 从两边缩进文本。 ·div align=#…/div 分区标记，用来排版大块的HTML段落。 5．字号标记font size=#……/font size 示例： html head title无标题文档/title /head body bgcolor=#FFFFFF text=#000000 font size=6黄河之水天上来。/font ；采用6号字 /body /html 6．字符修饰标记 倾斜文本表示i……/i 给文本加下划线u……/u 粗体b……/b 示例： html head title无标题文档/title /head body bgcolor=#FFFFFF text=#000000 font size=6iu两岸猿声啼不住，轻舟已过万重山。/u/i/font ；文本采用6号字倾斜并加下划线 /body /html 5.1.4 文件头标记 文件头标记是meta……。 这个标记用于对文件特征的描述，可以将一些关键字置于文件头中，这样做的目的，是为了让搜索引擎找到该文件。 示例： html head title无标题文档/title meta http-equiv=Content-Type content=text/html; charset=gb2312 meta name=keywords content=动态网页设计 HTML语言的应用 meta name=discr