从零开始学WEB前端——HTML实战练习

最新推荐文章于 2024-04-26 23:07:18 发布
最新推荐文章于 2024-04-26 23:07:18 发布
阅读量865 收藏 21
点赞数 31
分类专栏： 程序员 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76267999/article/details/137131645
版权

📓项目介绍

先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员🙇。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员😂。

该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才放上去的。每次的代码和笔记我都放在了开源仓库里，有需要的同学请不要吝啬给我一个star。如果觉得本文写的不错的话记得点赞+关注，你们的支持是我坚持下去的动力😃。

纸上得来终觉浅，绝知此事要躬行。 ——陆游《冬夜读书示子聿》

语雀地址：https://www.yuque.com/beilayanmen

Github地址：https://github.com/SuZui-cn/my-web

Gitee地址：https://gitee.com/north_gate/my-web

个人博客地址：https://foollyone.cn/

⌨本文知识点

  • VSCode基本介绍

  • 前端工具介绍

  • VSCode的使用

  • HTML常用标签

  • 基本文档标签

  • 基本标签

  • 文本格式化

  • 链接

  • 图片

  • 无序列表

  • 有序列表

  • 定义列表

  • 表格

  • 框架

  • 表单

  • HTML标签练习

  • 标签练习

  • 基本标签实战

  • 列表标签练习

  • 图片标签练习

  • 表格标签练习

  • 表单标签练习

  • 善于实用搜索引擎

在上一篇文章中，我们主要是针对于HTML的基础理论进行了探讨。但是学习一门技术不能总停留在理论，本文将会和大家一起来对HTML进行练习。

实践是检验真理的唯一标准。

VSCode基本介绍

前端工具介绍

作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。

  • VSCode：插件众多，拓展性强；适用于绝大部分前端开发

  • Sublime Text：界面简洁，轻量级启动快速。

  • HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。

  • WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。

  • Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。

  • 记事本：大佬都是用记事本写代码的。【手动狗头】

在以前编写网页大多数是使用的dreamweaver（DW），DW对于新手而言很友好，可以用可视化的编辑方式编写网页，但是DW自己生成的样式代码略微复杂，后期的维护难度很大。随着时代的进步，开发工具也在逐步的更新换代，DW逐渐退出前端开发的视野中。这里推荐大家使用VSCode这款神器。（想要编写微信小程序的同学可以试着使用HBuilder）。

VSCode的使用

自动保存

在编写完代码之后需要保存再打开浏览器才能看到界面的效果，作者在初学网页的时候经常忘记保存代码，导致页面一直不出现效果。所以推荐大家开启vscode里的自动保存。

左上角：文件->勾选自动保存。

image-20220209210119608

创建文件/文件夹

在VSCode中除了在之前介绍的可以直接将文件/文件夹直接拖进vscode以外，还可以快捷的创建文件/文件夹。只需要选中要创建文件/文件夹的父级目录再点击按钮就可以快捷创建。

具体操作如下图：

image-20220209210629269

插件推荐

这里推荐几款目前阶段适合大家的插件。插件这部分我不会一次推荐很多，只会分阶段的推荐，并且讲解每个插件的具体作用。以防大家装了一堆插件，结果连具体插件是做什么的都不知道。（也欢迎大家多多关注作者的干货推荐专栏，里面会推荐很多实用的插件）

Auto Close Tag

自动闭合标签。装上这款插件我们在写标签的时候只需要输入/就可以快速生成闭合标签。

image-20220209211211068

Auto Rename Tag

自动重命名标签。这个插件可以让我们在修改标签时自动帮我们修改另一个。比如 在修改<div>标签为<span>标签的时候，它会自动帮我们把</div>标签替换为</span>标签。

image-20220209211340002

open in browser

快速在浏览器打开，装上这个插件可以让我们在vscode界面中快速打开浏览器

pass：该插件作者在初学的时候出现过快捷键不能正常打开浏览器的情况，解决办法是降低该插件的版本即可。

