前端入门基础

已于 2022-04-03 20:02:53 修改
阅读量4.7k 收藏 85
点赞数 13
文章标签： css html
于 2022-04-03 19:54:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lixuanyi6181/article/details/123942985
版权

一、HTML简介

1.web标准

Web标准：网页主要由结构、表现和行为三部分组成

标准说明
结构用于对网页元素进行整理和分类，主要使用HTML
表现用于设置网页元素的版式、颜色、大小等外观样式，主要使用CSS
行为指网页模型的定义及交互的编写，主要使用JavaScript

2.什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

3.HTML基本结构

标签名定义说明
<html></html>HTML标签页面中最大的标签，即根标签
<head></head>文档头部注意在head标签中必须要设置的标签是title
<title></title>文档标题让页面拥有一个属于自己的网页标题
<body></body>文档主体元素包含文档的所有内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今天是个好日子</title>
</head>
<body>
    遇到困难睡大觉
</body>
</html>

<!DOCTYPE html> 文档类型声明标签 告诉这个页面采用html5版本来显示页面
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
<meta charset="UTF-8"> 采用UTF-8保存文字，如果不写就写乱码

二、HTML常用标签

1.HTML标签参考手册*

HTML 标签参考手册 (w3school.com.cn)

2.注释

<!-- HTML注释 -->

注释：在开始标签中有一个惊叹号，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录 HTML 文档。

CSS注释与HTML注释不同

/* CSS注释 */

3.基础标签

标签说明
< h1 > - < h6 >定义标题
< p >定义段落
< br / >换行

段落标签和换行标签：

  1. 文本会根据浏览器大小自动换行

  2. 段落和段落之间有空隙

  3. 换行标签只是简单地开始新的一行，段落之间会插入一些垂直地距离

4.文本格式化标签

标签描述
< b >定义粗体文本。
< big >定义大号字。
< em >定义着重文字。
< i >定义斜体字。
< small >定义小号字。
< strong >定义加重语气。
< sub >定义下标字。
< sup>定义上标字。
< ins >定义插入字。
< del >定义删除字。

5.盒子标签

< div >与< span >标签没有语义，相当于一个装载内容的盒子

div单独占据一行，span在一行可以有多个

标签描述
< div >定义文档中的分区或节（division/section）
< span >定义span，用来组合文档中的行内元素

6.图像标签

<img src="URL" / >

  • src：必填属性，用于指定图像文件的路径和文件名

  • alt：替换文本属性，当图片加载不出来的时候，就会出现替换文本文字

  • title：悬浮文字，鼠标放在图片上显示的文字

  • width：设置图像的宽度

  • height：设置图像的高度

  • border：设置图像的边框粗细

注：

  1. 图像的属性必须写在标签名之后

  2. 属性不分先后顺序，属性之间用空格隔开

  3. 采用键值对的形式，属性=属性值

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录文件

简单来说，就是图片相当于HTML页面的位置

在这里插入图片描述

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

如：D:\前端\图片.jpg

7.超链接标签

<a href="URL" target="_self">链接文字</a>

  • href：必需属性，指定连接的URL地址

  • target：指定打开方式，默认当前页面打开，_blank表示从新的页面打开链接资源

  • name：规定锚的名称，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

<body>
    <a href="#我的命名">点击这里进行跳转</a>
    <br>
    <br>
    <a name="我的命名">成功跳转到这里</a>
</body>

链接分类：

  1. 外部链接：从一个网站跳转到另一个网站，以http://www开头

  2. 内部链接：网站内部页面之间相互链接，如index.html，路径为同一级

  3. 空链接：#，表示链接为空

  4. 下载链接：href里面是一个文件或者压缩包

  5. 网页元素链接：在网页中的各种网页元素，如文本、图像、白哦个、音频、视频等都可以添加超链接

  6. 锚点链接：点击链接，可以快速定位到页面的某个位置，需要使用name属性

8.表格标签

表格的基本语法

 <table>
        <tr>
            <th>表头单元格内的文字</td>
        </tr>
        <tr>
           <td>普通单元格内的文字</td>
           <td>普通单元格内的文字</td>
        </tr>
    </table>
  1. <table>是定义表格的标签
  2. <tr>用于定义表格中的行
  3. <td>用于定义表格中的单元格，有几个单元格该行就有几列
  4. <th>用于定义表头单元格，常用于表格第一行，表头单元格里面的文字会加粗居中显示

合并单元格

  • 跨行合并（竖向）：rowspan=‘合并单元格的个数’ 最上侧单元格为目标单元格，写合并代码
  • 跨列合并（横向）：colspan=‘合并单元格的个数’ 最左侧单元格为目标单元格，写合并代码

9.表单标签

表单用于收集信息

在网页中，也需要跟用户进行交互，收集用户资料，这时候就需要表单

