HTML经典基础教程.ppt

第二章 HTML基础 HTML基础 一、 HTML的概念 1.什么是HTML？ 超文本标记语言（HTML——HyperText Markup Language）是用于设计网页源文件（网页文档）的语言，利用它编写的代码保存在后缀名为.htm或.html的文件中。 HTML包括一些定义页面内容和格式的符号，称为标记（标签）。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。 HTML基础 2.什么是标记？ 标记是网页文档中的一些有特定意义的符号，这些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。 例如：p…/p 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等。 例如：font size=5 color=redHello/font 标记可以嵌套使用。 例如：uiDreamweaver/i/u HTML基础 3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。 例如：新浪网 武汉大学 百度 超媒体是网页上具有链接功能的多媒体。 超链接是超文本和超媒体的统称，分为文字和图像（包括动画）两种。网页中的一段文字、一幅图像或图像的某一部分等都可以定义为超链接。 HTML基础 二、如何编写和浏览HTML网页文档 1.如何编写HTML网页文档？ 启动记事本程序，利用HTML语言编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名（注意在“保存类型”下拉列表框中选择“所有文件”选项）。 启动Dreamweaver，选择“文件”→“新建”，打开“新建文档”对话框：选择“常规”选项卡，在“类别”列表中选择“基本页”选项，在“基本页”列表里选择“HTML”选项，单击“创建”按钮。单击“文档”工具栏上的“代码”按钮，在编辑区中编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名。 HTML基础 二、如何编写和浏览HTML网页文档 2.如何浏览HTML网页文档？ 启动IE，在浏览器窗口的地址栏输入网页文档的URL。 启动Dreamweaver，选择“文件”→“打开”，打开要浏览的网页文档，单击“文档”工具栏上的“在浏览器中预览/调试”按钮，在弹出菜单中选择“预览在IExplore 6.0”选项；或者直接按下F12快捷键。 HTML基础 三、HTML的常用标记 1.文档结构标记 用来指明一个HTML文档的基本结构。 （1）文档标记：HTML…/HTML 整个HTML文档内容均在此标记之中。 （2）头部标记： HEAD…/HEAD 凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。 HTML基础 （3）标题标记： TITLE…/TITLE 此标记之间的内容将作为文档标题显示在浏览器的标题栏中。 注意： TITLE…/TITLE标记只能放在HEAD…/HEAD标记之间。 （4）主体标记： BODY…/BODY 主体是Web页的主要部分，在BODY…/BODY标记之间的内容将显示在Web页中。 HTML基础 html head title结构标记示例/title /head body text=blue pi斜体字文本/i/p /body /html HTML基础 2.格式标记 （1）段落标记：p…/p 此标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 （2）换行标记：br 此标记没有结束标记，用来创建一个换行。 （3）两边缩进标记：blockquote…/blockquote 在此标记之间的文本将按照两边缩进的方式显示。 HTML基础 （4）项目列表标记：dl/dl、dt、dd ① dl/dl用来创建项目列表 ② dt用来创建列表中的上层项目 ③ dd用来创建列表中的下层项目 dt和dd都必须放在dl/dl标记之间。 [例] 创建一个项目列表： HTML基础 该网页的HTML源文件如下： html headtitle项目列表示例/title/head b