内容串讲

WEB内容串讲

HTML

什么是 HTML

理解HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。

什么是标签

理解什么是标签，标签对的组成：标签名、属性（名值对）、内容

属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力

例如：百度 

重要标签说明

• 表格标签 table
  thead tr th
  tbody tr td

  
  
  
  

建议定义表格的时候，把 tbody,thead 都描述出来。

• 表单标签 form
  action:submit 操作执行的请求地址
  method:指定请求的类型 get/post

  
  
  
  

1. form 表单提交是不一定要通过 submit 操作的，可以通过 AJAX 请求序列化表单的方式完成表单数据的提交。（AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台）
2. 通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。

• 表单元素标签
  通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。
  :type(text,password,radio,checkbox,hidden)

  
  
  
  
  
  
  
  

标签的语义

关于浏览器

CSS

层叠样式表：元素样式可以通过多种方式进叠加。

本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

如何书写定义元素样式

需要掌握的内容

• DIV + CSS 布局基础，充分理解盒子模型
• 样式选择器：ID(#) Class(.) 标签（A DIV SPAN）

JavaScript

• 对于编程语言的认识：
  一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的 API。
  
  
• JavaScript 的作用

1. 业务逻辑处理
2. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

需要掌握的内容

JavaScript 是弱类型语言，而且书写是比较随意的。

• 弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

 // 动态类型,随值的变化而变化 var flag = 'abc'; flag = 12; flag = true; flag = {name : 'Tom'}; flag = function() { alert("Hello,JavaScript"); } 

• 关于 JavaScript 的判断条件

1. 在条件表达式中，数字0和非0也可以表现为false和true
2. 分支结构的三种表示方式
3. 三目运算符是需要熟练掌握的，其本质就是个表达式
4. 表达式是有有返回值（结果）的。

 var age = 20; var str = age >= 18 ? '成年' : '未成年'; console.log(str); 

• 数据类型
  数据类型其本质就是在内存中存储的结构是不一样的，在使用者看来，对于不同的业务需求，可以选用不同的数据类型定义变量。
  
  

1. 数值型（进度问题要注意，比如执行 0.1 + 0.2）
2. 字符型（拼接使用 +）
3. 布尔类型：0 和非 0 也能表现假和真
4. 对象类型：要充分理解下面一段代码的意思
5. 函数类型

 var obj = { name : 'Tom', age : 12, eat : function() { console.log('eat'); } }; console.log(typeof function() {}); var login = function() { var tableinit = function() { console.log("tableinit"); } return { init: function() { tableinit(); } }; }(); login.init(); 

• DOM 操作

1. 通过选择器定位元素（知道有相关的方法找到元素）
2. 对选择的元素进行处理

大部分的 DOM 处理时，围绕以下三种节点类型操作的

Element：各种HTML标签（比如: , 
,, 
    

      ）; Attibute：页面元素的属性（比如：id=”xxxx”,class=”xxx”,type=”text”）; Text：标签之间或标签包含的文本； 
    
 

• DOM 的遍历
  在 DOM 元素上定义 ID 属性，通过 ID 选择器查找（虽然在网页中允许重复 ID 的出现，但是要避免这种现象的出现）
  ID 在定义的时候尽量要起的稍微复杂一点，满足一个标准的规范定义。
  在一个元素范围内容查找元素，使用 jQuery 的 find 方法。

  
  
  
  
  
  

通过 Class 定位元素。

• DOM 增加操作
  添加一个 Element 节点
  设置一个节点的样式属性

  
  
  
  

• DOM 删除操作
  删除一个 Element 节点，包括通过获取到父节点，删除其子节点。
  
  

JavaScript中方法的调用是不受方法定义中参数的约束。

jQuery

核心方法

• $():
  参数如果是字符串，此字符串代表选择器
  参数如果是js元素对象，将其转变为 jQuery 对象
  参数如果是一个方法，就是执行documentt.ready(),就绪化事件。

  
  
  
  
  
  

• each(): 将 jQuery 选择的元素循环遍历。

   输出每个列表项的值   
    
Coffee
    
Milk
    
Soda
   
 

• 注册一个 jQuery Plugin,用于扩展方法

                Foo     Bar          

jQuery 选择器

• ID #
• CLASS .
• 标签 标签名
• find(‘选择器’)在一定 DOM 范围中选择

属性方法

• attr() : 设置 DOM 属性

$("#a1").attr("href","www..com"); 

• addClass():添加样式
• html()

$("#adiv").html(""); // 添加一个按钮 $("#adiv").html(); // 取出adiv中的html代码，返回字符串 

• text():只是纯文本，不会解析为 html
• val(): 取表单元素的值，比如input selcet…

样式处理

css(style,value )

文档方法

筛选方法

事件

效果

AJAX

• 理解同步和异步的概念
• 理解回调函数的概念

 var t = 0; $.ajax({ url: path + "/account/query", dataType: 'json', async: true, success: function(data) { console.log(data); t = 1; console.log("t in success =" + t); }, error: function(error) { console.log(error); } }); console.log("t outside =" + t); 

SQL/MYSQL

在关系型数据库中，最重要的说就是表中字段的概念。

• 字段

1. 字段名
2. 数据类型
3. 长度
4. 约束（非空、默认值、主键、外键、唯一性、自增）

所谓约束就是给数据加条件，让表中的数据更加严谨。

建表建字段的规范：因为数据库中不区分大小写的，所以一般多个单词之间使用“_”连接。

数据库设计的三大范式

上面对于数据库范式进行分解的过程中不难看出，应用的范式等级越高，则表越多。表多会带来很多问题：

1. 查询时要连接多个表，增加了查询的复杂度
2. 查询时需要连接多个表，降低了数据库查询性能

而现在的情况，磁盘空间成本基本可以忽略不计，所以数据冗余所造成的问题也并不是应用数据库范式的理由。

因此，并不是应用的范式越高越好，要看实际情况而定。第三范式已经很大程度上减少了数据冗余，并且减少了造成插入异常，更新异常，和删除异常了。大多数情况应用到第三范式已经足够，在一定情况下第二范式也是可以的。

数据库学习重点

• 学会将业务模型转换成数据模型
  在实际应用开发中，数据模型的确认，其实就是业务逻辑的确认，系统的业务数据的完整度就满足要求了。
  在数据库模型设计可以分为：逻辑设计（表的结构基本确认，但是各个表的详细字段还需再确认，而且逻辑设计更多的是考虑业务数据的流转过程是否合理）、物理设计（最终确认的完整的数据结构）

  
  
  
  

• 数据库查询
  关于数据库的增加操作、删除操作、修改操作都不是重点，因为语法相对简单，而且需求变化度太大。
  
  

在 update 和 delete 操作中，一定要注意是否要加入判断条件，否则会带来灾难性的问题。

在初级阶段，要了解的复杂查询：

• 左关联（left join）
  例如：员工表 employee（id,name,department_id,job_id）/部门表department（id,name）/职位表Job（id,name）
  
  

SELECT FROM employee a LEFT JOIN department d on a.department_id=d.id LEFT JOIN job j on a.job_id=j.id 

• 分组查询（group by having）
  了解聚合函数 avg(),max(),min(),count(),sum()…
  例如：查询班级小组的学员平均分、小组最高分、小组人数
  学员成绩表 student_score （id,groupname,name,course,score）
  1组 87 90 10
  2组 …

  
  
  
  
  
  
  
  
  
  

SELECT groupname,avg(score),max(score) FORM student_score where course='数学' group by groupname having avg(score)>80