前端技术栈之html,css,js

前言:前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。简单来说，前端技术栈包括以下一些部分。

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