在这里插入图片描述

表单域

<form action="URL" method="提交方式" name="表单域名称">
    密码：<input type="password">
</form>

from：定义表单域，以实现用户信息的收集和传递

  • action：用于指定接受和处理数据的服务器URL地址
  • method：设置表单数据提交方式，其取值为get或post（get效率高但不安全、请求大小有限，post安全、请求大小无限但效率低）
  • name：指定表单名称，以区分同一个页面中的多个表单域

表单控件

1.input输入表单元素

<input type="" />
  • < input / >标签为单标签
  • type属性指定不同的控件类型
属性值描述
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮，清除表单中所有数据
submit定义提交按钮，把表单数据发送到服务器
text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

input其它属性

  1. name：由用户自定义，定义Input属性的名称

  2. value:规定input元素的值，传递给服务器

  3. checked：规定input元素首次加载时被选中，使用语法为checked="checked"

  4. maxlength：规定输入字段中的字符的最大长度

注：

  • name和value是每个表单元素的属性值，主要给后台人员使用

  • name表单元素的名字，要求单选框和复选框要有相同的name值，表示同一组

  • checked属性主要针对于单选按钮和复选框 一打开页面 就可以默认选中某个表单元素

label标签

使用场景：label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

核心：label标签的for属性应该与相关元素的id属性相同

2.select下拉表单元素

<select>
    <option>北京</option>
    <option>浙江</option>
</select>
  • select：定义下拉列表
  • option：定义下拉列表项

在option中定义 selected="selected" 当前选项即为默认选项

3.textarea文本域元素

使用场景：当用户输入内容较多的情况下，就不能使用文本框text标签了，常见于留言板、评论

<textarea  cols="50" rows="10"></textarea>

注：

(1)通过textarea标签可以创建多行文本输入框

(2)cols=“每行中的字符数” rows=“显示的行数” 但我们实际开发中都是用CSS来改变大小

10.列表标签

< ol >定义有序列表。
< ul >定义无序列表。
< li >定义列表项。
< dl >定义定义列表。
< dt >定义定义项目。
< dd >定义定义的描述。
<ul>
    <li>niko</li>
    <li>hunter</li>
    <li>monesy</li>
</ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

同样，有序列表也是一列项目，列表项目使用数字进行标记。

三、 CSS基础

1.什么是CSS

CSS用于页面美化、页面布局。

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中，只需一个文件就可以改变整个网站的外观

2.选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

  • 简单选择器（根据名称、id、类来选取元素）

  • 组合器选择器（根据它们之间的特定关系来选取元素）

  • 伪类选择器（根据特定状态选取元素）

  • 伪元素选择器（选取元素的一部分并设置其样式）

  • 属性选择器（根据属性或属性值来选取元素）

  • 标签选择器：选择一个标签改变属性

  • 类选择器：创建一个类的样式，开头为.类名，调用时class="类名"

<head>
   <style>
   	 .classname{
    	   color:red; 
   	 }
	</style> 
</head>

<body>
    <p class="classname" >
        今天是个好日子
    </p>
</body>
  • id选择器：通过#来定义，只能被唯一调用
  • 通配符选择器：通过*来选择所有标签，自动调用

3.CSS语法及使用

在这里插入图片描述

三种使用CSS的方法

（1）外部样式表：通过使用外部样式表，只需要一个文件就可以改变整个网站的外观。

​ 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。外部 .css 文件不应包含任何 HTML 标签。

<head>
    <link rel="stylesheet" href="name.css">
</head>

（2）内部样式表：如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 <style> 元素中进行定义。

（3）行内样式表：在标签内部设置<style>属性

<P style="color:pink">
    我想和你谈一场不分手的恋爱
</P>

4.CSS背景

background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

5.三大特性

层叠性

相同的选择器采取相同的样式造成样式冲突时，采取就近原则

继承性

子标签会继承父标签的部分样式

优先级

选择器选择器权重
继承 或者*0，0，0，0
元素选择器0，0，0，1
类选择器，伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式style=“”1，0，0，0
!important 重要的无穷大
  • 继承的权重为0

6.盒子模型

在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

7.CSS边框

border 属性允许指定元素边框的样式、宽度和颜色。

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • transparent

注释：如果未设置 border-color，则它将继承元素的颜色。

border-style 属性指定要显示的边框类型（必需属性）。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

