学习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. 4.12 Spark环境更新

    addJar方法是做什么的呢?它用于将Jar文件添加到Driver的RPC环境中. 通过addJar和addFile可以将各种任务执行所依赖的文件添加到Driver的RPC环境中, •小结 伴生对象是 ...

  2. size和len

    size函数只能用于计算array,不能用于计算list,返回的是数组的元素个数 len函数既可以计算array,也可以计算list >>> a = np.array([1,2]) ...

  3. Loading dl-debug.c in gdb / Ubuntu 14.04.4 LTS

    转自: https://stackoverflow.com/questions/36025694/loading-dl-debug-c-in-gdb-ubuntu-14-04-4-lts ====== ...

  4. 关于python线程池threadpool

    #coding=utf-8 import time import threadpool def wait_time(n): print('%d\n' % n) time.sleep(2) #在线程池中 ...

  5. web测试－－测试点

    转载自:51Testing 首先,查找需求说明.网站设计等相关文档,分析测试需求,制定测试计划,确定测试范围和测试策略,一般包括以下几个部分:功能性测试:界面测试:性能测试:数据库测试:安全性测试:兼 ...

  6. JNI由浅入深_9_JNI 异常处理

    1 .本地代码中如何缓存和抛出异常 下面的代码中演示了如何声明一个会抛出异常的本地方法.CatchThrow这个类声明了一个会抛出IllegalArgumentException异常的名叫doit的本 ...

  7. Spring coud微服务框架具体实现关键说明

    搭建一个微服务,考虑的问题涉及到运维,数据管理,性能,并发等方方面面.项目中使用Spring coud 搭建微服务,从技术选型,到技术实现都要全方面考虑服务化的问题.下面简单总结下搭建过程用的技术说明 ...

  8. XML第一次简单入门（Lab分析）

    In this tutorial you will create a well-formed and verified XML file. Consider the XML document belo ...

  9. Python - 入门基础（一）

    1.解释器路径 #!/usr/bin/env python 2.编码 # -*- coding:utf8 -*- 1.ascill ---00000000  (8个位表示) 缺点:表示不了英文 2.u ...

  10. linux介绍及基本命令

    linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...