山东专升本计算机基础 — HTML 简介、网页制作、网页布局

16,879次阅读

没有评论

共计 5470 个字符，预计需要花费 14 分钟才能阅读完成。

- HTML 简介
- - 1、HTML 语言概述
  - 2、常用的 HTML 标记
  - - （一）文本布局
    - （二）文字格式
    - （三）图片
    - （四）超链接
    - （五）表格
- 网页制作
- 网页制作
- - 1、Dreamweaver CS5 概述（
  - 2、创建与管理站点（
  - 3、插入对象
  - - （一）插入文本
    - （二）格式化文本
    - （三）插入图像
    - （四）图文混排
    - （五）插入媒体对象
  - 4、创建超链接
  - - （一）超链接的概念
    - （二）创建内部链接或外部链接
    - （三）创建
    - （四）创建空链接
    - （五）创建
- 网页布局

H

T

M

L

文件是一种纯文本文件，可以使用任何文本处理软件（如记事本）来创建或处理

H

T

M

L

文件。

color{WildStrawberry}{HTML 文件是一种纯文本文件，可以使用任何文本处理软件（如记事本）来创建或处理 HTML 文件。}

$H TM L 文件是一种纯文本文件，可以使用任何文本处理软件（如记事本）来创建或处理 H TM L 文件。$

HTML 文件标记

Internet 中的每一个 HTML 文件都包括

文本内容和

H

T

M

L

标记两部分

color{WildStrawberry}{文本内容和 HTML 标记两部分}

$文本内容和 H TM L 标记两部分$ 。其中，HTML 标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。

多数 HTML 标记的书写格式如下：
```
标记名 > 文本内容  标记名>
```
标记名写在内。

多数

H

T

M

L

标记同时具有起始和结束标记，并且成对出现，但也有些

H

T

M

L

标记没有结束标记。

color{WildStrawberry}{多数 HTML 标记同时具有起始和结束标记，并且成对出现，但也有些 HTML 标记没有结束标记。}

$多数 H TM L 标记同时具有起始和结束标记，并且成对出现，但也有些 H TM L 标记没有结束标记。$

H

T

M

L

标记不区分大小写。

color{WildStrawberry}{HTML 标记不区分大小写。}

$H TM L 标记不区分大小写。$

某些 HTML 标记还具有一些属性，指定对象的特性，如背景颜色、文本字体及大小、对齐方式等。属性一般放在“起始标记”中：
```
标记名   属性 1 =值 1  属性 2 =值 2  …> 文本内容 标记名>
```
标记名和属性之间用空格分隔。

例如：
```
font face=隶书 > 计算机font>
```
HTML 网页的结构

html>
  head> 
    title>我的第一个 Web 页title>
  head>
  body>
    h1>欢迎进入 HTML 世界！h1>
    p>
      这里我们首先介绍 HTML 语言的基本知识和语法。然后，讲授如何使用 HTML 语言编写您的 Web 页面。p>
  body>
html>

山东专升本计算机基础 --- HTML 简介、网页制作、网页布局

一般 HTML 文件都是以开头，以结束。

其文件结构由以下两部分组成：

头部（Head）

H

T

M

L

文件的头部由

和

标记定义。

color{WildStrawberry}{HTML 文件的头部由和标记定义。}

$H TM L 文件的头部由 h t m l > 和 / h t m l > 标记定义。$

文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是

.

.

.

color{WildStrawberry}{…}

$t i tl e > \dots / t i tl e >$ ，定义网页文件标题，网页文件被打开后，标题将出现在浏览器标题栏中
正文主体（Body）

正文主体是 HTML 文件的核心内容，由

color{WildStrawberry}{}

$b o d y >$ 和

color{WildStrawberry}{}

$/ b o d y >$ 标记定义。标记具有一些常用的属性，格式如下：
```
body bgcolor=#n color=#n>
```
网页使用背景图像，格式如下：
```
body background="路径 / 图片文件名">…body>。
```

（一）文本布局

段落标记

.

.

.

标记指定文档中一个独立的段落。

color{WildStrawberry}{

…

标记指定文档中一个独立的段落。}

$p > \dots / p > 标记指定文档中一个独立的段落。$ align 属性控制段落对齐方式，其值可以是 left、center、right、justify，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下：
```
p align=对齐方式> … p>
```
换行标记

标记可以强制文本换行。该标记只有起始标记。

color{red}{
标记可以强制文本换行。该标记只有起始标记。}

$b r > 标记可以强制文本换行。该标记只有起始标记。$
水平线标记

