1、 网页设计论文 学生姓名 ： 朱寒涛 班 级 ： 16 高职软件二班 专 业 ： 软件技术 学 院 ： 信息工程系 指导教师 ： 王晶晶 1 HTML 1.1 HTML 标签，元素和属性 1.1.1 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)， HTML 标签是 HTML 语言中最基本的单 位 ,HTML 标签是 HTML 语言最重要的组成部分。 HTML 标签的大小写无关的， 跟 表示的意思是一样的，推荐使用小写。 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签； 开始和
2、结束标签也被称为开放标签和闭合标签。 也有单独呈现的标签，如：等。 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标 签属性中赋值。如 标题 和 。 网页的内容需在 标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在 标签中，而网页需展示的内容需嵌套在 标签中。某些时候不安标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。 标签的种类： A标签：链接标签 H标签：标题标签 P标签：段落标签 BR 标签：同样也是段落标签 UL 标签：列表标签 IMG 标签：图像标签 TABLE 标签：表格标签 FORM 标签：表单标签 FRAMEST 标签：框
3、架标签 IFFRAMEST 标签：浮动框架标签 1.1.2 元素 HTML 文档是由 HTML 元素定义的。 HTML 元素指的是从开始标签（ start tag）到结束标签（ end tag）的所有代码。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（ empty content） 空元素在开始标签中进行关闭 （以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 嵌套的 HTML 元素 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。 HTML 文档由嵌套的 H
4、TML 元素构成。 空的 HTML 元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 就是没有关闭标签的空元素（ 标签定义换行）。 在 XHTML、 XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 ，是关闭空元素的正确 方法， HTML、XHTML 和 XML 都接受这种方式。 即使 在所有浏览器中都是有效的，但使用 其实是更长远的保障。 1.1.3 属性 属性为 HTML 元素提供附加信息。 HTML 标签可以拥有属性。 属性提供了有关 HTML 元素的更多的信息。 属性总是以名称 /值对的形式出现，比如： name=“va
5、lue“。 属性总是在 HTML 元素的开始标签中规定。 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就 含有双引号，那么您必须使用单引号，例如： name=Bill “HelloWorld“ Gates 1.2 HTML 段落，样式和链接 1.2.1 段落 可以把 HTML 文档分割为若干段落。 段落是通过 标签定义的。 即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来： 如果希望在不产生一个新段落的情况下进行换行（新行），请使用 标签： 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整
6、都可能导致不同的结果。 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是， HTML 代码中的所有连续的空行（换行）也被显示为一个空格。 1.2.2 样式 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来 插入样式表： 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 内部样式表 当单个文件需要 特别样式时，就可以使用内部样式表。你可以在
7、 head 部分通过 标签定义内部样式表。 内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 1.2.3 链接 HTML 使用超级链接与网络上的另一个文档相连。 几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点 击这些内容来跳转到新的文档或者当前文档中的某个部分。 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 标签在 HTML 中创
8、建链接。 有两种使用 标签的方式： 1.通过使用 href 属性 - 创建指向另一个文档的链接 2.通过使用 name 属性 - 创建文档内的书签 HTML 链接语法 链接的 HTML 代码很简单。它类似这样： Link text href 属性规定链接的目标。 开始标签和结束标签之间的文字 被作为超级链接来显示。 HTML 链接 - target 属性 使用 Target 属性，你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档： Visit W3School! HTML 链接 - name 属性 name 属性规定锚（ anchor）的名称。 您可以使用 name 属性创建
9、HTML 页面中的书签。 书签不会以任何特殊方式显示，它对读者是不可见的。 当使用命名锚（ named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 1.3 HTML 表格和列表 1.3.1 表格 可以使用 HTML 创建表格。 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（ table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格和边框属性 如果不定义边框属性，表格将不显示
10、边框。有时这很有用，但是大多数时候，我们希望显示边框。 使用边框属性来显示一个带有边框的表格： 表格的表头 表格的表头使用 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本： 表格中的空单元格 在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。 1.3.2 列表 HTML 支持有序、无序和定义列表 无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点 （典型的小黑圆圈）进行标记。 无序列表始于 标签。每个列表项始于 。 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 标签。每个列表
11、项始于 标签。 定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。 1.4 HTML 表单和框架 1.4.1 表单 HTML 表单用于搜集不同类型的用户输入。 表单是一个包 含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（ ）定义。 输入 多数情况下被用到的表单标签是输入标签（ ）。输入类型是由类型属性（ type）定义的。大多数经常被用到的输入类型如下： 文本域（ Text Fields） 当用户要在表单中键入字母、数
12、字等内容时，就会用到文本域。 单选按钮（ Radio Buttons） 当用户从若干给定的的选择中选取其一时，就会用到单选框。 复选框（ Checkboxes） 当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。 表单的动作属性（ Action）和确认按钮 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 1.4.2 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 框架标签（ Frame） Frame 标签定义了放置在每个框架中的 HTML 文档。 假如一个框架有可见边框，用户可以拖动边框来改变 它的大小。为了避免这种情况发生，可以在 标签中加入： noresize=“noresize“。 为不支持框架的浏览器添加 标签。 重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
