学习HTML 第四节.插入图像

全是文字的网页太枯燥了吧，我们来搞个图片上去！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我要学HTML---插入图像</title>
</head>

<body style="background-color:green;">
<h1 style="text-align: center;color:green">整体背景为绿色
</h1>
<h2 style="background-color:red;">这是一个红底色标题</h2>
<p style="background-color:blue;">插入图像。</p>
<p>
一个图像:
<img src="http://www.runoob.com/images/pulpit.jpg" alt="Smiley face" width="32" height="32"></p>
<a href="http://www.cnblogs.com/thomason/">使用了 a标签和href 属性,链接到我的博客</a>

</body>
</html>

上面橙色字体的一段代码是表示插入了一个图像。

语法是：<img src="url" width="number"  height="number">

alt="url"意思是如果找不到src指定的那个url图像，就显示alt指定的默认替代文字，注意是文字而不是图像。

显示的图像好小啊，改一下吧。

<body style="background-color:green;">
<h1 style="text-align: center;color:red">整体背景为绿色
</h1>
<h2 style="background-color:red;">插入图像</h2>
<p>
一个图像:
<img src="http://www.runoob.com/images/pulpit.jpg" alt="Smiley face" width="500" height="200"></p>
<a href="http://www.cnblogs.com/thomason/" style="color:red">使用了 a标签和href 属性,链接到我的博客</a>

图像好象变形了，看来是不保留宽高比的。

图片显示终于正常了！

图片链接

把a标签和img标签装到p标签里，就可以创建一个图片链接，点击图片就可打开网址了。

<p>创建图片链接:
<a href="http://www.cnblogs.com/thomason/" style="color:red">使用了 a标签和href 属性,链接到我的博客

<img border="10" src="http://www.runoob.com/images/pulpit.jpg" alt="HTML 教程" width="400" height="300">

</a>

</p>

还有map标签，通过设置area属性中的shape（形状）;coords（坐标）等，使图像的某些区域链接到不同网址，这个比较复杂，以后再深入学吧。

学习HTML 第四节.插入图像的更多相关文章

  1. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  2. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  3. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  4. Vue快速学习_第四节

    获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...

  5. [shiro学习笔记]第四节 使用源代码生成Shiro的CHM格式的API文档

    版本为1.2.3的shiro API chm个事故文档生成. 获取shiro源代码 编译生成API文档 转换成chm格式 API 获取shiro源代码 shiro官网: http://shiro.ap ...

  6. [struts2学习笔记] 第四节 学着使用struts 2的tag标签

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40349201 官方文档: http://struts.apache.org/relea ...

  7. [shiro学习笔记]第四节 使用源码生成Shiro的CHM格式的API文档

    版本号为1.2.3的shiro API chm个事故文档生成. 获取shiro源码 编译生成API文档 转换成chm格式 API 获取shiro源码 shiro官网: http://shiro.apa ...

  8. Hibernate学习---第十四节：hibernate之session线程安全

    1.hibernate.cfg.xml 文件中添加如下代码开启线程安全: <property name="hibernate.current_session_context_class ...

  9. 学习Vue第四节，v-model和双向数据绑定

    Vue指令之v-model和双向数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

随机推荐

  1. Unity3D-射线效果

    基于airplane_02 下面新建 Line Renderer 将上面的几个地方设置下 添加Script脚本: 脚本代码为: using System.Collections; using Syst ...

  2. JDK（四）JDK1.8源码分析【排序】DualPivotQuicksort

    本文转载自于晓飞93,原文链接 DualPivotQuickSort 双轴快速排序 源码 笔记 DualPivotQuicksort是Arrays类中提供的给基本类型的数据排序的算法.它针对每种基本数 ...

  3. DataGuard快照(snapshot)数据库

    在Dataguard中,可以将standby备库切换为snapshot快照数据库,在切换为snapshot数据库后,备库将置于可读写的模式.可用于模拟业务功能测试.在使用完成之后,可以将快照数据库切换 ...

  4. #leetcode刷题之路27-移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. ...

  5. MySQL：如何导入导出数据表和如何清空有外建关联的数据表

    1.导入导出 导入数据库:前提:数据库和数据表要存在(已经被创建) (1)将数据表 test_user.sql 导入到test 数据库的test_user 表中 [root@test ~]# mysq ...

  6. Windows搭建SFTP服务器

    1.项目需要搭建一个SFTP服务器,网上搜了一下,用的是freeSSHd软件,网上查一下我用的是1.3.1版本https://freesshd.updatestar.com/网址自己下载即可. 2.安 ...

  7. jQuery 效果 - toggle() 方法切换元素的可见状态。

    定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...

  8. JavaScript入门学习(1)

    <html> <script type ="text/javascript"> var i,j; for (i=1;i<10;i++){ for (j ...

  9. Hbase(2)-HBase简介

    一. HBase的特点 1. 海量存储 Hbase适合存储PB级别的海量数据,在PB级别的数据以及采用廉价PC存储的情况下,能在几十到百毫秒内返回数据.这与Hbase的极易扩展性息息相关.正式因为Hb ...

  10. 【深度优先搜索】NOIP2017_D2T1 洛谷3958奶酪

    这道题的写法大体有两种:大法师DFS和并查集,两种算法都不难,本篇博客主要讲解DFS,而且测试数据特水,连个剪枝都不用都可以过. 题目描述[luogu传送门] 现有一块大奶酪,它的高度为 h,它的长度 ...