《Dreamweaver CS6 完全自学教程》笔记第十三章：Dreamweaver 中的 HTML 代码

最新推荐文章于 2022-09-27 17:51:47 发布

SP FA

最新推荐文章于 2022-09-27 17:51:47 发布

阅读量4.8k

点赞数 6

分类专栏： Dreamwaver学习文章标签： dreamweaver

本文链接：https://blog.csdn.net/SP_FA/article/details/108126808

版权

Dreamwaver学习专栏收录该内容

19 篇文章 88 订阅

订阅专栏

文章目录

第十三章：Dreamweaver 中的 HTML 代码

第十三章：Dreamweaver 中的 HTML 代码

13.1 HTML 介绍

HTML 全称为 Hyper Text Markup Language（超文本标记语言）。所谓超文本，是指 HTML 可以加入图片、声音、动画、影视等内容，它可以从一个文件跳转到另一个文件。
在访问一个网页时，网页所在服务器将用户请求的网页以 HTML 标签的形式发送到客户端，客户端浏览器解析并执行 HTML 标签，然后将结果以网页的形式展示。

创建 HTML 文件的步骤如下：
先创建一个记事本。然后输入：

<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		网页设计
	</body>
</html>

然后保存，将扩展名改为 .htm 即可。

13.2 HTML 的基本结构

HTML 文档是由 HTML 元素组成的文本文件，而 HTML 标签用来组成 HTML 元素。标签由尖括号包括，且通常成对出现，前一个是开始标签，后一个是结束标签，标签不区分大小写。

13.2.1 单标签

单标签不需要成对出现，最常见的是 <br> ，表示换行。

13.2.2 双标签

双标签由 “始标签” 和 “尾标签” 构成，必须成对使用。

始标签：<标签>
尾标签：</标签>

13.2.3 标签属性

<标签属性1 属性2 ···>

各属性无先后顺序。

13.3 常用标签

13.3.1 html 标签

<html> ··· </html>

<html> 用来标识 HTML 文档的开始，</html> 用来标识 HTML 文档的结束。它表示该文档是以 HTML 编写的。事实上，现在的浏览器可以自动识别 HTML 文档，并不需要有 <html> 标签，但还是要养成一个好习惯。

13.3.2 head 标签

<head> ··· </head>

构成文档的头部部分，可以包含标题 <title> ··· </title> 和脚本代码 <script> ··· </script> 等。

13.3.3 body 标签

<body> ··· </body>

构成文档的主题部分，其中所定义的图像和文本都会通过浏览器显示出来。

13.3.4 title 标签

<title> ··· </title>

网页的标题，必须位于 <head> ··· </head> 之间。

13.3.5 hn 标签

<hn> ··· </hn>

文章一般会有标题、副标题、章、节等结构，HTML 中也有相应的标题标签 <hn> ，其中 n 为属于 1~6 的整数，n 越大，字号越小。

13.3.6 br 标签

<br>

这是一个单标签，表示强制换行。

13.3.7 p 标签

<p> ··· </p>

段落标记，标签 </p> 可以省略，下一个 <p> 的开始就意味着上一个的结束。<p> 有一个属性 align，它用来指明对齐方式，一般有 center、left、right 3种。

13.3.8 hr 标签

<hr>

这是一个单标签，可以创造一条水平线。

属性介绍：

size： 水平线的宽度。
width： 水平线的长。用百分比或像素值来表示。
align： 对齐方式。
noshade： 无阴影，为实心线段。

13.3.9 font 标签

<font> ··· </font>

主要用来设置文字的属性，比如字号、字体、颜色。

属性介绍：

size： 用来设置字号，范围为 1~7，默认为 3 ，也可以在属性值之前加 +、- 来指定相对于字号初始值的增量或减量。
face： 用来设置字体。<font face="字体">
color： 用来设置颜色。颜色值可以是 # + 十六进制数 <font color=#66CCFF>天依蓝</font> 天依蓝，也可以是以下 16 种颜色的名称：Black 、 Green 、 Silver 、 Lime 、 Gray 、 Olive 、 White 、 Yellow 、 Maroon 、 Navy 、 Red 、 Blue 、 Purple 、 Teal 、 Fuchsia 、 Aqua

