前端入门 01：基础入门

最新推荐文章于 2024-04-01 23:54:27 发布

Naisu Xu

最新推荐文章于 2024-04-01 23:54:27 发布

阅读量2.3k

点赞数 8

分类专栏： Web与JS相关文章标签： html css javascript web 前端

本文链接：https://blog.csdn.net/Naisu_kun/article/details/107709203

版权

Web与JS相关专栏收录该内容

58 篇文章 19 订阅

订阅专栏

文章目录

目的
开发工具
基础说明
简单示例
相关拓展
总结
题外话

目的

这些年硬件性能越来越好，HTML5、CSS3、ES6等新特性被越来越广泛的支持，前端开发变得越来越火。它简单易上手、效果华丽、跨平台，用作用户界面开发是非常合适的。这篇文章将先介绍一些入门的基础内容，文中涉及的代码等只做演示使用，不用搞懂，后面会另外介绍。

开发工具

前端开发对工具要求很低，有个浏览器和记事本就可以了，当然实际上不到万不得已不推荐这么干。

先说浏览器，浏览器一般用苹果设备上自带的浏览器、chrome浏览器、新版Edge浏览器、国内带极速模式的浏览器这些比较好。除非客户有需求，一般来说就不要用IE了，微软自己都放弃了。如果只是随便玩玩浏览器这块一般装个chrome就行，如果是需要正式上线使用可能需要安装很多浏览器测试兼容性。
在这里插入图片描述

开发工具的话可以用VS Code，好用、免费：https://code.visualstudio.com/
安装完VS Code后可以在VS Code中安装一个叫Live Server的插件，方便边修改边看代码效果：
在这里插入图片描述
除了上面的演示外Live Server还有个好处是不光能用本机调试，同一局域网下的其它设备也可以用于调试，只要打开浏览器输入 http:// + 本机IP + :5500/文件名 就可以访问了，并且也是支持实时刷新的。

基础说明

简单点说前端主要就是指网页，主要就是htm、html文件这些，通常双击这些文件时会通过浏览器打开（当然实际上要复杂一些，先从简单的开始讲）。这些文件都是可以右键用记事本打开的，打开都可以看到向上面演示中的代码那样的文本。

前端开发者根据一定的规则来编写文本（文档、代码），浏览器则会用同样的规则来解读这些文档，然后根据规则进行显示，最终就是我们看到的网页了。 这里的规则是由机构制定的，比如HTML5、CSS3、ES6这些。

前端从代码构成来说分为HTML、CSS、JS（JavaScript）三个部分，分别负责一个方面的功能：

HTML用来描述网页的文档结构，用来当作网页内容的容器。代码中包含 <> 或者 <>...</> 的都是HTML代码；
CSS用来描述网页的外观特征，比如排版、外形、颜色等；
JS主要两个功能：动态的控制网页 & 实现通信交互；（JS可以直接操作html和css，功能非常强大，所以在前端学习中js需要投入更多的精力）

打个比方来说HTML、CSS、JS三块相当于下面这个图所示：
在这里插入图片描述

上面内容可以算是前端最基础的内容了，这里再介绍下前端开发中两个大坑：

规则的制定往往会先于浏览器，加之用户并不会实时更新浏览器，所以很多新的规则特性经常会无法正确呈现；
浏览器虽然会依据规则来解析呈现，但是对于规则未规定的东西各个浏览器上表现并不统一；

为了解决上的一些问题实际前端代码中往往会加入很多冗余代码。

简单示例

这里先不讲具体的语法，先放几个简单的示例看看，熟悉下：

