Web前端基础⑴

HTML基础

html只是一种标记语言而不是编程语言（不需要编译），直接有浏览器运行即可。
超文本文件
大小写不敏感
html (htm)为尾缀

标记：位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或者XHTML标准规范。 标记：标记位于 标记的后面，也称为根标记，用于告诉浏览器自身是一个html文档。标记文档的开始，标记文档的结束，其他所有的HTML代码位于这两个标记之间。 标记：定义文档的头部信息，紧跟在标记之后，称为头部标记。头部信息是不被显示在网页正文中的，在此可插入说明文档的标题以及相关属性标记，如 标记，成为主体标记。用于定义HTML文档要显示的内容。浏览器要显示的文本，图片，视频等信息都要位于标记里面

head包含：title、meta、base、link、script、style 3.

font标签用face属性设置字体。

html列表：有序列表（type定义编号样式）、无序列表（circle disc square）、定义列表（dl dt dd）

align属性值：left right center justify（两端对齐）

url包含：协议、主机地址、文件路径。

相对路径的访问方式：同一目录、子目录、父目录、根目录

常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、 JavaScript链接、空链接。

HTML超链接

使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

链接显示的文本

例如：

click here!

上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容

标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

a标签中title属性设置提示信息。

标签的target属性值有：blank、self、parent、top、frameName

HTML文档中的文本元素包括：内容标题、文本修饰、特殊字符。

页面布局技术主要分为：框架布局、表格布局、DIV层布局 表格

表格：table tr td 默认情况下表格的边框是隐藏的。

单元格标签

行标签

行分组：thread tfoot tbody caption,tbody可以多个。

表格列分组：colgroup

表格嵌套一般不超过3-4层

框架：frameset（代替了body） frame

frame的属性

内联框架iframe

表单

