学习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. html字段验证

    (1)连接去掉下划线:style="text-decoration:none" <a href="/example/html/lastpage.html" ...

  2. RedHat（小红帽）下 yum用不了的解决办法

    由于RedHat是商业版的,通常由于没有注册,导致yum程序无法使用(linux下面,yum是个安装软件的“神器”).此时可用CentOS的地址进行替换.下面将一步步说明如何处理: 一.删除RedHa ...

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

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

  4. IntelliJ IDEA SVN无法正常使用问题

    SVN checkout时候会出现错误:Cannot run program "svn" (in directory "E:\Projects"): Creat ...

  5. myeclipse调用loadrunner函数开发测试脚本

    myeclipse调用loadrunner函数开发测试脚本 一.使用myeclipse开发性能测试脚本 1.使用Eclipse新建一个Java工程,将目录%LoadRunner_Home%\class ...

  6. 所有流媒体协议，编解码规范和媒体封装格式的datasheet的下载地址

    https://github.com/jiayayao/DataSheet All datasheet about stream protocol, encode-decode spec and me ...

  7. Kmalloc和Vmalloc的区别

    kmalloc()和vmalloc()介绍kmalloc()用于申请较小的.连续的物理内存1. 以字节为单位进行分配,在<linux/slab.h>中2. void *kmalloc(si ...

  8. 安装maven提示ERROR: JAVA_HOME is set to an invalid directory.

    查询网上资料发现多种解决办法:有的是多写了分号,有的路径错误. 需要注意的是maven配置前需要配置好jdk的路径. 我的java_home 之前的配置为:C:\Program Files\Java\ ...

  9. 创建ASM实例及ASM数据库（转载）

    --======================== -- 创建ASM实例及ASM数据库 --======================== 一.ASM相关概念 1.什么是ASM(Auto Stor ...

  10. jdk 配置

    JDK (绿色版)      此次安装的 JDK 版本为  1.8.0_77 步骤一: 拷贝 JDK(350M左右)到电脑 步骤二: 配置环境变量  JAVA_HOME  , PATH  ,  CLA ...