学习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. java读写本地xml

    <?xml version="1.0" encoding="UTF-8" standalone="no"?> <confi ...

  2. 【Step By Step】将Dotnet Core部署到Docker上

    本教程的前提是,你已经在Linux服务器上已经成功的安装了Docker,我会大概介绍在此过程中用到的Docker命令,并不会介绍所有的Docker命令(因为我也不会). 一.在Docker中运行Dot ...

  3. Template Method（模板方法）模式

    1.概述 在面向对象开发过程中,通常我们会遇到这样的一个问题:我们知道一个算法所需的关键步骤,并确定了这些步骤的执行顺序.但是某些步骤的具体实现是未知的,或者说某些步骤的实现与具体的环境相关.例子1: ...

  4. SharePoint2010QuickFlow安装及使用

    一:QuickFlow的安装 1,从http://quickflow.codeplex.com/下载解决方案包以及设计器. 2,将QuickFlow.dll以及QuickFlow.UI.dll添加到程 ...

  5. JS の 套路 I ~~

    小扇在到新公司以后,发现.我的js都忘记了!! 下面总结一下在装配数据时候用到的一些小小的公式,希望像我这样的前端小菜B起到帮助叭叭叭叭叭~~~ I.查找想找到的 HTML 元素 * i.查找元素 v ...

  6. java通过IO流复制文件

    package kimoji; import java.io.*; public class FileTest { public static void main(String[] args) thr ...

  7. Java中的引用：强引用、软引用、弱引用、幻象引用（虚引用）

    Java语言中,除了原始数据类型的变量(八大基本数据类型),其他都是引用类型,指向各种不同的对象. 理解引用对于我们掌握Java对象生命周期和JVM内部相关机制都是有帮助的. 不同的应用类型,不同之处 ...

  8. Java并发编程（十一）常用工具

    Java为开发提供了很多有用的工具类,这些工具类可以帮助我们更加高效的编写并发程序,本篇我们将介绍这些实用工具的用法. ThreadLocal ThreadLocal类用于解决多线程共享一个变量的问题 ...

  9. jQuery之修改li下样式和图片

    <script type="text/javascript"> $(document).ready(function(){ $('li').click(function ...

  10. less.js插件监听

    <script>less.watch();</script> 在不手动刷新/重新加载页面会自动监听less的变化,页面做出相应的变化 . 写在这两行后面就好 了 <lin ...