html和css文件的本质都是纯文本文件,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中，提供了一种自调用函数，将函数的定义与调用一并实现。