什么是前端
前端主要技术构成
前端开发工具
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的功能键,可以比较熟练的运用。
更多推荐
走进前端one
发布评论