image-20220209212227345

使用方式：

  • 右键选择

  • 快捷键：Alt + b

image-20220209211720980

image-20220209211958895

Live Server

实时预览，这款插件可以在本地运行一个微型服务器，让我们可以实时预览编辑的效果。（在修改召唤神龙那篇文章中就是用该插件和谷歌的另一个路径映射的插件联动，从而达到修改游戏的效果。有兴趣的同学可以去看看我写的修改召唤神龙的文章）

image-20220209212319330

使用方式：

安装好该插件之后在vscode右下角会出现一个’Go Live’，点击即可。

image-20220209212631953

Path Intellisense

路径联想，在我们引入图片或者其他文件的时候这款软件会为我们提示路径。

image-20220209212732609

HTML常用标签介绍

在网页中，每个html标签被称为元素，每个元素都有对应的属性（关于属性，会在下一篇CSS介绍的文章中详细讲解）

HTML标签的本质是为文本添加语义！

在学习编程的时候会涉及大量的概念，以及一些常用的代码片段。所以建议大家养成记笔记的习惯。

拓展内容

建议大家自主学习gitpage搭建个人博客（后期可能会出教程，等不了的同学可以自行百度，关键词：gitpage搭建个人博客）

同时建议大家学习markdown语法，并选择一款顺手的markdown编辑器。作者使用的是typroa 0.9版本（因为该软件1.0之后的版本收费）

typroa历史版本下载：https://typora.io/releases/all

既然安装了typroa可以自主学习一下图床的概念，再将Typroa和PicGo联动起来

世上无难事，只要肯登攀。 —— 毛泽东《水调歌头·重上井冈山》

pass:以下标签取自菜鸟教程

基本文档标签

文档标题

可见文本…

网页基础的结构，主要需要注意层级结构，以及外部文件是在<head>标签中引入（js文件可以在body中引入）

基本标签

一级标题

二级标题

三级标题

. . .
. . .
六级标题

文本

‘盒子’

这是一个段落。


（换行）

（水平线）

大家在这里可以试试<span>标签和<div>标签有什么区别

提示：行级元素，块级元素（后续DIV+CSS布局章节会详细讲解）

文本格式化

粗体文本

计算机代码

强调文本

斜体文本

键盘输入

预格式化文本

更小的文本

重要的文本

（缩写）

（联系信息）

（文字方向）

（从另一个源引用的部分）

（工作的名称）

（删除的文本）

（插入的文本）

（下标文本）

（上标文本）

链接

普通的链接：链接文本

图像链接： 替换文本

邮件链接： 发送e-mail

书签：

提示部分

跳到提示部分

注意a标签设置跳转的属性是href可不是src。

图片

替换文本

图片这里的话需要注意一点就是文件的引用路径，相对路径和绝对路径是不同的

相对路径和绝对路径的区别：https://blog.csdn.net/qq_34107571/article/details/82834825

./是当前文件夹

…/是上一级文件夹

…/…/是上上一级文件夹

在目前的阶段，图片显示不出绝大部分是因为路径的问题，相对路径需要结合之前推荐的Path Intellisense 路径联想插件多多练习。

pass：使用绝对路径的时候将代码发送给别人，图片会因为路径位置没有对应图片而显示不出来，所以需要注意。其他外部文件（列如CSS、JS文件）在使用绝对路径的时候也会出现这种问题。这点需要注意。

