HTML-第01天

最新推荐文章于 2025-03-18 15:36:29 发布

冷饮吖

最新推荐文章于 2025-03-18 15:36:29 发布

阅读量441

点赞数 6

分类专栏： zhiping 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_38317076/article/details/134603254

版权

zhiping 专栏收录该内容

1 篇文章

订阅专栏

一、介绍

我们写代码在

<body>  这是写代码的区域 </body>

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
 
</body>
</html>

实例解析
在这里插入图片描述

二、标题

标题一共有6个(数字越大，字体越小)
<h1>这里面写内容</h1>
<h2>这里面写内容</h2>
<h3>这里面写内容</h3>
<h4>这里面写内容</h4>
<h5>这里面写内容</h5>
<h6>这里面写内容</h6>

例如:

<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

在这里插入图片描述
浏览器访问效果

三、图片

图像是通过标签 <img src="图片的地址" /> 其中src可以为网上地址和本地地址

第一种方式：网上地址

图片地址： https://img.qinglingvip.com/shop/2023-11-24/20231124172902C2972A.jpg

案例：

<img src="https://img.qinglingvip.com/shop/2023-11-24/20231124172902C2972A.jpg" />

浏览器查看：

在这里插入图片描述

第二种：本地图片

鼠标右键
在这里插入图片描述
我这里文件夹名称叫 img

把这个图片链接用浏览器打开下载下来
https://img.qinglingvip.com/shop/2023-11-24/2023112417290290F4F5.jpg

下载好了这个图片复制粘贴进去 (点击一下刚刚创建的img文件夹 Ctrl+C、Ctrl+V )

在这里插入图片描述

效果
在这里插入图片描述
案例：

···
< img src=“img/2023112417290290F4F5.jpg” />·
···
在这里插入图片描述

浏览器打开访问
在这里插入图片描述