一. 了解前端
1. 什么是前端
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。
2. 前端开发概述
从软件分类来说: (根据使用的目的不同)
--系统软件
--应用软件
从软件信息存储位置的不同:
--单机软件
软件和数据都存储在客户端
--C/S架构软件 Client / Server
软件程序和数据一部分存在客户端,一部分存在服务器端
-B/S架构软件 Browser / Server
软件程序和数据全部存在服务器端
前端开发也叫作web前端开发, 是为B/S架构的软件提供界面解决方案的.
3.核心技术
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
Html
指的是超文本标记语言 (Hyper Text Markup Language),这个也是我们网页最常用普通的语言了,经历了多个版本的发展,已经发展到5.0版了, 即HTML5。
Css
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
JavaScript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
4. 前端开发环境搭建
1) vscode了解
Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。支持多种语言开发,只需要安装对应的插件即可. 我们学习前端过程中主要使用它来敲代码. 我们前端常用的IDE(集成化开发环境)选择很多, 例如: vscode, hbuilder, webstorm, sublime等.
vscode官网: https://code.visualstudio.com
IDE: 集成开发环境
vscode插件的安装:
1.view in browser:
能够让我们所写的代码运行在浏览器上.
2.Beautify:
能够使我们写的代码变得漂亮点
3.Auto Close Tag:
自动添加 HTML 关闭标签
4.Color Highlight:
颜色高亮
5.HTML CSS Support:
html css 支持插件
6.Preview on Web Server:
使我们写的网页可以通过本地服务器打开
vscode的自动保存设置: 打开左上角的 文件 -----> 选择自动保存, 如果不选择自动保存,则只能够手动保存后程序才能运行.
2) chrome浏览器
前端的开发工作主要是在vscode等编辑器上进行的, 但是代码的调试主要是在浏览器上, 所以我们给大家推荐chrome浏览器, 用于查看和调试前端代码.
二. HTML
1. 了解HTML
我们可以通过查看源代码的形式, 看到制作出来的网页
通过仔细观察网页源代码我们可以知道: 制作网页的语言是用 "<" ">" 括起来的. 有些是成对出现,有些不是 -----> 我们一般称这样用尖括号括起来的语言为 HTML
HTML 是 Hyper Text Markup Language 的首字母简写, 意思是超文本标记语言, 超文本指的是超链接, 标记指的是标签, 是一种用来制作网页的语言, 这种语言由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm
2. HTML文档的基本结构
注意:
html语言中注释的写法:
快捷键: ctrl + / 取消注释: ctrl + /
说明:
基本上所有的html文件都是按照这样的格式作为模板进行开发.
head标签的主要作用:
--网页的设置
--资源的引用
--head标签中的内容一般不会显示在网页上.
--body中的内容通常用于网页显示
3. 快速创建HTML文档
我们可以新建一个.html文件, 在文件中快速创建基本标签:
快速创建的方法是: 在文件中敲一个 " ! " 然后按 tab 键 即可:
我们可以看到,这样就可以快速的创建一个基本的html文档了, 我们可以在这个文档中快速的编写代码
说明:
1.lang="en": 声明这个网页的语言是英文, 如果是中文则为: lang="zh-CN", 主要是做统计使用, 国内网页一般不关心这个值.
2.第五行的主要作用是: 让网页在移动端观看时, 网页不缩放.
3.第六行的主要作用是: 如果网页在 IE 浏览器上观看, 让 IE 以最高版本显示网页
4. HTML标签
学习 HTML 语言就是学习标签的用法, HTML 标签有20多个, 学会这些标签的使用, 就基本上学会了 HTML的使用
1. 认识标签:
在html语言中, 用尖括号<>括起来的部分, 我们成为标签.
2. 标签的了解:
--成对的标签
--单个的标签
无论是成对的标签还是单个的标签,都需要用 " < > " 括起来
例如:
由上图我们可以知道: