web基础

web基础

零，Hbuilder

Hbuilder 是国人开发的一款专门用于编写前端页面的软件。-：Hbuilder.exe注册和登录：建议去注册一个，不然每次都是以游客身份登录的项目的创建：rt文件 -> 新建 -> web项目给项目起名字，选择项目的存储位置项目的结构：css：用于存放 css 文件的目录img：用于存方法图片的目录js：用于存放 js 文件的目录index.html：默认的索引页面 快捷键：自动补全：标签名后按 tab生成多个标签：签名后，加上个数，按 tab，可以通过 > 来指定子标签生成测试文字：lorem后加上个数，按 tab

一，html

1.1 概述

全称：hypertext markup language，超文本标记语言超文本：除了纯文本之外，还可以放入其他组件，例如：超链接、图片、表格、表单等标记：html 中组件（元素）都是以标记（标签）的形式出现的例如：、

1.2 作用

用于绘制页面

1.3 特点

html 是以标签组成的html 文件的后缀是 .html 或者 .htmhtml 由浏览器解释运行任何一个浏览器都有解析 html 的引擎解释运行html 中的标签都是预定义的

1.4 标签

1.5 html 页面的组成

头部：head，用于对当前页面进行配置，例如：字符集、刷新等主体：body，用于承载页面上要显示的内容

1.6 注释

1.7 常用标签

1.7.1 标题标签

标题标签：h，h1~h6特点：标题标签属性块级标签：独占一整行，上下自动换行自动加粗h1~h6，逐渐减小

1.7.2 字体标签

字体标签：font特点：字体标签属性行内标签：可以与其他行内标签共存于同一行在没有对其进行样式设置时，字体标签和普通文本一样属性：size：设置文本的字号，数值范围是 1 ~ 7，1 最小 ，7 最大，默认是 3color：设置文字的颜色使用颜色的英文单词使用 rgb，格式：#rrggbb使用 css 样式，格式：style = " background : 颜色 ; color : 颜色 ; "使用 style 进行颜色设置时，可以使用 rgb()、rgba()，a 表示透明度，范围是 0 ~ 1，0 表示 全透明

1.7.3 图片标签

图片标签：img属性：src：设置图片资源的路径本地图片：将图片资源复制到 img 目录下网络图片：将图片的网址作为 src 的属性值width：宽度height：高度注：只设置宽（高），图片会等比缩放title：鼠标悬停在图片上的提示性文字alt：本地图片无法加载时的提示性文字

1.7.4 超链接

超链接：a属性：href：用于指定跳转的目标地址target：用于明确跳转到的新页面的打开方式，取值：_blank在新窗口中打开，_self在当前标签页中打开 跳转：页面间的跳转内容注：跳转到外部资源时需要加上 id 属性，明确目标所在标签的唯一标识在起始位置的 href 中通过 #id 值 跳转注：返回顶部回到顶部

1.7.5 列表标签

列表标签：ol 有序列表、ul 无序列表列表项：li属性：start：在有序列表中，用于明确列表的序号从几开始type：在无序列表中，取值有 disc 实心圆（默认）、square 方形、circle 空心圆；在有序列表中，取值有 1、A、a、i、I 列表嵌套：将一个列表作为另一个列表的列表项中的内容

1.7.6 表格标签

表格标签：table表格行：tr单元格：td属性：border：设置表格边框的粗细width：宽度height：高度cellspacing：单元格的间距cellpadding：单元格的内边距，单元格中的内容与单元格之间的距离align：水平方向，取值：center、left、rightvalign：垂直方向，取值：center、top、bottom 不规则表格：rowspan 跨行，colspan 跨列

1.7.7 标签的补充

br：换行hr：水平线p：段落，块级元素b：粗体i：斜体strong：粗体sub：下标sup：上标pre：根据 html 的书写原样输出 span：没有默认样式效果功能的一种行内元素div：没有默认样式效果功能的一种块级元素，根据 div + css 的设计标准，可以使用它进行页面布局的设置

1.8 表单标签

概念：用于获取用户信息，提交到服务器表单标签：form属性：action：明确提交到服务器的地址method：提交方式，GET：提交的数据会拼接在地址栏上，默认提交方式POST：提交的数据不会拼接在地址栏上，会进行封装 输入域标签：input属性：type 取值如下：text：普通的文本输入框，它是默认值，框中接收数据的类型是字符串password：密码框，框中接收数据的类型是字符串radio：单选框，互斥性checkbox：复选框button：普通按钮submit：提交按钮reset：重置按钮

