html图像

  <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过‘src’属性定义图片的地址(可为绝对路径也可为相对路径),通过‘alt’属性定义图片加载时显示的文字,以及对搜索引擎和盲人读屏软件的支持。

<img src="data:images/pic.jpg" alt="加载图片失败,妹妹睡觉去了"/>
 <!--图片显示-->
<img src='http://i02.pictn.sogoucdn.com/a1bbd31d4f7df270' alt="产品图片"/>
<img src="data:images/pic.jpg" alt="加载图片失败,妹妹睡觉去了"/> <br />
<img src='http://i04.pictn.sogoucdn.com/c86564260dc87a3c'/>
<img src="http://i01.pictn.sogoucdn.com/97e326743ea33368"/>
<!--以上均为绝对路径,相对路径如下-->
<!--相对路径指的是相对html文件的路径-->
<!-- ./表示当前文件所在目录下 ../表示当前文件所在目录下的上一级目录-->
<img src="./images/1.jpg" alt="在当前路径下有个images文件夹,里边存放了1.jpg"/>

html链接

  网页上的超链接一般分为三种:

    1.一种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符,简单的讲就是网络上的一个站点、网页的完整路径;

    2.第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去;

    3.还有一种称为同一网页的超链接,这种超链接又叫做书签。

  <a>表示超链接,英文叫anchor,可以指向任何一个文件源,一个HTML网页,一个图片,一个影视文件等,用法:

<a href="ur1">链接显示的文字</a>

  包含5个属性:href target title name

    href属性:表示这个链接文件的路径。

    target属性:可以选择在一个新窗口里或原窗口里打开链接文件

    title属性:可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。可以使用 注释多行显示

    name属性:通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接,放在文件的开始处,每个章节的开头都设置name属性。当用户点击某个章节的链接时,这个章节的内容就显示出来。

         使用name属性,可以跳到文件的指定部位。

         name属性,要设置一对。1.一是设定name的名称   2.二是设定一个href指向这个name

<a href="#C1">参见第一章</a>
<a name="C1">第一章</a>

以上总体功能展示如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3> <p>
第一段:好好学习天天向上
</p>
<p>
第二段:好的<br />没问题
</p> <!--注释的写法,浏览器不会进行任何的操作,快捷键crtl / --> <p>
大小于号的写法:<br />
3 &lt; 5<br />
10 &gt; 5 <br />
4<6 <br />
7>1 <br />
空格1 空格2 空格3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格4
</p> <p>
<!--图片显示-->
<img src='http://i02.pictn.sogoucdn.com/a1bbd31d4f7df270' alt="产品图片"/>
<img src="data:images/pic.jpg" alt="加载图片失败,妹妹睡觉去了"/> <br />
<img src='http://i04.pictn.sogoucdn.com/c86564260dc87a3c'/>
<img src="http://i01.pictn.sogoucdn.com/97e326743ea33368"/>
<!--以上均为绝对路径,相对路径如下-->
<!--相对路径指的是相对html文件的路径-->
<!-- ./表示当前文件所在目录下 ../表示当前文件所在目录下的上一级目录-->
<img src="./images/1.jpg" alt="在当前路径下有个images文件夹,里边存放了1.jpg"/>
</p> <p>
<!--点击文字的超链接-->
双11节提前开始了
<a href="http://www.taobao.com">点击下面的链接,优惠50%</a>
<!--点击图片的超链接-->
<a href="https://www.cnblogs.com/"><img src='https://www.cnblogs.com/images/logo_small.gif' alt="图片"/></a>
<!--以上均为绝对路径,相对路径如下-->
<!--相对路径指的是相对html文件的路径-->
<a href="./images/1.jpg">点击回到本地1.jpg</a>
<!-- target属性:target="blank"或者"_blank",点击链接会在一个新的页面显示 target="_self",点击链接会原页面显示-->
<a href="http://www.jd.com" target="_blank"><img src="https://p.ssl.qhimg.com/t01fdadfd1706f7d040.jpg"></a>
<a href="http://www.cnblogs.com/tianqizhi/p/" target="_self">点击跳转到我的博客</a>
<!-- target不写,默认会在原页面显示-->
<!--属性:title 注: 可用于换行-->
<a href="http://www.cnblogs.com/tianqizhi/p/" title="鼠标放在上边 第二行 ">鼠标放在上边会显示本句</a>
<!--name属性--> <p>
<a href="#C6">参见第10章</a>
</p> <a name="C1"><h2>第1章</h2></a>
<p>这是齐1</p> <a name="C2"><h2>第2章</h2></a>
<p>这是齐2</p> <a name="C3"><h2>第3章</h2></a>
<p>这是齐3</p> <a name="C4"><h2>第4章</h2></a>
<p>这是齐4</p> <a name="C5"><h2>第5章</h2></a>
<p>这是齐5</p> <a name="C6"><h2>第6章</h2></a>
<p>这是齐6</p> <a name="C7"><h2>第7章</h2></a>
<p>这是齐1</p> <a name="C8"><h2>第8章</h2></a>
<p>这是齐2</p> <a name="C9"><h2>第9章</h2></a>
<p>这是齐3</p> <a name="C10"><h2>第10章</h2></a>
<p>这是齐4</p>
</p>
</body> </html>