水平线标记

用于在网页中插入一条水平线。

color{red}{水平线标记

用于在网页中插入一条水平线。}

$水平线标记 h r > 用于在网页中插入一条水平线。$

（二）文字格式

HTML 语言中用于文字格式化的标记有：

标题标记

color{red}{标题标记 }

$标题标记 hn >$

格式为：
```
hn 属性 = 属性值> 标题 hn> 
```
其中 n 说明大小级别，取值范围为 1 到 6 的数字。把标题分为 6 级，即 h1～h6，

其中

h

1

文字最大，

h

6

文字最小

color{red}{其中 h1 文字最大，h6 文字最小}

$其中 h 1 文字最大， h 6 文字最小$ 。
字体标记

color{red}{字体标记 }

$字体标记 f o n t >$

字体标记用来对文字格式进行设置，主要属性：
- s
  
  i
  
  z
  
  e
  
  属性
  
  color{red}{size 属性}
  
  $s i ze 属性$
  
  控制文字的大小，格式如下：
```
font size=n>...font>
```
- c
  
  o
  
  l
  
  o
  
  r
  
  属性
  
  color{red}{color 属性}
  
  $co l or 属性$
  
  控制文字的颜色，格式如下：
```
font color=#n 或英文表示的颜色>...font>
```
  其中 n 是一个十六进制的六位数。
- f
  
  a
  
  c
  
  e
  
  属性
  
  color{red}{face 属性}
  
  $f a ce 属性$
  
  指明文字字体，格式如下：
```
font face=字体名>...font>
```
字形标记

字形标记设置文字的粗体、斜体、下划线、上标、下标等。

（三）图片

标记

color{red}{ 标记}

$im g > 标记$ 用于设置网页图片。具有以下属性：

src 属性：

指明图片文件所在的位置。
```
img src=URL>
```
其中

U

R

L

指图片文件存放的位置。

color{red}{URL 指图片文件存放的位置。}

$U R L 指图片文件存放的位置。$
alt 属性：

图片的文字说明。
```
img src=URL alt=说明文字>
```
width 和 height：

设置图片显示区域的宽和高。
```
img src=URL width=n1 height=n2>
```
border 属性：

设置图片文件的边框。
```
img src=URL border=n>
```
其中 n 为像素数。
align 属性：

设置图片相对于文本的位置关系。
```
img src=URL align=对齐方式>
```

（四）超链接

HTML 语言中，

.

标记用于设置网页中的超链接，

h

r

e

f

属性指明被超链接的文件地址。

color{red}{… 标记用于设置网页中的超链接，href 属性指明被超链接的文件地址。}

$a > \dots / a > 标记用于设置网页中的超链接， h re f 属性指明被超链接的文件地址。$

a href=URL>超链接文本a>

用于表示超链接的文本一般显示为蓝色，并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。

（五）表格

在网页中插入表格，需要用到一组 HTML 标记。定义表格的有关标记：

}

$c a pt i o n > \dots / c a pt i o n >$

}

$t h > \dots / t h >$

…

}

$t r > \dots / t r >$

}

$t d > \dots / t d >$

标签

定义

…

定义表格标题

…

定义表格头

定义表格行

…

定义表格单元格

1、Dreamweaver CS5 概述（

Adobe Dreamweaver CS5 是一款集

网页制作和网站管理

color{red}{网页制作和网站管理}

$网页制作和网站管理$ 于一身的所见即所得网页编辑器。

2、创建与管理站点（

（一）插入文本

文本是网页中不可缺少的内容之一，是网页中最基本的对象。由于其占用的存储空间非常小，所以在一些大型网站中，文字占有不可替代的主导地位。而网页中的文本一般以普通文字、段落或者各种项目符号等形式显示。

在网页中输入文本有以下三种方法：

直接输入法：

在页面需要插入文本的地方单击，出现光标，直接输入文本即可。
复制粘贴法：

在 Dreamweaver 的“编辑”菜单中有两个粘贴命令：“粘贴”和“选择性粘贴”。当选择“选择性粘贴”时，将出现一个包含几个粘贴格式设置选项的对话框。
导入已有的 Word 或者 Excel 文档，将其做成网页。

（二）格式化文本

无论是输入文本还是导入文本，或者是新建的空白文档，可以使用菜单或者文本属性查看器改变选定文本的字体属性，包括字体、大小、颜色、样式和对齐方式等。

（三）插入图像

