l  图片标记

l  语法格式<img>

l  常用属性

l  width:图片宽度 单位：像素

l  height:图片高度 单位：像素

l  border:边框的粗细

l  src:图片的路径:相对路径

l  align：图片的对齐方式 取值：left,center,right

l  hspace：图片与左右文字之间的距离

l  vspace：图片与上下文字之间的距离

注意事项：1.给定图片宽高的时候，最好只给一个值，因为图片是按照等比例缩放的。

2.align并不能对图片进行位置变更，只能用来实现图文混排的效果

l  超级链接，<a>中不能在嵌套<a>标记

u  <a>链接</a>

u  属性

l  href：目标地址：可以是相对地址也可以使绝对地址

l  target:目标文件的显示窗口。

n  _blank:在新窗口中打开目标文件

n  _self：替换当前窗口并打开目标文件 –默认的打开方式

n  _parent:在父级窗口打开目标文件。

n  _top:在最顶级窗口来打开目标文件。

n  其中_parent和_top常用于框架网页之中

1.   绝对地址URL

（1）；远程的绝对地址

访问远程 的文件总是以http://域名，或者主机名开头

例如：http://www.baidu.com/baidu.html

（2）；本地的绝对地址（很少使用）

访问本地的绝对地址是以file:///开头的绝对地址

例如：file:///C:/Users/hv/Desktop/文件/PHP/链接.html

2．相对地址URL

（1）； 当前文件和目标文件是平级关系，链接地址直接写目标文件名

（2）；当前文件与目标文件所在的文件夹是同级关系，先找文件夹名，然后再找文件名

（3）目标文件位于上一层的目录中，往上找目录，再找目录中的文件

往上找，使用

“../”表示向上一个目录

3．特殊链接

（1）；下载链接

什么样的文件会出现下载提示？

反过来说，那些网页文件是可以之间执行的？ 如：jpg,peng,gif,html,php,txt                  大部分文件，浏览器是不能直接执行的 如：doc，rar，等

（2）；邮箱链接

（3）：普通空链接

有链接的状态颜色，有链接的效果，但是是空的，没有什么反应

<a href=”#”>空链接</a>

（4）：js链接，通过在连接中添加js的代码，来实现功能

l  图像热点

图像热点：给一张图片加多个链接。默认情况下，一张图片只能加一个链接

标记结构

<img src=”图片相对地址”  usemap=”#地图热区的名字”/>

<map  id=”地图热区的名字”>  //用来与图片进行关联

<area  shape”热区的形状” cords=”热区的坐标” href=”链接的地址” />

<area  shape”热区的形状” cords=”热区的坐标” href=”链接的地址” />

</map>

<area>的常用属性

shape: 热区的形状，取值：rect矩形 circle圆形 polygon多边形

当shape为矩形时    cords=”x1,x2,y1,y2”

当shape为圆形时       cords=”x,y,r”

l  HTML 颜色

网页中的颜色有三种表示方法

（1）；颜色单词：blue,red,yellow

（2）；10进制表示方法：rgb（255,0,0），rgb（0,255,0），

（3）；16进制表示：#FF0000，#00FF00，#0000FF

注意：10进制的兼容性不好，所以通常不使用，多用于CSS中

在自然界中，所有的颜色都可以用三种光的不同波长，混合而成，三种光就是红光，绿光，蓝光。在计算机中，每个基色，用8位二进制（2^8=256），那么，RGB共可以表示255*255*255种颜色

l  锚点链接

含义：锚点链接是在一个网页的不同区域进行跳转。锚点可以理解为“定义一个记号”

使用：（1）；定义：一个锚点（做个记号） <a  name=”锚点名称”></a>锚点在网页中是不显示的，所以可以不用再标记中添加内容

命名规则：可以包含字母数字下划线，但是只能以字母打头

（2）；跳转到锚点（跳转到那个记号）

语法<a  href=”文件名#锚点名称”>………</a>

注意：这里的<a></a>之间要有内容，因为这会显示在网页，否则无法跳

文件名根据需要，可有可无，如果是在同一个网页内，则不需要，如果是跳转到另一个网站的另一个部分，则需要文件名

l  计算机编码（字符集）--了解

因为计算机只能识别二进制的数据，所以我们需要对字符进行编码，从而使计算机可以识别

l  <meta>标记

<meta>标记的主要左营是提供网页的原信息。比如：指定网页的搜索的关键字

<meta>标记的两个属性：http-equiv和name

  1. 1.     http-equiv属性

