您的当前位置：首页正文

网页设计与制作

来源：爱够旅游网

《网页设计与制作》

■ 序号：

■ 学号：

■ 姓名：

■ 手机：

■ 班级：

■ 学院：

1 HTML

1.1 HTML简介

HTML 是用来描述网页的一种语言。

•HTML 指的是超文本标记语言 (Hyper Text Markup Language)

•HTML 不是一种编程语言，而是一种标记语言 (markup language)

•标记语言是一套标记标签 (markup tag)

•HTML 使用标记标签来描述网页

1.2 HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

•HTML 标签是由尖括号包围的关键词，比如

•HTML 标签通常是成对出现的，比如和

•标签对中的第一个标签是开始标签，第二个标签是结束标签

•开始和结束标签也被称为开放标签和闭合标签

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML标签，而是使用标签来解释页面的内容：

My First Heading

My first paragraph.

例子解释：

• 与之间的文本描述网页

• 与之间的文本是可见的页面内容

•

与

之间的文本被显示为标题

•

与

之间的文本被显示为段落

1.3 HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

1.3.1 HTML元素语法

•HTML 元素以开始标签起始

•HTML 元素以结束标签终止

•元素的内容是开始标签与结束标签之间的内容

•某些 HTML 元素具有空内容（empty content）

•空元素在开始标签中进行关闭（以开始标签的结束而结束）

•大多数 HTML 元素可拥有属性

1.3.2 嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例：

This is my first paragraph.

元素：

This is my first paragraph.

这个

元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签

，以及一个结束标签

。元素内容是：This is my first paragraph。

元素：

This is my first paragraph.

元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（p 元素）。

元素：

This is my first paragraph.

元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（body 元素）。

1.3.3 空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素（
标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。

1.4 HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=\"value\"。属性总是在 HTML 元素的开始标签中规定。

属性实例：

HTML 链接由标签定义。链接的地址在 href 属性中指定：

This is a link

1.5 HTML 段落

段落是通过

标题定义的。

实例：

This is a paragraph

This is another paragraph

1.6 HTML样式

外部样式表：

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表：

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

内联样式：

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph

1.7 HTML 链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用标签在 HTML 中创建链接。

有两种使用标签的方式：

1.通过使用 href 属性 - 创建指向另一个文档的链接

Link text

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

2.通过使用 name 属性 - 创建文档内的书签

Text to be displayed

1.8 HTMl表格和列表

表格：

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于

。
- Coffee
- Milk
有序列表：同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于
1. 标签。
  1. Coffee
  2. Milk
  1.9 HTML 表单和框架
  表单：表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（
  ）定义。
  ...
  input 元素
  ...
  框架：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
  2
  CSS
  2.1 CSS基础语法
  CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
  属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
  selector {property: value}
  注意：值的不同写法和单位、记得写引号、空格和大小写
  2.2 CSS 派生选择器
  通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
  派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
  2.3 CSS id和类选择器
  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 \"#\" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
  #red {color:red;}
  #green {color:green;}
  下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
  （1）：
  这个段落是红色。
  （2）：
  这个段落是绿色。
  在 CSS 中，类选择器以一个点号显示：
  .center {text-align: center}
  在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 \".center\" 选择器中的规则。
  （1）：
  This heading will be center-aligned
  （2）：
  This paragraph will also be center-aligned.
  2.4 CSS框模型结构
  元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
  内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式
  表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
  * {
  margin: 0;
  padding: 0;
  }
  CSS 边框：在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
  元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。
  外边距合并：外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  3
  JavaScript
  JavaScript介绍
  3.1
  在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
  •JavaScript 被设计用来向 HTML 页面添加交互行为。
  •JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
  •JavaScript 由数行可执行计算机代码组成。
  •JavaScript 通常被直接嵌入 HTML 页面。
  •JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
  •所有的人无需购买许可证均可使用 JavaScript。
  3.2 HTML包含JavaScript的方法
  (1) 位于 head 部分的脚本
  (2) 位于 body 部分的脚本
  (3) 在 body 和 head 部分的脚本
  (4) 使用外部 JavaScript
  3.3 JavaScript语句、注释与变量
  JavaScript 语句：JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。
  JavaScript 注释：可以添加注释来对 JavaScript 进行解释，或者提高其可读性。（1）单行的注释以 // 开始（2）多行注释以 /* 开头，以 */ 结尾
  JavaScript 变量：正如代数一样，JavaScript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。JavaScript 变量也可以保存文本值，比如 carname=\"Volvo\"。
  JavaScript 变量名称的规则：
  •变量对大小写敏感（y 和 Y 是两个不同的变量）
  •变量必须以字母或下划线开始
  3.3 JavaScript 函数的定义与应用
  定义：将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。
  函数在页面起始位置定义，即部分。
  
  因篇幅问题不能全部显示，请点此查看更多更全内容
  
  查看全文
  
  Copyright © 2019- 版权所有
  
  Top

网页设计与制作

My First Heading

与

This heading will be center-aligned