属性描述
border简写属性，在一条声明中设置所有边框属性。
border-color简写属性，设置四条边框的颜色。
border-radius简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style简写属性，设置四条边框的样式。
border-width简写属性，设置四条边框的宽度。
border-bottom简写属性，在一条声明中设置所有下边框属性。
border-bottom-color设置下边框的颜色。
border-bottom-style设置下边框的样式。
border-bottom-width设置下边框的宽度。
border-left简写属性，在一条声明中设置所有左边框属性。
border-left-color设置左边框的颜色。
border-left-style设置左边框的样式。
border-left-width设置左边框的宽度。
border-right简写属性，在一条声明中设置所有右边框属性。
border-right-color设置右边框的颜色。
border-right-style设置右边框的样式。
border-right-width设置右边框的宽度。
border-top简写属性，在一条声明中设置所有上边框属性。
border-top-color设置上边框的颜色。
border-top-style设置上边框的样式。
border-top-width设置上边框的宽度。

8.外边距、内边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS 拥有用于为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值：

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

提示：不允许负值。

9.CSS文本

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

四、Emmet语法

1.快速生成HTML结构语法

  1. 生成标签，直接输入标签名，按tab键即可。
  2. 如果想要生成多个相同标签，加上 * 就可以。比如 div*3 就可以快速生成3个 div
  3. 如果有父子级关系，用 > 。比如 ul > li
  4. 如果有兄弟关系的标签，用 + 。比如 div + p
  5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键即可
  6. 如果生成的 div 类名是有顺序的，可以用自增符号 $

2.快速格式化代码

Vscode 快速格式化代码：shift + alt +f

也可以设置当保存页面时自动格式化代码

  1. 文件 --> 【首选项】 --> 【设置】
  2. 搜索emmet.include
  3. 在settings.json下的【用户】添加以下语句
"editor.formatOnType":true,

"editor.formatOnSave":true

五、VSCode

1.下载地址

Visual Studio Code - Code Editing. Redefined

官网下载速度很慢，所以下面放个网盘链接可以自行下载。

https://pan.baidu.com/s/1FAu_EHbHbUbCNT5hAsC-zg?pwd=6pwb

2.详细教程

VSCode使用详细教程_AC_meimei的博客-CSDN博客_vscode 使用教程