在网页中插入图像，不但可以将内容表现得更加形象、生动，还能够跨越语言、编码标准、人种、地域和年龄的差异。但是，过多的图像也会影响网页的下载速度，所以在设计网页时要整体考虑图像的数目和大小。

插入图像 (也可以编辑图像) 的常用方法如下：

把插入点置于文档窗口中要插入图像的位置，然后选择主菜单中的“插入”→“图像”，或单击“插入”栏中“常用”类别的“图像”按钮。
在弹出的对话框中，选择要插入的图像文件，单击“确定”按钮，则选定的图像被插入到页面中。

（四）图文混排

选择要与文字进行混排的图像，在属性查看器的“对齐”下拉列表框中选择“左对齐”，在“水平边距”和“垂直边距”中分别输入图像与周围对象的水平和垂直距离。

（五）插入媒体对象

在网页中应用多媒体对象可以增强网页的娱乐性和感染力。

网页中常用的多媒体对象主要分为 Flash 类（Flash 影片、Flash 按钮和 Flash 文本）、Java Applet、ActiveX 控件类，以及各种音频、视频文件。

（一）超链接的概念

超链接是指页面对象之间的链接关系

color{red}{超链接是指页面对象之间的链接关系}

$超链接是指页面对象之间的链接关系$ ，它是网页的灵魂，能合理、协调地把网站中的各个元素、页面构成一个有机整体，使浏览者能快速地访问到想要访问的页面。

（二）创建内部链接或外部链接

文本和图像是最常使用的链接对象。

（三）创建

在制作网页时，为了达到

跳转到网页固定位置

color{cyan}{跳转到网页固定位置}

$跳转到网页固定位置$ 的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超链接打开目标网页时可直接跳转到相应的命名位置上。

方法：将鼠标定位到想要命名锚记的位置，单击“插入”工具栏中的“常用”→“命名锚记”。

（四）创建空链接

空超链接

color{red}{空超链接}

$空超链接$ 是一个未指派目标的超链接，建立空超链接时，只要在属性查看器的链接域中输入一个

“

#

”即可

color{red}{“#”即可}

$“#” 即可$ 。建立空超链接只是为了应用行为，其他情况下不必建立。

（五）创建

在网页中建立电子邮件超链接可方便网页浏览者与设计者之间的联系。

电子邮件链接格式为“

m

a

i

l

t

o

:

邮件地址”。

color{red}{电子邮件链接格式为“mailto: 邮件地址”。}

$电子邮件链接格式为 “ mai lt o : 邮件地址 ” 。$

网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。

网页的布局一般使用表格或框架来实现

color{red}{网页的布局一般使用表格或框架来实现}

$网页的布局一般使用表格或框架来实现$ 。

使用表格定位页面元素

表格是一个容器元素，

表格布局技术是指把页面区域分成若干个单元格，通过单元格来控制各种页面元素（文本、图像等）在页面上的定位和排版

color{red}{表格布局技术是指把页面区域分成若干个单元格，通过单元格来控制各种页面元素（文本、图像等）在页面上的定位和排版}

$表格布局技术是指把页面区域分成若干个单元格，通过单元格来控制各种页面元素（文本、图像等）在页面上的定位和排版$ 。采用表格进行页面布局，方法简洁明了、浏览器兼容性高，与

C

S

color{red}{CSS}

$CSS$ 结合在一起，能够满足绝大多数网页设计的需求。

框架页面就是把浏览器窗口划分为若干个子窗口，这些子窗口称为框架。

一个框架显示一个网页文件

color{red}{一个框架显示一个网页文件}

$一个框架显示一个网页文件$ ，但整个

框架集

color{cyan}{框架集}

$框架集$ 却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框架中，有利于分类管理和控制。

下图是一个左右结构的框架。事实上这样一个结构是由三个网页文件组成的。首先外部的框架集是一个文件，图中用 index.htm 命名。框架中左边命名为 L，指向的是网页 A.htm。右边命名为 R，指向的是一个网页 B.htm。

在这里插入图片描述

原文地址: 山东专升本计算机基础 — HTML 简介、网页制作、网页布局

正文完

发表至：开发笔记

2024-10-07

0

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

一键打包网页为跨平台桌面应用的神器！

编程课是什么？该不该给孩子报？

如何快乐地使用vite开发npm库（typescript），搭建·调试·发布·闭环式教程

Vue3倒计时组件（Countdown）改写

HTML，CSS，JS前端三大件总结

山东专升本计算机基础 — HTML 简介、网页制作、网页布局

文章目录