前端技术栈之html,css,js
目录
1、前端技术栈介绍
1.1、前端技术简介
1.2、 前端调试工具
1.2.1、HBuilder
1.2.2、webstorm
1.2.3、vscode
2. 静态页面HTML
2.1 概念
2.2 结构
2.3 语法
2.4 常用标签
3、 CSS简述
3.1、 CSS简介
3.2、 CSS的用法
3.3、 选择器
3.4、盒子模型
4、javascript语法概述
4.1 静态网页和动态网页
4.2 javascript简介
4.2.1.基本特性
4.2.2 、js引入方式
4.3 js语法
注释
数据类型
JS的变量
JS的运算符
JS语句
JS数组
JS函数
JS对象
5 Ajax 异步访问技术
5.1 json概念
5.2 Ajax概述
简介：
原理：
5.3 入门案例
5.3.1、创建表单，设置参数
5.3.2、.创建ajax方法，引用到技术栈中
5.3.3、访问测试
前言:前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。简单来说，前端技术栈包括以下一些部分。
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" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
表格标签
<table></table> <tr></tr> 行 <td></td>列
表单标签
<form></form>
其他标签
<p> 段落标签 <span></sapn> 行级元素
3、 CSS简述
3.1、 CSS简介
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。
3.2、 CSS的用法
body中:
<tr align="center"><!-- css方式1 --><td >你好1</td><td >你好2</td></tr><tr style="text-align:center;"><!-- css方式2 --><td >你好3</td><td >你好4</td></tr>head中:
<!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性--><link href="demo.css" rel="stylesheet"/><!-- css方式3 --><style>td{text-align: center;}</style>3.3、 选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
class选择器
说明：class选择器是较为常用的选择器
<p class="a">123</p><style> .a{background-color: cornflowerblue; /*背景颜色*/color:red; /*字体颜色*/}
</style>id选择器
说明：id选择器是适用于特殊单一选项的页面渲染
<p id="p1">123</p>
/* 使用id选中元素 */
<style>
#p1{text-indent: 200px; /* 首行缩进*/
}
</style>分组选择器
说明：将多个选择器选中的元素组合在一起，统一设置样式
/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{background-color: #000000;
}属性选择器
说明：选中指定的元素，设置样式
<style type="text/css">/* 选中指定的元素 */input[type='text']{background-color: #6495ED;}
</style>3.4、盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
相关参数：
margin（外边距）
border（边框）
padding（内边距）
4、javascript语法概述
4.1 静态网页和动态网页
传统的html网页是通过html编写的，我们可以使用html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，使用ss样式表实现了页面的美化，这些技术实现了静态网页。
再加入javascript后,网页就能实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。
4.2 javascript简介
JavaScript 是 web 前端开发者必学的三种语言之一：
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
4.2.1.基本特性
名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
特点
(1)、JS是一门直译式的语言，直接执行的就是源代码.是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)、JS是一门弱类型的语言,没有严格的数据类型.
优势
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)只要有浏览器的地方都能执行JS
4.2.2 、js引入方式
通过script标签引入JS代码
<head><meta charset="utf-8"/><script>/* JS代码 */function fn(){alert("JS的第1种引入方式");}</script>
</head>
<body><div id="div1" onclick="fn();">Hello JavaScript</div>
</body>通过script标签引入外部的JS文件
<head><meta charset="utf-8"/><script src="1.js"> </script>
</head>
<body><div id="div1" onclick="fn();">Hello JavaScript</div>
</body>注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：
4.3 js语法
注释
单行注释： //注释内容
多行注释： /* 注释内容 */
数据类型
基本数据类型
包括:number/string/boolean/null/undefined
复杂数据类型
函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
JS的变量
js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
JS的运算符
JS中的运算符和Java中的运算符大致相同
不同之处在于！=和==在js中表示为！==和===，以及类型运算符的不同
JS语句
JS中的语句和Java中的语句用法也大致相同
if…else语句
if(a == true && b == true ){alter("wo是第一个判断语句的内容")
}else if（a != true && b == true ）{alter("wo是第二个判断语句的内容")
}else if（a != true && b != true）{alter("wo是第三个判断语句的内容")
}switch…case语句
Switch 循环语句
for (var j = 0; j < panel.Size(); j++) {alter("我是第"+j+"次循环")；
}JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function
方式一：通过function关键字声明函数
方式二：通过函数直接量声明函数
JS对象
利用function关键字声明对象，用new关键字创建对象。
内置对象
自定义对象
DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。
js对象总结
获取页面元素的4种方式:
getElementsByTagName 标签名称，得到数组
getElementsByName name属性，得到数组
getElementsByClassName class属性，得到数组
getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。
5 Ajax 异步访问技术
5.1 json概念
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 对象简谱) 是一种轻量级的数据交换格式。它基ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言，它是xml的终结者，也成为了网页主流开发方式（ajax异步请求，json返回）。
作用：JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
语法：
JSON数据: var a =' "firstName" : "John" '
JSON 对象: var a = '{ "firstName":"John" , "lastName":"Doe" }'
JSON 数组: var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName"}}5.2 Ajax概述
简介：
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
原理：
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
5.3 入门案例
5.3.1、创建表单，设置参数
<form method="get"><table align="center" border="2px" bgcolor="#aaaa7f"><tr><td><h3 align="center"style="color: #7FFFD4;;">学生信息管理系统MIS</h3></td></tr><tr><td>姓名:</td></tr><tr><td><input type="text" placeholder="请输入姓名" name="name"></td></tr><tr><td>年龄:</td></tr><tr><td><input type="text" placeholder="请输入年龄" name="age"></td></tr><tr><td>性别:(单选框)<input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="0"/>女</td></tr><tr><td>爱好:(多选)<input type="checkbox" name="hobby" value="1"/>乒乓球<input type="checkbox" name="hobby" value="2"checked="checked"/>爬山input type="checkbox" name="hobby" value="3"/>唱歌</td></tr><tr><td>学历:(下拉框)<select name="class"><option value="1">大学本科</option><option value="4">专科</option><option value="2">硕士</option><option value="3">高中以下</option></select></td></tr><tr><td>入学日期:</td></tr><tr><td><input type="date" name="resigndata"></td></tr><tr><td align="center"><button id=b1 type="submit" value="提交" v-on:click.prevent="submi"> 提交</button><button id=b2 type="reset" value="取消">取消</button> </td></tr></table>
</form>5.3.2、.创建ajax方法，引用到技术栈中
<script>function change(){// 1. 创建xhr对象,用于同幕后服务器交换数据var xhr = new XMLHttpRequest();// 2. 定义当 readyState 属性发生变化时被调用的函数xhr.onreadystatechange=function(){//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪if(this.status==200 && this.readyState==4){// document.getElementById("d1").innerHTML="hi ajax";//5.以字符串返回响应数据,并展示// document.getElementById("d1").innerHTML=this.responseText;console.log(this.responseText);}}//3.规定请求的类型(请求方式,文件位置,异步)//xhr.open('get','1.json',true); //请求本地的json文件//xhr.open('get','http://localhost:8080/car/get',true); //请求本地的服务器程序// xhr.send(); //发送get请求xhr.open('post','http://localhost:8080/stu/add',true);//4.xhr将请求发送到服务器var formdata=new FormData( document.getElementById("form") );xhr.send(formdata); //发送post请求}</script>
5.3.3、访问测试
前端技术栈之html,css,js相关推荐
- 2021-11-05前端技术栈
前端技术栈 一.Node.js 二.Webpack 三.Koa2 五.MongoDB 五.Vue 全家桶 Vue: Vuex: Vue Router: Vue CLI: Vant: 目前前端主流技术栈 ...
- 前端技术栈-----WEB
目录 前端技术栈 开发工具 HTML静态页面 结构 常用标签 注册表单展现 CSS技术 选择器 盒子模型 用户注册表单 JavaScript JS定义 特点和优势 HTML中引入JS JS语法 DO ...
- 2020年，你必须掌握的前端技术栈
2020年即将到来,前端发展到今天,不仅在形式.内容和功能上越来越丰富,对前端开发人员的要求也越来越高! 2020年的前端,不仅在技术广度上提出了新的要求,前端开发人员薪资高低,早已经与技术深度成正比 ...
- GitChat·前端 | 从软件工程角度看大前端技术栈
GitChat 作者:韩亦乐 前言 我们都知道,大学几乎是没有 Web 前端课的.以我所在的大学为例,唯一引导我们了解 JavaScript 的也只是'人机界面'和'Web应用开发'选修课.再者,由于 ...
- 2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列
今天是兔年开工的第一个星期一,我们又要投入到忙碌的工作了. 以下是imqdcn研究整理的2023年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在兔年大展宏兔,扬眉兔气. 文 ...
- 前端，前端技术，前端技术栈，前端工具等词汇的区别
参考博文:node.js是前端还是后端? - 知乎 (zhihu.com) 一.概念 前端是指浏览器的执行环境.相反的后端是指服务器的执行环境. 前端技术则是指浏览器端的应用开发技术,包括HTML, ...
- 从软件工程角度看大前端技术栈
从软件工程角度看大前端技术栈 优秀人才不缺工作机会,只缺适合自己的好机会.但是他们往往没有精力从海量机会中找到最适合的那个. 100offer 会对平台上的人才和企业进行严格筛选,让「最好的人才」和「 ...
- 前端学习路线整理，如何点亮前端技术栈
从用Markdown写博客开始,慢慢点亮前端技术栈 写在开始 关于Markdown 关于学习方法和学习资源 前端技术栈学习路线 一.工具类 代码编辑器Visual Studio Code 代码管理工具 ...
- 2019DevFest | 从互联网前端到2B交付型前端-探索面向交付的实用前端技术栈
2019年11月23日,由天津GDG发起,天津多个技术社区主办的"天津人工智能开发者峰会暨天津技术社群联合峰会"在天津渤龙山庄酒店举行.本次大会内容丰富,涵盖人工智能.大数据.互联 ...
最新文章
- Java自然语言处理
- 目标检测--Training Region-based Object Detectors with Online Hard Example Mining
- mysql注释符号按键,Shell 注释
- 人工智能导论笔记——江湖救急版
- Python数值计算:一 使用Pylab绘图(1)
- python golang 小工具_使用Go语言简单模拟Python的生成器
- 用指针比较三个数大小_《测量力的大小》教案
- SearchView去除下划线
- MyBatis源码阅读(九) --- 插件原理
- 2020年大数据营销案例_大数据营销案例分析
- Kafka 集群搭建
- 图片体积过大怎么缩小？如何缩小图片文件的大小？
- 通过写《费用明细表》发现写sql的乐趣
- pppo服务器光信号亮红灯,光纤猫光信号闪红灯不能上网怎么办
- 使用python解决图像识别中常见的问题
- 期货交易中期货公司和柜台的基础知识
- （翻译）Apache Kafka 官方文档：开始
- 计算机网络-字符编码的由来（为什么会有乱码，ASCII、Unicode、GBK和UTF-8字符编码区别）
- 状态的进行中、未开始、已结束状态的排序
- 迷你计算机工作站,这到底是什么 迄今最mini的工作站即将发售