相关标签：

<B> ··· </B>：粗体
<I> ··· </I> ：斜体
<U> ··· </U> ：下划线
<EM> ··· </EM> ：强调
<TT> ··· </TT> ： 打字机字体
<BIG> ··· </BIG> ：大型字体
<CITE> ··· <CITE> ：引用
<SMALL> ··· </SMALL> ：小型字体
<BLINK> ··· </BLINK> ：闪烁
<STRONG> ··· </STRONG> ：特别强调

13.3.10 div 标签

<div> ··· </div>

区隔标记。作用是设定字、画、表格等的摆放位置。

13.3.11 ul 标签

<ul> ·· </ul>

无序号列表。列表中每一个项前要加 <LI>

<UL>
	<LI> 第一项
	<LI> 第二项
	<LI> 第三项
</UL>

13.3.12 OL 标签

<OL> ··· </OL>

有序列表。

<OL>
	<LI> 第一项
	<LI> 第二项
	<LI> 第三项
</OL>

13.3.13 DL 标签

<DL> ··· </DL>

定义性列表。列表项用 <DT> 表明，说明性文字使用标签 <DD> 表示。有属性 compact ，该属性可使说明文字与列表项在同一行。

<DL>
	<DT> 第一项 <DD> 第一项的定义
	<DT> 第二项 <DD> 第二项的定义
	<DT> 第三项 <DD> 第三项的定义
</DL>

13.4 表格

13.4.1 表格的基本语法

<table> ··· </table> ：定义表格
<caption> ··· </caption> ：定义标题
<tr> ：定义表行
<th> ··· </th> ：定义表头
<td> ··· </td> ：定义数据

示例：

<html>
	<head>
		<title> 简单的表格 </title>
	</head>
	<body>
		<table border=1>
			<caption align=top>人员名单</caption>
			<tr><th>姓名</th><th>性别</th><th>年龄</th>
			<tr><td>李华</td><td>男</td><td>18</td>
		</table>
	<body>
</html>

人员名单
姓名	性别	年龄
李华	男	18

13.4.2 表格的标题

属性 align=top 标题位于表格上方， bottom 位于下方。

13.4.3 表格的尺寸

通过像素表示：

<table width="450" height="500"> ··· </table>

通过百分比表示：

<table width=20% height=10%> ··· </table>

13.4.4 表格的边框尺寸

<table border=10> ··· </table>

13.4.5 表格的间距调整

<table cellspacing=10> ··· </table>

13.4.6 表格内容与格线之间的宽度

内容与格线之间的宽度称为 “填充”。

<table cellpadding=10> ··· </table>

13.4.7 表格内数据的布局对齐

左右排列仍然是 align 属性，上下排列由 valign 属性来设置。可以放在 <tr> 、<th> 、<td> 标签中。

13.4.8 跨多行、多列的单元格

要创建跨多行、多列的单元格，只需在 <th> 或 <td> 标签中加入 rowspan 或 colspan 属性即可。属性值表示跨越的行数或列数。

示例：

<html>
	<head>
		<title>跨多列单元</title>
	</head>
	<body>
		<table>
			<tr><th colspan=3>执勤人员</th>
			<tr><th>星期一</th><th>星期二</th><th>星期三</th>
			<tr><td>张三</td><td>李四</td><td>王五</td>
		</table>
	</body>
</html>

执勤人员
星期一	星期二	星期三
张三	李四	王五

13.4.9 表格的颜色设置

设置整个表格的背景颜色：

<table bgcolor=#66CCFF>

设置某一行的背景颜色：

<tr bhcolor=#66CCFF>

设置单元格的背景颜色：

<th bgcolor=#66CCFF>

实战：制作闪烁表格

在 <body> ··· </body> 中间输入以下代码：

<script>
	function blinkOn(){
		document.all.blinkObj.bgColor = "000000"
		window.setTimeout("blinkOff",50);
	}
	
	function blinkOff(){
		document.all.blinkObj.bgColor = "FFFFFF"
		window.setTimeout("blinkON()",50);
	}
</script>

<body onload="blinkOn()">
	<table id="blinkObj" width="700" border="1" cellspacing="0">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>

