走进前端one

kkugaii

已于 2022-03-31 09:38:58 修改

阅读量3.9k

点赞数

文章标签：前端前端框架

于 2022-03-30 13:16:24 首次发布

本文链接：https://blog.csdn.net/kkugaii/article/details/123834879

版权

什么是前端
 前端主要技术构成
 前端开发工具
 vscode插件的安装及使用
 总结

什么是前端

Web系统

- 定义

Web系统是指具有一定功能，以网站、app等形式呈现的系统。

- 应用

电商网站淘宝、京东，综合门户网站新浪、搜狐，校园中使用的各种教育系统、社交网站，公司内部使用的管理平台，这些都是Web系统。

Web前端开发

- 定义
面向用户的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。

- 分类
前端设计和前端架构

- 概述

Web前端开发是指针对系统需求，按照效果图完成页面设计。页面结构由HTML完成；页面元素样式由CSS完成；页面行为由JavaScript完成。

前端主要技术构成

HTML

- 什么是HTML？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

- HTML基本结构
HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

- 作用
HTML命令可以说明文字、图形、动画、声音、表格、链接等。

1.用户体验，例如title、alt用于解释名词或解释图片信息、label标签的活用。
2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页。
4.便于团队开发和维护，语义化更具有可读性，下一步把网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

CSS

- 什么是CSS？
CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表，是用来表现HTML或XML等文件样式的计算机语言。

- CSS添加方式

行内样式
行内样式是用style属性将样式添加到标签内部，样式只对当前元素起作用。

<标签 style="属性名：属性值；属性名：属性值；...">

2.内嵌样式
内嵌样式是用style标签将样式添加到HTML文件的header中，样式只对当前页面起作用。

<head>
...
	<style type="text/css">
		选择器{
			属性名:属性值;
			属性名:属性值;
			...
		}
	</style>
</head>

3.单独文件

作用

css能够做到网页和内容分离,对网页中的元素的位置排版等效果进行像素级的精准控制

JavaScript

什么是JavaScript

JavaScript是一种客户端脚本语言，它能够设定网页行为，用于完成网页的一些动态效果

第一个JavaScript程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-单击按钮时，调用show函数-->
    <button onclick="shoe()">显示</button>
    <script>
        function show(){
            alert("helloworld");
        }
    </script>
</body>
</html>

作用
JavaScript可以实现页面的效果切换、动画效果、页面游戏等效果

1、嵌入动态文本与HTML页面
2、对浏览器时间做出相应
3、读写HTML元素
4、在数据被提交到服务器之前验证数据
5、检测访客的浏览器信息
6、控制cookies，包括创建和修改
7、基于node.js技术进行服务器端编程

前端开发工具

vscode

vscode是微软公司推出的免费、开源的轻量级代码编辑器，支持几乎所有主流的开发语言，跨平台支持windows,mac os以及linux。

Sublime Text

Sublime Text是一个专门的跨平台源代码编辑器。支持多重编程语言和标记语言可自定义快捷键，同时拥有丰富的插件资源，属于一款轻量级的编辑器。

WebStorm

WebStorm是Jetbrain公司旗下的一款JavaScript开发工具，它与IntelliJ IDEA同源。

vscode插件的安装及使用

下载

下载地址：Download Visual Studio Code
下载界面如下：

安装

选择合适路径，然后一直next…(因为已经装好了，所以没有图片介绍啦)

快捷键

快捷键	功能
Ctrl+C	复制当前行/选中内容
Ctrl+V	Ctrl+V
Ctrl+F	查找
Ctrl+Z	撤销
Ctrl+Y	重做
Ctrl+D	选中当前半高亮内容
Ctrl+N	新建文件
Ctrl+Shift+N	打开新的VS Code编辑器窗口
Ctrl+W	关闭当前页面
Alt+↓/↑	向上/下移动当前行
Shift+Alt+↓/↑	向上/下复制当前行
Ctrl+Enter	在当前行下方插入一行
Ctrl+Shift+Enter	在当前行上方插入一行

总结

在第一周的预习中，我对于前端的应用，所运用到的技术语言，以及各种语言之间的关系有了更深的了解。同时，我也学会了使用Markdown编辑器编写博客，大致掌握了Markdown的功能键，可以比较熟练的运用。

kkugaii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
走进前端one

什么是前端前端技术构成前端开发工具vscode插件的安装及使用内容1什么是前端Web系统Web前端开发前端开发主要技术HTMLCSSJavaScript前端开发工具vscodeSublime TextWebStormvscode插件的安装及使用...
复制链接

扫一扫