前言:前端位于整个项目首要要开发的内容,直接和用户打交道,实现页面的展现和交互功能,所以在分类上俗称为前端。随着软件技术的日趋成熟,前端内容也呈现爆炸式的增长,和革命性的变革,前端借鉴后端的发展经验,也开始应用分层体系,也开始术有专攻,解决一个专项的问题,也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单,不亚于后端开发,甚至难度超越了后端开发。简单来说,前端技术栈包括以下一些部分。
1、前端技术栈介绍
1.1、前端技术简介
HTML超文本标记语言实现页面展现,形成静态网页
CSS层叠样式表实现页面美化
JS javascript脚本语言实现页面前端和后端的数据交互,形成动态网页
React facebook出品前端、移动端JavaScript框架
Angular google 出品基于TypeScript的开源 Web 应用框架
Vue 国人出品,阿里收购构建用户界面的渐进式框架,自底向上开发
NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境
1.2、 前端调试工具
1.2.1、HBuilder
简介:HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby,本身主体是由Java编写。
特点:快,是HBuilder的最大优势,通过完整的语法提示和代码块模板等,大幅提升HTML、js、css的开发效率。
安装
官网:https://www.dcloud.io/hbuilderx.html
1.2.2、webstorm
下载地址; WebStorm:JetBrains 出品的智能 JavaScript IDE
说明:webstorm是和idea相似的一款开发工具,支持代码补全和调试功能
1.2.3、vscode
下载地址:Download Visual Studio Code - Mac, Linux, Windows
说明:VSCode是一款轻量且强大的开发工具,其支持各种不同类型的插件,并通过不同的插件实现代码编写、扫描,调试、提交等一系列的操作。
2. 静态页面HTML
2.1 概念
HTML(Hyper Text Markup Language)超文本标记语言,是做网站页面的最基础的开发语言,由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱,连脚本语言都算不上,是一门弱类型,主要用于网站开发。
我们可以通过w3Cschool来学习前端Html页面的搭建
地址:HTML 教程
2.2 结构
文档声明,用来声明HTML文档所遵循的HTML规范。
头部分,用来存放HTML文档的基本属性信息,比如网页标题、编码格式,这部分内容会被网页优先加载。
体部分,用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档,打开的方式一定要和保存文件时使用的编码一致,避免出现中文乱码问题。
2.3 语法
HTML标签
HTML是一门标记语言,标签分为开始标签和结束标签,如<a></a>。
如果开始和结束中间没有内容,可以合并成一个自闭标签
双标签:<h1></h1> .....<h6></h6> <span></span> <ul></ul><li></li> <ol></ol>
<p></p> <a></a> <table></table>
单标签: <img/> <input/>
HTML属性
HTML标签都可以具有属性,属性包括属性名和属性值,如果有多个属性,要以空格隔开。属性的值要用单引号或者双引号引起来。
HTML注释
格式:<!---->
空格和换行
换行:<br/>; 空格: 在HTML中,多个空格会被当成一个空格来显示。
2.4 常用标签
标题标签 <h1>..<h6>
列表标签 <ol>有序 <ul>无序
图片标签
<img />
超链接标签
<a href="#"> <a/>
Input标签
<input type="text" /> 普通文本框
<input type="password" /> 密码
<input type="radio"/>男 单选框
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox