学习前端第一关

最新推荐文章于 2024-11-02 15:22:06 发布
最新推荐文章于 2024-11-02 15:22:06 发布
阅读量558 收藏 10
点赞数 22
文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53321320/article/details/124649025
版权

作者：周棋洛

文章目录

前言

网站并不是多么复杂的技术，今天这篇文章20分种带你从0到1写一个自己的网页

超文本标记语言？

超文本标记语言（英語：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

为什么不叫文本标记语言，就是通过一些规定好的标签来编写代码，构建网页，而超文本标记语言就是在前者的基础上，新增了媒体元素的使用，比如，有了图片，视频，音频，等等，不在是简简单单的文字了

编辑器推荐

工欲善其事必先利其器，这里优先推荐的是 微软的 VsCode，因为真的很棒，关键是免费开源

傻瓜式下载安装就好了，如果说有什么要注意的，大概就是，如果你是windows，注意一下操作系统，下载相应版本的，安装时，默认会装在c盘，如果c盘不是很充裕的小伙伴就需要注意以下安装路径的问题了，OK

这里小周就认为你已经安装好了，来，下面跟着小周魔鬼的步伐，点击插件，搜索相应插件进行安装
​​在这里插入图片描述
1.打开自动保存功能
在这里插入图片描述

2.插件安装

中文汉化插件
在这里插入图片描述

运行html网页插件（必装）
在这里插入图片描述
简单使用说明
在这里插入图片描述

手刃一个网页，Hello World！

编写相应代码
在这里插入图片描述
在浏览器中打开
在这里插入图片描述
打开后，会看到Hello World已经显示出来了，是不是很简单啊
在这里插入图片描述

网页骨架讲解

<!DOCTYPE html> 此标记定义文档类型和HTML版本

<html> 该标签包含完整的HTML文档，主要由 … 表示的头部和 … 标记表示正文组成

<head> 此标记代表文档的标题，该标题可以保留其他HTML标记，例如<title>，<link>等

<title> <head>标记内使用<title>标记来提及文档标题

<body> 此标记表示文档的正文，其中保留了其他HTML标记

标签学习

HTML标题

HTML标题有六个级别，从大到小依次是，重要的信息可以使用h1标签语义明确
<h1>，<h2>，<h3>，<h4>，<h5>和<h6>
在这里插入图片描述

HTML段落

<p>标签提供了一种将文本组织为不同段落的方法， 文本的每个段落都应位于开始<p>和结束</p>标签之间
在这里插入图片描述

HTML换行

每当您使用<br />换行元素时，其后的所有内容将从下一行开始。
此标签是一个自闭和标签，因为它们之间没有任何内容在这里插入图片描述

HTML居中

使用<center>标签将任何内容放在页面或任何表格单元格的中心在这里插入图片描述

HTML水平线

一条水平线在这里插入图片描述

HTML格式化

如果你要在网页中插入代码，可以使用格式化标签，这样就可以保留原有的空格换行等
在这里插入图片描述

HTML注释

<!-- 注释 --> 注释里的内容不会解析执行
在这里插入图片描述

HTML链接

网页可以包含各种链接，这些链接可直接将您带到其他页面，甚至是给定页面的特定部分，这些链接称为超链接 <a href="XXX">超链接<a/>
在这里插入图片描述

王子周棋洛
关注
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9332
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
前端第一阶段学习-HTML
08-08
总的来说，学习HTML是前端开发的第一步，掌握这些基础概念和标签将为你后续的学习打下坚实基础。随着对HTML的理解加深，你还将接触到更复杂的布局技术、响应式设计以及与CSS和JavaScript的交互，逐步成长为一名熟练...
前端体系介绍（一）
h123372868的博客
10-08 1404
随着互联网技术的飞速发展，前端开发已经成为技术体系中不可或缺的一部分。无论是构建网站、Web应用，还是如今流行的移动应用，都离不开前端技术的支持。本文将从前端的基本概念、发展历程、主流技术栈、工具链、以及未来趋势等方面详细介绍现代前端体系。Web 组件是一组基于 Web 标准的技术，用于创建可重用的自定义元素。它允许开发者封装 HTML、CSS 和 JavaScript，使其可以在不同项目中反复使用，而不会受到外部环境的干扰。
前端学习一篇就够（基础篇）
m0_61930316的博客
06-27 1529
前端环境搭建、插件安装初识HTMLHTML文档结构HTML是HyperText Markup Language(超⽂本标记语⾔)简易性：超⽂本标记语⾔版本升级采⽤超集⽅式，从⽽更加灵活⽅便。可扩展性：超⽂本标记语⾔的⼴泛应⽤带来了加强功能，增加标识符等要求，超⽂本标记语⾔采取⼦类 元素的⽅式，为系统扩展带来保证。平台⽆关性：虽然个⼈计算机⼤⾏其道，但使⽤MAC等其他机器的⼤有⼈在，超⽂本标记语⾔可以使⽤在⼴泛的平台上，这也是万维⽹（WWW）盛⾏的另⼀个原因。
前端导出技术学习指南
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-04 3万+
前端导出是一项非常实用的技术，它可以帮助用户更方便地处理和使用数据。通过掌握CSV、PDF和图片导出等关键技术，并结合实际业务需求，我们可以开发出满足用户需求的导出功能。
列一份前端知识架构图
qq_37756660的博客
05-28 1247
今天带你一起划分了前端的知识内容，前端的基础知识分成 JavaScript、HTML、CSS 以及浏览器四大重点模块，每个模块也分别有自己的技术重点。你可以在框架中，挑选你最需要的前端知识，按需学习。当然，这篇文章最重要的是，希望能帮你建立一个理解前端的全景图。这样，任何时候，你都能够体系地思考问题，分析问题。本文是一份由winter分享的前端知识架构图，旨在帮助读者建立前端知识框架。文章分为JavaScript、HTML和CSS、浏览器的实现原理和API、前端工程实践四个部分。
web前端学习（三十三）——JavaScript变量、数据类型的相关设置
★★光亭★★
02-13 8084
web前端学习（三十三）——JavaScript变量、数据类型的相关设置
前端有必要学习算法吗 前端如何学习算法 前端算法
SSS01233210的博客
10-31 1743
前端算法 前端如何学习算法 前端有必要学习算法吗
前端开发规范，你真的了解吗？一起来学习一下前端开发规范，让你的代码高级起来！
海贼王某人的博客
03-01 2903
前端开发规范，你真的了解吗？一起来学习一下前端开发规范，让你的代码高级起来！动宾短语方法以get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）事件方法（type-change、username-input）例如this.$on(‘item-click’,this.handleItemClick)
微前端实战：打造高效、灵活的前端应用架构
程序边界
12-03 5791
微前端（Micro Frontends）是一种将大型单页应用拆分为多个独立的小型应用的技术方案。每个小型应用都可以独立开发、部署和运行，它们之间通过共享公共资源（如样式、组件等）来实现数据和状态的同步。微前端的核心思想是将前端应用分解为一组可独立维护、独立部署的子应用，从而提高开发效率、降低维护成本，同时保证系统的灵活性和可扩展性。将多个独立的应用程序组合成一个统一的前端应用程序将基于不同框架的代码组合在一起浏览器端组合、服务端组合以及路由高效的开发团队实践和项目工作流。
5个有效学习前端的技巧
web前端开发
04-27 2093
英文 |https://betterprogramming.pub/5-tips-to-learn-frontend-effectively-7f17afec9004翻译 |小爱学习前...
前端主流框架vue学习笔记第一篇
08-29
Vue.js 是一款流行的前端框架，它吸取了其他框架如 Knockout、Angular 和 React 的优点，提供了多种编程模式，并且有着极低的入门门槛。在学习 Vue 的过程中，我们可以从简单的 "Hello World" 开始。 首先，引入 ...
学习前端的第三天复习.rar
10-13
在学习前端开发的过程中，第三天的复习至关重要，因为这标志着你已经初步接触并理解了一些基础概念。前端开发是构建互联网应用程序的重要部分，它涉及到用户在浏览器中直接可见和交互的所有内容。下面，我们将深入...
黑马前端第一天资料
01-02
"黑马前端第一天资料"提供的是入门级别的学习资源，适合初学者系统地了解和掌握前端开发的基础知识。以下将详细阐述HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）这两个核心概念。 HTML是网页...
前端学习手册
10-03
- 阅读官方文档：每个技术都有详细的官方文档，是学习的第一手资料。 - 在线教程和课程：如MDN Web Docs、W3Schools等提供丰富的学习资源。 - 实战项目：参与开源项目或自己创建小型应用，将理论知识付诸实践。 - ...
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 747
学习UART串口的简明学习笔记
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 658
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
点云学习笔记3——读取点云文件、进行统计滤波/直通滤波后可视化
qq_64095888的博客
10-29 201
【代码】点云学习笔记3——读取点云文件、进行统计滤波后可视化。
嵌入式通信协议：MODBUS简明学习笔记
最新发布
weixin_73867577的博客
11-02 208
学习Modbus的简明学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王子周棋洛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值