图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素，这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外，还支持其他一些属性，用于设置其名称，初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
超链接标签的使用|基于HTML与CSS网页设计
【摘要】：超链接可以用于各种场景。如图1.14 所示的网页包含了众多的超链接。超链接，其标准名称为锚，是使用 标签创建的，可以用两种方式表示。表1.3 描述了超链接标签的属性。图1.17例1.15 的运行结果单击链接“查看第八章”，可以看到浏览器将页面滚动到页面中名称叫C8 的位置。图1.18例1.15 中链接单击的结果注意源代码中，是为文档中的这个位置命名，称为命名锚记，它并不会显示超链接的外观。
HTML 语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来。这样的话，读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序。这就是 HTML的“HT”-超文本（hypertext）的含义，就是它将整个WE
B 网络连接起来。超链接可以用于各种场景。
超链接可以用在目录和主题列表中。浏览者可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题，或跳转到世界上某处完全不同的集合中的某个文档。
超链接还可以向浏览者指出有关文档中某个主题的更多信息。例如，“如果您想了解更详细的信息，请参阅某某页面”。作者可以使用超链接来减少重复信息。例如，我们建议创作者在每个文档中都签署上自己的姓名。这样就可以使用一个将名字和另一个包含地址、电话号码等信息的单独文档链接起来的超链接，而不必在每个文档中都包含完整的联系信息。
如图1.14 所示的网页包含了众多的超链接。
图1.14 超链接在网页中的应用
左侧网站分类中的超链接将把用户引导到相应的技术分类文章列表页面，如单击“Web前端”超链接，用户将在浏览器中看到新的网页，其中包含属于WE
B 前端这个技术分类的文章的标题列表。
右侧主体区域上部“编辑推荐”下的各个超链接被单击后，用户将在新页面中看到这篇被推荐的文章、新闻或评论的详情页面。
主体区域中部“梦想天空”是当前标题所属文章的作者名，它链接到这名作者的用户详细资料介绍页面。超链接（Hyperlink），其标准名称为锚（Anchor），是使用 <a></a> 标签创建的，可以用两种方式表示。锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个命名的位置标记，该标记可以被超链接引用。
说明
<a></a> 标签可定义锚。锚 （anchor） 有两种用法：
（1） 通过使用 href 属性，创建指向另外一个文档的链接。
（2） 通过使用 name 或 id 属性，创建一个文档内部的书签。
表1.3 描述了超链接标签的属性。
表1.3 <a></a>标签的属性
<a></a> 元素最重要的属性是 href 属性，它指定链接的目标。
例1.13：
代码运行结果如图1.15 所示。
图1.15 例1.13 的运行结果(www.chuimin.cn)
单击超链接的文字，可以看到浏览器将导航到1.13.html 页面。超链接供浏览者单击的除了文字之外，也可是图片，或是图片的某个区域。另外，超链接所指向的目标页面除是当前WEB 站点之内的其他页面之外，也可是指向其他WEB 站点的网页。
例1.14：
单击图片链接，可以转到新浪网的首页，运行结果如图1.16 所示。
图1.16 例1.14 的运行结果
注意
除了链接到另一个网页之外，超链接还能指向页面中的某个具体位置，在超链接被单击时，浏览器将页面自动滚动到此位置。
例1.15：
运行结果如图1.17 所示。
图1.17 例1.15 的运行结果
单击链接“查看第八章”，可以看到浏览器将页面滚动到页面中名称叫C8 的位置。结果如图1.18 所示。
图1.18 例1.15 中链接单击的结果
注意
源代码中，<a name="C8"></a>是为文档中的这个位置命名，称为命名锚记，它并不会显示超链接的外观。而<a href="#C8"></a>则是生成浏览者可以单击的超链接，它指向页面中名称叫C8 的位置。
超链接指向的页面锚记，其实也可存在于当前页面之外的其他页面中。
例1.16：
单击这个链接后，浏览器将打开1230027.html 页面，然后将这个页面滚动到锚记名称为top 的位置。
有关基于HTML与CSS网页设计的文章
- 详细阅读
-
HTML概述与基本标签：基于HTML与CSS详细阅读
视频教学资源学校目标了解WEB 和HTML 的关系理解HTML 标签在WEB 网页中的作用掌握HTML 文档的结构掌握常用的HTML 标签本章单词请在预习前完成下列单词的学习，将其写在横线上。嵌入）_______________________________________预习任务1.网页的标题标签应放置在（）标签内部。A.srcB.nameC.urlD.href3.用于描述网页大纲级别的标题标签共有（）种。A.url textB.link alterC.href textD.src alt5.HTML 语言中，某些标签只需要开始部分，可以不要结束部分，以下（）组属于这种情况。超链接10.在网页中使用锚标记显示各种不同的水果。水果列表水果描述......
2023-10-19
-
水平线标签-基于HTML与CSS网页设计详细阅读
要想在网页中生成一条水平分割线，将不同的内容信息分开，使文字看起来更加清晰明确，那么就要使用到
标签来达到此目的。一个简单的
标签可以实现简单的分割线，轻松地修饰段落排版，使之更加美观。
标签的多种属性就解决了这些问题。通过给
标签设置一定的属性，可以使它具有更强的表达效果。
标签常用的属性有width，size，align，color 和title。size 可以理解为分隔线的厚度或高度，属性值默认单位同宽度。例1.10：测试水平分割线标签。......2023-10-19
-
清除浮动-基于HTML与CSS网页设计详细阅读
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
-
CSS层叠样式表-基于HTML与CSS网页设详细阅读
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
-
常用字体样式标签-HTML与CSS网页设计详细阅读
不过标签在HTML 中被称为强调标签。和标签的基本使用方法如下：2.使文字加粗用双标签可使文字加粗，使文字更加醒目，例如文章的标题部分。示例代码如下：3.给文字加下划线用双标签可以为文字添加下划线。例1.9：文字修饰的设置。图1.9字体的样式4.预格式化标签
标签可定义预格式化的文本。......
2023-10-19
-
基于HTML与CSS网页设计中的XHTML规详细阅读
如前所述，XHTML 是HTML 的替代者，它是从HTML 继承而来，但使用了XML 的规则进行严格规范。XHTML 与传统的HTML 的不同之处，主要来自于XML 语法规范的格式要求，即要求“格式良好”。这些要求统称为XHTML 文档的有效性。万维网联盟为XHTML 制定了3种DTD，分别适用于不同场景。过渡的：要求非常宽松的DTD，允许继续使用HTML4.01 的标签和属性，但要求格式良好。为确保XHTML 文档是有效的，应在文档第一行添加DOCTYPE即文档类型声明。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格的：
2023-10-19
-
FLASH动画插入网页|基于HTML与CSS详细阅读
完成本任务所用到的主要知识点：标签标签标签问题已经制作了一个FLASH 动画，就像电视里的音乐MV 那样精致。这个动画的文件名为“gaoxyjni.swf”。分析FLASH 动画是网页中常见的多媒体类型。解决方案 新建网页文档3.html。 使用EditPlus 打开3.html 网页，在其中编写以下代码。图上机1.4弹出警告对话框单击按钮，浏览器将显示FLASH 动画，如图上机1.5 所示。图上机1.5FLASH 动画 使用chrome 浏览器测试这个网页，发现不能正常显示这个FLASH 动画。......
2023-10-19
相关推荐