学习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 ...
随机推荐
- ethereumjs/ethereumjs-blockchain-2-test
https://github.com/ethereumjs/ethereumjs-blockchain/tree/master/test 'use strict' const test = requi ...
- Monkeyrunner测试环境搭建
Monkey手机APP压力测试,是对手机发送伪随机命令,对手机进行按键,触摸等操作,MonkeyRunner是对其发送重复操作的命令,是Monkey的进阶版,可以设置重复的操作或者是重现步骤等.相比较 ...
- Linux Ubuntu出去看看
转到Ubuntu开发之后,发现不能像之前在Windows下一样直接使用GUI客户端出去看看.于是开始找梯子. 由于我的服务器端已经配置好了,只需要配置本地端即可.整个配置过程分为两步:第一步是安装本地 ...
- UVA - 1160（简单建模+并查集）
A secret service developed a new kind of explosive that attain its volatile property only when a spe ...
- +QFTPOPEN: 603,0 怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那
+QFTPOPEN: 603,0 怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那? 注意冒号后面有个空格!!! 答案:要使用 sscanf 标准库函数! char s ...
- Stacktrace: org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:5
jsp页面出现如下异常: Stacktrace: at org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServle ...
- mongodb分组函数的使用(spring-data-mongodb)
这两天要做mongodb日志的模块,下面记录一下. 一. 首先要导入一批数据,使用springboot来完成. 配置mongodb的复制集:在application.yml文件中配置uri来完成 格式 ...
- 爬虫 - xpath 匹配
例题 import lxml.html test_data = """ <div> <ul> <li class="item-0& ...
- 聊聊编程开发的数据库批量插入(sql)
这里的批量插入,主要是支持SQL的大型存储数据库,本文以Mysql,Oracle,SqlServer,postgresql4类来说明,这大概是国内应用比较多的了.其余的应该可以按照这些去找.提到编程的 ...
- ImageMagick使用小结
#查看是否安装imagemagick sudo apt list | grep imagemagick #安装imagemagick sudo apt-get install imagemagick ...