从零开始搭建属于你的第一个网页一、初识HTML这周我正式开始学习前端开发接触的第一个技术就是HTML超文本标记语言。作为一名网络与新媒体专业的学生之前对网页的理解更多停留在“用过”和“看过”的层面但当真正动手写下一行行代码看着它们在浏览器中变成一个真实的页面时那种成就感是难以言喻的。这篇博客记录了我学习 HTML 的第一周分享给同样在入门路上的小伙伴们。二、HTML 是什么简单来说HTML 是网页的骨架。如果把一个网页比作一个人那么HTML就是骨骼决定了身体的基本结构头、身体、四肢CSS是衣服和妆容负责让页面变得好看JavaScript是肌肉和神经让页面动起来、产生交互。所以学习前端的第一步就是从 HTML 开始。三、HTML 的基本结构一个标准的 HTML 文档长这样!DOCTYPE html html head title我的第一个网页/title /head body h1欢迎来到我的博客/h1 p这是我用HTML写的第一个段落。/p /body /html逐行解释标签作用!DOCTYPE html声明文档类型告诉浏览器这是 HTML5 文档html整个网页的根元素head头部信息存放标题、样式、脚本等不显示在页面中title浏览器标签栏显示的标题body页面主体所有可见内容都写在这里h1一级标题还有 h2、h3...p段落四、常用的 HTML 标签1. 标题标签h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6数字越小标题越大、越重要。2. 文本标签p这是一个段落。/p br !-- 换行 -- strong加粗文本/strong em斜体文本/em3. 链接标签a hrefhttps://www.baidu.com点击跳转到百度/ahref属性指定跳转的目标网址。4. 图片标签img src图片地址 alt图片加载失败时显示的文字5. 列表标签!-- 无序列表 -- ul li苹果/li li香蕉/li li橙子/li /ul !-- 有序列表 -- ol li第一步/li li第二步/li li第三步/li /ol6. 分区标签div块级容器用于划分区域/div span行内容器用于包裹小范围内容/spandiv和span本身没有样式但它们是布局的核心工具配合 CSS 可以实现各种复杂的页面结构。五、我的第一个小实践学完基础标签后我试着写了一个简单的“个人介绍”页面!DOCTYPE html html head title我的个人介绍/title /head body h1嗨我是倪晓冉/h1 img srcavatar.jpg alt我的头像 width150 p我是网络与新媒体专业的学生热爱设计和前端开发。/p h2我的技能/h2 ul li新媒体运营/li li视频剪辑/li li正在学习前端开发/li /ul h2联系我/h2 p邮箱xxxexample.com/p a hrefhttps://github.com/xxx我的GitHub/a /body /html当在浏览器中打开这个文件看到自己写的内容变成了一个真正的网页时那种满足感真的很棒六、本周学习心得HTML 不难但细节很重要标签的嵌套、属性的写法、闭合标签的完整性都会影响页面的显示效果。多练习是王道光看不练等于没学。每学一个标签就立刻在代码里试一试加深记忆。善用浏览器开发者工具按 F12 打开开发者工具可以实时查看和修改网页的 HTML 结构是学习和调试的利器。学习资料推荐MDN Web Docs最权威的前端文档W3School中文入门教程菜鸟教程适合新手七、下周计划本周只是 HTML 的入门下周我打算继续学习CSS给网页穿上漂亮的“衣服”让页面变得更加美观。如果你也在学习前端欢迎一起交流、共同进步HTML 是前端开发的起点虽然简单但它是所有网页的基础。打好这个基础后面的学习才会更加顺畅。希望这篇博客对正在入门的你有所帮助