功能：模拟http协议文件头信息，当信息从服务器端到客户端的时候，告诉浏览器如何正确显示网页。

http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数

（1）：设置网页的字符集

<meta http-equiv=”content-type”content=”text/heml:charset=utf-8”/>

（2）；网页的自动刷新

<meta http-equiv=”refresh”content=”2”>两秒钟刷新一次界面

<meta http-equiv=”refresh”content=”2: url=http://www.baidu.com”>

两秒后自动跳转到百度界面

  1. 2.     name 属性

name属性主要用于设置网页的搜索关键字，版权信息，作者等。

（1）；设置网页搜索的关键字   --我也没有搞懂，就是用来优化自己的网络排名

<meta name=”keywords” content=”关键字内容”>

（2）；描述信息---（就是图片右边的介绍描述）

<meta name=”description”content=”迅美网站建设是一家拥有……”>

l  XHTML简介

传统的HTML开发的初衷是面向pc机的，而随着移动终端不断出现，HTML已经满足不了市场的需求，XHTML是新一代的HTML标注语言

XHTML的目的是为了取代HTML

XHTML的标记，与HTML一模一样

XHTML的语法比HTML严格的多

XHTML是可扩展超文本标注语言

l  XHTML编写规范

l  所有的标记都有全小写

l  单边标记必须关闭 <b>à<b />

l  所有的属性值必须都要加引号

l  所有的属性都必须有值 <hr  noshade>à<hr noshade=”noshade”>

l  标记之间要顺序嵌套，外层套内层，

l  XHTML网页必须要有DTD文档类型的定义代码

l  DTD文档类型定义

DTD文档类型定义的目的：是一种验证机制，验证你写的XHTML标记是否合法

DTD一共有三种分类

（1）：严格型的DTD

在严格DTD中不能再使用各种表现标记。如：<font>.<b>。。等等

只能使用CSS来取代各种表现的标记，但等有利于维护

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Strct//EN””http://www.w3.org/TR/xhtml 1/DTD/xhtml1-strict.dtd”>

（2）；过渡型的DTD

可以继续使用HTML中的表现的写法

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml 1/DTD/xhtml1- transitional.dtd”>

（3）；框架的DTD

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Framexet//EN””http://www.w3.org/TR/xhtml 1/DTD/xhtml1- framexet.dtd”>

l  表格标签----块元素

       
       

<table>

<tr>//行

<td>列</td>

<td>列</td>

<td>列</td>

<td>列</td>

</tr>

<tr>//行

<td>列</td>

<td>列</td>

<td>列</td>

<td>列</td>

</tr>

</table>

1.<table>属性

n  width ：表格的宽度

n  height：表格高度

n  align:单元表水平对齐方式 取值：left,center,right

n  border：边框的粗细

n  bordercolor:边框颜色

n  bgcolor:背景颜色

n  background:背景图片

n  :单元格边线到内容之间的距离

n  cellspacing:单元格与单元格之间的距离

n  rules：合并表格边线 取值:all -----兼容性不好，请用CSS来取代他

2.<tr>属性 ---行标记

n  bgcolor：背景色

n  height：行的高度

n  align:行中的文本水平对齐  取值：left,center,right

n  valign：行中的文字垂直对齐 取值：top(上)，middle(中),bottom(下)

3.<th>属性---标题单元格、

     <td>是普通的单元格，<th>是标题单元格，自动居中加粗显示

n  width ：单元格宽度

n  height：单元格高度

n  bgcolor:背景颜色

n  align:行中的文本水平对齐  取值：left,center,right

n  valign：行中的文字垂直对齐 取值：top(上)，middle(中),bottom(下)

n  rowspan：上下单元格合并 取值：合并的个数

n  colspan：左右单元格合并  取值：合并的个数

注意：1.在使用单元格宽度的时候，整列都会变宽

2.单元格的合并要放在第一个合并的单元格处

3.单元格的合并有增就有减，必须保证单元格的个数相等

源代码：

　<html>

<head>

<title>表格作业</title>

<meta http-equiv="Content-type" content="txet/heml;chatset=utf-8" />

<body>

<table border="2" bordercolor="purple" rules="all">

<tr>

<th colspan="3">星期一游戏列表</th>

</tr>

<tr>

<td rowspan="2" valign="middle">网络游戏</td>

<td>天数奇谈(如果他算是网游的话)</td>

<td> 征途</td>

</tr>

<tr>

