Web开发实践

用于Web学习者和开发者使用，为Web前端开发的新手和有经验的开发者提供了一个清晰、全面的资源，帮助他们了解Web开发的核心技能和实践。感兴趣的小伙伴可以收藏一下~

Web开发实践

• Web开发概述
  • 什么是Web开发
    • 拿互联网来举例，凡是通过浏览器到用户端计算的统称为前端技术，相反，存储于服务器端的统称为后端技术。Web前端开发技术至少包括三个要素HTML、CSS和JavaScript.凡是通过浏览器到用户端计算机的统称为前端技术、
    • 一个JavaScript实现由以下3个不同部分组成
      • 核心（ECMAScript)
      • 文档对象模型（DOM)
      • 浏览器对象模型(BOM)
  • Web前端开发
    • 由网页制作到Web前端开发工程师这个职业名称转变意味着前端开发已经越来越趋于专业化、职业化，同时从这个新名词也可以看出IT业界已经逐渐已经逐渐意识到前端工程师的重要性
  • Web前端开发需要具备的技能
    • 掌握HTML是网页的核心。HTML消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
    • 学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
  • Web前端集成开发环境
    • 支持Web前端集成开发软件很多，Sublime Text编写它是一个代码编辑器，也是HTML和散文先进文本编辑器。
• HTML语言基础
  • HTML超级文本标记语言是标准通用的标记语言的下一个应用。
  • HTML概述
    • 网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
  • HTML文档结构
    • 为了说明文档使用超文本标记语言标准，所有超文本标记语言文档应该以文件类型<!DOCTYPE>开头
  • HTML元素
    • HTML有一系列的元素组成，可以使用元素来封装、包装或标记内容的不同部分，使其以某种方式执行。
  • 网页的多媒体元素
    • <img>元素
      • <img>是一个空元素最少只需要src来使其生效，src属性包含指向我们想要引入的图片的路径，可以是相对路径或绝对路径。
      • <video>网页开发者们一直以来想要在页面中使用音频和视频。自从HTML5标准提出，其中有许多特性，包括<video>和<audio>标签，以及一些JavaScript和APIs用于对其进行控制。
  • 列表与表格
    • 网页中数据的展示形式可以有列表、表格和框架。
    • 列表
      • 在网页中，常常看到的树形可折叠的菜单，购物网的商品展示等都可以用列表实现。HTML支持的列表形式分为3种：无序列表，有序列表和定义列表。
    • 表格
      • 在HTML种很普通的任务是构建表格数据，有大量的元素和属性是来满足这种需求的。
    • 表单
      • HTML表单是用户和Web站点或应用程序之间交互的主要内容之一。它们允许用户数据发送到Web站点。大多数情况下，数据被发送到Web服务器，但是Web页面也可以拦截它自己并使用它。
      • HTML表单是与用户交互的强大工具，本节将介绍HTML表单从结构到样式，从数据处理到自定义小部件。
  • HTML元素高级应用
    • 做Web开发的也同样需要对无障碍阅读，可访问等引起重视。
• CSS基础
  • css概述
    • 随着Internet的迅猛发展，HTML被广泛应用，HTML被广泛应用，上网的人们希望网页做的漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们走了不少的弯路，用了一些不好的方法，CSS可算是网页设计的一个突破，它解决了网页界面排版难题。
    • CSS简介
      • 层叠样式表单。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态修饰网页，还可以配合各种脚本语言动态对网页各元素进行格式化。
    • CSS特点
      • CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，CSS在web设计领域是一个突破。利用它可以修改一个小的样式更新与之相关的所有页面元素。
      • 丰富的样式定义
        • CSS提供了丰富的文档外观，以及设置文本和背景属性的能力；允许为任何任何元素创建边框，改变元素边框与其他元素间的距离，以及元素边框与元素内容的距离；允许随意改变；允许随意改变文本的大小写方式、修饰方式以及页面效果。
      • 易于修改
        • CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，还可以将样式声明在一个专门的css文件中，以提供HTML引用。
      • 多页面应用
        • CSS样式表可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。
      • 层叠
        • 简单的说，层叠样式是对一个元素多次设置同一样式，这将使用最后一次设置的属性值。
    • CSS基本语法结构
      • CSS的定义是由三个部分构成：选择符，属性和属性值和属性值
    • 将样式表加入网页的方法
      • 行内样式
      • 定义内部样式表
      • 链入外部样式表文件
  • CSS的选择器
    • 在CSS的3个组成部分中，选择符指定了对哪些网页元素进行设置，他有一个专门的名称-选择器
      • 基本选择器
        • 在CSS中，有三种基本选择器，分别是标签选择器，类选择器和ID选择器。
      • 交集选择器
        • 交集选择器是由两个选择器直接连接构成，其结果是选中两者各自元素范围交集。
      • 并集选择器
        • 并集选择器就是将样式是一样的选择器一次性并列声明。
  • CSS样式属性
    • 常用的文本属性
      • 文本显示格式与式样对于网页设计师来说是一个重要问题。
    • 常用字体属性
      • 字体属性可以给字体设置大小、定义字体类型、字体风格等。
    • 常用背景属性
      • 在CSS中，背景包括背景色和背景图像两种方式。
  • CSS页面布局
    • 盒子模型
      • 网页中常用的属性：内容、填充、边框、边界。
    • 边框
      • CSS边框可以是围绕元素内容和内边距的一条或多条线，对于这些线条，可以自定义它们的样式，宽度以及颜色。使用CSS边框属性，可以创建出比HTML中更加优秀的效果。
