HTML&CSS基础学习笔记1.9-添加图片

<img>标签是用来添加图片的~

<img>标签的使用方法:
<img src="图片的地址">



先来看段实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="http://www.mayacoder.com/upload/images/清新.jpg">
</body>
</html>



网页页面是怎样的呢?看下图吧:



当然,有时候我们的图片链接失效了,为了防止这种情况的发生,我们往往会为图片失效这个情况进行一个处理,即使用alt属性。

<img>标签的alt属性使用方法:


<img src="url" alt="图片显示失败时显示的文本"/>

直接上实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src = "url" alt = "水仙花"/>
</body>
</html>



为了达到图片失效效果,特地将src写成“URL”

结果是这样的:

更多学习内容,就在http://www.mayacoder.com/lesson/index

时间: 2024-11-05 16:01:09

HTML&CSS基础学习笔记1.9-添加图片的相关文章

HTML&amp;CSS基础学习笔记1.10—添加链接

我们可以设置链接的目标,使我们点击后可以跳转到我们想要去的地方. <a>标签的 href 属性用于指定超链接目标的 URL. 在页面中添加的<a>标签,浏览器会用特殊效果显示,这样用户就会知道它是一个可以链接到其他文档的超链接. 看一段代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title><

HTML&CSS基础学习笔记4-定义文档类型

定义HTML的文档类型 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 <!DOCTYPE> 的用处. <!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用置标语言解析器,它应该使用什么样的文档

HTML&CSS基础学习笔记14—有序列表及列表嵌套

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去.HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示. 它的代码模板是这样的: <span style="font-family:Microsoft YaHei;"><ol>       <

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

HTML&CSS基础学习笔记15-合并单元格

合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下: 1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数: 2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数: 3.这2个标签也可以同时使用. 样式示例: 现在就来试试合并单元格吧: <!DOCTYPE 

HTML&CSS基础学习笔记7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签. 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title><

HTML&CSS基础学习笔记3-HTML的标签语法

HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/.如: <p></p> 3.标签的内容是开始标签与结束标签之间的内容,如:<h1>这是标题</h1>. 4. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div

HTML&CSS基础学习笔记11-导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html> <htm