结果

 

  

HTML_2的更多相关文章

  1. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  2. loadrunner中web_reg_find使用使用方法

    Java语法:int object.reg_find( String text, String[] argumentList ); (例子:略) C语法:int web_reg_find( const ...

  3. 使用 Sandcastle 生成代码帮助文档

    使用 Sandcastle可以生成MSDN风格的帮助文档,生成的帮助文档既可以是chm文档,也可以是MS Help 2.x帮助文档. 1 下载并安装Sandcastle Sandcastle下载地址为 ...

  4. Windows 8 系统安装

    系统城  http://www.xitongcheng.com/win8/ 1.  下载 win8: http://msdn.itellyou.cn/2.  准备 4G 以上 U 盘,下载 win8 ...

  5. 较全的IT方面帮助文档

    http://www.shouce.ren/post/d/id/108632 XSLT参考手册-新.CHMhttp://www.shouce.ren/post/d/id/108633 XSL-FO参考 ...

  6. APMServ本地搭建网站最好用的软件

    APMServ 5.2.6 是一款拥有图形界面的快速搭建Apache 2.2.9.PHP 5.2.6.MySQL 5.1.28&4.0.26.Nginx 0.7.19.Memcached 1. ...

  7. 【VC】VC工具栏图标合并工具(非tbcreator和visual toolbar)

    VC开发难免会用到toolbar,在没有美工的时候,大部分时间我们只能自己上. 第一个方法:fireworks/photoshop平铺.现在的图片资源大多为背景透明的png图片,虽然fireworks ...

  8. AIX 配置vncserver

    我们安装数据库时,很多情况下客户现场并没有配置图形界面,这是就需要自己配置.vnc就是一个很好的工具vnc rpm包(vnc-3.3.3r2-6.aix5.1.ppc.rpm)下载地址为http:// ...

  9. 安装FreeMind

    Freemind 1.0.0 官方正式版下载地址:http://dl.pconline.com.cn/html_2/1/131/id=46751&pn=0.html 软件介绍: Freemin ...

随机推荐

  1. C++开源库(一) ----libConfig详解

    博主天生患有蛋疼疾病,写博不易,转载注明出处http://www.cnblogs.com/liboBlog/,谢谢! 在写程序的时候必不可少的一个部分就是conf文件的解析,但是如果自己解析的话会比较 ...

  2. Xilinx SDSoc 加载opencv库

    Xilinx SDSoc 加载opencv库需要下载两个文件 xfopencv 和 Revision Platform, Revision Platform需要和具体的开发板型号对应,我用的是zcu1 ...

  3. 利用memoize缓存到Redis出现多个参数同一个结果

    在为后端输出加入Redis缓存的过程中出现的问题. 在我利用Flask-restful架构的后端中,理所当然的利用装饰器marshal_with对我的返回数据进行格式化输出. 举个最简单的例子: fr ...

  4. AI资源

    网易云课堂 http://study.163.com/topics/IBMOfflinePrograms?utm_source=baidu&utm_medium=cpc&utm_cam ...

  5. Codevs 1688 求逆序对(权值线段树)

    1688 求逆序对  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 给定一个序列a1,a2,…, ...

  6. 洛谷 P2216 [HAOI2007]理想的正方形

    P2216 [HAOI2007]理想的正方形 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一 ...

  7. sql server添加sa用户和密码

    昨天给网站“搬家”(更换服务器),我是在win7上安装的 sql server2012,安装过程很顺利,用“Windows 身份验证” 也可正常访问.但是用sa用户访问数据库出现了 错误:18456. ...

  8. Centos下磁盘管理的常用命令记录(如查找大文件)

    Centos下磁盘管理的常用命令记录 查看系统磁盘空间占用,使用命令: df -h 结果: 查看磁盘inode使用情况,如果inode用完了,磁盘就没法写入新的内容了: df -i 结果: 如何查找磁 ...

  9. 正整数构成的线性表存放在单链表中,编写算法将表中的所有的奇数删除。(C语言)

    /* 正整数构成的线性表存放在单链表中,编写算法将表中的所有的奇数删除 */ #include <stdio.h> #include <stdlib.h> typedef st ...

  10. SpringBoot用户CRUD

    1.准备 http://start.spring.io/ 这里地址去直接生成你需要的项目信息,如何你本身ide以及集成了springboot 那么可以直接生成项目信息 需要的知识:java,sprin ...