一、HTML是什么HTMLHyperText Markup Language超文本标记语言是构建网页的基础它通过一系列标签来定义网页的结构和内容。你可以把它理解成网页的“骨架”CSS负责美化“皮肤”JavaScript实现交互“动作”三者共同组成了丰富多彩的网页世界。 二、搭建开发环境学习HTML不需要复杂的工具有这两个就够了文本编辑器推荐VS Code免费、功能强大还有丰富的插件也可以用系统自带的记事本。浏览器Chrome、Edge、Firefox等主流浏览器都可以用来预览你的网页效果。 三、HTML基本结构每个HTML文件都有固定的基础结构就像写作文要有开头、正文和结尾一样Html复制!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body !-- 这里写网页的内容 -- h1欢迎来到HTML的世界/h1 p这是我用HTML写的第一个段落。/p /body /html标签解释!DOCTYPE html声明这是一个HTML5文档html整个网页的根标签所有其他标签都在里面head存放网页的元信息比如编码、标题不在页面显示title网页标题会显示在浏览器标签上body网页的主要内容所有可见的元素都在这里 四、常用语义化标签避免滥用div语义化标签不仅能让代码更易读还对SEO友好以下是一些常用的语义化标签 标题与段落Html复制!-- 标题标签h1到h6字号依次减小 -- h1这是一级标题一篇页面最好只有一个h1/h1 h2这是二级标题/h2 h3这是三级标题/h3 !-- 段落标签 -- p这是一个普通段落用来展示文本内容。/p 列表标签Html复制!-- 无序列表 -- ul li苹果/li li香蕉/li li橙子/li /ul !-- 有序列表 -- ol li第一步打开编辑器/li li第二步编写代码/li li第三步保存文件/li /ol !-- 定义列表 -- dl dtHTML/dt dd超文本标记语言/dd dtCSS/dt dd层叠样式表/dd /dl 链接与图片Html复制!-- 链接标签跳转到其他网页或文件 -- a hrefhttps://www.csdn.net target_blank访问CSDN官网/a !-- target_blank表示在新标签页打开 -- !-- 图片标签 -- img srcimage.jpg alt风景图片 width300 !-- alt是图片加载失败时显示的文字width设置图片宽度 -- 容器标签语义化替代divHtml复制!-- 头部 -- header h1网站标题/h1 nav a href#首页/a a href#文章/a a href#关于我/a /nav /header !-- 主要内容 -- main article h2文章标题/h2 p文章内容.../p /article /main !-- 侧边栏 -- aside h3热门推荐/h3 ul liHTML入门教程/li liCSS基础/li /ul /aside !-- 底部 -- footer p版权所有 © 2024/p /footer 五、实战制作你的第一个网页现在我们把上面的知识整合起来制作一个简单的个人介绍页面打开VS Code新建一个文件命名为index.html输入以下代码Html复制!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人介绍/title /head body header h1你好我是HTML初学者/h1 /header main section h2关于我/h2 p我正在学习HTML希望能成为一名前端开发工程师。/p /section section h2我的爱好/h2 ul li编程/li li阅读/li li运动/li /ul /section /main footer p联系方式xxxxxx.com/p /footer /body /html保存文件右键选择“在默认浏览器中打开”你就能看到自己的第一个网页了 六、学习建议多写多练最好的学习方式就是动手实践从模仿到创新。查阅文档遇到问题可以查看MDN Web Docshttps://developer.mozilla.org/zh-CN/docs/Web/HTML 这是最权威的HTML文档。调试技巧在浏览器中按F12打开开发者工具可以查看网页的HTML结构和样式方便调试。