网页设计基础知识汇总——超链接

简介: 网页设计基础知识汇总——超链接

网页设计

1、超链接标签:

  • <a>...</a>:a是anchor的首字母,基本属性:href,用于指定链接到的文件位置,mailto:形式;                            格式:用文字作锚点的格式是:<a href=“URL”>字符串</a>;

                          用图像作锚点的格式是 : < a href =“URL”>< img src =“URL”></a >

  • 超链接路径:相对路径;绝对路径
  • URL三种方式:绝对路径;相对于服务器根目录;相对于文档
  • 索引、锚记链接:对于同一文件的不同部分,被指向的目标是通过<a>标签的NAME属性来定义的。                                                                       格 式:<a name="name ">text</a>         <a href="URL#name">text </a>
  • 链接至E-mail地址的超链接(电子邮件链接):格式:<a href=“mailto:EMAIL”>文字 </a>

在新窗口中显示被指定的目标:                                                                                                                                                                target格式:<a href="URL" target="新窗口名">字符串</a>                                                                                                     target属性:_blank:在新窗口打开被链接的文档;                                                                                                                                       _self:默认;                                                                                                                                                                               _parent:在父框架集中打开被链接文档;                                                                                                                                      _top:在整个窗口中打开被链接文档;                                                                                                                                        framename:在指定的框架中打开被链接的文档。

  • 地图链接:usemap、ismap


2、表格标签:

作用:显示数据表;对文本和图形进行布局

  • <table>...</table>:创建表格,并在其中间添加标题和需要的数据
  • <table>标签中常用的属性:


<table bgcolor=" "> ——设置表格的背景色;

<table border=" "> —— 设置边框的宽度,以像素点为单位的边框宽度,不设置宽度默认值为0

<table algin=" "> ——取值为left、right、center,分别表示将表格在页面中的相对位置

<table bordercolor=" ">——设置边框的颜色

<table  bordercolor light=""> —— 设置边框明亮部分的颜色(当border的只大于等于1才有用)

<table  bordercolor dark=""> —— 设置边框昏暗部分的颜色(当border的只大于等于1才有用)

<table  cellspacing=""> —— 设置表格的单元格之间的空间大小

<table  cellpadding=""> —— 设置表格的单元格边框与其内部内容之间空间大小

<table  width="" height=“”> —— 设置表格的宽度、高度,单位用绝对像素值或窗口、总宽度的百分比


  • <caption>...</caption>:表格标题,<caption>元素定义了表格的说明,一般放在表格的第一行的前面
  • <caption> 的属性包括对齐属性align决定了标题的对齐方式,取值为top、bottom、right、left、middle。决定标题放在表格的顶部、底部、右边、左边、中间。
  • 行(row)、表头(head)、数据(data):

<table>:放在最外层,创建一个表格;

<tr>:创建一行;

<td>...</td>:创建一个单元格;

</tr>:行末尾;

</table>:放在最外层。


  • <th>...</th>:用来设置表格头,文字通常粗体居中显示
  • <tr>属性:align:水平对齐方式,取值为left(左对齐)、center(居中对齐)、right(右对齐)。valign:垂直对齐方式,取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。
  • <td>属性:width:单元格的宽度,单位用绝对像素值或总宽度的百分比           colspan、rowspan:单元格跨占的列数行数(缺省值为1)
                     nowrap:禁止对表格单元格内的内容自动换
  • 表格中的空单元格:

一些浏览器中,没有内容的表格单元显示得不太好如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。


行、单元格和表格标签的关系:<tr></tr>标签对只能放在<table></table>标签对之间使用;

                                       < tr ></ tr > 之间只能紧跟 <td></td> 标签对才是有效的语法;

                                       < tr ></ tr > 不能嵌套。

行、单元格和表格标签的关系:<td></td>标签对只有放在<tr></tr>标签对之间才有效;

                                      输入 的文本也只有放在 <td></td > 标签对 之间才有效(即才能被显示出来)

创建跨多行、多列的表元: 跨越多列: 在<th>或<td>标签符里利用colspan属性,并在其后写上想要跨越的列数。

                                 跨越多行:在<th>或<td>标签符里利用rowspan属性,并在其后写上想要跨越的列数。


div标签:

<div> 可定义文档中的分区或节(division/section)。


<div> 标签可以把文档分割为独立的、不同的部分。


换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。


div标签作用:W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div:

              div 元素,通过与 id 、 class 及 role 属性配合,提供向文档添加额外结构的通用机制,是结构化标记的好帮手。  

div标签属性:

align:div内部文字水平对齐方式,取值为left(左对齐)、center(居中对齐)、right(右对齐)、justify (两端对齐) 。id 属性:HTML 全局属性( 可用于任何 HTML 元素),规定 HTML 元素的唯一的 id。可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

20200320210437269.png

相关文章
|
网络协议 关系型数据库 MySQL
如何使用宝塔面板搭建MySQL数据库并实现无公网IP远程访问
如何使用宝塔面板搭建MySQL数据库并实现无公网IP远程访问
1945 3
|
7月前
|
容器
[HarmonyOS NEXT 实战案例十八] 日历日程视图网格布局(上)
日历是许多应用程序中常见的UI组件,用于展示日期和相关事件。在本教程中,我们将学习如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个简洁、美观的日历日程视图网格布局。
252 2
|
9月前
|
机器学习/深度学习 人工智能 安全
从攻防演练到AI防护:网络安全服务厂商F5的全方位安全策略
从攻防演练到AI防护:网络安全服务厂商F5的全方位安全策略
294 8
|
DataWorks 数据管理 大数据
DataWorks操作报错合集之如何解决表字段类型从string改为datetime报错
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
583 1
|
Java Devops 持续交付
Maven学习笔记(二):Maven基础(基于IDEA)
【10月更文挑战第1天】Maven 是一款 Java 项目构建工具,主要用于管理 jar 包及其依赖关系。上一篇简单介绍了Maven的基础知识,本文主要介绍IDEA上的实际使用场景。内容上几近全为学习《尚硅谷2022版Maven教程》整理所得。仅供参考。
742 0
Maven学习笔记(二):Maven基础(基于IDEA)
|
存储 JSON 关系型数据库
MySQL JSON 类型:功能与应用
MySQL JSON 类型:功能与应用
|
人工智能 物联网 API
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
|
缓存 负载均衡 监控
Nginx实现高并发
通过应用上述策略,可以大幅提高Nginx的并发处理能力,从而在面对高流量时,保持稳定、快速的服务响应。不断地监控和调优系统将有助于保持服务器性能的最优化。
326 3
|
机器学习/深度学习 编解码 人工智能
EasyAnimate-v3版本支持I2V及超长视频生成
阿里云人工智能平台(PAI)自研开源的视频生成项目EasyAnimate正式发布v3版本