<!DOCTYPE html>
<html>
<head>
    <!-- 当前文档为UTF-8格式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>这里是网页标题</title>
    <!-- 网页图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 用户网页的可视区域，移动端做响应式设计时需要加上这个标签 -->
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style>
        /* 清除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
	这里填充网页内容
</body>
</html>

上面是个最简单的示例，通常大部分网页都会由上面几个内容，其中“清除浏览器默认样式”方式很多，上面代码中的方式是比较常见的一种。

上面代码是最基本的结构了（当然实际上缺少其中的一些标签也没关系），我们可以在此基础上添加内容：
在这里插入图片描述
上面的示例看上去很简陋，和现在各种好看的页面相去甚远，因为没有CSS的加持，下面演示个带上CSS美化的示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 占满页面、内容以网格布局放最中间、背景色设置为e6e6e6 */
        body {
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: #e6e6e6;
        }

        /* 设置neumorphism类对象长宽、无边框、四周圆角、背景色、阴影样式 */
        .neumorphism {
            width: 200px;
            height: 100px;
            border: none;
            border-radius: 30px;
            background-color: #e6e6e6;
            box-shadow: 10px 10px 20px #c4c4c4, -10px -10px 20px #ffffff;
        }

        /* 光标在neumorphism类对象上的时候的样式 */
        .neumorphism:hover {}

        /* 设置neumorphism类对象活动时的样式，比如按钮被按下时 */
        .neumorphism:active {
            box-shadow: inset 10px 10px 20px #c4c4c4, inset -10px -10px 20px #ffffff;
        }

        /* 设置neumorphism类对象获取焦点时样式 */
        .neumorphism:focus {
            outline: none;
        }

        /* 设置neumorphism类对象内部span对象样式 */
        .neumorphism span {
            display: block;
            user-select: none;
            color: #a6a6a6;
            font-size: 32px;
            text-align: center;
            line-height: 100px;
        }

        /* 设置neumorphism类对象活动时它内部span对象样式 */
        .neumorphism:active span {
            transform: scale(0.95);
        }
    </style>
</head>

<body>
    <!-- 按钮class设置为neumorphism -->
    <button class="neumorphism">
        <span>BUTTON</span>
    </button>
</body>

</html>

在这里插入图片描述
上面是一个用CSS实现的新拟物风格的按钮。上面代码中我用了网格布局将按钮居中，但是目前Edge浏览器还不支持网格布局，所以按钮没有被居中，在Chrome浏览器中就能显示为居中。当然这些兼容性问题大多好解决，这里就先不管了。

上面都是静态的示例，下面再来个带动画效果的：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: #323232;
        }

        /* 动画 */
        @keyframes anime-rotate {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 设置loading类对象宽高和动画 */
        .loading {
            width: 200px;
            height: 200px;
            animation: anime-rotate 2s infinite 0s;
        }

        /* 设置loading类对象中圆形所占大小、半径，边框颜色、宽度、开口，不填充*/
        .loading circle {
            cx: 50%;
            cy: 50%;
            r: 40%;
            stroke: red;
            /* (r * 3.14) / 2 */
            stroke-dasharray: 62.8%;
            stroke-width: 6%;
            stroke-linecap: round;
            fill: none;
        }
    </style>
</head>

<body>
    <!-- 放置一个svg图形，class设置为loading -->
    <svg class="loading">
        <circle></circle>
    </svg>
</body>

</html>

在这里插入图片描述

总结

前端入门算是非常简单的了，前端开发就是按一定规则编写浏览器能解读的文档。
前端具体相关语法等内容比较多，但都比较简单，更多详细内容可以自行在CSDN、博客园、百度w3c、B站、慕课网等地方学习。前端的教程一抓一大把，基本上内容都差不多，重要的还是多看多练。

题外话

工作这些年一直在搞搞单片机、嵌入式这些，可以算是偏硬件开发的，但是对于客户来说他只管使用，经常没有开发界面的程序员的时候还得自己写个先对付着用。从早期的VB到后来C# WinForm再到后来C# WPF都用过，也用过官方工具开发过安卓应用。
学的杂七杂八样样都不精。其实想想一开始要是学QT就挺好，跨平台，用C/C++就可以开发。唯一的就是QT的版权问题搞不太懂。不过现在再学QT感觉倒也没太大必要，现在的Web前端足够做到我大部分的需求了，开发调试又方便，不得不说这个用起来是真的爽。

Naisu Xu

关注

8
点赞
踩
40

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端入门 01：基础入门

文章目录目的开发工具基础说明简单示例相关拓展第三方库与框架打包成APP后端开发总结题外话目的这些年硬件性能越来越好，HTML5、CSS3、ES6等新特性被越来越广泛的支持，前端开发变得越来越火。它简单易上手、效果华丽、跨平台，用作用户界面开发是非常合适的。这篇文章将先介绍一些入门的基础内容，文中涉及的代码等只做演示使用，不用搞懂，后面会另外介绍。开发工具前端开发对工具要求很低，有个浏览器和记事本就可以了，当然实际上不到万不得已不推荐这么干。先说浏览器，浏览器一般用苹果设备上自带的浏览器、chrom
复制链接

扫一扫