哦?你知道吗...(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_83242657/article/details/144470955

HTML入门指南：小白也能轻松上手，告别"代码恐惧症",带你"玩转"网页！

"Hello World！"

相信很多小白在刚开始接触编程时,都见过这句话.但当你第一次面对一串看似"天书"的HTML代码时,心里是不是也默默飘过一句：

"我太难了……"

别慌！今天这篇博客,就带你从“Hello World”开始,轻松入门HTML.

HTML到底是啥？

HTML,全称"HyperText Markup Language",中文叫超文本标记语言.说白了,它就是网页的骨架！ HTML通过各种"标签"来告诉浏览器,这个网页上有什么内容,比如"标题、段落、图片、链接"等等.

举个例子,你看到的这篇博客时,其实就是一堆HTML标签在背后默默工作,把"文字、图片、链接"等元素有序地排列在你的屏幕上

"HTML就像盖房子的图纸,而浏览器就是施工队"

想象一下,你是一个建筑设计师,HTML就是你的设计图纸,而浏览器就是施工队,负责把图纸变成现实.

让我们从'最简单'的HTML代码开始

先别被"代码"两个字吓到~(自己~吓~自己~)

HTML代码其实比你想象的要简单得多.下面是一段基础的HTML代码,我们一起来看看:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>我的第一个网页</title>

</head>

<body>

<h1>欢迎来到我的网页!</h1>

<p>这是一个使用HTML编写的简单网页</p>

<a href="https://www.example.com">点击这里访问示例网站</a>

<img src="https://www.example.com/image.jpg" alt="示例图片">

</body>

</html>

代码解析:（让你不再"晕车"）

<!DOCTYPE html>

这行代码是告诉浏览器："嘿,我是HTML5文档哦!" 它不是HTML标签,而是一个声明,类似于"定场诗",告诉浏览器接下来要展示的内容类型.

<html>标签

整个网页的"根",所有的内容都包含在这个标签内.就像一个巨大的"包裹",里面装满了各种"宝贝".

<head>标签

这个部分包含了网页的"幕后信息",比如"字符集、标题、链接"到样式表和脚本等.

<meta charset="UTF-8"> : 设置网页的字符编码,支持多种语言字符.
<title> 标签 : 定义网页的标题,会显示在浏览器标签上.

<body>标签

这是网页的"身体",所有你能在页面上看到的内容都在这里,比如"文字、图片、链接"等.

<h1>标签

定义一级标题,<h1>到<h6>标签用于定义不同级别的标题,<h1>是最高级别,就像文章的

"大标题"

醒目且重要.

<p>标签

定义一个段落,用于包含文本内容.就像我们在Word文档中输入的普通文本.

<a>标签

定义一个超链接,"href"属性指定链接的目标URL(链接).

例如,点击"点击访问示例网站"将会跳转到"https://www.fohok.xin/".就像你在网页上看到的那些"蓝色的、可点击"的文字.

<img>标签

用于在网页中嵌入图像.src属性指定图像的URL(链接),alt属性提供图像的替代文本,当图像无法显示时,替代文本会显示出来.

"HTML就像乐高积木,每个标签都是一块积木,组合起来就能搭建出各种形状的网页"

想象一下,你正在搭建一个乐高城堡,HTML标签就是那些五颜六色的积木,而浏览器就是那个帮你把积木变成城堡的魔法.

如何运行上方代码?

1.创建HTML文件

打开一个文本编辑器（如"记事本、Notepad++、VS Code"等）

手机端可以浏览器下载"webcat或Hopweb"

将上述代码复制粘贴进去
将文件保存命名为"index.html"

2.打开网页

在文件管理器中找到刚保存的"index.html"文件
双击文件,默认浏览器打开并显示你的网页

手机端可以使用MT管理器

长按保存的文件(index.html)
打开方式--类型--全部--浏览器

VIVO手机可能需下滑找到"浏览器-官方"

"就像打开一张图片一样简单!" 没错,运行HTML文件就是这么简单,不需要任何复杂的配置.

扩展学习（让你不再"迷路"）

HTML的世界远比你想象的广阔,以下是一些你可以进一步学习的方向:

更多HTML标签 : 了解"<div>、<span>、<ul>、<li>"等标签,用于构建更复杂的网页结构.
表格和表单 : 学习如何创建表格和表单,用于展示数据和收集用户输入.
多媒体元素 : 深入了解如何在网页中嵌入"视频、音频"等多媒体内容.
语义化HTML : 学习使用语义化的HTML标签,提高网页的可访问性和SEO效果.

"学习HTML就像打游戏,每个标签都是一个小关卡,学会了就能解锁新技能."

"想象一下,你正在玩一个冒险游戏,每个HTML标签都是一个小任务,完成了就能获得"经验"值,最终成为网页开发的高手.

实战演练（让你"玩转"网页）

"实践出真理!"让我们来做个小练习,巩固一下刚才学到的知识.

练习1 : 创建一个简单的个人主页

打开你的文本编辑器,新建一个文件
输入以下代码 :
将文件保存为"index.html"
双击文件,用浏览器打开,看看效果.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>我的个人主页</title>

</head>

<body>

<h1>欢迎来到我的个人主页</h1>

<p>我是一个正在学习网页开发的小白</p>

<a href="https://www.example.com/">点击这里访问我的网站</a>

<img src="https://www.example.com/avatar.jpg" alt="我的头像">

</body>

</html>