第三讲 用HTML建立超链接和表格
Html语言——超级链接
编码 %3B %2F %3F %3A %40 %3D %26 %3C
7
School of Applied Technology Soochow University
URL的保留字符和不安全字符 的保留字符和不安全字符
字符 > “ ＃ : % { } |
2011-3-21
描述 大于号 双引号 井号 冒号 百分号 左大括号 又大括号 竖线
注意：一般除了字母、数字和“ 注意：一般除了字母、数字和“$,-,_,.,+,!,*,’,()外，其他 外 所有字符都应该使用编码” 所有字符都应该使用编码”
2011-3-21 School of Applied Technology Soochow University 9
2 建立指向其他页面的链接 其格式为： 其格式为： <a href=”目标文件的路径／目 目标文件的路径／ 目标文件的路径 标 文 件 名 .html”> 热点文本 </a>
热点文本
5） 创建指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记： 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标 另一个为书签标记。超链接标记的格式为： 记，另一个为书签标记。超链接标记的格式为： <a href=”#记号名”> 热点文本<／a> 记号名” 热点文本 ／ 记号名 即单击热点文本，将跳转到“记号名”开始的文本。 即单击热点文本，将跳转到“记号名”开始的文本。 书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名， <a>标记对该文本做一个记号 书签就是用 <a> 标记对该文本做一个记号 。 若有多个链接的书签名 ， 书签名在<a> name属性中定义 <a>的 属性中定义。 书签名在<a>的name属性中定义。 格式为： 格式为： <a name=”记号名”> 目标文本附近的字符串 <／a> 记号名” 记号名 ／
HTML使用标签a来设置超文本链接
HTML使⽤标签a来设置超⽂本链接HTML 超链接（链接）HTML使⽤标签 <a>来设置超⽂本链接。
超链接可以是⼀个字，⼀个词，或者⼀组词，也可以是⼀幅图像，您可以点击这些内容来跳转到新的⽂档或者当前⽂档中的某个部分。
当您把⿏标指针移动到⽹页中的某个链接上时，箭头会变为⼀只⼩⼿。
在标签<a> 中使⽤了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：⼀个未访问过的链接显⽰为蓝⾊字体并带有下划线。
访问过的链接显⽰为紫⾊并带有下划线。
点击链接时，链接显⽰为红⾊并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展⽰样式会根据 CSS 的设定⽽显⽰。
HTML 链接语法链接的 HTML 代码很简单。
它类似这样：<a href="url">链接⽂本</a>href 属性描述了链接的⽬标。
.实例<a href="https:///">访问教程</a>上⾯这⾏代码显⽰为：访问菜鸟教程点击这个超链接会把⽤户带到菜鸟教程的⾸页。
提⽰: "链接⽂本"不必⼀定是⽂本。
图⽚或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性使⽤ target 属性，你可以定义被链接的⽂档在何处显⽰。
下⾯的这⾏会在新窗⼝打开⽂档：实例<a href="https:///" target="_blank" rel="noopener noreferrer">访问教程!</a>HTML 链接- id 属性id属性可⽤于创建在⼀个HTML⽂档书签标记。
提⽰: 书签是不以任何特殊的⽅式显⽰，在HTML⽂档中是不显⽰的，所以对于读者来说是隐藏的。
实例在HTML⽂档中插⼊ID:<a id="tips">有⽤的提⽰部分</a>在HTML⽂档中创建⼀个链接到"有⽤的提⽰部分(id="tips"）"：<a href="#tips">访问有⽤的提⽰部分</a>或者，从另⼀个页⾯创建⼀个链接到"有⽤的提⽰部分(id="tips"）"：<a href="https:///html/html-links.html#tips">访问有⽤的提⽰部分</a>基本的注意事项 - 有⽤的提⽰注释：请始终将正斜杠添加到⼦⽂件夹。
《HTML页面与表格》PPT课件
HTML文档
• HTML页面的基本结构 • 起始标记 • 文件头
襄樊1软22 0件2学1/院4/23
你的潜力，我们的动力！
HTML页面的基本结构
基本结构
起始标记 网页标题
文件主体
<Html> <Head> 网页的标题和属性 </Head> <Body> 文件主体 </Body>
</Html>
襄樊1软23 0件2学1/院4/23
原理： 在欲链接处做个记号 链接时就寻找个这记号
▪ 内部链接就是网页中的书签
格式
<a Name=”书签名称”>书签内容</a>
襄樊2软21 0件2学1/院4/23
你的潜力，我们的动力！
内部链接实例
例如，先定义一个标签a，然后找到“标 签名”这个标签，就可编写如下代码：
<a name=”标签a”>书签内容</a> <a Href=”#标签a”>单击此处监视浏览器调到“标签a”处</a>
你的潜力，我们的动力！
网页基础知识
统一资源定位器——URL （Uniform Resource Locator）
• URL包括传送协议，服务器名称、文件的完整路径 例如：/index.html 其中http://是传送协议 是服务器名称 index.html 是文件的完整路径
</Body>
襄樊2软26 0件2学1/院4/23
你的潜力，我们的动力！
有通栏的表格
1．有横向通栏的表格用<td colspan=#>属性说 明
以像素为单位 #代表通栏占据的网格数
创建超链接实验报告
一、实验目的1. 理解超链接的概念和作用。
2. 掌握在网页中创建超链接的方法。
3. 学会使用不同类型的超链接，如文本超链接、图像超链接等。
4. 熟悉超链接属性设置，提高网页设计水平。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 网页制作软件：Dreamweaver CC三、实验内容1. 超链接的基本概念超链接（Hyperlink）是网页中的一种重要元素，用于连接不同的网页或页面元素。
通过超链接，用户可以轻松地在不同的页面之间进行跳转，提高浏览体验。
2. 创建文本超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的文本。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
3. 创建图像超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的图像。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
4. 创建锚点超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在需要创建锚点的位置，插入一个锚点标记（在“插入”面板中找到“常用”类别，选择“锚点”）。
（3）在“属性”面板中，为锚点设置一个ID，例如“top”。
（4）在目标位置，创建一个文本超链接，在“链接”属性中输入锚点的ID，如“#top”。
5. 设置超链接属性（1）在“属性”面板中，可以设置超链接的以下属性：- 链接目标：选择在新窗口中打开链接，或在当前窗口中打开链接。
- 图像映射：为图像创建热点区域，实现多个链接。
- 替换文本：为超链接设置鼠标悬停时的提示文本。
- 转换效果：设置超链接的显示效果，如边框、颜色等。
（2）根据实际需求，设置超链接属性，提高网页美观度。
四、实验结果与分析通过本次实验，我们掌握了以下内容：1. 超链接的基本概念和作用。
html里table的用法
html里table的用法HTML中的表格是一种常用的布局工具，它可以用于展示数据、组织信息、展示布局等。
在HTML中，可以使用`<table>`标签来创建表格，并使用其他的HTML 标签来控制表格的外观和行为。
下面我们将介绍如何使用`<table>`标签创建表格、设置表格属性、添加表头和表体、以及控制表格的行为等。
一、创建表格要创建一个表格，可以使用`<table>`标签来包围表格内容。
表格通常由行和列组成，每一行称为一个“行”，每一列称为一个“列”。
可以使用`<tr>`标签来创建行，使用`<td>`或`<th>`标签来创建列。
例如，以下是一个简单的表格示例：```html<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>```上述代码创建了一个包含三列的表格，其中第一列是表头，第二和第三列是表格的行内容。
二、设置表格属性除了使用`<table>`标签外，还可以使用其他的HTML标签来设置表格的属性，例如边框宽度、单元格边距、单元格间距等。
可以使用`border`属性来设置表格的边框宽度，使用`cellpadding`和`cellspacing`属性来控制单元格的内边距和单元格之间的间距。
简述使用html创建表单的基本步骤
简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。
下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。
该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。
这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。
- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。
第三课 HTML-表单3
Thiz科研集团 Thiz科研集团 王秋野 王秋野 wqy_root@ wqy_root@
表单
目的： 理解表单在网页中的作用 创建一个基本的表单 提供一个处理表单的方法 理解表单的格式化技术
表单
网络最好的特点之一是它用新的方法使新表单之间能够相 互传达信息。在线式表单是实现这种普通采用的信息传达 方法。例如，表单允许网站上的浏览者在站点上发表评 论，订购商品，将公告张贴到公告牌上 今天学习怎样创建表单，怎样在网站上有效的使用它们。 理解什么是表单 表单的根本目的是收集信息，当注册选举时，你要填写一 张表，注明姓名，地址，出生日期等。。这张表被收集并 处理。在线式表单也是同样的道理，它们也要被填写，收 集和处理。
表单
任何时候，当你想在页面最初被载入时缺省的设置一个被选择的单选框时，就应 该使用checked属性：
表单
选择菜单 当你想让用户从很长的选项列表中选择时，可以考虑使用一个选择菜 单来替代复选框或者单选按钮。选择菜单是列表，该列表被压缩成一 个或多个可视选项，这与你在其他应用软件的顶部所找到的菜单一 样。例如： 告诉浏览器，一次只作出3个可视选择，
表单
表单
用button标签来格式化 虽然input标签和button标签都可以建立一个基本的内部有文本的 灰色按钮，但是button标签有附加的格式化的可能性，不像input 标签没有结尾，button既有打开标签又有结束标签，这样，当你在 浏览时，你就可以在按钮上加上文本，图片，和其他的HTML。 例如，如果你在打开和关闭button标签之间加入img标签，那么当 浏览器浏览时，那张图片就会显示在按钮的中间。
表单
当页面 被浏览 时，用 户在输 入他们 的信息 之前就 不得不 擦去这 些用来 说明的 短语
一、（3）HTML表单与表格-综合应用
DTD TF
TF STF STF STF STF STF
</tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。 2.结构化后的表格需要去掉结构标签后,再做合并操作 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
<p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网
其它属性：
placeholder：定义输入框的提示文字 maxlength：设置文本框最多输入多少字符 readonly：只读(不可输入) disabled：禁用(不可输入) -> 不会提交这个表单元素的数据 checked：仅用于 radio/checkbox，作用是设置默认选中项
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
注：在一个最基本的表格元素中，必须包 含一组<table>标签、一组<tr>标签与一 组<td>标签。
定义表头标签<th></th> 例子
<th>标签用于定义表格内的表头单 元格，此单元格中的文字将以粗体 的方式显示
<th>标签是成对出现标签，首标签 <th>和尾标签</th>之间的内容就是 位于该单元格的表头元素内容。 在一个表格的定义语法中也可以不 使用<th>标签，定义表头单元格。
源锚点文本(当前页面上供单击的链接文本)
</a> 注意： 一个页面中的id(或name)属性值必须唯一。
示例
8
1.4 创建电子邮件的链接
格式：
<a href= “mailto:name@？
subject=主题 &cc=抄送邮箱地址 &bcc=密送邮箱地址 &body=内容” /> 当前页面上供单击的链接文本
<table width=200 height=50%> 表示该表格的宽度为200个像素点，高度
为浏览器窗口高度的50%。
2.2.4 设置表格的位置align
设置表格的位置的基本语法如下：
<table align="参数值">
align属性的参数值为left、center和
right之一，分别 表示表格位于其相邻文
2.2.8 设置表格 边框的显示状态frame
设置表格的左边框、右边框、上边框、下边框为显示 或者隐藏。 设置表格边框显示状态的基本语法如下： 显示整个表格边框 <table frame="box"> 不显示表格边框 <table frame="void"> 只显示表格的上下边框 <table frame="hsides"> 只显示表格的左右边框 <table frame="vsides"> 只显示表格的上边框 <table frame="above"> 只显示表格的下边框 <table frame="below"> 只显示表格的左边框 <table frame="lhs"> 只显示表格的右边框 <table frame="rhs">
</a> <a href=“mailto:a@ ?subject=咨询 &cc=a@.c&bcc=a@> 需要咨询请联系我 </a>
示例：
9
设置链接的属性——target
作用：指定包含在链接目标文件显示的位置 语法格式： <a href= “目标页面 - URL”
2.2.1
设置表格边框的尺寸border
设置边框尺寸的语法如下：
<table border="数值">
border属性的参数值是数字，表示表格
边框宽度所占的像素点数。例如，<table
border=10>表示表格的边框宽度为10个像
素点。
2.2.2 设置表格边框的颜色
设置表格边框颜色的基本语法如下：
<area
shape属性和coords属性
shape值 default 创建的形状 没有定义区域 无 所需热点区域点坐标
rectangle (rect) circle (circ)
polygon (poly)
矩形 圆形
多边形
左上角、右下角（共4个数字） 圆心、半径（共3个数字）
示例 每个顶点一对坐标，自动闭合
服务器端图像映射：
服务器的脚本文件处理用户单击的位置坐标指示链接 的目标页面。 具体实现方法依赖于服务器类型及脚本。
客户端图像映射：
浏览器根据用户单击的位置指示链接的目标页面。 可用HTML（XHTML）代码实现。
本次仅讨论客户端图像映射的实现。
13
客户端图像映射
实现方法： 第一步：使用<img>插入作为地图的图片 <img src= “地图图片地址” alt=“鼠标移上地图时显示的图片简介” /> 第二步：用画图工具找到并记下热点区域需要的各点坐标 第三步：设置<map>和<area>元素，定义映射图
10
设置链接的属性——更改颜色
由<body>标签中的一组相关属性设置 各属性及作用：
属性名
text属性
作用
非可链接文字的颜色
默认值
黑色
link属性
vlink属性 alink属性
可链接文字的颜色
已经被访问过的可链接文字的颜色 正被单击的可链接文字的颜色
蓝色
粟色 红色
示例：
<body link=red vlink=blue alink=green> <a href= “目的页面 - URL” />链接文本 </a> 示例 </body>
创建到本页面某个位置的链接
目的：在长文本页面内，可能需要在各个部分间跳转， 方便阅读。 基本概念：
源锚点：页面上可以单击的链接 目的地锚点：源链接指向的特定位置
方法：
第一步：在目的地锚点处使用 <a id=“目的锚名”> 目的地锚点文本</a> 第二步：在源锚点处使用 <a href= “#目的锚名” />
字的左侧、表格水平居中和表格位于与
其相邻的文字右侧。
2.2.5 设置表格的背景颜色或背景图像
设置表格的背景颜色或背景图像的基本 语法如下：
<table bgcolor="#">
<table background="URL">
其中，“#”取值为16进制的颜色代码。
2.2.6 设置格框线 的宽度cellspacing
文件名。
/img/image/ilogob.gif
1.3 利用<a>创建链接
目的：建立从当前页面到目的文件的链接 语法格式： <a </a> 注意：
目的文件若在本站点内，适合使用相对路径 目的文件若在其他站点内，适合使用绝对路径 页面上显示的链接文本将被自动加上下划线 该链接文本也可以是图像文件
设置表格尺寸的语法如下：
<table width="数值" height="数值">
width和height属性的作用是指定表格的大
小。其中width属性用以规定表格的宽度，
height属性用以规定表格的高度。这两个属
性的参数值可以是数字或百分数
2.2.3 设置表格的尺寸width/height
例：
6
href= “目的文件 - URL” />
当前页面上供单击的链接文本
创建到另一页面的链接
目的：建立从当前页面到目的页面的链接 语法格式： <a </a> 注意：
目的页面文件若在本站点内，适合使用相对URL 目的页面文件若在其他站点内，适合使用绝对URL
示例
7
href= “目的页面 - URL” /> 当前页面上供单击的链接文本
一、超链接
超链接
1.1 1.2 1.3 1.4 1.5 链接的基本概念 目录和目录结构 使用<a>创建链接 创建到电子邮箱 以图像作为链接
2
1.1 链接的基本概念
什么是链接？
是Web与其他媒体最本质的不同之处。 是用户在组成Web站点的多个页面之间切换的途径。 是用户从本站点访问其他站点和其他媒体的途径。
<table bordercolor="#"> 设置表格边框颜色的亮度的基本语法如下： <table bordercolorlight="#"> <table bordercolordark="#"> 其中，“#”取值为16进制的颜色代码， 其代码可参见颜色代码表。
2.2.3 设置表格的尺寸width/height
根目录：保存站点的主目录 子目录：位于其他目录中的目录 父目录：包含其他目录的目录
示例：
我的站点是（根）目录 我的站点是图书的 （父 ）目录 下载是音乐的 （ 子 ）目录 图书是音乐的 （ 平行 ）目录
4
1.2 目录和目录结构
文件在目录结构中的位置使用URL表示
绝对地址（绝对URL）： 显示文件的完整路径，包括 协议模式、服务器名称、 完整路径 和
一个表格元素，是由数个横行
（<tr>）、单元格（<td>）与表头
单元格（<th>）子元素所组成。
定义表行标签<tr></tr>
<tr>标签用于定义表格的一行，在
一组<tr>标签内可建立一行表格， 也可以包含数组由<td>或<th>标签 所定义的单元格。
定义单元格标签<td></td>
<td>标签用于定义表格的单元格，<td> 标签必须放在<tr>标签内。 数据标签<td>是成对出现标签，首标签 <td>和尾标签</td>之间的内容就是该单 元格中的具体数据。
11
1.5 以图像作为链接