1.8.1 文本框和密码框

属性：placeholder：提示性内容maxlength：最大的字符数value：框中的内容，同时也是提交服务器上的值name：用于定义当前 input 提交到服务器时，服务器获取数据所需要的键，它会和接收到的数据形成键值对，以 “ 键1=值1&键2=值2… ” 的方式提交到服务器。

1.8.2 单选框和复选框

1.8.3 按钮

提交按钮 submit：用于将用户的信息，提交到服务器属性：value：用于设置按钮上的文字，由于不同浏览器的解析能力不同，解析方式不同，呈现出现文字可能不同，因此建议所有是提交按钮都手动设置 value 来统一。注：在html5中，button 标签如果出现在表单，它就相当于是一个提交按钮，如果不在表单中，它就是一个普通按钮 重置按钮 reset：用于重置当前表单恢复到默认状态属性：value：用于设置按钮上的文字 普通按钮 button：属性：value：用于设置按钮上的文字事件：onclick：单击ondblclick：双击onmouseover：鼠标悬停onmouseleave：鼠标移开

二，css

2.1 概述

全称是 Cascading Style Sheets，也叫层叠样式表、级联样式表文件名以 .css 结尾

2.2 作用

用于对页面进行样式的设置，美化页面由于不同标签具有不同的样式属性，要记忆哪个标签有哪些属性非常麻烦。所以 css 的出现统一了所有标签所有样式的设置方法（规则、语法）

2.3 语法

内联样式：将样式以属性的形式写在开始标签中，只能影响当前标签格式：style="样式名1:样式值1;样式名2:样式值2;..." 内部样式表：可以影响到当前页面中所有指定的标签写法：在 head 标签中，定义 style 标签在 style 标签体中，通过选择器找到标签，对其进行样式的设置 外部样式表：可以影响到所有引入了该样式文件的页面写法：创建 css 文件，在文件中定义样式，样式的方式同内部样式表在需要引入该 css 文件的 head 标签中使用 link 标签中的 href 属性来指定 css 文件的路径 注释：/* 注释内容 */

2.4 选择器

概念：在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

2.4.1 元素选择器

根据元素名选择元素格式：元素名{ 样式}

2.4.2 id选择器

根据唯一标识 id 属性选择元素格式：#id值{ 样式}

2.4.3 类选择器

根据 class 属性选择元素格式：.class值{ 样式}

2.4.4 通配符选择器

选择页面中的所有元素格式：*{ 样式}

2.4.5 子代、后代选择器

子代选择器：定位到指定的子代元素格式：选择器1 > 选择器2{ 样式}后代选择器：定位到指定的后代元素（包括子代）格式：选择器1 选择器2{ 样式}

2.4.6 属性选择器

选择具有指定属性或者具有指定属性和属性值的元素 格式：选择器[属性名]{ 样式}选择器[属性名="属性值"]{ 样式}选择器[属性名="属性值"][][]...{ 样式}注：属性选择器只会找那些写出了指定属性的元素，而不是具有指定属性的元素

2.4.7 nth-of-type

li:nth-of-type(-3n + 9){ background: red;}该样式只认 n 字母前面的 xn 表示每隔 x - 1 个元素如果 xn 前是负数，表示从后往前后面的整数值表示从第几个元素开始，可以是负数每隔多少个元素，必须写在从第几个元素开始之前

2.4.8 优先级

内联样式 > 内部样式表内联样式 > 外部样式表内部样式表和外部样式表，谁后写，听谁的 同为内部样式表或者外部样式表，哪个选择器的范围更精准，听谁的

2.4.9 伪类选择器

格式：选择器:伪类选择器{ 样式}伪类选择器：link、hover、active、visiteda:link{ text-decoration: none;}a:hover{ color: pink;}a:active{ color: greenyellow;}a:visited{ color: orange;}

2.5 盒子模型

概念：研究的是盒子中的内容与盒子的间距，盒子与盒子之间的距离，以及边框

2.5.1 边框

格式：border: 粗细 颜色 样式注：粗细：线框的厚度（高度）颜色：色值，rgb()、颜色单词、#xxxxxx样式：solid 实线、double 双划线、dashed 虚线、dotted 点划线粗细、颜色、样式的顺序是任意的边框可以进行单边设置border-bottom-color: red;border-top-width: 4px;border-left-style: solid;圆角边框：格式：border-radius：n px;注：圆角边框的本质是用一个指定半径的圆去内切四个角圆角可以单角设置border-bottom-left-radius: 30px;border-top-right-radius: 200px;

2.5.2 内边距

概念：盒子中的内容到边框的距离，padding使用方式：padding：n px；四个方向padding-left/right/top/bottom：n px；指定某一方向padding：a px b px；上下内边距为 apx，左右内边距为 bpxpadding：a px b px c px d px；上右下左内边距分别为 apx bpx cpx dpx注：设置内边距会影响整个盒子的大小

2.5.3 外边距

概念：盒子与盒子之间的距离使用方式：margin：n px；四个方向margin-left/right/top/bottom：n px；指定某一方向margin：a px b px；上下外边距为 apx，左右外边距为 bpxmargin：a px b px c px d px；上右下左外边距分别为 apx bpx cpx dpx注：上下外边距会取较大者，左右外边距是两个外边距之和

2.6 定位

概念：确定标签的位置属性：position取值：relative：相对定位，相对于四周的其他标签进行位置的移动absolute：绝对定位，相对于 body 进行位置的移动，如果元素本身是块级元素，会在绝对定位后变成行内元素；绝对定位后的元素会脱离原始的文档流static：默认定位fixed：固定定位：相对于 body 进行位置的移动，位置不会随着页面位置的变化而变化注：position 只是确定了定位的方式，具有位置需要结合 left、right、top、bottom

2.7 浮动

使用 float 让元素漂浮起来，脱离原始的文档流float：left / right清除浮动：在浮动元素的前或者后加上 div 对该 div 设置样式：clear : both

2.8 显示和隐藏

隐藏：visibility : hidden，仍然占据位置display : none，不占据位置对应的显示：visibility : visibledisplay : inline(行内) / block(块级)

三，js

3.1 概述

全称：JavaScript1995年，由网景和SUN公司开发的它是基于对象和事件驱动的脚本语言基于对象：js 中提供了很多对象，可以直接调用事件驱动：js 中提供了很多动态效果的实现

3.2 作用

提高了用户的体验，提供了交互的效果

3.3 特点

交互性：实现了动态交互的效果安全性：不能直接访问磁盘跨平台性：任何浏览器都有解析 js 的引擎js 是弱类型的语言：变量的类型由值决定

3.4 js 与 html 的结合

内嵌式在 head 标签中，使用 script 标签，在 script 中编写 js 代码外联式创建 js 文件，在 js 文件中编写 js 代码，在 head 标签中使用 script 标签的 src 属性引入该 js 文件注：两种方式可以同时使用，先写的先执行；如果是在调用同名方法，那么只执行后写的方法两种方式不要混用

3.5 注释

单行注释：// 注释内容多行注释：/* 注释内容 */

3.6 js 语法

3.6.1 变量

变量的定义：使用关键字 var定义时赋值var name = "zs";var age = 20;先定义后赋值var height;height = 180;注：关键字 var变量的类型由值决定在函数中定义变量时，如果省略了 var ，那么这个变量就是一个全局变量变量的命名规则：可以由数字、字母、下划线、美元符组成数字不能开头不能与关键字重名区分大小写变量的命名规范：使用驼峰命名见名知意

3.6.2 数据类型

一般的数据类型：Boolean：布尔类型，只有 true 和 falseNumber：数值类型，表示所有整数和小数String：字符串类型，用一对单引号或者双引号括起来Object：对象Array：数组RegExp：正则表达式Function：方法特殊的数据类型：Null：只有一个值 null，当定义了一个变量后，这个变量没有任何的指向，那么它就是 nullUndefined：只有一个值 undefined，当定义了一个变量后，没有赋值，那么它就是 undefinedNaN：not a number，不是一个数字

3.6.3 运算符

算术运算符/%++–逻辑运算符&&||!^关系运算符" > "<" >= "<=!===：判断数值是否相等===：判断数值和类型是否都相等赋值运算符+=-=*=/=%==三元运算符格式：条件表达式?表达式1:表达式2;typeof 运算符用法：typeof(参数)用于检测变量的数据类型字符串类型返回 string数值类型返回 number布尔类型返回 boolean方法返回 function其他类型返回 object

3.6.4 流程控制

选择结构：if(条件表达式){}if(条件表达式){}else{ }if(条件表达式1){ }else if(条件表达式2){ }...else{} 分支结构：switch(表达式){ case 值1: break; case 值2: break; case 值3: break; ... default: break;} 循环结构：while(条件表达式){}do{ }while(条件表达式);for(初始化;条件表达式;步进表达式){}

3.6.5 函数

被设计用来指定特定功能的代码块函数的定义function 函数名(参数列表){ 方法体}function：函数必须通过 function 关键字来定义返回值：js 中的方法没有返回类型，但是可以通过 return 来返回结果参数列表：与 java 一样，定义时叫形参，调用时叫实参。区别是 js 函数中的形参不能写 var 函数的参数：参数的使用方式与 java 一致形式参数不能写 var当出现同名方法时，后定义的方法会覆盖先定义的方法调用函数时，实参可以用 this，哪个标签触发了事件，this 就表示哪个标签的对象

3.6.6 匿名函数

匿名函数就是在定义函数时，没有指定函数的名字格式：function (参数列表){ 方法体}匿名函数的调用方式：用一个变量来接收匿名函数，本质上这个变量名就匿名函数的函数名var f = function(a, b){ alert(a + b);}f(3, 4);使用事件调用window.onload = function(){ var btnObj .document.getElementById("btn"); btnObj.onclick = function(){ alert(); }}

3.6.7 数组

js 中同一个数组中的元素类型可以是任意的数组的创建// 1.var arr = new Array(元素1,元素2,元素3,元素4,...); // 2.var arr = new Array(数组的长度);// var arr = new Array(3);表示创建了一个长度为3，但是没有任何元素值的数组// 3.var arr = [元素1,元素2,元素3,元素4,...];数组的增删改查增：push(元素1，元素2，…)：向数组的末尾添加一个或多个元素splice(下标，0，元素)：向指定位置插入元素unshift(元素1，元素2，…)：向数组的开头添加一个或多个元素删：splice(下标，删除的数量)：从指定位置开始，删除指定数量个元素改splice(下标，替换的数量，新值)，将新值替换从指定位置开始指定数量个元素查：length：返回数组的长度数组名[下标]：返回指定位置上的元素

3.6.8 正则表达式

概念：定义字符串规则创建：var reg = new RegExp(“正则表达式”)；var reg = / 正则表达式 /；方法：正则对象 . test( 要匹配的字符串 )注：只要字符串中包含了匹配正则表达式规则的字符串就会返回 true^：开始 $：结束

3.6.9 全局（系统）函数

概念：全局函数是每一个 js 中本身就带有函数，无需创建对象，直接调用即可。parseInt()：将数值形式的字符串转换成整数parseFloat()：将数值形式的字符串转换成小数isNaN()：判断参数是否不是一个数值或者数值形式的字符串eval()：计算算术表达式形式的字符串encodeURI()：编码decodeURI()：解码

3.7 事件监听

某个元素被执行了某些操作后，触发了某些功能的执行

onclick：单机事件ondblclick：双击事件

3.7.2 鼠标事件

onmouseover：鼠标移到元素上onmousemove：鼠标在元素上移动onmouseleave：鼠标从元素上移开

3.7.3 键盘事件

onkeydown：键盘按下onkeyup：键盘松开

3.7.4 加载事件

onload：页面加载完毕后自动执行，onload 由 window 调用，window 可以省略

3.7.5 焦点事件

onfocus：获取焦点onblur：失去焦点

3.7.6 表单事件

onsubmit：由提交按钮触发，事件写在 form 表单中

3.8 DOM

概念：Document Object Model 文档对象模型，研究的是文档中的元素节点获取 document 对象：直接使用：document使用window对象调用：window.document方法：获取getElementById()：通过 id 属性值获取唯一的指定对象getElementsByClassName()：通过元素的 class 属性值返回一个对象数组getElementsByTagName()：通过元素的标签名返回一个对象数组getElementsByName()：通过元素的 name 属性值返回一个对象数组创建：createElement(标签名)createTextNode(文本)添加：appendChild(元素对象)insertBefore(新元素对象，指定元素对象)删除：removeChild(元素对象)remove()

3.9 BOM

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。