HTML的<img>标签引言：在介绍html的 img标签前，我会先简要讲一下html是什么。第一次接触html理解可能

引言：在介绍html的 img标签前，我会先简要讲一下html是什么。第一次接触html理解可能不会很深刻，若有错误请帮忙指出。

什么是HTML?
HTML 标签
HTML 图像（HTML img标签）
浏览器控制台（Chrome开发者工具）
参考文章

什么是HTML?

HTML是一种超文本标记语言-Hyper Text Markup Language,它不是编程语言而是一种标记语言，是网页制作必备的

超文本指的是页面内的图片、链接、音乐、程序等非文本元素
标记语言是一套标记标签，通俗的讲就是编程语言里的关键字
HTML使用标记标签来描述网页
HTML文档也叫web页面
而浏览器则用于读取HTML文件，并将其作为网页显示

HTML 标签

HTML标签是HTML语言中最基本的单位，也是最重要的组成部分实例:

 <body>
 <h1>我的第一个标题</h1>
 <p>我的第一个段落。</p>
 </body>
 </html>

以上是一段html代码
HTML标签是指用尖括号包围起来的关键词，比如：<html>,</html>,<body>,<h1>,<p>
HTML标签通常是成对出现的，比如<h1>和</h1>
其中，前者是开始标签（开放标签），后者是结束标签（闭合标签）
每个标签有其不同的作用，常见的有

<h1>-定义标题

<p>-定义段落

<a>-定义链接

<img>-定义图像

HTML 图像

图像标签(`<img>`)和源属性(Src)

在HTML中，图像由<img>标签定义。<img>是空标签，只包含属性，没有闭合标签。若要在页面上显示图像，我们需要用源属性（src）。src-“source”。源属性的值是图像的URL地址

定义图像的语法：

<img src="URL"/>

如图所示

URL指储存图像的位置。如果名为“boat.gif”的图像位于www.w3school.com.cn的images目录中，那么其URL就是http://www.w3school.com.cn/images/boat.gif

替换文本属性

alt 为图像定义一段预备的可替代文本，在浏览器无法载入图像时，就会显示出这段文本，告诉读者浏览器失去的图片的信息

定义格式

<img src="URL" alt="text">

图像尺寸

通过改变width和height的值来改变图片尺寸

定义格式

<img src="URL" width="50" height="50">

浏览器控制台（Chrome开发者工具）

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

如何打开？

在页面任意位置点击鼠标右键，->检查元素，或摁键盘上的F12即可打开

####了解面板

分为元素面板、控制台面板、源代码面板、网络面板、性能面板、内存面板、应用面板和安全面板

元素面板

使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.

控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

内存面板

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

应用面板

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

安全面板

使用安全面板调试混合内容问题，证书问题等等。

参考文章

1.developers.google.com/web/tools/c… 2.www.w3school.com.cn/html/html_i…

HTML的<img>标签