零基础入门前端系列—图片和HTML的基本结构
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础入门前端系列—图片和HTML的基本结构相关的知识，希望对你有一定的参考价值。
【零基础入门前端系列】—图片和html的基本结构（三）
一、图片
在 HTML 中，图像由<img /> 标签定义。
<img /> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
语法：
<img src="图片的路径" alt="图片不显示时给予提示" title="鼠标悬停时给予提示" width="宽度" height="高度">
属性：
- src:路径，必须属性
- alt:图片不能正常显示给予提示
- title:鼠标悬停给予提示
- width:宽度，宽高设置一个属性，另外一个跟着等比例缩放
- height:高度
<img src="https://i0.hdslb.com/bfs/article/32ebad886f7ec5dd82cf6c8153f0fc46609a12be.jpg"
width="300"
alt="IU"
title="IU">
二、图片的路径
相对路径（HTML文件找图片）
- 平级 :直接写
- 下一级 : /
- 上一级 :…/
绝对路径:网址
<img src="https://i0.hdslb.com/bfs/article/32ebad886f7ec5dd82cf6c8153f0fc46609a12be.jpg" />
三、HTML注释
为代码添加适当的注释是一种良好的编程习惯，注释只在编辑文本的情况下可见，在浏览器展示页面并不会显示，注释不支持任何属性。
- 单行注释的快捷键：
Ctrl+/ - 多行注释的快捷键：
Ctrl+Shift+/
四、HTML的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
🎈 DOCTYPE的作用？
DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE>声明位于文档的最前面，处于标签之前，它不是html标签。主要的作用是告诉浏览器的解析器是使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页，DOCTYPE声明是必不可少的。（告诉浏览器按当前标准解析代码）
🎈🎈删除<!DOCTYPE>会发生什么？
在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面有了统一的标准，这种渲染方式叫做标准模式。
<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是要把如何渲染html页面的权利交给了浏览器，有多少中浏览器就有多少种展示方式。因此要提高浏览器的兼容性就必须重视<!DOCTYPE>
🎈🎈🎈严格模式和混杂模式
严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现与网页中的DID（文件类型定义）有关。
- 严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面。
- 混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。
以上是关于零基础入门前端系列—图片和HTML的基本结构的主要内容，如果未能解决你的问题，请参考以下文章