极简HTML入门手记

e7182818

已于 2024-01-13 10:44:12 修改

阅读量423

点赞数 8

分类专栏：内秀外美 # HTML 学习笔记文章标签：笔记 html

于 2024-01-10 21:15:00 首次发布

本文链接：https://blog.csdn.net/e7182818/article/details/135463576

版权

HTML 学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

内秀外美

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML初学者的基础知识，包括DOCTYPE声明、头部与主体结构、标题分级、段落标签、链接功能、图片插入以及查看源代码和使用开发者工具的方法，旨在帮助新手快速上手HTML。

摘要由CSDN通过智能技术生成

刚开始接触HTML的时候，感觉有些迷茫，不过慢慢了解了一些基础知识后，觉得HTML还是挺有趣的呢！下面是我整理的一些HTML基础知识点，希望能帮到和我一样刚开始学习HTML的小伙伴哦！

HTML 文档的小骨架

一个完整的HTML文档，其实就像一个精致的小骨架，有头部、身体，每个部分都扮演着重要的角色。

<!DOCTYPE html>    
<html lang="zh">    
<head>    
    <meta charset="UTF-8">    
    <title>我的示例网页</title>    
</head>    
<body>    
    <h1>欢迎来到我的网页</h1>    
    <p>这里是一些有用的信息。</p>    
</body>    
</html>

神秘的`<!DOCTYPE>`

你知道吗？每一篇HTML文档最前面，都有一个神秘的<!DOCTYPE>声明。它就像文档的身份证，告诉浏览器：“嘿，我是一个HTML5文档哦！”这样，浏览器就能更准确地为我们展示网页内容啦！

标题也分级哦

在HTML里，标题可不是随便写的。从大到小，有<h1>到<h6>六种级别呢！就像我们写作文时的大标题、小标题一样，HTML标题也能让网页内容更有层次。

段落小助手`<p>`

想要把文字内容分得清清楚楚？那就用<p>标签吧！每个<p>标签，都能帮我们把文字包裹成一个独立的段落，让网页看起来更整洁、易读。

点点链接，通通世界

HTML里的<a>标签，就像一扇扇通往其他网页的任意门。只要轻轻一点，就能跳转到其他网页去冒险啦！记得给链接加上有意义的文字描述哦，这样别人就知道这扇门通往哪里啦！

<a href="https://blog.csdn.net/e7182818?spm=1011.2266.3001.5343">访问示例网站获取更多信息</a>

图片小精灵`<img>`

想让网页更生动、有趣？那就少不了图片小精灵<img>啦！只要指定好图片的路径和替代文字，就能轻松地把图片插入到网页中去。还可以给图片加上宽度和高度属性，让它在不同设备上都能美美地显示呢！

自画像

<img src="https://i-blog.csdnimg.cn/blog_migrate/dda7086581bfee8f8e5b92b136dca5e8.jpeg" alt="这是我的一张自画像，仅用于展示如何插入图片。不可侵犯我的肖像权哦" style="width: 500px; height: 300px;">