开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
什么是前端
前端是什么？所以大部分人的理解就是前端就是做网页的。但其实并不是，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的过程。以前的前端确实就是单纯的用DreamWeaver以及其它一系列的软件做静态网页，但随着互联网技术的不断发展，网站开发的难度加大，网页从静态发展为动态，交互效果更加强大
了解一个网页
- 网页由哪些部分组成？
- 网页背后的本质是什么？
- 程序员写的代码是通过什么软件转换成网页的？
- 浏览器是怎么解析的呢？
选择一个浏览器吧
你们都知道什么浏览器？2345，360 ，联想浏览器，猎豹，搜狗
推荐使用 Edge ，Chrome，FireFox浏览器
- 通识课我们使用edge浏览器
edge浏览器的功能
都有什么强大的功能，为什么不用360，2345呢？
侧边栏搜索，垂直标签页，沉浸式阅读，装插件。
使用vs code创建一个网页吧
网页是由什么组成的
HTML CSS JS
网页的骨架 HTML
什么是HTML？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，可以说明文字，图形、动画、声音、表格、链接等。
<h1>大家好</h1>
<h2>我叫xxx</h2>
<p>我喜欢写代码,喜欢写网页</p>
网页的皮肉 CSS
什么是css
CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。查看本段内容中所给出的特定案例。
选择器
给标签起一个名字
- 标签选择器
- id选择器
- class选择器
<h1>我是XXX</h1>
<h1 class="name">我是琴理前端组的xxx</h1>
<h1 id="names">我是前端组的xxx</h1>
<style>
h1 {
font-size: 20px;
}
.name {
color: aqua;
}
#names {
color: pink
}
</style>
颜色表示法
十六进制表示法
color: #000000;
color: #454545;
color: #999999;
rgb表示法
/* RGB表示法 */
color: rgb(0, 0, 0);
color: rgb(100, 100, 100);
color: rgb(255, 255, 255);
color: rgb(100, 0, 0);
color: rgb(0, 100, 0);
color: rgb(0, 0, 100);
/* RGBA表示法 */
color: rgba(100, 0, 0, 0.9);
color: rgba(100, 0, 0, 0.5);
color: rgba(100, 0, 0, 0.2);
盒模型
<style>
h1 {
/* 边框 */
border: #454545 solid 5px;
border-radius: 10px;
/* 内边距 */
padding: 15px;
padding: 15px 30px;
/* padding-top: 15px; */
/* padding-bottom: 15px; */
padding-left: 100px;
/* padding-right: 100px; */
/* 外边距 */
margin: 50px;
margin: 50px 100px;
margin-left: 200px;
margin-right: 200px;
}
</style>
<h1>你好呀</h1>
css样式的引入方式
- 内部样式
- 行内样式
- 外部样式
<!--使用行内样式引入CSS-->
<h1 style="color:red;">111111</h1>
<p style="color:red;font-size:30px;">我是p标签</p>
<!--使用外部样式引入CSS-->
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
样式优先级
- 行内样式 > 外部样式 = 内部样式
- 外部样式和内部样式有“就近原则”，以最后出现的为准
开始美化一下网页吧
body {
/* 内边距 */
padding: 10vh 10vw;
}
h1 {
/* 文字大小 */
font-size: 3em;
margin-bottom: 0.8em;
}
h2 {
font-size: 2em;
margin-bottom: 1.4em;
}
p {
font-size: 1.4em;
/* 字体粗细 */
font-weight: 300;
/* 行高 */
line-height: 1.6em;
/* 最大宽度 */
max-width: 600px;
}
让网页动起来吧JavaScript
前言
let arr = [
[1, 9, 12, 13, 14, 15, 16, 18, 19, 20, 21, 22],
[2, 8, 12, 18, 22],
[3, 7, 12, 13, 14, 15, 16, 18, 22],
[4, 6, 16, 18, 22],
[5, 5, 12, 13, 14, 15, 16, 18, 19, 20, 21, 22],
];
function demo(arr) {
let str = "";
for (let i = 0; i < arr.length; i++) {
for (j = 0; j < 30; j++) {
if (arr[i].indexOf(j) > -1) {
str += "█";
} else {
str += " ";
}
}
str += "\n";
}
return str;
}
console.log(demo(arr));
JavaScript初了解
- 什么是Javascript ？ JavaScript 一种具有函数优先的轻量级的动态脚本语言。
- Javascript 能做什么? 数据可视化，移动应用，服务端，全平台应用，游戏，VR，硬件，操作系统
尝试一下吧
<body>
<div>
<input type="text" name="" id="text_ql" value="">
<input type="button" value="提交" onclick="getinput()">
</div>
</body>
<script>
function getinput() {
console.log(text_ql.value)
}
</script>
尝试使用DOM抓取一些HTML内容
//声明变量
let name_ql;
//获取DOM
name_ql=document.getElementById('')
name_ql.innerText
name_ql.innerHTML
引入Jquery
JS 库，让网页操作变得更简单
-
Jquery 为我们提供了封装好的 API（应用程序编程接口）
-
我们不需要关注内部的实现原理，就可以简单的操作网页内容
-
jquery - npm (npmjs.com)引入 jQuery 库
尝试下Jquery吧
<h1>我是杨弋锐</h1>
<h1 class="name">我是琴理前端组的杨弋锐</h1>
<h1 id="names">我是前端组的杨弋锐</h1>
<script>
$('#names').text('123456');
</script>
定一个接口文档吧
尝试接受数据吧
Ajax (Jq的ajax)
$.ajax({
type: "get",
url: '',
dataType: 'json',
success: function(data) {
console.log(data);
$('#names').text(data.name);
},
error: function(err) {
//请求失败时被调用的函数
console.log("失败:" + err);
}
});
