简短的网页入门

前言

写在前面的话

为什么写这篇文章

​ 当然是为了帮(应)助(付)社团成员们的学习啦。

分类的问题

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

前端的重要性

​ 无论是我们常用的网页还是小程序,都属于我们说的前端。前端的重要性在于除了提供我们日常所需的访问外,它在替代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!

二、学习小程序

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值