学习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 ...
随机推荐
- linq的左连接右连接内连接用法
1.左连接: var LeftJoin = from e in ListOfEmployees join d in ListOfDepartment on e.DeptID equals d.ID i ...
- disconf实践（二）基于XML的分布式配置文件管理，不会自动reload
上一篇博文介绍了disconf web的搭建流程,这一篇就介绍disconf client通过配置xml文件来获取disconf管理端的配置信息. 1. 登录管理端,并新建APP,然后上传配置文件 2 ...
- PAT——1027. 打印沙漏
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- 记2019年目标之一没有996的大数据分析BI实战历程
本文略长,阅读大约需要10分钟. 懵懵懂懂的学习了python,然后一发不可收拾的爱上了python大数据分析,慢慢的走进了大数据的学堂,学习如何大数据挖掘,大数据分析,到BI系统建设使用. 大数据的 ...
- 通达信k线颜色设置
通达信的k线函数没有颜色选项.如果想要画颜色可以使用STICKLINE函数来覆盖当前k线这样也是可以满足需求. 第一步画针 STICKLINE(条件 , L , H , 0 , 0 ) , 颜色; 第 ...
- vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- $(document).ready(function(){})与window.load
$(document).ready(function(){ //to do something}) 是当文档全部加载完全的时候触发,包括img也加载完成但是相关的文件没有下载下来,能同时编写多个 wi ...
- Centos6.5中如何用sqlite3命令打开’.db’后缀的数据库执行sql
1. 简单sql语句使用: 在任意目录下新建一个数据库,比如student . 命令: sqlite3 student.db 出现如下提示: 输入sql语句create table user(us ...
- python django web 端文件上传
利用Django实现文件上传并且保存到指定路径下,其实并不困难,完全不需要用到django的forms,也不需要django的models,就可以实现,下面开始实现. 第一步:在模板文件中,创建一个f ...
- MongoDB怎么用?
MongoDB简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库 ...