Web前端复习笔记

HTML

HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。 通常以后缀.html或.htm结尾。HTML内容主要由网页头部和网页主体两大部分构成。

元素

HTML文档结构是由html、head和body这三大元素组成。
html元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。

head元素：页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外，会显示在浏览器窗口的左上角。

body元素：网页的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于标签之内；但并不是所有的内部标签都是可见的。

HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。
HTML中提供了6级标题，通过标题让文件结构更加清晰。

列表

HTML中列表分为有序列表、无序列表、定义列表。

标签

HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。，标签对的组成：标签名、属性（名值对）、内容。
属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力
常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
例如：百度

table

表格主要由行、列、单元格、标题、表头行、正文行、表尾行等构成
表格的基本元素是单元格，使用标签td表示
行是表格的水平元素，使用标签tr表示
表格通过thead、tfoot、tbody、caption标签对表格进行横向分组
在HTML中提供了colgroup标签，该标签可以对表格按列分组
整个浏览器窗口对应的框架集合称为框架集（frameset）
frame标签用于指示框架集中每个框架的内容
内联框架是嵌入到页面中的一个区域，通过iframe标签引入另外一个页面资源
在创建超链接时，通过target属性，指明新的页面应该在哪个框架中进行加载

表头1	表头2
内容1	内容2

form

表单（form）是HTML的一个重要部分，负责采集和提交用户输入的信息

一个页面中可以包含多个表单，但用户一次只能向服务器发送一个表单中的数据属性enctype取值可以是application/x-www-form-urlencoded、multipart/form-data或text/plainmethod属性设置的方法将表单中的数据传送给服务器进行处理，分为get方式和post方式

常见的表单域有文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等

按钮主要分为提交按钮、重置按钮、图片按钮、普通按钮，具体可以通过input或button标签来实

1. form 表单提交是不一定要通过 submit 操作的，可以通过 AJAX 请求序列化表单（serialize()）的 方式完成表单数据的提交。（AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提 交到后台）
2. 通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。
   表单元素标签 通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。

关于 select 如何在 JS 中获取选中的值和选中的文本内容，在提交数据的时候，默认只会将select 中选中option的value值传递过去。

在Web 编程中，可以把 form 理解为一个数据集合（组），我们把这一 组数据包裹在 form 中，统一提交后台，进行业务逻辑的处理，在一个页面中可以有多个 form 存 在。 但是在 AJAX 请求中，可以不要求有 form 存在。

浏览器

浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。 我们一般说的浏览器是指包括：IE/Firefox/Chrome/Opera等等，其中Firefox/Chrome我们称之为标准 浏览器，最符合W3C组织定义的相关技术规范。
如果没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便 如此，不同的浏览器之间还是有些细微的差异的，这个一般是前段开发要注意的问题，要考虑浏 览器的兼容性。 我们一般使用360、搜狗都是基于某个浏览器内核深度改造的。

CSS

CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
层叠样式表：元素样式可以通过多种方式进叠加。
本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示 样式，原因是浏览器对不同的标签是有个默认样式的。 如何书写定义元素样式
在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做 页面。 简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。 需要掌握的内容
DIV + CSS 布局基础，充分理解盒子模型 box-sizing需要注意 样式选择器：ID(#) Class(.) 标签（A DIV SPAN）

盒子模型

在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型。
页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，最终形成了页面。
盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。

JavaScript

JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言。

JavaScript脚本包括行内JavaScript脚本、内部JavaScript脚本和外部JavaScript脚本三种形式。

常见的数据类型包括String、Boolean、Undefined、Array、Number、Function和Object

注释主要分为两种：单行注释和多行注释。

JavaScript包括赋值运算符、算术运算符、比较运算符、逻辑运算符、三元运算符等运算符
JavaScript中拥有分支结构（if、switch等）和循环结构（while、do while、for等），并支持break、continue、return等转移语句。

函数是一组延迟动作集的定义，可以由事件或其他脚本进行调用，分为预定义函数和用户自定义函数。

JavaScript 的作用

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

JavaScript 是弱类型语言，而且书写是比较随意的。 弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

关于 JavaScript 的判断条件

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