网页设计

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 元素,通过与 idclass role 属性配合,提供向文档添加额外结构的通用机制,是结构化标记的好帮手。 
  • div标签属性:

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

网页设计基础知识汇总——超链接相关推荐

  1. 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...

    本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...

  2. 学习笔记—网页设计基础知识(一)

    网页基础知识入门 一.认识互联网 Internet1是一个全球性的计算机互联网络,中文名称为"国际互联网"或"因特网". 它集现代通信技术和现代计算机技术于一体 ...

  3. 大学生Dreamweaver网页设计基础知识

    1.1 网站 网站(Web Site)是一个存放网络服务器上的完整信息的集合体.它包含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整体,用来描述一组完整的信息或达到某种期望的宣传效果.有的 ...

  4. 网页前端知识汇总(三)——网页前端利用二维码插件qrcode生成在线二维码

    最近几年二维码的广泛应用,方便了很多行业,如支付宝,微信,小程序扫码之类的,这个在二十年前,想都不敢想这么方便,那时候有书刊编码扫一扫都感觉是高科技了,如今,二维码的广泛应用,生活还是方便了不少!这个 ...

  5. 网页前端知识汇总(四)——网页前端搜索框用get或者post提交方式的区别

    GET或者POST提交表单是不是很多人都在使用?其实不管是哪种提交方法,其实最终结果就是获取参数的方法不一样:一般用于表单网页标签form属性里面,可以用于查询,提交网页数据等操作:那这两个提交方法到 ...

  6. 网页前端知识汇总(一)——CSS如何为网页图片设置圆角效果

    是不是有的没有玩过程序的小伙伴浏览网页时会发现有的图片是圆角的,自己保存到本地却是直角的?其实图片性质没有改变,改变的只是网页显示,用遮罩层(CSS处理)后的显示效果,那这些图片的圆角效果是怎么设置的 ...

  7. html打开网页过场动画_网页制作设计基础知识

    网页设计基础知识1.1 网站 网站(Web Site)是一个存放网络服务器上的完整信息的集合体.它包含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整体,用来描述一组完整的信息或达到某种期望 ...

  8. Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)

    Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息 作者: 龙飞 丛书名: 培训专家 出版社:电子工业出版社 ISBN:978 ...

  9. CSS入门(网页皮肉)——知识汇总①

    CSS知识汇总① 选择器 元素选择器: <style type="text/css">h1{color: (字体颜色);background-color: (背景颜色) ...

  10. 向前的快捷键_平面设计基础知识:平面设计师应该知道的快捷键。

    今天给大家整理了一下,平面设计基础知识中平面设计师应该知道的快捷键.这个系列共有五篇,其他几篇都在首页,可以去看一下,有任何问题可以提出来,下面我们一起看一下平面设计基础知识中平面设计师应该知道的快捷 ...

最新文章

  1. 万字长文详解Docker架构原理及功能使用!
  2. 使用Javascript创建XML文件
  3. IOS开发笔记5-C语言基础复习
  4. mysql的单行注释_MySQL基础--会这些就够了
  5. 互斥锁、自旋锁和自适应自旋锁
  6. cocos2D(四)---- CCSprite
  7. Android自定义Dialog及与Activity的交互
  8. Ajax发送formdata数据,SpringMVC后台处理
  9. iOS Hacker Keychain相关The executable was signed with invalid entitlements
  10. python模块学习(1)
  11. Android学习之在Eclipse看源代码的技巧
  12. UTXO 和 Account 模型对比
  13. 软件基本功:开发测试中的穷举归纳法
  14. Asp.net core 中实现AOP面向切面编程
  15. 要素过多!精选100个酷炫API助你灵感爆棚
  16. hive sql总结汇总
  17. android录制amr音频文件,android – 以AMR文件格式录制音频
  18. 分析学中的若干空间:
  19. Visual Studio下载太慢的解决方法
  20. Gitee码云注册和提交代码

热门文章

  1. 如何开启计算机的蓝牙功能吗,win7台式电脑蓝牙怎么开启(电脑蓝牙的开启步骤)...
  2. Android 锁屏后Socket长连接踩坑总结
  3. 小猿日记(9) - 今天,我又拒绝了阿里的一次机会
  4. 胡彦斌and音乐密码 MUSIC CODE
  5. 学以致用——Excel报表自动化方案 (Automation solution of complicated manual Excel Report)
  6. 从银行、保险到证券,揭开大数据在金融行业的应用
  7. Acwing 187. 导弹防御系统
  8. 创建图片外链——“极简图床”
  9. 申宝投资-昨日三大指数缩量探底回升
  10. Windows Server 2003 报错:”NTDETECT 失败“ 和 “文件或目录损坏且无法读取,请运行chkdsk工具”