想做个个人网页,或者打算往前端开发方向发展,第一步基本都是从学 HTML 开始。别被代码吓到,HTML 其实没那么难,就像搭积木一样,一块一块把页面结构拼起来。
从最简单的页面开始
打开电脑上的记事本,输入下面这几行代码,保存成 index.html,然后用浏览器打开,你就能看到自己的第一个网页了。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的世界</h1>
<p>这是我的第一段文字。</p>
</body>
</html>
别急着背,先照着敲一遍。你会发现,<h1> 是大标题,<p> 是段落,标签成对出现,中间夹着内容,结构很清楚。
边看边改,动手最重要
找个简单的网页,比如本地新闻站或者博客,右键点“查看源代码”,你会看到一堆 HTML。别怕看不懂,找找有没有熟悉的标签,比如 <img> 是图片,<a> 是链接。试着自己写一个带图片和链接的页面:
<body>
<h2>我喜欢的网站</h2>
<a href="https://www.example.com">点这里去示例网站</a>
<img src="photo.jpg" alt="我的照片">
</body>
注意 src 要写对图片路径,不然会看不到图。可以先把图片和 HTML 文件放同一个文件夹里,省得搞错。
用浏览器调试,即时反馈
写完刷新一下页面,效果立马就出来了。如果哪行没反应,可能是标签漏了闭合,比如写了 <div> 没写 </div>。浏览器一般不会报错,但页面可能乱掉。这时候右键检查元素,能帮你定位问题。
别一上来就啃书
很多人买本《HTML权威指南》放床头,翻两页就睡着了。不如直接去 w3schools 或者菜鸟教程,上面有例子能在线改,改完马上看结果。每天花二十分钟,照着做一个小模块,比如做个表单、排个简单布局,比死记硬背强得多。
学会用搜索引擎
遇到问题别憋着,直接搜“HTML怎么插入视频”、“按钮怎么居中”,中文资料一大把。Stack Overflow 上也有很多人问过类似问题,看看别人怎么解决的,抄过来改改就能用。
下一步自然就来了
等你能熟练写出一个完整页面,就会发现光有结构不够好看,这时候顺手学点 CSS,给文字换个颜色、调调位置,网页立马变样。HTML 和 CSS 配合着来,进步特别快。
学 HTML 不需要装什么高级软件,一个记事本加一个浏览器就够了。关键是要动起来,今天写三行,明天加个图片,慢慢你就发现自己能做的越来越多。