无序列表

    • 项目
    • 项目

    • 有序列表

      1. 第一项
      2. 第二项

      3. 定义列表

        项目 1
        描述项目 1
        项目 2
        描述项目 2

        表格

        表格标题 表格标题 表格数据 表格数据

        自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

        深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

        因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

        img

        既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

        由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

        如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

        最后

        今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

        可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

        减轻大家的负担。**

        [外链图片转存中…(img-NArjKF3G-1711673502695)]

        [外链图片转存中…(img-NLNwoC5O-1711673502695)]

        既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

        [外链图片转存中…(img-Fsd2ASYa-1711673502695)]

        由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

        如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

        最后

        今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

        可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

        资料领取方式：戳这里前往获取

      2301_76267999
      关注
      • 31
        点赞
      • 踩
      • 21
        收藏
        觉得还不错? 一键收藏
      • 0
        评论
      专栏目录
      Web前端入门：从零开始做网站-网盘链接提取码下载 .txt
      02-06
      对小白十分友好，完成所有课堂练习就可以做出自己的作品，补充数据库、网络营销、开源项目等知识！ 视频大小：3.4G
      HTML【第三节：表格/表单练习】
      尽欢的博客
      03-28 418
      表格系列标签练习、表单系列标签练习
      从零开始学WEB前端——JavaScript基础介绍
      su_zui的博客
      02-24 1163
      JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
      html考试编程题
      最新发布
      yanzzyyds的博客
      04-26 219
      【代码】html考试编程题。
      HTML-简单练习
      crraxx的博客
      02-24 7855
      练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
      web前端（HTML表单加强练习作业）
      miss_copper的博客
      07-23 131
      【代码】web前端（HTML表单加强练习作业）
      HTML练习题：
      qq_50692350的博客
      09-21 356
      HTML
      HTML面试题：50道含答案和代码示例的练习题
      三拾的博客
      05-31 4916
      答案：meta标签用于向浏览器提供网页的元数据，包括网页的描述、关键词和编码等信息。答案：块级元素是独立的元素，会独占一行，并且可以设置宽度、高度、边距和填充等属性。答案：表单中的输入框可以是文本输入框、密码输入框、单选框、复选框、下拉列表框等。行内元素是内联的元素，不会独占一行，并且只能设置字体、颜色、背景等属性。答案：iframe标签用于在网页中嵌入另一个网页，创建一个内嵌框架。答案：属性是HTML标签的特性，用于描述标签的行为和外观。答案：标签是HTML中的元素，用于描述网页的结构和内容。
      Web前端学习仿拼多多软件首页界面模拟练习
      02-22
      Web前端设计——学习仿拼多多软件模拟练习（首页） 作者声明：该项目只是学习模拟软件前端的界面，不允许用于商业行为，否则后果自负！ 代码只是实现首页的界面（因为只是学习分享，所以已经多处避免雷同）
      《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
      06-10
      《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
      web前端——JavaScript基础
      03-06
      思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
      web前端基础知识——HTML常用标签篇
      01-08
      html文档也叫web页面 二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 ...
      html的简单例子练习（6个）
      小黄呀呀呀的博客
      04-19 6314
      1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
      HTML练习合集
      Sladecousin的博客
      04-04 796
      【代码】HTML练习合集。
      html表单专项练习
      墨城烟柳ベ旧人殇的博客
      04-04 707
      本人主要介绍用html完成表单的建立。
      纯html的form表单实操练习
      m0_64336780的博客
      04-05 9171
      纯html的form表单实操练习
      html表单+表格的练习
      m0_57519583的博客
      02-27 286
      html表单+表格的小练习
      html练习
      apple_73086122的博客
      11-25 457
      html案例
      【前端】html 0基础练习题
      weixin_52078305的博客
      05-21 1514
      1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。 要求： （1）大标题使用h3标签； （2）问卷调查题目使用h4标签 （3）前2个问题选项使用有序列表； （4）最后一个问题选项使用无序列表 添加链接描述 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习题</title> </head> <bod.
      HTML5从零到实战：快速掌握前端开发核心技术
      "HTML5从零到实战"是一份全面的前端开发教程，由李杰主讲，旨在帮助学员从零基础深入理解和掌握HTML5技术。课程结构严谨，覆盖了HTML5在现代Web开发中的核心应用与技术。 第一部分，课程大纲从HTML5的基础知识开始...

      “相关推荐”对你有帮助么？

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

      当前余额3.43元 前往充值 >
      需支付：10.00元
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付元
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明：

      1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

      余额充值