前端学习Day01——认识前端与HTML

一、前端基础

1.什么是前后端

概念

前端：这里的前端泛指web前端，也就是用户实际操作中看得见摸得着能够交互的部分。包括网页的结构，外观与交互的实现。

后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

开发人员的大致定位

前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。

后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。

（面包相关：一些可能已经过时了的部分企业对前后端工程师的技术要求）

Web前端：

1）精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。

2）精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。

3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery

4）对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。

5）对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。

6）......

Web后端：

1）精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解

2）练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力

3）熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑

4）精通面向对象分析和设计技术，包括设计模式、UML建模等

5）熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力

6）......

（感觉毕业要饿死了）

2.前后端分离

什么叫前后端分离

简单的判定方法：如果前端和后端只通过简单的 API 文档就能进行数据交流，就说明他们的逻辑是分离的。我们可以称之为「前后端代码分离」。（根本看不懂）如果前端和后端只通过简单的 API 文档就能进行数据交流，就说明他们的逻辑是分离的。我们可以称之为「前后端代码分离」

ps：前后端分离不代表前后端的代码是两个人所写

为什么要进行前后端分离

1.便于数据维护：未进行前后端分离会导致页面代码混乱，数据到处流窜，极难维护。

2.彻底解放前端：前端不再需要向后台提供模板或是后台在前端HTML中嵌入后台代。

3.提高工作效率：前后端的开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的JSON文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。（个人认为存疑，有时候多人效率还不如单人）

4.减少后端服务器压力。

5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，但无法提供数据。（但好像并没有什么用）

6.可以使后台能更好的追求高并发、高可用、高性能，使前端能更好的追求页面表现、速度流畅、兼容性、用户体验等。

前后端分离的缺点

1.前后端学习门槛增加

2.数据依赖导致文档重要性增加

3.前端工作量加大

4.SEO的难度加大

5.后端开发模式迁移增加成本

3.了解前端

什么是前端

前端开发是利用HTML，CSS与JavaScript等技术框架创建web或app界面来实现互联网产品与用户交互的过程。

但前端开发不等于网页设计，网页设计师也不等于网页开发者！

前端在想怎样实现（how），而设计在想展现什么（what）

关于网页

1.网页的主要组成部分：文字，图片，音频，视频，超链接

2.网页的本质：前端代码

3.代码转换为网页页面的工具：浏览器

了解渲染引擎

渲染引擎是浏览器的内核，是浏览器中专门对代码进行解析渲染的部分

各种内核与使用它们的浏览器 

内核	使用的浏览器
Trident	IE,猎豹安全，360，百度
Gecko	火狐
Webkit	苹果
Blink	谷歌，欧朋

渲染引擎不同，解析相同代码时的速度，性能和效果也会不同

4.web标准

web标准存在的意义

让不同的浏览器按照相同的标准显示结果，让展示的效果统一。

web标准的构成

构成	语言	说明
结构层	HTML	页面元素和内容
表现层	CSS	网页元素的外观和位置等页面样式（颜色，大小）
行为层	JavaScript	网页模型的定义与页面交互

二、HTML的简单认识

1.HTML的概念

HTML，中文译名“超文本标记语言”。是一门专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述。

2.构建基本网页的步骤

 借助不同的HTML标签，我们可以显示出不同的结构效果

 效果如下

3.HTML的基本骨架结构 

网页中是存在固定结构的，例如整体，头部，标题，主题......

而这些固定结构的描述则要通过HTML标签

 

HTML骨架结构的标签组成 

• html标签：网页的整体
• head标签：网页的头部
• body标签：网页的整体
• title标签：网页的标题