这是一段 js 代码，不知道大家看不看的懂。我没有学过 js，所以也仅仅只能简单解释一下。

首先创建两个函数 blinkOn() 和 blinkOff() ，它们的作用是改变名叫 blinkObj 的表格的颜色，并且一段时间后执行另一个函数，这样就形成了闪烁。之后 <body onload="blinkOn()"> 使 blinkOn() 这个函数开始执行，闪烁表格就做成了。

13.5 超链接

<a href="地址“> 链接文字或图像 </a>

13.5.1 本地链接

对同一台计算机上的不同文件进行的链接称为本地链接，它使用 UNIX 或 DOS 系统文件路径的表示方法，采用绝对或相对路径。

使用相对路径时，用两个点表示上一层目录：<a href="../../Internet/IP">IP地址</a>

一般情况下，链接不采用绝对路径，因为当文件移植到服务器上时，带有 D:/ 的地址将无法访问。

13.5.2 URL 链接

URL 链接的形式是：“协议名://主机.域名/路径/文件名” ，协议包括以下几种类型：

file： 本地系统文件
http： WWW 服务器
ftp： ftp 服务器
telnet： 基于 TELNET 的协议
mailto： 电子邮件
news： Usenet 新闻组
gopher： GOPHER 服务器
wais： WAIS 服务器

Telnet协议是TCP/IP协议族中的一员，是Internet远程登录服务的标准协议和主要方式。它为用户提供了在本地计算机上完成远程主机工作的能力。————百度

13.5.3 目录链接

链接地址只能链接一个页面或文件。如果要直接链接文件的上部、下部或中央部分，就要用目录链接，或锚链接。这需要在页面中相应位置建立锚记。语法如下：

建立锚记：<a name="链接位置名称"></a>
目录连接：<a href="文件名#链接位置名称">链接文字</a>

如果是在同一个文件内跳转，可省略文件名。

13.6 HTML 中图像的设置

13.6.1 插入图像的基本格式

插入图像的标签是 <img> ，基本语法为：

<img src="图像文件地址">

<img> 标签还有 height 和 width 两个属性，表示图像的高和宽。

13.6.2 图像与文字的对齐方式

<img> 中的 align 属性有以下对齐方式：

top： 文本的顶部对齐
middle： 文本的中央对齐
bottom： 文本的底部对齐
texttop： 图像的顶线对齐
baseline： 图像的基线对齐
left： 图像的靠左对齐
right： 图像的靠右对齐

13.6.3 图像与文字之间的距离

水平距离：hspace
垂直距离：vspace

13.6.4 图形按钮（图像链接）

<a href="资源地址"><img src="图像地址"></a>

在 <a> ··· </a> 标签中间嵌套了一个 <img> 标签

13.7 在 HTML 中播放音乐

13.7.1 点播音乐

将音乐做成一个连接，用鼠标点击即可播放。

<a href="音乐地址">乐曲名</a>

13.7.2 自动载入音乐

让音乐自动载入可当背景音乐使用。

<embed src="音乐地址">

属性介绍：

autostart=true/false： 是否自动播放
loop=true/false： 设定重复次数，true 为无限循环。
startime=分:秒： 开始播放的时间
volume=0~100： 音量大小，没设定使用系统音量。
width/height ： 设定控制面板的大小
hidden=true： 隐藏控制面板
controls=console/smallconsole ： 设定控制面板的样子

13.8 框架（Frames）

13.8.1 Frames 基本格式

<html>
	<head>
		<title></title>
	</head>
	<frameset>
		<frame src="url">
		<frame src="url">
		···
	</frameset>
</html>

13.8.2 Frames 结构中各窗口尺寸的设置

将窗口分为几块，横向分用 rows 属性，纵向分用 cols 属性，如：

<frameset cols="100,200,300">
<frameset rows="10%,20%,70%">

用几个逗号隔开就表示分出了几个窗口，可以将数字用 “ * ” 代替，表示由浏览器自动设置大小。

示例：

<html>
	<head>
		<title>Frames</title>
	</head>
	<frameset cols="20%,*">
		<frame src="url">
		<frameset rows="40%,*">
			<frame src="url">
			<frame src="url">
	</frameset>
</html>

在这里插入图片描述

13.8.3 各窗口间相互操作

Frames 分出来的窗口内容是可变动的，往往一个窗口的内容随着另一个窗口的要求而不断变化，为完成窗口间的相互操作，必须为每个窗口起一个名字，用 name 属性来定义。

<frame src="url" name="窗口名">

另外还需要 target 属性来配合使用，target 指定了所链接的文件出现在哪一个窗口。target 的值可以是 name 定义的名称，也可以是以下 4 种。

_blank： 显示一个新窗口
_self： 显示在同一个窗口
_parent： 显示在 Frameset 的前一份文件的窗口
_top： 显示在整个浏览器窗口

13.8.4 Frames 的其他属性

<frame frameborder=yes/no> ：窗口边框是否显示
<frame marginwidth/marginheight> ：边界宽度
<frame scroling=yes/no/auto> ：滚动条设置
<frame noresize> ：设置不可变动的框边

13.9 使用快速标签编辑器

快速标签编辑器可以在不退出设计视图的情况下快速检查并编辑 HTML 标签，用户不必在代码视图与设计视图之间频繁转换。而且快速标签编辑器可以访问具体属性的提示菜单，提示菜单会列出所有插入光标或正在编辑的所有有效属性。

启动快速标签编辑器的方法：

点击 “属性” 面板上的 “快速标签编辑器” 按钮。
快捷键 Ctrl + T
点击修改 -> 快速标签编辑器

快速标签编辑器有三种模式：插入 HTML 模式、编辑标签模式、封装标签模式

13.9.1 插入 HTML 模式

直接开启快速标签编辑器，在 < > 之间可以插入任何 HTML 代码，当关闭编辑器后，所输入的代码会被添加到文档光标所在位置。

13.9.2 编辑标签模式

如果在文档窗口中选择了完整的标签，包括开放的标签、封闭的标签和标签之间包含的内容，那么会进入编辑标签模式。

编辑标签模式中，一般会显示当前已有的标签、属性及属性值，并且可以通过 Tab 键或 Shift + Tab 键进行属性或属性值输入点的切换。

如果选中了非匹配的开放或封闭标签，启动编辑器时也会进入编辑标签模式，并且会选中该标签的父标签及所包含的全部内容。

13.9.3 封装标签模式

如果只选中了相应的内容，而没有选中完整的标签，则启动编辑器后将进入封装标签模式。在文档中选中一组尚未设置格式的文本，就可以启动编辑器，为其添加格式化标签。

封装标签模式只能输入单个的开放标签，如果输入多个标签，就会出现错误的信息。

当输入完成后，输入的标签会被放置到文档窗口所选内容的前端，封闭标签会被放到后端。

13.10 使用提示菜单

在代码视图和快速标签编辑器中会有代码提示，通过 Enter 键可以进行代码补全。

按下 Esc 键关闭提示菜单，或者直接输入。

13.11 编辑 HTML 代码

13.11.1 在页面中编辑 HTML 代码

技术专题：进入和退出网页特效

在 <head>···</head> 之间插入以下代码：

进入网页： <meta http-equiv="Page-Enter" content="revealTrans(duration=#,transition=#)">
退出网页： <meta http-equiv="Page-Exit" content="revealTrans(duration=#,transition=#)">

其中 duration 表示特效的持续时间，单位秒。transition 表示使用哪种特效，取值范围 0~23 ，具体含义如下：

0 —— 矩形缩小
1 —— 矩形扩大
2 —— 圆形缩小
3 —— 圆形扩大
4 —— 下到上刷新
5 —— 上到下刷新
6 —— 左到右刷新
7 —— 右到左刷新
8 —— 竖百叶窗
9 —— 横百叶窗
10 —— 错位横百叶窗
11 —— 错位竖百叶窗
12 —— 点扩散
13 —— 左右到中间刷新
14 —— 中间到左右刷新
15 —— 中间到上下
16 —— 上下到中间
17 —— 右下到左上
18 —— 右上到左下
19 —— 左上到右下
20 —— 左下到右上
21 —— 横条
22 —— 竖条
23 —— 随机