HTML教程--网页教程与代码

网页教程与代码网页教程与代码 HTML 教程教程 HTML 基本概念基本概念 什么是什么是 HTML 文件 文件 HTML 的英文全称是 Hypertext Marked Language 中文叫做 超文本标记语言 和一般文本的不同的是 一个 HTML 文件不仅包含文本内容 还包含一些 Tag 中文称 标记 一个 HTML 文件的后缀名是 htm 或者是 html 用文本编辑器就可以编写 HTML 文件 这就试写一个这就试写一个 HTML 文件吧 文件吧 打开你的 Notepad 新建一个文件 然后拷贝以下代码到这个新文件 然后将这个文件存 成 first html Title of page This is my first homepage This text is bold 要浏览这个 first html 文件 双击它 或者打开浏览器 在 File 菜单选择 Open 然后选 择这个文件就行了 示例解释示例解释 这个文件的第一个 Tag 是 这个 Tag 告诉你的浏览器这是 HTML 文件的头 文 件的最后一个 Tag 是 表示 HTML 文件到此结束 在和之间的内容 是 Head 信息 Head 信息是不显示出来的 你在浏 览器里看不到 但是这并不表示这些信息没有用处 比如你可以在 Head 信息里加上一些 关键词 有助于搜索引擎能够搜索到你的网页 在和之间的内容 是这个文件的标题 你可以在浏览器最顶端的标题栏 看到这个标题 在和之间的信息 是正文 在和之间的文字 用粗体表示 顾名思义 就是 bold 的意思 HTML 文件看上去和一般文本类似 但是它比一般文本多了 Tag 比如 等 通过这些 Tag 可以告诉浏览器如何显示这个文件 HTML 元素元素 HTML Elements HTML 元素 HTML Element 用来标记文本 表示文本的内容 比如 body p title 就是 HTML 元素 HTML 元素用 Tag 表示 Tag 以结束 Tag 通常是成对出现的 比如 起始的叫做 Opening Tag 结尾的就叫做 Closing Tag 目前 HTML 的 Tag 不区分大小写的 比如 和其实是相同的 HTML 元素元素 HTML Elements 的属性的属性 HTML 元素可以拥有属性 属性可以扩展 HTML 元素的能力 比如你可以使用一个 bgcolor 属性 使得页面的背景色成为红色 就像这样 再比如 你可以使用 border 这个属性 将一个表格设成一个无边框的表格 如下 属性通常由属性名和值成对出现 就像这样 name value 上面例子中的 bgcolor border 就是 name red 和 0 就是 value 属性值一般用双引号标记起来 属性通常是附加给 HTML 的 Opening Tag 而不是 Closing Tag 一些基础的一些基础的 HTML Tag HTML 里 比较基础的 Tag 主要用于标题 段落和分行 学习 HTML 最好的方法 就是跟着示例学 为了各位学习的方便 我们准备了一个简单的 HTML 编辑器 你可以在左边写 HTML 代码 然后点击上面的按钮 查看 HTML 的显示结 果 试试看吧 试试看吧 示例 一个非常简单的 HTML 文件 这个示例算是一个最简单的 HTML 文件 只包含了最基本的能构成一个 HTML 文件的 Tag 通过这个例子 你可以看到浏览器是如何显示这个文件的 以此对 HTML 文件有个 最初的认识 示例 简单的段落 这个示例显示在 HTML 文件里如何分段 用 p 来定义段落 正文标题正文标题 这个示例告诉你如何在 HTML 文件里定义正文标题 HTML 用到这几个 Tag 来定义正文标题 从大到小 每个正文标题自成一段 This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading 段落划分段落划分 在 HTML 里用和划分段落 This is a paragraph This is another paragraph 换行换行 通过使用这个 Tag 可以在不新建段落的情况下换行 没有 Closing Tag 用换行是个坏习惯 正确的是使用 This is a paragraph with line breaks HTML 注释注释 在 HTML 文件里 你可以写代码注释 解释说明你的代码 这样有助于你和他人日后能够 更好地理解你的代码 注释可以写在之间 浏览器是忽略注释的 你不会在 HTML 正文中看到你的注 释 一些小建议一些小建议 HTML 文件会自动截去多余的空格 不管你加多少空格 都被看做一个空格 一个空行也 被看做一个空格 有些 Tag 能够将文本自成一段 而不需要使用来分段 比如之 类的标题 Tag 更多示例更多示例 更多段落 这个示例显示了段落的特性 换行 这个示例告诉你如何在 HTML 文件里换行 正文标题 这个示例教会你如何在 HTML 文件里显示正文标题 越来越小 居中的正文标题 这个示例告诉你如何将正文标题居中显示 加条横线 这个示例演示了如何在 HTML 文中加条横线 代码注释 这个示例演示如何在 HTML 代码中加上代码注释 这些注释只显示在 HTML 源代码中 而 源代码最终形成的网页里是看不到这些注释的 背景颜色 这个示例演示如何改变 HTML 文件的背景色 HTML 常用格式常用格式 HTML 定义了一些文本格式的 Tag 比如利用 Tag 可以将字体变成粗体或者斜体 从下 面的示例 你可以了解各种文本格式 Tag 如何改变 HTML 文本的显示 常用文本格式常用文本格式 Tag TagTag 说明说明 粗体 bold 斜体 italic 文字当中划线表示删除 文字下划线表示插入 下标 上标 缩进表示引用 保留空格和换行 表示计算机代码 等宽字体 示例示例 HTML 常用的格式 Tag 粗体用 b 表示 斜体用 i 表示 芙蓉姐姐这个词当中划线表示删除 想唱就唱这个词下划线插入 X2其中的 2 是下标 X2其中的 2 是上标 好好学习 天天向上 这句话缩进表示引用 这是 预设 preformatted 文本 在 pre 这个 tag 里的文本 保留 空格和 分行 粗体用粗体用 b b 表示 表示 斜体用 i 表示 芙蓉姐姐 有删除线 这个词当中划线表示删除 想唱就唱 有下划线 这个词下划线插入 X2其中的 2 是下标 X2其中的 2 是上标 好好学习 天天向上 这句话缩进表 示引用 这是 预设 preformatted 文本 在 pre 这个 tag 里的文本 保留 空格和 分行 call getOrders 用 code 显示计算机代码 code 里显示的字符是等宽字符 call getOrders 用 code 显示计算机代码 code 里显示 的字符是等宽字符 这个示例用了上述 Tag 你可以对比一下 HTML 的显示结果 如何看如何看 HTML 的源代码的源代码 在浏览器看到的 HTML 网页 是浏览器解释 HTML 源代码后产生的结果 要查看这个 HTML 的源代码 有两种方法 一是点击鼠标右键 点击 View Source 查看 源文件 命令 二是选择浏览器菜单 View 查看 中的 Source 源文件 命令 利用 View Source 得到网页的源代码 你可以由此借鉴一下别人写得好的地方 不过在 你对 HTML 知识尚少的情况下 看别人复杂的 HTML 源代码 只会让你头晕 建议你还是 再等等 先掌握一些基础再说 HTML 特殊字符显示特殊字符显示 HTML 字符实体字符实体 Character Entities 有些字符在 HTML 里有特别的含义 比如小于号 就表示 HTML Tag 的开始 这个小于号 是不显示在我们最终看到的网页里的 那如果我们希望在网页中显示一个小于号 该怎么 办呢 这就要说到 HTML 字符实体 HTML Character Entities 了 一个字符实体 Character Entity 分成三部分 第一部分是一个或者 用实体 Entity 名字的好处是比较好理解 一看 lt 大概就猜出是 less than 的意思 但 是其劣势在于并不是所有的浏览器都支持最新的 Entity 名字 而实体 Entity 编号 各种 浏览器都能处理 注意 Entity 是区分大小写的 如何显示空格如何显示空格 通常情况下 HTML 会自动截去多余的空格 不管你加多少空格 都被看做一个空格 比 如你在两个字之间加了 10 个空格 HTML 会截去 9 个空格 只保留一个 为了在网页中 增加空格 你可以使用表示空格 最常用的字符实体最常用的字符实体 Character Entities 显示结果显示结果说明说明Entity NameEntity Number 显示一个空格 大于 双引号 其他常用的字符实体其他常用的字符实体 Character Entities 显示结果显示结果说明说明Entity NameEntity Number 版权 注册商标 乘号 除号 更多字符实体更多字符实体 Character Entities 更多字符实体 Character Entities 请参见 ISO Latin 1 字符集 HTML 利用超链接打开链接文件利用超链接打开链接文件 先看两个示例先看两个示例 建立一个超链接 这个示例演示了如何在 HTML 文件里创建超链接 将一个图片作为一个超链接 这个示例演示了如何将一个图片作为一个超链接 即点击一个图片 可以连接到其它文件 a 和和 href 属性属性 HTML 用来表示超链接 英文叫 anchor 可以指向任何一个文件源 一个 HTML 网页 一个图片 一个影视文件等 用法如下 链接的显示文字 点击当中的内容 即可打开一个链接文件 href 属性则表示这个链接文件的路 径 比如链接到 站点首页 就可以这样表示 站长网 站长学院 首页 target 属性属性 使用 target 属性 可以在一个新窗口里打开链接文件 站长网 站长学院 首页 示例 title 属性属性 使用 title 属性 可以让鼠标悬停在超链接上的时候 显示该超链接的文字注释 站长网 站长学院网站 如果希望注释多行显示 可以使用作为换行符 站长网 站长学院网站 示例 name 属性属性 使用 name 属性 可以跳转到一个文件的指定部位 使用 name 属性 要设置一对 一是设定 name 的名称 二是设定一个 href 指向这个 name 参见第 6 章 第 6 章 示例 name 属性通常用于创建一个大文件的章节目录 table of contents 每个章节都建立一 个链接 放在文件的开始处 每个章节的开头都设置 Name 属性 当用户点击某个章节的 链接时 这个章节的内容就显示在最上面 如果浏览器不能找到 Name 指定的部分 则显示文章开头 不报错 链接到链接到 email 地址地址 在网站中 你经常会看到 联系我们 的链接 一点击这个链接 就会触发你的邮件客户端 比如 Outlook Express 然后显示一个新建 mail 的窗口 用可以实现这样的功能 联系新浪 示例 HTML 相对路径相对路径 Relative Path 和绝对路径和绝对路径 Absolute Path HTML 初学者会经常遇到这样一个问题 如何正确引用一个文件 比如 怎样在一个 HTML 网页中引用另外一个 HTML 网页作为超链接 hyperlink 怎样在一个网页中插入 一张图片 相关教程 HTML 超链接 HTML 图片 如果你在引用文件时 如加入超链接 或者插入图片等 使用了错误的文件路径 就会导 致引用失效 无法浏览链接文件 或无法显示插入的图片等 为了避免这些错误 正确地引用文件 我们需要学习一下 HTML 路径 HTML 有 2 种路径的写法 相对路径和绝对路径 HTML 相对路径相对路径 Relative Path 同一个目录的文件引用同一个目录的文件引用 如果源文件和引用文件在同一个目录里 直接写引用文件名即可 我们现在建一个源文件 info html 在 info html 里要引用 index html 文件作为超链接 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot sites blabla index html 在 info html 加入 index html 超链接的代码应该这样写 index html 如何表示上级目录如何表示上级目录 表示源文件所在目录的上一级目录 表示源文件所在目录的上上级目录 以此类推 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot sites index html 在 info html 加入 index html 超链接的代码应该这样写 index html 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot index html 在 info html 加入 index html 超链接的代码应该这样写 index html 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot sites wowstory index html 在 info html 加入 index html 超链接的代码应该这样写 index html 如何表示下级目录如何表示下级目录 引用下级目录的文件 直接写下级目录文件的路径即可 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot sites blabla html index html 在 info html 加入 index html 超链接的代码应该这样写 index html 假设 info html 路径是 c Inetpub wwwroot sites blabla info html 假设 index html 路径是 c Inetpub wwwroot sites blabla html tutorials index html 在 info html 加入 index html 超链接的代码应该这样写 index html HTML 绝对路径绝对路径 Absolute Path HTML 绝对路径 absolute path 指带域名的文件的完整路径 假设你注册了域名 会给你一个目录 比如 www 这个 www 就是你网站的根目录 假设你在 www 根目录下放了一个文件 index html 这个文件的绝对路径就是 假设你在 www 根目录下建了一个目录叫 html tutorials 然后在该目录下放了一个文件 index html 这个文件的绝对路径就是 如何创建如何创建 HTML 表格表格 HTML 表格用表示 一个表格可以分成很多行 row 用表示 每行又可以 分成很多单元格 cell 用表示 这三个 Tag 是创建表格最常用的 Tag 示例 border 属性属性 在缺省情况下 如果不设置表格的边界 表格是不显示边界的 示例 不显示边界的表格 要显示表格的边界 可使用 border 这个属性 示例 显示边界的表格 表格的表头表格的表头 用来表示表格的表头 表头的字是粗体显示的 示例 有表头的表格 空的单元格空的单元格 如果表格的单元格之间没有内容 那么这个单元格的边界是不会被显示出来 的 尽管整个表格已设置边界值 要显示这个单元格的边界 可以插入一个空格 符 示例 更多示例更多示例 有标题的表格 这个示例演示如何用在一个表格上加上标题 包含多列或多行的单元格 这个示例演示如何用 colspan rowspan 设置多列或者多行的单元格 单元格里的内容 这个例子演示单元格里面的内容 单元格的内容可以是文字 图片 超链接 Form 表格等 单元格内容与单元格边界之间的距离 这个示例教你如何用 cellpadding 这个属性设置单元格内容与单元格边界之间的距离 单元格之间的距离 这个示例教你如何用 cellspacing 这个属性设置单元格之间的距离 设置表格的背景颜色和背景图片 这个示例演示如何用 bgcolor 属性设置表格的背景颜色 如何用 background 属性为表 格添加背景图片 设置单元格的背景颜色和背景图片 这个示例演示如何用 bgcolor 属性设置单元格的背景颜色 如何用 background 属性为 单元格添加背景图片 单元格内容的对齐方式 这个示例教你如何用 align 属性设置单元格的对齐方式 HTML 框架框架 Frames 使用框架 Frame 你可以在浏览器窗口同时显示多个网页 每个 Frame 里设定一个网 页 每个 Frame 里的网页相互独立 Frameset 决定如何划分 Frame 有 cols 属性和 rows 属 性 使用 cols 属性 表示按列分布 Frame 使用 rows 属性 表示按行分布 Frame Frame 用这个 Tag 设定网页 里有 src 属性 src 值就是网页的路径和文件 名 下面的代码的目的是 将 Frameset 分成 2 列 第一列 25 表示第一列的宽度是窗口 宽度的 25 第二列 75 表示第一列的宽度是窗口宽度的 75 第一列中显示 a html 第二列中显示 b html Iframe Iframe 是 Inline Frame 的意思 用可以将 Frame 置于一个 HTML 文件内 示例示例 列分 Frame 这个例子显示如何在浏览器里同时显示三个网页 三个网页是按列分布的 行分 Frame 这个例子显示如何在浏览器里同时显示三个网页 三个网页是按行分布的 混合 Frameset 这个例子既用到了 cols 属性 又用到了 rows 属性 将 Frame 进行灵活分布 Frameset 中的 noresize 属性 使用 Noresize 属性可以确保 Frame 的大小 如果不使用 noresize 属性 你可以用鼠标 移动 Frame 的边界 来改变 Frame 的大小 如果设置了 noresize 属性 就不能移动边 界了 Frame 用于导航 这个例子演示如何建立一个用于导航的 Frame 这个导航 Frame 包含一个 HTML 这个 HTML 代码如下 包含了一个网页列表 点击网页列表中的任何一项 就会在第二个 Frame 中显示点击中的网页 humorlist html 笑话一 笑话二 笑话三 Iframe 的使用 这个例子显示如何在一个 HTML 文件里用 iframe 嵌入一个网页 HTML 列表列表 Lists HTML 有三种列表形式 排序列表 Ordered List 不排序列表 Unordered List 定义 列表 Definition List 排序列表排序列表 Ordered List 排序列表中 每个列表项前标有数字 表示顺序 排序列表由开始 每个列表项由开始 排序列表示例 不排序列表不排序列表 Unordered List 不排序列表不用数字标记每个列表项 而采用一个符号标志每个列表项 比如圆黑点 不排序列表由开始 每个列表项由开始 不排序列表示例 定义列表定义列表 定义列表通常用于术语的定义 定义列表由开始 术语由开始 英文意为 Definition Term 术语的解释说明 由开始 里的文字缩进显示 定义列表示例 更多示例更多示例 不同类型 Type 的排序列表 这个例子显示如何用 Type 属性设置排序列表项前的符号 不同类型 Type 的不排序列表 这个例子显示如何用 Type 属性设置不排序列表项前的符号 嵌套的列表 列表里可以含有子列表 通常用这种嵌套的列表 反映层次较多的内容 HTML 表单表单 Forms HTML 表单 Form 是 HTML 的一个重要部分 主要用于采集和提交用户输入的信息 举个简单的例子 一个让用户输入姓名的 HTML 表单 Form 示例代码如下 请输入你的姓名 演示示例 学习 HTML 表单 Form 最关键要掌握的有三个要点 表单控件 Form Controls Action Method 先说表单控件 Form Controls 通过 HTML 表单的各种控件 用户可以输入文字信息 或者从选项中选择 以及做提交的操作 比如上面的例句里 input type text 就是一 个表单控件 表示一个单行输入框 用户填入表单的信息总是需要程序来进行处理 表单里的 action 就指明了处理表单信息的 文件 比如上面例句里的 至于 method 表示了发送表单信息的方式 method 有两个值 get 和 post get 的方 式是将表单控件的 name value 信息经过编码之后 通过 URL 发送 你可以在地址栏里看 到 而 post 则将表单的内容通过 http 发送 你在地址栏看不到表单的提交信息 那什 么时候用 get 什么时候用 post 呢 一般是这样来判断的 如果只是为取得和显示数据 用 get 一旦涉及数据的保存和更新 那么建议用 post HTML 表单表单 Form 常用控件常用控件 Controls HTML 表单 Form 常用控件有 表单控件表单控件 Form Contros 说明说明 input type text 单行文本输入框 input type submit 将表单 Form 里的信息提交给表单里 action 所指向的文件 input type checkbox 复选框 input type radio 单选框 select下拉框 textArea多行文本输入框 input type password 密码输入框 输入的文字用 表示 表单控件表单控件 Form Control 单行文本输入框 单行文本输入框 input type text 单行文本输入框允许用户输入一些简短的单行信息 比如用户姓名 例句如下 演示示例 表单控件表单控件 Form Control 复选框 复选框 input type checkbox 复选框允许用户在一组选项里 选择多个 示例代码 苹果 桔子 芒果 演示示例 用 checked 表示缺省已选的选项 桔子 演示示例 表单控件表单控件 Form Control 单选框 单选框 input type radio 使用单选框 让用户在一组选项里只能选择一个 示例代码 苹果 桔子 芒果 演示示例 用 checked 表示缺省已选的选项 桔子 演示示例 表单控件表单控件 Form Control 下拉框 下拉框 select 下拉框 Select 既可以用做单选 也可以用做复选 单选例句如下 苹果 桔子 芒果 演示示例 如果要变成复选 加 muiltiple 即可 用户用 Ctrl 来实现多选 例句 演示示例 用户还可以用 size 属性来改变下拉框 Select 的大小 演示示例 表单控件表单控件 Form Control 多行输入框 多行输入框 textarea 多行输入框 textarea 主要用于输入较长的文本信息 例句如下 其中 cols 表示 textarea 的宽度 rows 表示 textarea 的高度 演示示例 表单控件表单控件 Form Control 密码输入框 密码输入框 input type password 密码输入框 input type password 主要用于一些保密信息的输入 比如密码 因为用 户输入的时候 显示的不是输入的内容 而是黑点符号 例句如下 演示示例 表单控件表单控件 Form Control 提交 提交 input type submit 通过提交 input type submit 可以将表单 Form 里的信息提交给表单里 action 所指向 的文件 例句如下 演示示例 表单控件表单控件 Form Control 图片提交 图片提交 input type image input type image 相当于 input type submit 不同的是 input type image 以 一个图片作为表单的提交按钮 其中 src 属性表示图片的路径 演示示例 HTML 图片图片 Images 用 这个 Tag 可以在 HTML 里面插入图片 最基本的语法如下 url 表示图片的路径和文件名 比如 url 可以是 images logo blabla logo01 gif 也 可以是个相对路径 images logo blabla logo01 gif 示例 图片图片 alt 属性属性 中有一个 alt 属性 英文叫 alternate text 例句如下 假使浏览器没有载入图片的功能 浏览器就会转而显示 Alt 属性的值 其实 现在大多数浏览器都支持图片载入 在此介绍 Alt 属性 是因为它的另外一个重要 功能 目前搜索引擎抓取工具无法识别图像中所含的文字 所以用 ALT 属性写上图片的说 明 便于搜索引擎抓取你网页的内容 示例 图片图片 align 属性属性 用 align 属性 可以改变图片的垂直 居上 居中 居下 对齐方式和水平对齐方式 居左 居中 居右 示例 图片的大小图片的大小 在缺省状况下 图片显示原有的大小 你可以用 height 和 width 属性改变图片的大小 不过图片的大小一旦被改变 图片会相应放大或缩小 显示出来的结果可能会很难看 示例 建议建议 图片相对文字 所占的字节数较多 比如一个全屏的图片 即使经过压缩 也要占去大约 50k 字节 这相当于 25000 字的文本 因此浏览器载入图片比较费时 建议一个 HTML 文件里不要包含过多的图片 否则会影响你的网页显示速度 更多示例更多示例 背景图片 这个示例演示如何将一个图片作为 HTML 网页的背景图片 将一个图片作为一个超链接 这个示例演示了如何将一个图片作为一个超链接 即点击一个图片 可以连接到其它文件 HTML 字体字体 Fonts 在 HTML 里 可以用 font 这个元素及其属性来设定字体的大小 颜色和字体风格 字体大小字体大小 用字体大小属性 size 来设定字体的大小 示例代码如下 这一段的字体大小的值是 2 演示示例 字体风格字体风格 用 face 属性来设定字体风格 示例代码如下 这一段的字体风格是 arial 演示示例 字体颜色字体颜色 用颜色属性 color 来设定字体颜色 字体颜色代码请参见 HTML 颜色参考 HTML Color Reference 这一段的字体颜色是红色 演示示例 注意注意 HTML4 的标准中 已经不建议使用 font 及其属性来设定字体 而是建议用 CSS 来设定 字体的大小 颜色 字体风格等 有关 CSS 中和文字的相关属性 请参见我们教程中的 CSS 常用文本属性 CSS 常用字体属性 HTML 背景颜色和背景图片背景颜色和背景图片 HTML 的 有两个关于背景的属性 一个是 bgcolor 是设置背景颜色的 另一 个是 background 是设置背景图片的 bgcolor 属性属性 bgcolor 属性用来设置 HTML 网页的背景颜色 示例 background 属性属性 background 属性用来设置 HTML 网页的背景图片 background 属性值就是背景图片的 路径和文件名 如 如果背景图片小于网页显示窗口 那么这个背景图片会自动重复 示例 建议建议 bgcolor 和 background 这两个的属性 在新的 HTML 标准 HTML 4 and XHTML 里已不建议使用 而建议用 CSS 设置背景颜色和图片 为保证浏览器载入网页的速度 建议尽量不要使用字节过大的图片作为背景图片 HTML 头部信息头部信息 Head HTML 头部信息 head 里包含关于所在网页的信息 头部信息 head 里的内容 主要是 被浏览器所用 不会显示在网页的正文内容里 另外 搜索引擎如 google yahoo baidu 等也会查找你网页中的 head 信息 为了让搜索 引擎能够收录你的网页 你也要填写适当的 head 信息 网站被搜索引擎收录 还有其它 的方法 比如被其它网站链接 这里不赘述 请浏览搜索引擎网站 下面说几个常用的 head 信息里的 html 元素 如标题 title 链接 link 样式 style 以 及关于信息 meta 标题标题 title 标题 title 是最常用的 head 信息 它不显示在 HTML 网页正文里 显示在浏览器窗口的 标题栏里 见图 示例代码如下 HTML 中文教程头部信息 head 之标题 title 说明 链接链接 link 用链接 link 可以建立和外部文件的链接 常用的是对 CSS 外部样式表 external style sheet 的链接 示例代码如下 有关 CSS 外部样式表和示例 详见 CSS 简介 样式样式 style 用样式 style 可以设值网页的内部样式表 internal style sheet 示例代码如下 body background color white color black h1 font 18pt arial bold 有关 CSS 内部样式表和示例 详见 CSS 简介 关于网页信息关于网页信息 meta 在计算机语言里 你经常可以看到一个前缀 meta meta 就是 关于 about 的意思 这 meta 解释起来比较拗口 比如 metadata 意为描述 data 的 data 英文即 data about data 还有一个词叫 metalanguage 表示一种描述其它语言的语言 再举一个 例子 metafile 表示描述其它文件的文件 在 HTML 里 meta 标记 meta tags 表示用来描述网页的有关信息 示例代码如下 利用 meta 中的 Refresh 你还可以实现自动跳转页面的功能 示例代码 演示示例 HTML 元素参考手册元素参考手册 HTML Elements Reference a 表示超链接的起始或目的位置 acronym 表示取首字母的缩写词 address 表示特定信息 如地址 签名 作者 文档信息 applet 在页面上放置可执行内容 area 定义一个客户端图像映射中一个超级链接区域的形状 坐标和关联 URL b 指定文本应以粗体显示 base 指定一个显式 URL 用于解析对于外部源的链接和引用 如图像和样式表 basefont 设置显示文本时作为默认字体的基础字体值 bdo 允许作者为选定文本片断禁用双向法则 bgsound 使页面能够带有背景声音或配音 big 指定所含文本要以比当前字体稍大的字体显示 blockquote 表示文本中的一段引用语 body 指明文档主体的开始和结束 br 插入一个换行符 button 指定一个容器 其中所含的 HTML 会被显示为一个按钮 caption 表格的标题 对表格的简单描述 center 将指定文本和图像居中显示 cite 用斜体显示标明引文 code 表示代码范例 col 说明基于列的表格缺省属性 colgroup 说明表格中一列或一组列的缺省属性 comment 表示不可见的注释 防止所包含的文本或者 HTML 源代码被浏览器解析和显示 dd 在定义列表中表示定义 定义通常在定义列表中缩进显示 del 表示文本已经从文档中删除 dfn 表示术语的定义 dir 表示目录列表 div 表示一块可显示 HTML 的区域 dl 表示定义列表 dt 在定义列表中表示定义术语 em 强调文本 通常以斜体显示 embed 允许嵌入任何类型的文档 fieldset 在字段集包含的文本和其它元素外面画一个方框 font 用于说明所包含文本的新字体 大小和颜色 form 说明所包含的控件是某个表单的组成部分 frame 在 FRAMESET 元素内表示单个框架 frameset 表示一个框架集 用于组织多个框架和嵌套框架集 head 提供了关于文档的无序信息集合 hn 以标题样式显示文本 hr 画一条横线 html 表明文档包含 HTML 元素 i 指定文本应以斜体显示 iframe 创建内嵌漂浮框架 img 在文档中嵌入图像或视频片断 input 创建各种表单输入控件 input type button 创建按钮控件 input type checkbox 创建复选框控件 input type file 创建文件上载控件 该控件带有一个文本框和一个浏览按钮 input type hidden 传输关于客户 服务器交互的状态信息 input type image 创建一个图像控件 该控件被点击后将导致表单立即被提交 input type password 创建与 INPUT type text 控件类似的单行文本输入控件 不过并不显示用户输入的内容 input type radio 创建单选钮控件 input type reset 创建一个按钮 点击该按钮后 将重置表单控件回其初始值 input type submit 创建一个按钮 点击该按钮后 即提交表单 input type text 创建一个单行的文本输入控件 ins 表示插入到文档中的文本 isindex 使浏览器显示一个对话框 提示用户输入单行文本 kbd 以定宽字体显示文本 label 为页面上的其它元素指定标签 legend 在 fieldSet 对象绘制的方框内插入一个标题 li 表示列表中的一个项目 link 允许当前文档和外部文档建立连接 listing 以固定宽度的字体显示文本 map 包含客户端图像映射的坐标数据 marqueee 创建一个滚动的文本字幕 menu 创建一个无序列表 meta 向服务器和客户端传达关于文档的隐藏信息 nobr 不换行显示文本 noframes 包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML noscript 指定在不支持脚本的浏览器中显示的 HTML object 在 HTML 页面中插入对象 ol 编制排序列表 optgroup 允许作者对 select 元素中的选项进行逻辑分组 option 表示 SELECT 元素中的一个选项 p 表示一段 param 设置 APPLET EMBED 或 OBJECT 元素的属性初始值 pre 以固定宽度字体显示文本 q 分离文本中的引语 s 带删除线方式显示文本 samp 表示代码范例 script 指定由脚本引擎解释的页面中的脚本 select 表示一个列表框或者一个下拉框 small 指定内含文本要以比当前字体稍小的字体显示 span 指定内嵌文本容器 strike 带删除线显示文本 strong 以粗体显示文本 style 指定页面的样式表 sub 说明内含文本要以下标的形式显示 比当前字体稍小 sup 说明内含文本要以上标的形式显示 比当前字体稍小 table 说明所含内容组织成含有行和列的表格形式 tbody 指明哪些行作为表格的主体 td 指定表格中的单元格 textarea 多行文本输入控件 tfoot 指明哪些行作为表尾 th 指定标题列 标题列将在单元格中居中并以粗体显示 thead 指定哪些行作为表头 title 文档的标题 tr 指定表格中的一行 tt 以固定宽度字体显示文本 u 带下划线显示文本 ul 表示不排序的项目列表 var 定义程序变量 通常以斜体显示 wbr 向一块 NOBR 文本中插入软换行 HTML 颜色参考颜色参考 在 HTML 里 颜色有两种表示方式 一种是用颜色名称表示 比如 blue 表示蓝色 另外 一种是用 16 进制的数值表示 RGB 的颜色值 RGB 是 Red Green Blue 意思 RGB 每个原色的最小值是 0 最大值是 255 如果换算成 16 进制表示 就是 00 FF 比如白色的 RGB 255 255 255 就用 FFFFFF 表示 还有黑色的 RGB 0 0 0 就用 000000 表示 注 在 W3C 制定的 HTML 4 0 标准中 只有 16 种颜色可以用颜色名称表示 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white and yellow 其它的颜色都要用 16 进制 RGB 颜色值表示 当然 现在的浏览器支持更多的颜色名称 不过为保险起见 建议你还是采用 16 进制 RGB 颜色值来表示颜色 并且在值前加上 这个符号 为了方便大家找到合适的颜色 我们在这里列了一些颜色说明 以供大家参考 不妨作为 一种速查工具 Web 安全颜色安全颜色 以前 很多电脑显示器最多支持 256 色 因此出现了 216 种 Web 安全颜色 以保证网页 的颜色能够正确显示 那为什么不是 256 种 Web 安全颜色呢 因为 Microsoft 和 Mac 操作系统有 40 种不同的 系统保留颜色 以下就是 216 种 Web 安全颜色 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF 微软支持的颜色名称微软支持的颜色名称 下面是微软 IE4 0 以上都支持的颜色名称 aliceblue F0F8FF antiquewhite FAEBD7 aqua 00FFFF aquamarine 7FFFD4 azure F0FFFF beige F5F5DC bisque FFE4C4 black 000000 blanchedalmond FFEBCD blue 0000FF blueviolet 8A2BE2 brown A52A2A burlywood DEB887 cadetblue 5F9EA0 chartreuse 7FFF00 chocolate D2691E coral FF7F50 cornflowerblue 6495ED cornsilk FFF8DC crimson DC143C cyan 00FFFF darkblue 00008B darkcyan 008B8B darkgoldenrod B8860B darkgray A9A9A9 darkgreen 006400 darkkhaki BDB76B darkmagenta 8B008B darkolivegreen 556B2F darkorange FF8C00 darkorchid 9932CC darkred 8B0000 darksalmon E9967A darkseagreen 8FBC8B darkslateblue 483D8B darkslategray 2F4F4F darkturquoise 00CED1 darkviolet 9400D3 deepp