自学前端开发第一天

最新推荐文章于 2024-09-13 10:46:15 发布

吉良48

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量288

点赞数 7

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_62138501/article/details/123341883

版权

今天是自学前端开发的第一天，写这篇文章的目的主要是想记录一下并且跟大家分享一下所学的知识，希望能对像我一样刚刚接触前端的你有用。

1.前端的基础学习路线

HTML5基础→CSS3基础→H5C3提高

2.学习前端，首先我们需要知道以下几点：

1.什么是网页？

网站是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是用来构成网站的基本元素，通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.html和.htm为后缀结尾的文件，所以我们将它俗称为HTML文件。

2.什么是HTML？（Hyper Text Maniup Language)

HTML指的是超文本标记语言，它是用来描述网页的。

所谓超文本有两种含义：

a.它可以加入图片，动画，声音，多媒体等内容。（超越文本限制）

b.它还可以以一个文件转到另一个文件，与世界各地主机的文件链接。

HTML不是一种编程语言，它是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。

3.常用的浏览器

浏览器是网页运行的平台，常用的浏览器有IE,火狐（Firefox），谷歌（Chrome），Safar，Opera等，平时称五大浏览器。

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

IE的内核为trident，safari的内核为webkit，chrome和opera的内核为Blink。

目前国内一般浏览器都会采用webkit或Blink内核，例如360，UC，QQ，搜狗等。

4.web标准的三大组成部分是什么？

三大组成部分为结构（Structure）,表现（Presentation）,行为（Behavior)。

结构:结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。

表现：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS。（表现图片之类的）

行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Java Script。（例如切换图片）

切记！写的网页要遵循web标准。

web标准是由W3C组织和其他标准组织制定的一系列标准的集合，W3C（万维网联盟）是国际著名的标准化组织。

3.HTML标签

编写HTML标签：新建一个txt文本，在里面我们就可以写我们的HTML标签啦！

HTML的语法规范

1.基本语法概念

a.所有的标签都必须在一对<>里

b.基本上我们的标签都是成对的，例如<html></html>（双标签），第一个是开始标签，第二个是结束标签，区别在于结束标签有个/，有些特殊的标签不需要结束标签，例如这个<br />（单标签）。

2.标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：

<head>
     <title></title>
</head>

并列关系：

<head></head>
<body></body>

标签分为单标签和双标签，双标签又分为包含关系和并列关系。

4.HTML的基本结构标签

每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写。

<html></html> HTML标签，页面中最大的标签，我们称之为根标签。

<head></head> 文档的头部，注意在head标签中我们必须要设置的标签是title。

<title></title> 文档的标题，让页面拥有一个属于自己的网页标题。

<body></body> 文档的主体，元素包含文档的所以内容，页面内容基本是放到body里的。

<html>
     <head>
          <title>内容</title>
     </head>
     <body>
           内容
     </body>
</html>

记！HTML文档后缀必须为.html或.htm。

5.开发工具

可以用记事本，但记事本又很多不方便，所以就有了开发工具，我用的是Visual Studio Code。

Visual Studio Code的使用：

点击文件，点击新建文件，后再点击文件，点击保存（要记得先保存为html文件），保持好后就可以进行编写了。

切记！一定要保存为.html为后缀的文件。

Visual Studio Code插件的使用：

如图，点击最左侧第五个就可以搜索并加入插件，接下来给大家介绍几个常用的插件：

a.chinese （simplified）language pack for VS Code中文（简体）语言包

b.Open in Browser 右键选择浏览器打开html文件

c.JS-CSS-HTML Formatter 每次保持都会自动格式化js css和html代码

d.CSS peek 追踪至样式

好了，今天就到这里了，以上若有误，还请大佬多多指教，指出错误，谢谢大家！