2.4 超链接标签

定义:它是指从一个对象指向另一个对象的指针,它可以是网页中的一段文字

   也可以是一张图片,以实现从一个页面到另一个页面的跳转。

格式:<a href="url">超链接名称或图片</a>

其中href:指定链接目标(另一个网页的路径)

2.5 图片标记

格式:<img src=“url” alt="" height="" width="">

其中,属性src:指定图像源的url路径 ;

   alt:替代文本 ;

   height:图片的高度;

   width:图片的宽度。

例如:

  1. <html>
  2. <head>
  3. <title>超链接页面</title>
  4. </head>
  5. <body>
  6. <h4>超链接标签的使用</h4>
  7. <a href="http://www.mount-tai.com.cn/nature.shtml">泰山风景介绍</a>
  8. <hr width="100%" size="1" color="red">
  9. <h4>图片链接标记的使用</h4>
  10. <a href="http://www.mount-tai.com.cn/nature.shtml">
  11. <img src="C:\MECHREVO\MECHREVO.BMP" width="180px" alt="请点击该图片">
  12. </a>
  13. <br/>泰山风景介绍
  14. </body>
  15. </html>

2.6 定时刷新或跳转

(1)定时自刷新,基本语法:

   <meta http-equiv="refresh" content="1">

含义:页面每隔一秒刷新一次,其中属性content的值,代表间隔的时间。

(2)定时自动跳转,基本语法:

  <meta http-equiv="refresh" content="3";url="http://www.souhu.com"/>

含义:页面3秒自动转到搜狐主页。

注意:上述标签一般放在head标签中.

2.7 表格

定义:表格由行列单元格组成,可以很好地控制页面布局,固定文本或图像的输出,

   还可以任意进行背景和前景颜色的设置。

一个表格是由:<table>(表格)<tr>(表格行)<td>或 <th>(单元格)组成来定义的。

基本语法:

  1. <table>
  2. <caption>表格标题</caption>
  3. <tr><th>列名一</th></tr>
  4. <tr><td>数据一</td><td>数据二</td></tr>
  5. ......
  6. </table>

关于<tr>标签
  (1)<table>是<tr>的上层标签;
  (2)<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签; 
  (3)<tr>...</tr> 定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格;
  (4)<table>标示一个表格,<tr>标示这个表格中间的一个行; 
  (5)<td>标示行中的一个列,需要嵌套在<tr></tr>中间。

这里是一个例子:(两行两列) 
<table> 
  <tr> 
    <td>www.ihuby.com</td>
    <td>www.vvoov.com</td> 
  </tr> 
</table>

end!!!

关于<th>标签:

  (1)<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中;
  (2)<th>...</th> 定义表头单元格。表格中的文字将以粗体显示。<TH>与<TD>同样是标

  示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,即可以这样看:
  <th>网站制作</th>的显示效果相当于<td><b>文字</b></td>;

  (3)在表格中也可以不用此标签,不过如果使用的话,<th>标签必须放在<tr>标签内。

关于<td>标签:
  (1)<td>...</td> 定义单元格标签,一组<td>标签将将建立一个单元格,

    <td>标签必须放在<tr>标签内;

  (2)<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,

    <thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。
    其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:

    row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
    col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
    rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
    colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
    abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。

注意:

  关于TR、TH和TD标签的相关信息,<th>不光是粗体,还是居中的

  <caption>也是居中的,而且如果table有border的话则caption不在border之内
  TFOOT 元素内包含的有效标签有: 
  TD 
  TH 
  TR 
任何给定的 table 对象都只能定义一个tFoot。

2017.9.14 HTML学习总结---超链接标签图片标签的更多相关文章

  1. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  2. 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  3. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  4. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  5. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  6. day01 html介绍 文档声明头 head标签 body标签

    day01 html   初识html <!--文档的声明--> <!doctype html>   <html lang="en">    # ...

  7. cocos2d-x之 利用富文本控件解析xhml标签(文字标签,图片标签,换行标签,标签属性)

    执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...

  8. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  9. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

随机推荐

  1. Autel MaxiSYS Pro Diagnostic System

    The Autel Maxisys Pro Diagnostic System is a complete OEM-level diagnostic system that enables the s ...

  2. VMware Workstation 12.5.9 Pro虚拟机软件中文版

    更新为 VMware Workstation 12.5.9 pro版.VMware虚拟机软件无疑是windows系统下最强大好用的虚拟机软件.最新的VMware Workstation 12 Pro ...

  3. Checkstyle的配置详解

    Checkstyle是一款检查java程序代码样式的工具,可以有效的帮助我们检视代码以便更好的遵循代码编写标准,特别适用于小组开发时彼此间的样式规范和统一.Checkstyle提供了高可配置性,以便适 ...

  4. leetcode 892. 三维形体的表面积

    题目描述: 在 N * N 的网格上,我们放置一些 1 * 1 * 1  的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. 返回最终形体的表面积. ...

  5. STL effectiv 条款7 复习 未完成

    该条款很好的解决了  容器中存放指针释放的问题,for_each函数调用可以参考自己的前面的博客 为什么会有这个条款呢 很多时候 我们将new过的指针存放到容器中,我们有时候错误的认为  容器对象析构 ...

  6. Zookeeper的集群配置和Java测试程序 (一)

    概述 Zookeeper是Apache下的项目之一,倾向于对大型应用的协同维护管理工作.IBM则给出了IBM对ZooKeeper的认知: Zookeeper 分布式服务框架是 Apache Hadoo ...

  7. stm32串口学习(二)

    今天继续学习stm32的串口编程(利用库函数).上次我们说了串口的发送,这次我们说接收. 接收可以用查询的方法,也可以用中断.显然,工程中多用中断的方式,那么就来看看中断接收. 代码其实很简单,基本的 ...

  8. JEECMS站群管理系统-- 标签的配置流程

    以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding= ...

  9. activeMq 配置(一)

    基础知识补充 1.ActiveMQ从入门到精通(一)https://www.jianshu.com/p/ecdc6eab554c 2.ActiveMQ从入门到精通(二)https://www.jian ...

  10. java的wait/notify小结

    wait()是使线程停止运行,而notify使停止的线程继续运行 wait()锁释放与notify()锁不释放 当线程呈wait状态时,调用线程对象的interrupt()方法会出现异常 带一个参数的 ...