简短的网页入门

最新推荐文章于 2025-01-21 09:36:24 发布

IOT_player

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量595

点赞数

分类专栏：前端文章标签：网页入门

本文链接：https://blog.youkuaiyun.com/IOT_player/article/details/102764925

版权

前端专栏收录该内容

4 篇文章

订阅专栏

前言

写在前面的话

为什么写这篇文章

当然是为了帮（应）助（付）社团成员们的学习啦。

分类的问题

目前我们常见的开发岗位有前端，后端，全栈，移动端开发，这其中又有很多细分，特别在大企业，职能划分与交融非常明显，比如前端中：动画，交互，性能，原型的架设都需要有人做。另外还有很多的开发岗位，但是我阅历不够，接触的不是很多。今天我讲解的网页入门，即前端的一个方向。

前端的重要性

无论是我们常用的网页还是小程序，都属于我们说的前端。前端的重要性在于除了提供我们日常所需的访问外，它在替代app中起到了重要的作用。以我们现在天天刷的天猫盖楼为例，假设我们要用原生的方式实现功能，我们需要在软件中加入不少的功能，这不是代码量的问题，这更加涉及到了软件的耦合性问题。采用web/小程序配合原生，可以大幅度降低软件系统的耦合性，既解决了技术上可能发生的问题，也兼顾了用户的体验。

讲解内容概览

可能有不少人已经了解或者接触过前端的开发了。但是为了考虑到一部分同学，这是一个入门讲解，文章的主要内容都是基础，后续少量内容会涉及到进阶以及发展的方向。

你需要掌握的基础

三大基本语言

一、HTML

html全称为 HyperText Markup Language ，超文本标记语言。

在html中，我们最常用的东西叫做标签，先来看一个代码示范：

<div>
    hello html world!
</div>

在这个示范中，我们可以见到<div>和</div>，这两个就是我们所说的标签，往往他们是成对出现的，当然也有单独出现的情况：

<img id="" class="" src="">

在这个示范中，我用了一个叫<img>的标签，它是用来显示图片的一个标签，src为图片的路径，<img>标签在使用中便是单独出现的，它不需要闭合。

二、CSS

css全称为 Cascading Style Sheets ，层叠样式表。

html可以说是网页的骨架，那么css就是网页的血肉，让网页不再那么丑陋。

比如你想实现一个导航栏，即一直在顶部固定的那个栏目，如果你只写一个<div>，随着你页面的滚动，它消失在了屏幕中。此时，你需要将导航栏固定在屏幕上：

<style>
    #header {
        position: fixed;
        top: 0;
        heigth: 50px;
        width: 100%;
        background-color: blue;
    }
</style>

<body>
    <div id="header">
    	导航栏
	</div>
</body>

css应用在html中有三种方式：id、class、内嵌。这三种方式具体如何实现，希望不了解的同学可以自己去查询一下。

三、JavaScript

JavaScript是一种脚本语言（以下简称js），它和Java没一点关系。

web有了骨肉，配上神经，它就能动了，JavaScript就起到这个作用，它可以负责逻辑的处理，数据的交互等等，缺少js的网页，就是没有灵魂的网页。

比如你有个需求，你要在屏幕第一屏放一个图片，铺满整个浏览器的可视区域。不同电脑的分辨率不同，不同浏览器的windowsheader不同，不同用户的放大倍数不同，于是我们要进行相应的处理。最简单的方法就是获取屏幕的高度并设置图片的height：

// 以jQuery为示范
$(document).ready(function () {
    var bodyHeigh = window.innerHeight;
    $('#img').css('height', bodyHeigh);
})

为什么不用heigth: 100%呢，因为这样只能保证图片的比例不变化，但是不能保证屏幕的覆盖。在实际的生产环境中，这个需求的解决方案一般是采用微缩加裁剪的方式实现。

js有原生，也有框架，目前企业常用的有React，Vue。不仅用在前端，后端也可以使用js，比如Node.js，特别是React，还有React Native。具体的文档大家可以看官方文档或者菜鸟教程，都有详细的中文文档。

框架

一、ui框架

如Bootstrap，Weui，还有国人开发的Layui。

二、js框架

如React，用户构建用户界面的js库，Vue，同样所构造用户界面的js库。他们的设计思想和jQuery差距很大，可以更加高效的构建用户组件，实现网页的交互功能。

深入学习

推荐方向

一、学习js

推荐大家先从原生入手了解js的基础语法，然后看看jQuery。最后，早React早超生，不过我不走前端，没系统学过React，这是一个携程学长跟我说的。为什么进阶看js？因为html和css实在是太基础了（相对而言），当然，写网页写的多的老6往往可以写出整洁的DOM和风骚的CSSOM。我们来用React在网页上打出hello world。首先打开网页CodeSandbox，点击右上角Create Sandbox，选择React，然后将以下代码覆盖原来的index.js。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

这样，在网页的右边就会出现一个大大的Hello World！

二、学习小程序

目前小程序也非常火热，特别是微信和支付宝小程序。但是作为个人开发者，微信小程序是最适合我们开发的平台。微信小程序有着一套非常详细的开发文档，详细内容大家可以点击微信开发文档进行查看。小程序开发整体上和网页开发类似，配合完整的文档，可以快速出货。更高级的方向就是小程序的性能优化和代码的健壮性了，这方面还是很困难的。