学习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. Golang 单元测试和性能测试

    开发程序其中很重要的一点是测试,我们如何保证代码的质量,如何保证每个函数是可运行,运行结果是正确的,又如何保证写出来的代码性能是好的,我们知道单元测试的重点在于发现程序设计或实现的逻辑错误,使问题及早 ...

  2. 【luogu P1606 [USACO07FEB]荷叶塘Lilypad Pond】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1606 这个题..第一问很好想,但是第二问,如果要跑最短路计数的话,零边权的花怎么办? 不如这样想,如果这个点 ...

  3. JNI由浅入深_10_JNI 综合开发

    1.使用ndk-build时如果找不到某个类,可以使用下面两种方法解决: 1.1 进入src目录 D:\project3\JNIAndroid\src>set classpath=D:\proj ...

  4. HDU 1142 A Walk Through the Forest（最短路+记忆化搜索）

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  5. POJ 1050 To the Max 最大子矩阵和（二维的最大字段和）

    传送门: http://poj.org/problem?id=1050 To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submi ...

  6. UVA - 1197 （简单并查集计数）

    Severe acute respiratory syndrome (SARS), an atypical pneumonia of unknown aetiology, was recognized ...

  7. Vscode 格式化vue Template代码段

    1.安装 vetur 2.在User Setting中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-h ...

  8. ORA-00600:internal error code,arguments:[keltnfy-idmlnit],[46],[1],[],[],[],[],[]

    如图:在DBCA进行到3%时.报错 由于/etc/hosts与/etc/sysconfig/network不正确应,所以报错 [root@ocm2 ~]# cat /etc/hosts # Do no ...

  9. 映射篇：request-String-Object-Map之间相互转化（程序员的成长之路---第5篇）

    为什么写这一篇 问题一:jdbc连接数据库返回的对象是ResultSet,如何把ResultSet对象中的值转换为我们自建的各种实体类? 我估计,80%的程序员会写jdbc数据库连接,但开发项目依然用 ...

  10. Unity各平台内置宏定义

    属性 方法 UNITY_EDITOR #define directive for calling Unity Editor scripts from your game code. UNITY_EDI ...