Web前端知识复习

Web前端知识
一、HTML
HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。
HTML是一种描述性标记语言，用来描述页面内容的显示方式
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
HTML文档结构是由、和三大元素组成。
HTML文档的元素包含很多标签，用于向浏览器提供整个页面的基本信息。
标签的组成：标签名、属性（名值对）、内容
–属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力
例如：百度
重要标签说明
1）表格标签 table thead tr th tbody tr td
例：

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

–建议定义表格的时候，把 tbody,thead 都描述出来。
2）表单标签 form
action:submit 操作执行的请求地址
method:指定请求的类型 get/post
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素，除多行文本框和列表选择框外，大部分表单域使用标签来创建。
表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过标签或标签来创建按钮。
1.form 表单提交是不一定要通过 submit 操作的，可以通过 A JAX 请求序列化表单（serialize()）的方式完成表单数据的提交。（A JAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台）
2.通过 form 表单提交和 A JAX 请求方式提交数据是两个原理完全不一样的设计方式。
3）表单元素标签
通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。
:type(text,password,radio,checkbox,hidden)


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

内容 内容 内容 内容 内容

—form 是个什么样的概念？在Web 编程中，可以把 form 理解为一个数据集合（组），我们把这一组数据包裹在 form 中，统一提交后台，进行业务逻辑的处理，在一个页面中可以有多个 form 存在。但是在 A JAX 请求中，可以不要求有 form 存在。
标签的语义
H1/H2/H3 表现大纲级别（一级到三级标题–由大到小）
div/span/p 表现布局
使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制
三、关于浏览器
浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。
我们一般说的浏览器是指包括：IE/Firefox/Chrome/Opera等等，其中Firefox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范。
如果没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便 如此，不同的浏览器之间还是有些细微的差异的，这个一般是前段开发要注意的问题，要考虑浏 览器的兼容性。
我们一般使用360、搜狗都是基于某个浏览器内核深度改造的。
四、CSS
CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。
内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。
CSS选择器
基本选择器
①　通用选择器：是一个星号（），功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
②　标签选择器：是指任意的HTML标签名作为一个CSS的选择器，用于将HTML中的某种标签来统一设置样式。
③　类选择器：指同一样式的元素定义为一类，在类名前有一个点号（.）
④　ID选择器：使用井号（#）进行定义，是唯一的，通过ID来识别页面中的元素。通过ID选择器可以对元素单独的设置样式。
组合选择器
①　多元素选择器：允许一次定义多个选择器的样式，选择器之间使用逗号（，）隔开。
②　后代选择器：用于选取某个元素的所有后代元素；后代元素之间用空格隔开。
③　子选择器：用于选取某个元素的直接子元素（间接子元素不适用）；子选择器元素之间使用大于号（>）隔开。
④　相邻兄弟选择器：用于选择紧接在某元素之后的兄弟元素。相邻兄弟选择器元素之间使用加号（+）隔开。
⑤　普通兄弟选择器：是指拥有相同父元素的元素；元素与元素之间不必直接紧随；选择器之间使用波浪号（~）隔开。
属性选择器
①　存在选择器
②　相等选择器
③　包含选择器
④　连字符选择器
常用的CSS样式的属性有文本、字体、背景、表格、列表及定位等属性。
cursor属性用于指定用户鼠标的指针类型。在设计表单过程中，使用图片作为提交按钮，当鼠标移到图片上时，通常将鼠标指针由箭头改成手的形状，从而进一步对用户进行提示。
通过display属性可以将页面元素隐藏或显示出来；通过display属性可以将元素强制改成块级元素或内联元素。
通过display属性可以将页面元素隐藏或显示出来；通过display属性可以将元素强制改成块级元素或内联元素。
伪类选择器
①　处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容（元素的一部分）。伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
②　:link、:visited、:active、:link、:visited和:active等伪类
层叠样式表：元素样式可以通过多种方式进叠加。
本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。
如何书写定义元素样式
在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做 页面。
简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。
需要掌握的内容
DIV + CSS 布局基础，充分理解盒子模型
box-sizing需要注意
样式选择器：ID(#) Class(.) 标签（A DIV SPAN）
五、JavaScript
JavaScript是一种脚本语言，可以直接嵌入HTML页面之中，当用户在浏览器中预览该页面时，浏览器会解释并执行其中的JavaScript脚本，随着HTML 5的出现，JavaScript的重要性更加凸显，在Canvas绘图、本地存储、离线应用和客户端通信等方面都需要结合JavaScript脚本来实现。
JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言，其特点如下：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动。
JavaScript脚本不仅能嵌入到HTML页面中，还能以独立文件的形式进行存放。在页面中使用JavaScript脚本的形式有以下三种：行内JavaScript脚本、内部JavaScript脚本、外部JavaScript脚本。
标识符：用来命名变量、函数或循环中的标签。命名规范：
标识第一个字母必须是字母、下划线、或美元符号
标识符区分字母的大小写，推荐使用小写形式或骆驼命名法
标识符由数字、字母、下划线（_）、美元符号（$）构成
标识符不能与JavaScript中的关键字相同
关键字（Reserved Words）是指JavaScript中预先定义的、有特别意义的标识符。而保留关键字是指一些关键字在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中，注释分为两种形式：单行注释和多行注释。
单行注释使用双斜线“//”符号进行标识，斜线后面的文字内容不会被解释执行，单行注释可以在一行代码的后面，也可以独立成行。
多行注释是使用“/ … */”进行标识，其中的文字部分同样不会被解释执行。
常用运算符：
①　赋值运算符：用于对变量进行赋值，在JavaScript中使用等号（=）进行赋值。
②　算术运算符
③　比较运算符：用于判断两个变量（或常量）的大小，比较的结果是布尔类型
④　逻辑运算符：用于对布尔类型的变量（或常量）进行操作；
⑤　三元运算符
流程控制
①　分支结构(if和switch)
②　循环结构(while、do while、for等)
③　break、continue、return等转移语句
关于 JavaScript 的判断条件
1.在条件表达式中，数字0和非0也可以表现为false和true
2.分支结构的三种表示方式
3.三目运算符是需要熟练掌握的，其本质就是个表达式

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

for in循环是JavaScript提供的一种特殊循环，可以对字符串、数组、对象集合、对象属性等进行遍历

函数是一组延迟动作集的定义，可以通过事件触发或在其他脚本中进行调用，在JavaScript中，函数可分为预定义函数和用户自定义函数。预定义函数是指在JavaScript引擎中预先定义的内建函数，用户无需定义便可直接使用。
JavaScript中除了可以使用预定义函数外，还可以使用自定义函数，在自定义函数时既不需要声明函数的参数类型，也不需要声明函数的返回类型，JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数。
命名函数的定义：由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。完成函数的定义后，函数并不会自动执行，只有通过事件或脚本调用时才会执行。
匿名函数，是网页前端设计者经常使用的一种函数形式，通过表达式的形式来定义一个函数。匿名函数的定义格式与命名函数基本相同，只是没有提供函数的名称，且在函数结束位置以分号（；）结束。由于没有函数名字，所以需要使用变量对匿名函数进行接收，方便后面函数的调用。
对象函数：JavaScript还提供了Function类，用于定义函数，参数都是字符串，前面传参 ，最后为函数体。
自调用函数：函数本身不会自动执行，只有调用时才会被执行。在JavaScript中，提供了一种自调用函数，将函数的定义与调用一并实现。