• JavaScript语言基础
  • JavaScript简介
    • JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言一起实现在一个Web页面中链接多个对象的效果，与Web客户交互作用。
    • JavaScript的特点
      • 基于对象
      • 事件驱动
      • 解释性语言
      • 实时性
      • 动态性
      • 跨平台
      • 开发使用简单
      • 相对安全性，javaScript是客户端脚本，通过浏览器执行
    • JavaScript基本语法
      • 关键字和标识符
        • 关键字，是程序设计语言本身已经使用并赋予了特定意义的一些符号
        • 标识符是用来识别具体对象的一个名称。在程序设计语言中存在的任一成分都需要有一个名字来标识它的存在和唯一性，这个名称就是标识符。
        • 标识符命名规则
          • 标识符只能包含字母、数字、下划线_、$符号
          • 标识符不能以数字开头
          • 标识符不能是关键字或保留字
      • 数据类型
        • JavaScript支持5种简单的数据类型
      • 变量
        • 变量是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值。
      • 注释
        • JavaScript支持单行注释和多行注释；单行注释以//开头；多行以/*开始，以*/结尾。被注释的代码不会被浏览器执行。
      • 运算符
        • 赋值运算符
        • 算术运算符
        • 比较运算符
      • 流程控制
• JavaScript对象
  • JavaScript是一种基于对象的脚本语言。基于对象或面向对象是编程语言中处理问题的方式，即把某些实体作为一个对象来对待。
  • Object对象
    • Object对象是JavaScript所有对象的基础，提供对象最基本的功能，并提供了一种船舰自定义对象很简单方便的方式，无需在定义构造函数，这样可在程序运行时为JavaScript对象添加属性和方法。
  • String字符串对象
    • String对象常用的属性及方法
      • 字符串对象String是最常用的一种对象，如在客户端校验数据信息时，用来判断一个字符串是否包含数字、求取一个字符串的长度、匹配字符串等。
    • String对象的创建
      • String对象用于处理文本（字符串），有两种创建String对象的方法：直接赋值创建或者通过构造函数创建。
    • Date日期对象
      • Date对象属性及常用方法
        • 日期时间对象是JavaScript中最常用的一个对象，主要用来获取当前日期和时间，或依据日期和时间进行计算。
      • Date对象的创建
      • 浏览器对象
        • 浏览器对象属性及常用方法
          • 每一个浏览器提供的浏览器对象都不一样，但具有的功能大致相同，但没有一个是统一标准，这里以IE浏览器对象为主，介绍一下浏览器对象的使用。
          • 使用JavaScript提供的内置浏览器对象，可以对浏览器环境中的事件进行控制和处理。
          • Math数学对象
            • Math对象的属性及常用方法
              • Math对象是JavaScript中内置核心语言对象，主要用来处理数学运算方面的计算。
          • RegExp正则表达式对象
            • JavaScript提供了一个内置对象RegExp对象来代表正则表达式对象，每个Regexp对象的实例对应一个正则表达式，因而建立正则表达式即建立Regexp对象的实例。
          • Array数组对象
            • 与其他计算机语言应用，JavaScript也是通过数组来保存具有相同类型的数据。
• BOM与DOM编程
  • JavaScript由三部分构成，ECMAScript，DOM和BOM。
  • 浏览器对象模型
    • BOM模型
      • 浏览器模型
      • BOM提供了独立于内容而与浏览器窗口进行交互的对象。
      • 由于BOM主要用于管理窗口与窗口之间的通讯，因此核心对象是window
      • BOM由一系列相关对象构成，并且每个对象都提供很多的方法与属性。
      • BOM缺乏标准，JavaScript语法标准化组织是ECMA，DOM标准化组织是W3从，目前努力促进BOM的标准化。
      • BOM最初是Netscape浏览器标准的一部分
    • 文档对象模型
      • DOM是针对HTML和XML文档作为一个API（应用程序编程接口）
    • 事件处理
      • 事件是每一个JavaScript核心。JavaScript程序采用了异步事件驱动编程模型
• jQuery基础
  • 随着JavaScript的兴起，一系列JavaScript库也蓬勃发展起来。从早期的Prototype
  • jQuery概述
    • jQuery是继Prototype之后又一个优秀的JavaScript库
    • JavaScript是为了适应动态网页制作需要而诞生的一种编程语言，它是netscape公司开发的一种脚本语言。
  • jQuery的优势
    • jQuery强调的理念是写得少，做的多。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax都是其它JavaScript库望尘莫及的。
    • 轻量级
    • 强大的选择器
    • 出色的DOM操作封装。
    • 可靠的事件处理机制
    • 完善的Ajax
    • 不污染顶级变量
    • 完善的Ajax
    • 不污染的顶级变量
    • 出色的浏览器兼容性
    • 链式操作方式
    • 行为层与结构层分离
    • 丰富的插件支持
    • 完善的文档
    • 开源
  • jQuery的事件处理
    • 事件是用户操作时页面加载时引发的用来完成jQuery和HTML之间的交互操作，jQuery事件处理方法是jQuery中的核心函数。事件处理方法指的是当HTML中发生某些事件所调用的方法。术语由事件触发经常被使用。
• jQuery进阶
  • jQuery文档处理
    • HTML文档的层次关系是树形的 ，每个标签可视为树的个节点。若操作jQuery对象，使得HTML文档结构发生了改变，则这就叫做文档处理。