表单主要分为表单标签和表单控件两大类。
表单控件又可分为表单域和按钮。
常见的表单域：文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框
常见的服务器语言：JSP、PHP、ASP、NET、NodeJS
html5推荐使用formtarget代替target
默认使用第一种编码方式；空格转换成+号，其他字符转换成对应的ASCII格式。
multipart/form-data编码方式常用于表单包含上传控件的情况，不对字符进行编码。
text/plain编码方式遇到空格时，将其转换成+号，但是不对其他特殊字符进行编码。
复选框没有设置value值，默认为on和off
文件选择框：type=“file”；accept属性用于指定文件选择窗口的文件类型过滤；点击选择文件按钮 时，会在弹出的文件选择窗口中根据accept指定的类型对文件自动过滤。图片的格式包括 image/gif、image/jpeg、image/*等。
使用文件选择框时，form表单的enctype属性设置为multipart/form-data类型，method设置为 post类型。
隐藏域：type=“hidden”，不显示在页面，但是源代码可以看到。
多行文本框：wrap属性用于指定多行文本框的换行方式
列表选择框分组（select optgroup option）：optgroup；属性值label设置每个分组的名称； disabled属性用于设置该分组是否被禁用。
按钮分为：提交按钮、重置按钮、图片按钮、普通按钮
创建按钮：input button;type=submit/reset/image/button
表单分组：form fieldset(一个分组) legend(标题) input

1. ：标签是成对出现的，以开始，以结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

    <label for="username">用户名:</label>

    <input type="text" name="username" />

    <label for="pass">密码:</label>

    <input type="password" name="pass" />

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get

CSS语言基础

每个样式包含两部分内容：选择器、声明（由属性和属性值组成）。

css样式三种格式：内嵌样式（行内样式）、内部样式、外部样式。

先加载样式后加载页面元素，根据元素顺序加载。

用户浏览网页时，css样式文件会被暂时缓存，继续浏览其他页面时，会优先使用缓存中的css文 件；

链接外部样式表：type属性设置目标文件的MIME类型，css样式表的MIME类型是text/css；rel属 性 用于设置目标文件与当前文档的关系，stylesheet表示外部文件的类型是css文件；href设置目 标文件。

多重样式：外部样式、内部样式、内嵌样式混合使用在同一个页面；样式优先级采用就近原则；一 般情况：内嵌>内部>外部>浏览器缺省默认

优先级的前提：样式的权重一样的情况下，谁离被设置元素越近谁的优先级越高。

通用选择器<元素（类型）选择器<类选择器<属性选择器<伪类<ID选择器<内联样式

后代选择器作用于所有的后代，子选择器只作用于第一个后代。

相邻兄弟作用于后面的相邻的一个兄弟

分类属性：

（1）cursor：指定用户鼠标指针类型

（2）display：none(隐藏) block(块级元素) inline(内联元素，前后没有换行，默认)

（3）float：left right non(默认，不浮动)
（4）clear：left right both none(不清除，默认) CSS页面布局 伪类选择器

处于特殊状态的元素称为元素，而伪元素是指元素中特别的内容。

css1中的伪类：link、visited、active 3. css2中的伪类：hover、focus

当position属性为static时，会忽略left、top、right、bottom和z-index等相关属性的设置

在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规 范，称为盒子模型。

页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并 列，终形成了页面。

盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分 组成。

边框宽度border-width的取值范围为指定的关键字或数值，其中关键字包括thin（细边框）、 medium（默认值，中等边框）、thick（粗边框）。

当边框宽度有3个参数时，将按“上->左+右->下”的顺序作用到边框上;当边框宽度有2个参数时，将 按“上+下->左+右”的顺序作用到边框上;当边框宽度有1个参数时，四个方向的边框宽度取值相同;

JS

在Canvas绘图、本地存储、离线应用和客户端通信等方面都需要结合JavaScript脚本来实现。

js的特点：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动。

js运算符：赋值运算符、算术运算符、比较运算符、逻辑运算符、三元运算符。

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

在JavaScript中，函数可分为预定义函数和用户自定义函数。

JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数。

在同一个标签中，函数的调用可以在函数定义之前，也可以在函数定义之后。在不同的标签中时， 函数的定义必须在函数的调用之前，否则调用无效。

数组函数的常用方法：

（1）concat()用于连接两个或者多个数组，返回合并后的新数组。

（2）join()用于把数组所有元素放入一个字符串中，并通过指定的字符串分隔符隔开。

（3）push()用于向数组末尾添加一个或者多个元素，返回数组新长度。

（4）slice(start,[end])用于从数组中返回选定的元素。

字符串的创建方式：

（1）字面量方式（直接赋一个字符串）

（2）new方式，返回是一个对象。

创建一个RegExp对象有两种方式：直接量方式和构造函数方式。

JQuery

onload()和ready()

（1）onload全部加载完成后才能执行；一个页面只执行后一个onload；

（2）ready在所有DOM结构下载完成后执行，可能DOM元素关联的元素并没有加载完毕；一个 页面可以有多个，依次执行；

获取DOM对象：

（1）var menuDiv = document.getElementById()

（2）var baseSpan = menuDiv.getElementsByClassName()

（3）var span = document.querySelector()

DOM对象转换Jquery对象：var JqueryObj = $(domObj)

Jquery对象转换DOM对象：

（1）通过下标获得：var domObj = jQueryObj[0]

（2）通过get方法：var domObj2 = jQueryObj.get(0)

获取DOM对象中的文本：jqueryObj.innerHTML

jQuery选择器：

基本选择器

标签选择器（元素选择器）
-语法： $(“html标签名”) 获得所有匹配标签名称的元素

id选择器
-语法： $("#id的属性值") 获得与指定id属性值匹配的元素

类选择器
-语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

并集选择器：
-语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

层级选择器

后代选择器
-语法： $("A B ") 选择A元素内部的所有B元素

子选择器
-语法： $(“A > B”) 选择A元素内部的所有B子元素

属性选择器

属性名称选择器
-语法： $(“A[属性名]”) 包含指定属性的选择器

属性选择器
-语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

复合属性选择器
-语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
过滤选择器

首元素选择器
-语法： :first 获得选择的元素中的第一个元素

尾元素选择器
-语法： :last 获得选择的元素中的最后一个元素

非元素选择器
-语法： :not(selector) 不包括指定内容的元素

偶数选择器
-语法： :even 偶数，从 0 开始计数

奇数选择器
-语法： :odd 奇数，从 0 开始计数

等于索引选择器
-语法： :eq(index) 指定索引元素

大于索引选择器
-语法： :gt(index) 大于指定索引元素

小于索引选择器
-语法： :lt(index) 小于指定索引元素

标题选择器
-语法： :header 获得标题（h1~h6）元素，固定写法

表单过滤选择器

可用元素选择器
-语法： :enabled 获得可用元素

不可用元素选择器
-语法： :disabled 获得不可用元素

选中选择器
-语法： :checked 获得单选/复选框选中的元素

选中选择器
-语法： :selected 获得下拉框选中的元素()

（3）内容操作：没有参数表示获得，有参数表示修改

​ <1> html()：获取/修改第一个匹配元素的HTML内容

​ <2> text()： 获取/修改第一个匹配元素的内容

​ <3> val()：操作表单元素的值

事件绑定hover(overFn,[outFn])：当函数只提供一个参数时，鼠标移入和移出都触发那个函数。

文章最后发布于: 2020-02-24