Web前端学习笔记1

一、什么是前端？

1.web1.0 静态网页 1993-2005
2.web2.0 ajaxweb(前后端数据交互) JavaScript 2006-至今
     没有前端的概念
3.html5 标志着前端的诞生 2013-以后
 目前前端主要是指html，css，JavaScript等技术的统称
 前端出现领域后其应用范围逐渐扩展到网页更广泛的领域

html->网站的结构与内容->赤裸的孩子
css->网页装饰->穿着打扮
js->增加动态功能->举止行为

SEO->搜索引擎优化->SEO三要素

• 各大主流框架
• 移动端APP
• 大数据可视化
• 微信小程序
• 微信网站
• 底层API应用开发

二、对网站开发的理解

  从最初的为了到达一个页面效果的做网页制作，到现在的前端开发，网页不再只是承载单一的文字和图片，各种富媒体让页面内容更加生动，更注重用户体验，对代码执行的效率即性能有了更高的要求。现在很多互联网公司都要求其网站在3s内打开，所以即意味着对人才的要求不再是仅仅会做出一张美观的网页，而是需要以最小的代码量，严格的编码习惯，熟悉开发原理的高水平人才。
  前端开发工程师（或者说“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”），这样的一个职位的主要职责是与设计师，产品协作，根据设计图用HTML和CSS完成页面制作、利用JavaScript语言完成与浏览器的交互。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的体验优化。另外，一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力，能很好的与交互及视觉协作，一名合格的前端开发工程师应该具有良好的沟通能力，理解与设计，产品的意图，并配合后台开发人员完成整个项目的开发。
  那前端仅仅是做网站吗？

    基本盘：
       网站开发：
           电脑网站开发
           手机网站
    软件开发：
       在线软件：
           PC：商业应用
           手机：微信小程序 前后端整合
       本地软件：
           手机软件
           电脑软件：前端桌面软件
       业务模块：
           全栈工程师
           架构师

                 早期淘宝首页

三、搭建静态网页

代码：让生活中的形象化的事物抽象成能够让计算机或者浏览器解析之别的语言（语法）
w3c规定的语言：
html：超文本标记语言（起标记划分作用）
语法：标签
    <> 单
    <></> 双
    英文 具体的语义（标签的作用）
css：层叠样式表（起具体的表现作用 规定显示类型）
选择器：区分标签（统一方便管理）
    id class id优先级高于类class；
网页代码的种类：
  1.标签
   大于号+小于号+中间字符
   body元素 div元素->盒模型->矩形->
  2.文字
   两个标签之间的字符

前端布局的三个步骤:
   1.分区域
   2.排位置
   3.塞内容

1.常用的标签 19种

• div 块
• img 图片
• a 链接、下载、锚点
• h1-h6 标题
• p 段落
• span 区分样式
• ul 无序列表
• ol 有序列表
  • li 列表项
• dl 定义列表
  • dt 定义列表标题
  • dd 定义列表项
• strong 强调（粗体）
• em 强调（斜体）
• sub 下标
• sup 上标
• i 定义斜体文字
• < br/ > 换行
• < hr > 定义水平线

strong标签和em标签一样，用于强调文本，但它强调的程度更强一些

2.常用选择器：19个

基本：4个

• _* _        匹配任何元素
• className    匹配所有class属性中包含className的元素
• tagName     匹配所有标签名是tagName的元素
• #IDName    匹配id属性等于IDname的元素

多元素：4个
属性： 5个
伪类： 4个
伪元素：2个

3.常用样式

font：    font-size 字体样式大小
位置的属性：float 浮动 position 定位
背景：   background-color 颜色  background-image 图片

（本文为学习笔记如有问题欢迎指正！）