Html静态网页代码汇总.doc

Dreamweaver 静态网页 Html 标记代码汇总网站相关概念Internet 是一个全球计算机互相网络，WWW 是 Internet 所提供的一种极其重要的服务，即 World Wide Web，简称 Web；WWW 主要以 Web 为表现形式，或者说，Web 是 Web 页即网页的载体，我们所说的 Web 页就是指由 HTML（超文本标记语言）这种语言编写的一类特殊文件，通常后缀为*.html 或*.htm 的页面。Dreamweaver CS 基本应用HTML 文档结构：静态网页源代码首尾结构标记，代码内呈现网页所有内容：网页主体部分：网页头部，包含网页导航栏中的标题和网页不显示的信息：标签内显示出网页台头的标题名，用于标签之内 ：辅助性标签，用于标记之内 ：标注网页的作者 ：设定搜索关键字：告诉搜索机器人需要索取的页面，默认全部 ：http-equiv 属性代替 name 属性，expires设定网页到期时间：间隔 5 秒网页自动刷新，并指向新的 URL 网址：表示是一行级别是 2 号的标题文字，有 h1h6 的 6 级标题可选：文字处理标签：预先格式化，以格式化显示标签中的内容结构：段落标记，center(居中)、left(左边)、right(右边) ：换行标记，按shift+enter可实现粗体：粗体字体标记 斜体：斜体字体标记上标：上标标记文本格式 下标：下标标记文本格式：无序列表开始结束标记 ：列表项标记，为可选项：有序列表开始结束标记，start 属性指定列表的起始数字 ：有序列表的序列标记，可自定义为数字或字母等：水平线标记，可标记水平线的长度、高度、纯色阴影显示、颜色等属性：在 HTML 中插入图像，align 属性值：top(头部)、bottom(底部)、middle(居中)、left(居左)、right(居右)点击：弹出“你好！”信息的行为 点击：弹出图片 ：在网页中插入音频文件：滚动文字字幕，方向属性:down 向下、up 向上、left 向左、right 向右 手持终端：超级链接标记点击：对话框脚本链接 开心农场外挂下载：文件下载链接 新闻报道：相对路径链接（锚记）HTML 特殊字符的字符实体：特殊字符转义码示例空格 ；欢 ；迎 ；光 ；临元（￥）¥；售价：¥；68大于（）>；if A>；B thenA=A+1小于（）<；if A<；B thenA=A+1引号（“）"；"；是还是不是？"；问题的关键是“与“符号（&）&；William &；Graham 去了集市版权号（）©；注册商标®；第 1 页 共 8 页HTML 表格标记：table align=” 对齐方式 ” width=” 宽度 ” bgcolor=” 背景色 ” background=” 背景图片 ” border=” 边框显隐 ” cellspacing=”单元格之间间距” cellpadding=”单元格内间距” ：定义表格的标题（可选）：定义表格的一行：设置表格栏标题（表头），显示为粗体子此标记可以省略：用来装载单元格数据，它们必须位于标记之间链接路径：（链接的类型和目标属性）1.链接类型u 外部链接：跳转到站点外其他网站的链接u 内部链接：站点根目录内文档之间的互相链接，也称为相对文档链接u E-mail 链接：实现打开 E-mail 客户端应用程序进行撰写、发送邮件的工作u 局部链接：在同一文档内部或不同文档之间指定位置的链接2.链接目标u _blank：将打开一个新窗口u _parent：将在父窗口中打开u _self：将在当前窗口中打开u _top：将在上级窗口中打开：命名锚记插入图像、Flash 及其他多媒体对象1 在网页中插入图片和图像占位符打开 HTML 文档，将插入点放在要插入图像的位置，单击插入栏中“常用”面板的“图像”按钮，或选择“插入”的“图像”命令，在弹出的“选择图像源”对话框中选择要插入的图像，确定即可。同样，选择插入“图像占位符”，也是如此，在对话框中设置占位符名称、宽度和高度、颜色和替换文本。2图像地图（热区）绘制热区：在文档窗口单击选中图像，在属性检查器中显示“地图”选项的文本域中为该热区输入一个名字，如果在同一文档中使用多个地图，必须保证名字的唯一。热区绘制工具有 3 种：u 矩形热点工具u 圆形热点工具u 多边形热点工具3创建轮替图像轮替效果是插入鼠标经过图像的功能，利用两个图片实现的轮替显示效果。将插入点定位到文档窗口中需要插入轮替图像处，选择“插入”“交互式图像”“鼠标经过图像”按钮，在弹出的“插入鼠标经过图像”对话框中设置相应的参数，原始图像、鼠标经过图像和按下时，前往的 URL。4创建导航条导航条通常在网页中的左侧或上方，网站同一级页面乃至整个网站一般会使用同一个导航条，这样使得整个站点方便导航、风格统一，便于浏览者在个页面之间浏览转换。打开 HTML 文档，选择“插入”“交互式图像”“导航条”命令或单击插入栏中的常用的面板上导航条，在弹出的对话框中，点击+添加导航条元件，输入项目名称，插入状态图像和鼠标经过图像以及按下图像（可选），还有替换文本和按下时前往的 URL，选择水平插入或垂直插入，选中使用表格复选框，可以将元件装入有表格，便于后面对表格进行格式化以及页面的整体布局。注意:一个页面文档内只能有一个导航条！5插入 Flash 多媒体对象媒体就是信息的载体，在计算机系统中，它指组合或两种以上媒体的一种人机交互式信息交流和传播媒体，使用的媒体包括文本基准、图像、声音、动画和电视图像。Flash 文件的 3 种格式：1) Flash 源文件格式源文件扩展名为.fla 是在 Flash 环境中创建的，只能在 Flash 程序中打开的文件格式。2) Flash 影片文件：Flash 程序中发布或导出的影片扩展名为.swf，是 Flash 源文件压缩后的优化媒体格式，可以插入到网页第 2 页 共 8 页并上载到 Web 上，也可以直接在浏览器或媒体播放软件中播放观看，但是不能在 Flash 应用程序中进行编辑。3) Flash 模板文件：Flash 模板文件的扩展名是.swt，用户可以用它修改和替换 Flash 影片中的信息。插入 Flash 动画过程：将插入点放在页面中布局表格的单元格内，选择“插入”“媒体”命令或单击插入栏上“常用”面板上的“Flash”按扭，在弹出的对话框中选择后缀为.swf 格式的 Flash 动画文件，确定即可。设置 Flash 动画属性：单击 Flash 占位符中 Flash 动画，此时属性检查器中回会显示该动画的各个属性，即可以对 Flash 影片文件进行属性编辑，可编辑的属性值有：名称、宽和高、文件、源文件、编辑、重设大小、编辑（源文件）、循环、自动播放、垂直边距和水平边距、品质、对齐、比例、参数。在“参数”域内输入“wmode”，值设为“transparent”（透明），这样可以把.swf 格式动画的背景色去掉，达到透过影片看到布局单元格或网页的背景色的效果；尤其对于应用遮罩技术的 Flash 影片，在要显示影片特殊形状轮廓的情况下，此项“wmode”参数的设置就显得十分有用，浏览器中完成参数设置后的影片和布局表格的背景浑然一体，和修改前的背景效果差别很大。6插入 Flash 按扭在文档中将鼠标定位到要插入 Flash 按扭的位置，选择“插入”“交互式图像”“Flash 按扭”命令或单击插入栏“媒体”面板上的“Flash 按扭”按扭，在弹出的“插入 Flash 按扭”对话框中首先在“样式”下拉列表框中选择一个 Flash 样式，输入按扭文本、字体大小、背景色、另存为.swf 格式的 Flash 影片文件，确定即可。7插入 Flash 文本在文档中将鼠标定位到要插入 Flash 文本的位置，选择“插入”“交互式图像”“Flash 文本”命令，或单击插入拦的“媒体”面板上的“Flash 文本”按扭，在弹出的“插入 Flash 文本”对话框中，设置相关选项并保存即可。8插入其他多媒体对象在 Dreamweaver 中除了可以插入图片、Flash 对象外，还可以插入其他的多媒体对象，例如：Applet 小程序、 QuickTime 影片、音频、视频插件等。可以插入到网页的声音格式有很多，例如：Au、Midi、Wav、Mp3 等声音格式，而在网站常用的格式就是 Midi 格式的声音文件，因为此格式本身就包含音阶，文件非常小，可以跨平台播放。插入网页背景音乐的步骤：将光标定位到网页文档中要插入背景音乐的位置，单击插入栏中“媒体”面板上的“插件”按扭，在弹出的“选择文件”对话框中选择一个音频文件，单击确定即可。对插件的主要设置属性有：n 插件或播放器名称：此项为播放器分配 ID，以在脚本中引用。n 宽和高：默认值为 32，这样只能显示播放器的一部分，如果要完整显示播放器可以设置稍大的值，例如200、30，此例中的播放器的宽、高属性为默认值，因为后面的步骤将要隐藏播放器界面。n 源文件：此项的文本域中显示嵌入到网页中的音频文件的 URL 路径。n 参数：单击此按扭，弹出“参数”对话框，在“参数”域中输入附加值，第一个参数是“hidden（隐藏）”值为“true（真）”，该值为布尔值，这个参数的意义是将播放器的界面隐藏起来， 因为作为背景音乐，不需要播放器的界面显示在网页上；第二个参数是“autostart（自动开始）”值设为“1”，该值为布尔值，作用是使音乐一旦加载到浏览器的网页中，就自动开始播放；第三个参数是“autorewind（重播）”，此例中值设为“1”，该值为布尔值，一旦音乐播放一周，又开始自动循环播放。提示：布尔值用来逻辑运算结果，结果可以为逻辑型的“true”(真)或“false”(假)，且不区分大小写；用数值表示就是“1”或者“0”。表单、框架、模板和库表单元素：在 Dreamweaver 中，常用的表单对象有文本域、多行文本域、单选按扭、单选按扭组、复选按扭、下拉列表框、密码域、图像域等。在 HTML 文档中，表单的工作方式是首先标识表单最外层标记：和标记，表单所有的元素都在这对标记内，在起始标记内，有 3 个属性：actiont、method、target。一个完整的表单有两个基本部分组成：u 表单域（）：它相当于一个“容器”，所有的表单对象都放在里面，包含了处理表单数据所有程序的 URL 以及数据提交的方法。u 表单对象：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉列表框和文件上传框、字段集、单选按扭和复选按扭等。第 3 页 共 8 页创建表单、添加表单元素：1 创建表单框架：选择“插入”“表单”，在文档中插入一个表单域，选中“表单域”，单击“表单”选项栏中的“字段集”按扭，在弹出的对话框中输入提示标签文本“问卷幸福指数调查”，选中表单域，在属性检查器中进行相应的设置。2 插入表单对象：插入文本域，文本域有两种，即文本字段和文本区域，首先要插入文本字段，在插入栏上选择“表单”面板上的“文本字段”按扭，就插入了一个文本字段用来接受用户的输入，选中该对象，单击插入栏中的“表单”面板上的“标签”按扭，这时文档窗口切换到“代码视图和设计视图”同时显示的界面，在代码视图将插入点定位到标记之前、起始标记之后，输入文本“姓名”，在设计视图下，换行后用同样方法插入一个文本字段，将光标放在该文本字段之前，输入文本“性别”，同样，程序会把文本作为刚刚创建的文本字段的标签， 并插入到代码中，按照第 2 步，同样可以创建其他文本字段，分别是住址、E-mail 信箱等 3 个文本字段。3 插入文本区域：要添加文本区域前，为了便于处理页面的布局，先插入一个两行两列表格，表格的边框隐藏，插入点放在表格第一行的第二个单元格内，单击“表单”面板上的“文本区域”按扭，在表单中插入文本区域，在第一行的第一个单元格内，输入表单说明文本，例如“生活状态”，设置文本域的属性：名称、字符宽度、类型、初始值。4 插入列表/菜单：列表/菜单可以用来使用户选择出生年月或其他投票等，单击“表单”面板上的“列表/菜单”，设置列表/菜单的属性，在“列表/菜单名称”文本域中输入“brith”，“类型”可指定是下拉列表框是以弹出菜单还是滚动的形式显示，勾选“允许多选”复选框，可以允许用户从列表中选择多项，单击“列表值”按扭，弹出“列表值”对话框，可以添加选项至弹出式菜单中，列表中的每一个选项有一个标签和一个值，使用+-按扭来添加删除列表中的选项，使用箭头来对列表项排序。5 单选按扭和复选框6 跳转菜单：跳转菜单看起来下拉列表框相似，但是不同的是此菜单中每一个项都是一个超级链接，当用户选择后会自动跳转到所选选项的值对应的目标 Html 文档或文件，在“插入跳转菜单”中添加菜单项、文本、选择时前往的 URL、选择打开 URL 的窗口、菜单名称等参数，在列表值对话框中添加项目标签和值（跳转的目标地址），确定即可；在列表菜单文本域的属性中可设置列表名，类型为“菜单”或“列表”，以及初始时选定的标签项。7 按扭：按扭一般只是为了实现提交数据和恢复初始数据，提交按扭的默认名称是 Submit，重置按扭的默认名称是 Reset，在按扭的属性检查器中可以自定义按扭标签、名称、动作选项。框架：框架是将几个网页集成到一个窗口，使用户浏览网页、搜索信息更容易，框架页面将浏览器的窗口分为多个显示区域，每一个显示区域称为一个框架，它包含一个独立的、可以滚动的页面。一个典型的框架网站，主页的窗口中包括 3 个不同的 HTML 页面，顶部是广告条，左侧是 Logo 和导航链接列表，单击左侧的链接可以 在右侧的主窗口中显示相应的具体内容。使用框架：框架分为两个部分：一个框架集和单个的框架。DW 中“框架”面板上预定义的框架集有 13 种。在插入栏的“框架”面板上单击左侧和顶部嵌套的“框架”按扭，选择插入“左侧及上方嵌套”，将创建好的框架页全部保存，此时回单个保存框架集中的子框架，主窗口保存为 main.htm，顶部窗口保存为top.htm，左侧窗口保存为 left.htm，最后保存框架集。提示：如果要自定义框架，可以按住 Alt 键的同时，单击并拖拽一个框架，这样就可以新建一个框架，要删除一个框架，只要拖拽一个矿家到它的父窗口就可删除了。按 shift+F2 可以调出“高级布局”中的“框架”面板，或选择“站点”“其他”“框架”命令以显示“框架”面板，单击“框架”面板上的各个区域以激活文档窗口，默认的框架名称为 topFrame、leftFrame、mainFrame，在各个窗口的属性中可以设置是否滚动、边界宽度和边界高度、边框显隐、边框颜色、是否能调整大小等。不同框架之间页面的跳转：第 4 页 共 8 页单击 left 窗口中的链接使对应的页面显示在 main 窗口中，在 left 窗口中设置链接的目标属性来实现这种跳转。实现跳转步骤：将插入点放在 left 窗口的链接文本中间，在属性检查器上的“链接”选项域中设置跳转到的目标文档，在“目标”下拉列表框中选择要在那个框架下跳转，若在主窗口中，则为“mainFrame”，这样保证了单击左侧窗口中的链接后，在主窗口中显示链接的页面。模板：模板是一种文件，可以用它作为创建其他文档的基础，用它处理网页不但工作效率高，而且可以统一网站的风格。在多个页面中反复出现又不需要经常变更的内容可以设为模板的不可编辑区域，而在可编辑区域就可以根据不同的页面替换为新内容。实际上，模板的功能就是把网页的布局和内容分离，通常是把大致布局设计好之后，保存为模板，然后在通过模板创建新文档。将“文件”面板切换到“资源”选项卡，单击左侧的“模板”按钮，面板上显示了该站点的模板文件以及模板缩略图。创建模板：创建模板又两种方法：即可以从新建的空白 HTML 文档中开始创建，在其中添加图像、表格、文本等对象，然后保存为模板；也可以把现有的布局合适的 HTML 文档保存为模板，这也是最简单的方法。在“站点”面板中，双击以打开要保存为模板的 HTML 文件，将光标定位到文档的空白区域，选择“插入” “模板对象”“可编辑区域”命令，弹出“新建可编辑区域”的对话框，在“名称”文本框中可以输入一个名称，单击“确定”即可；文档中显示的蓝色矩形框已经为模板文件添加了可编辑区域，选择“文件”“另存为模板”命令弹出“另存模板”对话框，在“另存为”文本域中输入文本，为模板命名，单击“保存”按钮后，DW 将自动在站点根目录下创建一个名为“template”的模板文件夹，刚刚创建的模板文件，保存在该文件夹内。库：库保存在网站的“库”文件夹内，称为库项目，在 DW 的文档插入库文件时，是把库项目的备份代码块应用到页面而已，面板中保存的库项目是源文件，而插入到页面的库项目是它的实例，实例会随着代码的改变一起更新。为站点创建了库项目之后，会发现 DW 在站点跟目录下自动创建了一个名为“libray”库文件夹，库项