Opritalxy
关注
  • 13
    点赞
  • 踩
  • 85
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端入门基础讲解.rar
10-29
web基础知识、html、css、JavaScript、html5、css3等等
前端基本知识介绍
热门推荐
qq_52914337的博客
05-07 4万+
.前端三剑客 1.前导 （1）HTML,CSS,JS都是单独的语言； （2）HTML,CSS,JS构成前端技术基础； 2.三剑客的分工 （1）HTML：负责网页的架构； （2）CSS：负责网页的样式，美化； （3）JavaScript（JS）：负责网页的行为； 二.VsCode的介绍与配置 1.vscode的介绍 vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃
前端基础知识点收集
baidu_21162739的博客
05-30 942
一、HTML和CSS相关知识 1.1、浏览器内核 IE浏览器：trident内核 Firefox：gecko内核 Safari：webkit内核 Opera：旧：presto内核，新：Blink Chrome：Blink（基于webkit，Google和Opera共同开发） 1.2、HTML语义化 html语义化就是用正确标签干正确的事。例如：p标签（段落使用）、h1-h6（标题）、文章（article）、ul（无序列表）、li（有序列表）、header（页面头部）、footer（页面底部）
Web前端基础知识整理（一），2024年前端进阶者的新篇章
最新发布
2401_83620654的博客
03-20 352
闭包的一个作用就是可以读取函数内部的变量，另一个作用就是让闭包中的变量始终保存在内存中，闭包中的变量在函数被调用完后不会被自动清除。但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，这样 domNodes 就可以应用 Array 下的所有方法了。js中的call apply bind都是用来改变方法上下文（context），就是可以使函数可以被其他对象调用。上面的代码就改变了this指向，使得hxy对象的say方法可以被yyw调用。
前端基础知识整理
weixin_42767674的博客
05-08 5258
一、基础部分 1.Web标准的构成：主要包括结构（Strcture）、表现（Presentation）和行为（Behavior）。 结构：结构用于对网页元素进行整理和分类，html 表现：设置网页元素的版式、颜色、大小等外观样式，主要指css 行为：网页模型的定义以及交互的编写，js 二、HTML 1.HTML标签的关系有包含关系和并列关系两种 ...
web前端入门知识大全：系统路线，各类要点解析
web前端入门基础进阶教程-htmlcssjs
05-14 3738
一、WEB前端是什么？ 使用HTML/CSS/JS以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开发工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口；也可以独立工作，完成强用户交互的各类应用。 二、WEB前端可以做什么？ 最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等； 目前也是移动领域首选技术：WebApp、混编App、手机游戏、微信
谷粒商城：06. 前端开发基础知识
KaiSarH
04-20 1101
谷粒商城：06. 前端开发基础知识
前端入门 01：基础入门
Naisu的各种笔记
09-30 2273
文章目录目的开发工具基础说明简单示例相关拓展第三方库与框架打包成APP后端开发总结题外话 目的 这些年硬件性能越来越好，HTML5、CSS3、ES6等新特性被越来越广泛的支持，前端开发变得越来越火。它简单易上手、效果华丽、跨平台，用作用户界面开发是非常合适的。这篇文章将先介绍一些入门的基础内容，文中涉及的代码等只做演示使用，不用搞懂，后面会另外介绍。 开发工具 前端开发对工具要求很低，有个浏览器和记事本就可以了，当然实际上不到万不得已不推荐这么干。 先说浏览器，浏览器一般用苹果设备上自带的浏览器、chrom
前端基础全（基础+实例）
weixin_42043486的博客
10-25 7675
一、html <a></a>标签全部作用 元素种类的划分 媒体查询 H5的语义化作用及语义化标签 Web Worker和Web Socket SEO的概念及实现 HTML5的新特性 什么是DOCTYPE？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。 文档解析类型有： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式） CSS1Compa
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
小白入门前端基础笔记
06-16
前端基础技术笔记（适合小白），内容：HTML，CSS，JavaScript基础
前端入门标签基础
01-03
前端入门标签基础，强调 斜体 设置单独样式 短文本引用 长文本引用 换行  空格 分隔横线 <!--注释语句-->
前端入门基础及框架入门应用.md
01-28
前端入门基础及框架入门应用.md
从零开始学习前端开发：完整的前端自学指南
Z__7Gk的博客
06-21 2031
作为一个曾经的前端RD和TL，现在的教育工作者，我觉得我能回答这个问题。前端是一个看似入门门槛不高，但要学好很难的领域。前端的知识体系庞杂又松散，技术演进快，如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。
自学Web前端开发学习讲解 – 入门篇
m0_71327177的博客
12-16 6853
很多人都对web前端感兴趣，这一期主要聊关于如何入门学习Web前端开发的过程分享，此篇适合想入门初学者，大佬就不用看了。主要内容是以本人这一路自学web前端的一些经验和建议，学习哪些知识，以及如何正确的去学，自学过程虽然难，但是终归不负众望。
前端基础汇总
m0_55191098的博客
05-02 1770
灵活高效地实现居中、对齐等有规律的弹性布局；采用flex布局的元素称为flex容器，容器内的子元素称为项目。
web前端的html部分
weixin_46503355的博客
09-09 543
web前端基础 1.相关介绍 前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 以前会 Photoshop 和 Dreamweaver 就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为 Web 前端开发。前端技术包括 4 个部分：前端页面设计师、浏览器兼容、CSS、HTML“传统”技术与 Adobe AIR、Go
Web前端基础知识整理（一）
每天进步一点点
06-24 4万+
1. typeof返回的数据类型 typeof返回的数据类型包括undefined、string、number、boolean、symbol、Object、Function类型。 2. 检查数组的方式 isArray()方法、toString.call()、instanceof Array 3. js中的call、apply、bind方法的区别 js中的call apply bind都是用来改变...
前端入门简介
XWenXiang的博客
04-22 2197
文章目录前端简介前端技术HTMLWeb服务HTTP协议报文格式响应状态码 前端简介 前端也称web前端、web客户端是给用户展示的页面，即运行在PC端，移动端等展现给用户浏览的网页，例如我 们经常使用的淘宝页面，游戏页面等等都是通过前端设计并实现的。 前端技术 前端代码实现主要使用的是HTML、CSS和JavaScript，因此他们还有个外号“前端三剑客”，当然还有很多衍 生出来的各种技术、框架。 HTML 1. HTML(超文本标记语言)，是一种标记语言，它有很多的标签可以描述文字、图形、动画、声音
前端vue零基础入门
09-07
你好！要学习前端开发，特别是Vue框架，以下是一些入门的步骤和资源： 1. HTML和CSS基础：作为前端开发的基础，你需要熟悉HTML和CSS。可以通过W3School的教程来学习这两个技术。 2. JavaScript基础：Vue是一个基于JavaScript的框架，因此你需要了解JavaScript的基础知识。同样，W3School也提供了JavaScript的教程。 3. 学习Vue框架：一旦你掌握了HTML、CSS和JavaScript的基础知识，就可以开始学习Vue了。Vue官方文档是最好的学习资源，你可以从官方网站上查找并阅读文档。 4. 练手项目：为了加深对Vue的理解，你可以尝试做一些小型的练手项目。这可以帮助你将理论知识应用到实践中，并提升你的编码能力。 5. 社区和论坛：加入Vue开发者社区和论坛可以让你与其他开发者交流经验、解决问题。在这些平台上，你可以提问、分享和学习更多关于Vue的实践经验。 此外，还有很多在线课程和视频教程可供学习。你可以在网上搜索相关资源并选择适合自己的学习方式。记得不断练习和实践，只有通过实践才能真正掌握前端开发技术。祝你学习愉快！如果你还有其他问题，我很乐意帮助你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值