<td>LOL</td>

<td>穿越火线</td>

</tr>

<tr>

<td rowspan="2" valign="middle">单机游戏</td>

<td>狙击精英</td>

<td>愤怒的小鸟</td>

</tr>

<tr>

<td>暗黑破坏神3<img src="1.jpg" width="150"></td>

<td>真三国无双5</td>

</tr>

</table>

</body>

</head>

</html>

效果图：

web从入门开始（4）--------链接的更多相关文章

  1. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

  2. 转载-Web API 入门

    An Introduction to ASP.NET Web API 目前感觉最好的Web API入门教程 HTTP状态码 Web API 强势入门指南 Install Mongodb Getting ...

  3. Web API入门指南(安全)转

    安全检测的工具站点:https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools Web API入门指南有些朋友回复问了些 ...

  4. Web API 入门指南

    Web API 入门指南 - 闲话安全2013-09-21 18:56 by 微软互联网开发支持, 231 阅读, 3 评论, 收藏, 编辑 Web API入门指南有些朋友回复问了些安全方面的问题,安 ...

  5. WEB安全入门

    WEB安全入门 信息安全基础 信息安全目标 真实性:对信息的来源进行判断,能对伪造来源的信息予以鉴别, 就是身份认证. 保密性:保证机密信息不被窃听,盗取,或窃听者不能了解信息的真实含义. 完整性:保 ...

  6. Java Web快速入门——全十讲

    Java Web快速入门——全十讲 这是一次培训的讲义,就是我在给学生讲的过程中记录下来的,非常完整,原来发表在Blog上,我感觉这里的学生可能更需要. 内容比较长,你可以先收藏起来,慢慢看. 第一讲 ...

  7. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  8. JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

    JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...

  9. JAVA WEB快速入门之通过一个简单的Spring项目了解Spring的核心（AOP、IOC）

    接上篇<JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构.调试.部署>,通过一个简单的JSP WEB网站了解了JAVA WEB相关的知识,比如:Ser ...

  10. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

随机推荐

  1. JAVA finally字句的异常丢失和返回值覆盖解析

    转载:http://blog.csdn.net/sureyonder/article/details/5560538 Java虚拟机在每个try语句块和与其相关的catch子句的结尾 处都会“调用”f ...

  2. Express之托管静态文件

    中间件express.static 我们使用express初始化一个目录的时候,会在app.js中看到一大推的app.use. 其中一个主要的中间件是express.static(4.0版本依旧保留的 ...

  3. java_XML_STAX

    xml文件 <?xml version="1.0" encoding="UTF-8"?> <bookstore> <book ca ...

  4. Omi原理-Hello Omi

    Hello Omi Omi框架的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件. omi.js实现 var Omi = {}; O ...

  5. CentOS 7 网卡命名修改为ethx格式

    Linux 操作系统的网卡设备的传统命名方式是 eth0.eth1.eth2等,而 CentOS7 提供了不同的命名规则,默认是基于固件.拓扑.位置信息来分配.这样做的优点是命名全自动的.可预知的,缺 ...

  6. 性能秒杀log4net的NLogger日志组件(附测试代码与NLogger源码)

    NLogger特性: 一:不依赖于第三方插件和支持.net2.0 二:支持多线程高并发 三:读写双缓冲对列 四:自定义日志缓冲大小 五:支持即时触发刷盘机制 六:先按日期再按文件大小滚动Rolling ...

  7. IOS之TableViewCell重用机制解决上下刷新重复显示

    首先我是一个经验浅薄的iOS开发人员,这个问题想必许多初学者经常遇到这些问题,在面试中也会经常问到.现在我们一一解决. 首先我们要知道TableViewCell重用机制的原理是什么,我们抽象的理解为古 ...

  8. javascript学习-对象与原型

    javascript学习-对象与原型 Javascript语言是符合面向对象思想的.一般来说,面向对象思想需要满足以下三个基本要求: 封装,Javascript的对象可以自由的扩充成员变量和方法,自然 ...

  9. enote笔记语言（3）（ver0.2）

    what&why(why not)&how&when&where&which:紫色,象征着神秘而又潜蕴着强大的力量,故取紫色. key&keyword: ...

  10. C#委托简介

    C#中委托是一种引用类型,该引用类型与其他引用类型不同,在委托对象的引用中存放的不是对数据的引用而是存放对方法的引用,即委托的内部包含一个指向某个方法的指针.通过使用委托把方法的引用封装在委托对象中, ...