HTML_2
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 < 5<br />
10 > 5 <br />
4<6 <br />
7>1 <br />
空格1 空格2 空格3 空格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的更多相关文章
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- loadrunner中web_reg_find使用使用方法
Java语法:int object.reg_find( String text, String[] argumentList ); (例子:略) C语法:int web_reg_find( const ...
- 使用 Sandcastle 生成代码帮助文档
使用 Sandcastle可以生成MSDN风格的帮助文档,生成的帮助文档既可以是chm文档,也可以是MS Help 2.x帮助文档. 1 下载并安装Sandcastle Sandcastle下载地址为 ...
- Windows 8 系统安装
系统城 http://www.xitongcheng.com/win8/ 1. 下载 win8: http://msdn.itellyou.cn/2. 准备 4G 以上 U 盘,下载 win8 ...
- 较全的IT方面帮助文档
http://www.shouce.ren/post/d/id/108632 XSLT参考手册-新.CHMhttp://www.shouce.ren/post/d/id/108633 XSL-FO参考 ...
- 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. ...
- 【VC】VC工具栏图标合并工具（非tbcreator和visual toolbar）
VC开发难免会用到toolbar,在没有美工的时候,大部分时间我们只能自己上. 第一个方法:fireworks/photoshop平铺.现在的图片资源大多为背景透明的png图片,虽然fireworks ...
- AIX 配置vncserver
我们安装数据库时,很多情况下客户现场并没有配置图形界面,这是就需要自己配置.vnc就是一个很好的工具vnc rpm包(vnc-3.3.3r2-6.aix5.1.ppc.rpm)下载地址为http:// ...
- 安装FreeMind
Freemind 1.0.0 官方正式版下载地址:http://dl.pconline.com.cn/html_2/1/131/id=46751&pn=0.html 软件介绍: Freemin ...
随机推荐
- es6 reduce的用法
一.forEach回调函数参数,item(数组元素).index(序列).arr(数组本身)循环数组,无返回值,不改变原数组不支持return操作输出,return只用于控制循环是否跳出当前循环 二. ...
- 计算机视觉（CV）前沿国际国内期刊与会议
计算机视觉(CV)前沿国际国内期刊与会议1.国际会议 2.国际期刊 3.国内期刊 4.神经网络 5.CV 6.数字图象 7.教育资源,大学 8.常见问题 1. 国际会议现在,国际上计算机视觉方面的三大 ...
- poj3191(进制转换)
题目链接:http://poj.org/problem?id=3191 题意:将一个数转换为-2为基数的数 思路:套路,看代码就好了 代码: #include <iostream> usi ...
- 2017-9-14 NOIP模拟赛
送分题 (songfen)e Time Limit: 10 00ms y Memory Limit:128MB题目描述LYK 喜欢干一些有挑战的事, 比如说求区间最大子段和. 它知道这个题目有 O(n ...
- pytest框架（四）
测试用例setup和teardown 代码示例一 # coding=utf-8 import pytest def setup_module(): print("setup_module:整 ...
- js实现考试随机选题
考试的时候经常用到,发在这里记录一下 基本信息包括: 学号.姓名.题号.题目名称 实现原理:给每一个题目添加一个编号,JS生成随机数,遍历每一个学生,把题目根据生成的随机数作为题目编号放入学生信息中 ...
- LeetCode.8-字符串转整数(String to Integer (atoi))
这是悦乐书的第349次更新,第374篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Medium级别的第4题(顺位题号是8).实现将字符串转换为整数的atoi方法. 该函数首先去掉所需丢 ...
- ES6入门教程---解构赋值和字符串扩展
解构赋值: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 数组的解构赋值: 按照对应的顺序解构. var arr = [1,[2,3]]; ...
- Win7系统控制面板“设备和打印机”打不开解决办法
Win7系统控制面板“设备和打印机”打不开解决办法, 打开时显示界面如下: 可能原因: 1.设备和打印机对应的驱动故障引起无法打开的问题 2.服务未开启 3.系统文件损坏 解决方法: 1.更新驱动.可 ...
- 洛谷1373（dp）
常规线性dp,需要时就加一维.\(dp[i][j][t][s]\)表示在点\((i,j)\)时瓶子里剩\(t\)且为\(s\)走(0代表小a,1代表uim)时的方案数. de了半天发现是初次尝试的快速 ...