1、Html 的基本语法1.1 Html 概况1.1.1 什么是 HtmlHtml 英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。是所有的 internet 站点的共同的语言，所有的页面都是以 Html 格式的文件为基础，再加上其他语言工具（例 JavaScript、VBScript 等）构成。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台。Html 文件扩展名是.html 或.htm，它们是可供浏览器解释浏览的文件格式。 Html 语言使用标签对的方法编写文件，它通常使用来表示标签的开始和
2、结束。在 Html 文档中这样的标签对一般是成对使用的。1.1.2 为什么要学习 Html通过前面的学习我们知道，Micromedia 公司的 Dreamweaver 是“所见即所得”的网页制作工具，使用它可以直接开发网页，而不用费劲的书写代码，这使得用户在没有 Html 语言基础的情况下，照样可以设计网页，而相应的 Html 文档由开发工具自动编写，这是网页图形编辑工具的最大优点，同时也是它最大的不足。受到图形编辑工具自身的约束，将产生大量的垃圾代码。所以，我们应该在掌握图形编辑工具的基础上进一步学会 HTML 语言，从而知道哪些是垃圾代码，消除无用的代码，制作出高质量的网页。1.2 Htm
3、l 文档的结构超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。头 部 信 息 文 档 主 体， 正 文 部 分 2 网页设计与制作实用教程其中在最外层，表示这对标记间的内容是 HTML 文档。我们还会看到一些网页省略标记，因为.html 或.htm 文件被 Web 浏览器默认为是 HTML 文档。之间包括文档的头部信息，如文档总标题等，若不需要头部信息则可省略此标记。 标记一般不能省略，它表示正文内容的开始。下面是一个最基本的超文本文档的源代码：网页标题 欢迎光临我的主页这是一个我的第一个网页文件头 文件体1.3 标签的格式 1.
4、3.1 标签的作用HTML 标签是组成 HTML 文档元素，每一个标签描述了一个功能。 HTML 标签两端有两个包括字符：“ ”，这两个包括字符被称为角括号。HTML 标签一般成对出现，比如和。无斜杠的标签的为开始标签，有斜杠的为结束标签，在开始和结束标签之间的对象是元素内容。如表示一个表格的开始，表示一个表格的结束。 HTML 标签是大小写无关的，但我们习惯用小写。1.3.2 标签的分类：标签分为单标签，双标签两种。单标签：只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标签是, 它表示换行。 双标签：它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉 Web浏览
5、器从此处开始执行该标记所表示的功能，而尾标签告诉 Web 浏览器在这里结束该功能。始附录 HTML 的基本语法 3标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：内 容 其中“内容”部分就是要被这对标记施加作用的部分1.3.3 标签的属性：为了增强标签的功能，许多单标记和双标记的始标记内可以包含一些属性，其语法是：各属性之间无先后次序，属性值应该被包含在引号中，常用双引号，但是单引号也可以使用，在有些情况下，比如说属性值本身包含引号，就得使用单引号。比如：name=John “ShotGun“ Nelson。注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号，属性也可
6、省略（即取默认值） 。1.4 基本标签1.4.1 用于创建 Html 文档标签用于 Html 文档的最前边，用来标识 Html 文档的开始。而标签恰恰相反，它放在 Html 文档的最后边，用来标识 Html 文档的结束，这对标签必须成对使用。1.4.2 和构成 Html 文档的头部分，在此标签对之间可以使用、 等标签对，这些标签对都是描述 Html 文档头部信息的标签对，标签对之间的内容是不会在浏览器的框内显示出来的。这对标签必须成对使用。1.4.3 网页标题 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题” ，要将您的网页的主题显示到浏览器的
7、顶部其实很简单，只要在标签对之间加入您要显示的文本即可。注意：标签对只能放在标签对之间。1.4.4 是 Html 文档的主体部分，在此标签对之间可包含、等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。该标签必须成对使用。标签中还可以有以下属性：4 网页设计与制作实用教程属性 用途 示例设置背景颜色。 红色背景设置文本颜色。 蓝色文本设置背景图像把图像设为背景色彩 rrggbb 是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。例: body.html唐诗静晚思床前明月光，疑是地上霜。举头望明月，低头叫故乡。1.5 格式标签1.5.1 段落标签 格
8、式：说明： 标签是用来创建一个段落，在此标签之间加入的文本将按照段落的格式显示在浏览器上。HTML 自动在一个段落前后各添加一个空行。align 可以控制段落的对齐方式，取值为：Left(左对齐) 、Center( 居中)和 Right(右对齐)三个值中的任何一个。例：浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。1.5.2 换行标签 附录 HTML 的基本语法 5当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。它是单标签。例：浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，
9、似曾相识燕归来。小园香径几徘徊。1.5.3 文章标题标签 Hn一般文章都有标题、副标题、章和节等结构，HTML 中也提供了相应的标题标签，其中 n 为标题的等级，HTML 总共提供六个等级的标题， n 越小，标题字号就越大，以下列出所有等级的标题：H1 第一级标题H2 第二级标题H3 第三级标题H4 第四级标题H5 第五级标题H6 第六级标题例：这是一行普通文字H1一级标题H2二级标题H3三级标题H4四级标题H5五级标题H6六级标题1.5.4 预格式化文本 为控制换行和空格，可以预先设定好文本的格式例：浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香
10、径几徘徊。6 网页设计与制作实用教程1.5.5 环绕标签 格式: . 说明：方向属性 direction=# #=left， right，up，down例：啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！方式属性 bihavior=* 8=scroll， slide， alternate例： 啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 循环次数 loop，若未指定则循环不止 (infinite)速度属性 scrollamount=数字 延时属性 scrolldelay=数字例：啦啦啦，我走一步，停一停！ 面积属性 height=数字 width=数字例：啦啦啦，
11、我会移动耶！这些属性可以单独使用，也可混合使用，下面是一个综合实例：例：制作滚动的新闻当鼠标指向时停止 当鼠标移过时滚动当鼠标指向时停止 当鼠标移过时滚动当鼠标指向时停止 当鼠标移过时滚动其中 id 为这段文本的名称，要注意的是一个环绕标签只对一个段落起作用。1.6 图像标签1.6.1 图像标签 在网页中插入图像的标签为，它是单标签，语法格式为：说明：src 为必带属性，它给出了图像的位置，一般是是相对地址，或某个网址。附录 HTML 的基本语法 7例: Align 属性设置图像的对齐方式，它可以取值 top，middle， bottom 。border 属性是图像的边框，可以取大于或者等于
12、0 的整数，默认单位是像素。width 和 Height 属性是图像的宽和高，默认单位也是象素。alt 属性是在浏览器装载图像失败的时，告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上 alt 属性是一个好习惯，它有助于更好地显示信息，而且对纯文本浏览器很有用。例：1.6.2 水平线标签 标签是在 Html 文档中加入一条水平线，它是单标签，可以直接使用。格式：说明：size 属性设置水平线的厚度Width 属性设定水平线的宽度，默认单位是像素color 属性设置颜色，noshade 属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线
13、(不加入此属性水平线将有阴影 )。例 1：例 2：1.7 链接标签1.7.1 文字链接：格式： 要链接的文字 说明：href 是必带的属性， url 为链接要转到的目标网页，它可以是相对地址，也可以是另一个网站的网址。Target 属性：定义在什么地方打开链接地址，它可以取值：_blank 、_top、 self 、_parent等值。例：点击则转到下一个页面 新浪 1.7.2 图像链接：格式： 说明：url1 为点击链接后要转到的目标网页，url2 为被链接的图片地址。例： 8 网页设计与制作实用教程点击 next.gif 后转到 lastpage.htm 页.1.7.3 电子邮件链接 格式
14、： 文字 说明：EMAIL 为接收邮件的邮箱。例：联系我们1.7.4 锚点链接：格式： 格式：文字说明：name 属性用来创建一个命名的锚。锚名相当于文章中的一个标签。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。它要和 .配合使用。锚点命名好后，进行链接只要在 url 后加#，再接锚名即可。例：在网页 wenzang.htm 中命名了三个锚点,第一节第二节第三节在网页 school.htm 中，要链接到 wenzang.htm 的第二节，第二节1.8 表格标签. - 定义表格- 定义表行- 定义表头，一般用黑体字表示。- 定义表元( 表格的具
15、体数据)常用属性:属性 用途设置表格的背景色。设置边框的宽度，若不设置此属性，则边框宽度默认为0。设置边框的颜色。设置表格格子之间空间的大小。设置表格格子边框与其内部内容之间空间的大小。设置表格的宽度，单位用绝对像素值或总宽度的百分比附录 HTML 的基本语法 9box 显示所有 4 个边框above 只显示上边框below 只显示下边框hsides 只显示上、下边框vsides 只显示左、右边框 lhs 只显示左边框rhs 只显示右边框设置表格的边框显示，可以取这八个值void 不显示任何边框all 显示所有分隔线groups 只显示组(Groups)与组之间的分隔线rows 只显示行与行之
16、间的分隔线cols 只显示列与列之间的分隔线设置表格分隔线，可以取all、 groups、rows 、cols 、nonenone 不显示任何分隔线设置水平对齐方式，取值为 left(左对齐)、center(居中)、right(右对齐)设置是垂直对齐方式，取值为 top(靠顶端对齐)、middle(居中间对齐)或 bottom(靠底部对齐)例 1：三行二列表：班级 姓名一班李芳二班刘军例 2：只显示上下边框 班级 姓名一班李芳二班刘军例 3：只显示列分隔线班级 姓名一班李芳二班刘军10 网页设计与制作实用教程1.9 框架标签可以用框架把页面分割成几个窗口，在不同窗口打开不同的文件。1.9.1
17、这是一对双标签，它有两个常用属性：cols、 rows，cols 是把页面纵向分割成若干个窗口，rows 是把页面横向分割成几个窗口。1.9.2 帧标签 它是单标签，用来指定在每一个窗口要打开的文件。把页面分割成窗口后，若没有使用，则窗口显示为空。常和 配合使用。例：标签把页面纵向分割成两个窗口，第一个窗口的宽度占 30%，在第一个窗口中打开 a.html，第二个窗口宽度占 70%，在其中打开 b.html。分割的比例也可用像素来表示，或剩余值用*表示。例：格式：说明：src 属性 用来指定在窗口中打开的文件名 name 属性：用来给窗口命名。scrolling 属性：用于描述窗口是否设有滚动
18、条，可以取值：yes/no/auto，默认 autonoresize 属性：是一个标志，没有取值，设定了该属性，则窗口不能调整大小，缺省为可以自行调整窗口大小。noframeset 标签，对于不支持框架的浏览器，可以用该标签给出一个说明。若要在多窗口中相互操作，我们要用到标签和 target 属性。对上例进行修改：附录 HTML 的基本语法 11b.html 文件中和内容为：新浪网易 百度1.9.3 内框架 这是一对双标签，如果想在表格或框架内调入一个外部文件，可以使用内框架标签，也称浮动窗口。格式：Iframe 标记的使用格式是:说明：src：文件的路径，既可是 HTML 文件，也可以是文本
19、、ASP 等；width、height ：“内部框架”区域的宽与高；scrolling：当 SRC 的指定的 HTML 文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为 Auto：则自动出现滚动条；如为 Yes，则显示;name：框架的名字，用来进行识别。例：第一章第二章第三章1.10 表单标签表单的基本语法说明：#表单的名称*提交表单的方法：有 GET、POST 两种，GET 方法把表单信息作为字符串附加在 action 所12 网页设计与制作实用教程设定的 URL 后面，中间用“？”隔开，CGI 程序可以用 query、string 环境变量去取得 FORM 所传
20、送的输入信息。系统环境变量的长度限制了输入字符串的长度。POST 方法，将输入信息进行包装 CGI 程序中可以用 CONTENT_LENGTH 环境变量去决定传送输入信息的长度，再从标准输入（STDIN）的方式将内容读出。url 处理表单数据的程序文件名，( 包括网络路径、网址或相对路径)，如：，当用户提交表单时，服务器将执行网址http:/ counter.cgi 的 CGI 程序。在表单标签之间，可以使用除以外的任何 HTML 标签，其中有三种特殊的标签一定要放中表单标签之间。它们是：1.10.1 输入标签：说明：*=text, password, checkbox, radio, ima
21、ge, hidden, submit, reset*= 输入标签的名称Text:单行文本的输入，Password：密码输入，checkbox：复选框，radio:单选框，image：图像域，hidden：隐藏域，submit：提交按钮，reset：重置按钮。 #:初始值，这是可选属性例：用户注册姓名: 密码: 电子邮件: 性别:男 女学历: 硕士 大学 大专大专以下 1.10.2 列表/菜单标签：格式：选项一选项二选项三说明：Name：表示名称附录 HTML 的基本语法 13Size：控制同时显示在菜单中的选项条数，如果没有该属性，则缺省为 1Multiple 属性：允许用户一次可选多个选项，
22、缺省为一次只能选一项。可带属性 selected，表示该项已预选。例：上海天津北京1.10.3 多行文本输入域：格式： . 说明：Rows 用来设定的行数，cols 用来设定的列数。例：备注： 1.11 Html 实体在 HTML 中，有些字符拥有特殊含义，比如小于号 “ 大于 “ 引号 单引号 其他一些常用的字符实体显示结果 描述 实体名 实体号14 网页设计与制作实用教程 分 英镑 人民币元 章节 版权 注册 乘号 除号 在 HTML 中，最常见的字符实体就是不可拆分空格。通常，HTML 会合并你文档中的空格。假如在你的 HTML 文本中连续插入了 10 个空格，其中 9 个会被去掉。想要在 HTML 中插入空格，可以使用实体：
