学习HTML 第四节.插入图像
学习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 第四节.插入图像的更多相关文章
- 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...
- HTML学习----------DAY2第四节
HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...
- Vue快速学习_第四节
获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...
- [shiro学习笔记]第四节 使用源代码生成Shiro的CHM格式的API文档
版本为1.2.3的shiro API chm个事故文档生成. 获取shiro源代码 编译生成API文档 转换成chm格式 API 获取shiro源代码 shiro官网: http://shiro.ap ...
- [struts2学习笔记] 第四节 学着使用struts 2的tag标签
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40349201 官方文档: http://struts.apache.org/relea ...
- [shiro学习笔记]第四节 使用源码生成Shiro的CHM格式的API文档
版本号为1.2.3的shiro API chm个事故文档生成. 获取shiro源码 编译生成API文档 转换成chm格式 API 获取shiro源码 shiro官网: http://shiro.apa ...
- Hibernate学习---第十四节：hibernate之session线程安全
1.hibernate.cfg.xml 文件中添加如下代码开启线程安全: <property name="hibernate.current_session_context_class ...
- 学习Vue第四节，v-model和双向数据绑定
Vue指令之v-model和双向数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
随机推荐
- Golang 单元测试和性能测试
开发程序其中很重要的一点是测试,我们如何保证代码的质量,如何保证每个函数是可运行,运行结果是正确的,又如何保证写出来的代码性能是好的,我们知道单元测试的重点在于发现程序设计或实现的逻辑错误,使问题及早 ...
- 在 S5PV210 的 开发板上 使用 串口 收发信息
参考学习教程:周立功嵌入式Linux开发教程-(上册) 材料:首先 准备一个 安装好 Linux 的 开发板 使用 xshell 工具 连接 开发板 ,winscp 工具 连接 开发板 , 准 ...
- Mysql实现主从同步
根据网上众多参考案例,继续在VM虚拟机里实现MySQL主从同步功能.步骤如下: * 首先明确下环境 主库本地windows ip192.168.0.103 从库虚拟机mysql5.6 ip192.16 ...
- Spring Cloud Sleuth 之Greenwich版本全攻略
微服务架构是一个分布式架构,微服务系统按业务划分服务单元,一个微服务系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性较高,如果出现了错误和异常,很难去定位.主要体现在一个请求可能需要调用很 ...
- Xcode 提交APP时遇到 “has one iOS Distribution certificate but its private key is not installed”
解决办法:登录Apple开发证书后台,把发布版证书.cer文件下载到本地,双击安装即可.若还没有设置发布证书文件,则创建一个后下载. Ref: https://blog.csdn.net/dingqk ...
- js cookie使用
if (window.localStorage) { window.localStorage.setItem('cname', "cvalue"); }else{ setCooki ...
- Leecode刷题之旅-C语言/python-263丑数
/* * @lc app=leetcode.cn id=263 lang=c * * [263] 丑数 * * https://leetcode-cn.com/problems/ugly-number ...
- PTA基础编程题目集6-3简单求和 （函数题）
6-3 简单求和 (10 分) 本题要求实现一个函数,求给定的N个整数的和. 函数接口定义: int Sum(int List[],int N) 其中给定整数存放在数组List[]中,正整数N是数组元 ...
- Shell 变量简介
1. 概述 概述 知识点又稀又碎, 面试一问就流泪 简单介绍下 shell 下的变量及其基本操作 2. 环境 操作系统 CentOS Linux release 7.5 用户 root 用户 约定 使 ...
- 《Java核心技术36讲》阅读笔记：谈谈对Java平台的理解笔记
1. 谈谈你对Java平台的理解. Java是一种面向对象的语言,最显著的特性有两个方面: 一个就是一次编译,到处运行(Write once, run anywhere),能够非常容易的获得跨平台能力 ...