Web前端

• 前端

1.1HBuilderX

css：存放css文件

img：存放图片（image）

js：存放JavaScript文件

x.html：HTML文件

1.2HTML

超文本标记语言

超文本：超链接

标记：HTML中的元素都是以标签的形式出现的

<标签名></标签名>——双标签

<标签名/>——单标签

作用：组织网页中的内容

1.2.1HTML的基本结构

1.2.2标签

不同的标签拥有不同作用

<标签名></标签名>    由标签头和标签尾组成的，叫双标签

<标签名/>                   只有一个标签头，叫单标签

标签可以拥有属性

<标签名 属性1=“值1” 属性2=“值2”></标签名>

1.2.3常用标签

1.文本

<h1>~<h6>         文章的标题  字体大小不同

<p>               段落，换行

在html中空格、回车、制表符都只会被解析为最多一个空格

如果要显示多个空格必须使用转义字符&nbsp，多用多显示。

<br/>换行标签

<hr/>分隔线

<strong>内容</strong>     加粗标签

<b>内容</b>                     加粗标签

<i>内容</i>                       斜体标签

<em>内容</em>               斜体标签

_内容              下脚标

^内容              上角标

2.图片

语法：

<img src=’’图片url地址’’ width=”宽度” height=”高度”/>                    指定图片的位置，通常为url地址

src≈source

宽度和高度的设置方式

1. 使用像素作为单位：100px
2. 使用百分比：100%根据父元素来计算

3.超链接

语法：

<a href=”url” target=”目标”>文本、图片</a>

4.锚点

<a href=”#ID值”>文本、图片</a>

1.2.4组合标签

父子和兄弟标签一起来作用

1.列表

1）有序列表  ol:order list    li:

<ol>

                     <li></li>

                     <li></li>

                     <li></li>

</ol>

2）无序列表

<ul>

                     <li></li>

                     <li></li>

                     <li></li>

</ul>

3）自定义列表

<dl>

        <dt>1</dt><dd>第一项</dd>

        <dt>2</dt><dd>第二项</dd>

        <dt>3</dt><dd>第三项</dd>

</dl>

2.表格

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

3.表单

表单是获取用户的输入

语法：

<form action=”提交的地址/通常是一个动态的页面” method=”表单提交的方式get/post”>

表单元素

</form>

表单元素：

1. input

<input type=”类型” value=”值” name=”名字”>

type：

text

password

radio

checkbox

file

submit

reset

email

number

1. select 下拉列表

<select name=””>

<option value=“”>选项一</option>

<option value=““>选项二</option>

<option value=“”>选项三</option>

</select>

3）textarea 多行文本框

4）button 按钮

1.3CSS

层叠样式表

作用：美化网页中元素的显示

1.3.1CSS的语法

选择器｛

属性：值；

属性：值；

…

｝

1.3.2CSS的三种形式

1.行内样式

使用style属性，将CSS直接设置到标签上。

行内样式不需要写选择器，样式只会作用在当前标签上。

2.内部样式

在HTML页面中，使用style标签，编写CSS样式。

也叫内部样式，内联样式，页内样式。

在当前页面中所有符合选择器的都会生效。

3.外部样式

将CSS单独写在.CSS文件中。

在需要的页面里使用link标签引入。

4.优先级

就近原则，谁离得近谁优先。

1.3.3选择器

1.标签选择器

使用HTML的标签名作为选择器。

2.ID选择器

使用标签的ID属性作为选择器。

使用#id属性值

一个页面中不应该出现两个id相同的标签

3.Class选择器

使用标签的class属性作为选择器。

.class属性值

4.属性选择器

选取带有某个属性的元素

[属性名]

[属性名=‘值’]

5.层次选择器

1）祖孙

祖选择器 孙选择器{}

先选择祖先节点，再从祖先节点中，选择子孙节点

2）父子

父选择器>子选择器{}

选择父结点，再从父结点上，选择直接子节点。

3）兄弟

兄选择器+弟选择器{}    只能选中紧挨着的弟弟元素

兄选择器~弟选择器{}    可以选中所有的弟弟元素

优先级：越具体越优先，id>>>>

1.3.4常用属性

1.尺寸

width

height

2.文字

color：设置字体颜色

颜色有三种表示方式

1. 颜色名red、blue、greed、yellow……
2. 十六进制：#FFFA 分别表示RGB色深+透明度

或＃RRGGBBAA

1. RGB（255，255，255），RGBA（255，255，255，0.5）

font-size：14px或em                       字体大小

font-weight：100~900 或bold          字体粗细

font-family：‘’                                  字体

text-align：center；                          水平居中

line-height：行高                             垂直居中

text-decoration：underline、overline、line-through     装饰线

3.背景

background-color/image：设置元素的背景

background-repeat：图片重复

background-position：center    背景位置

1.3.5盒子模型

1.边框

border

border-width：宽度

border-style：solid、double，样式

border-color：边框颜色

border：宽度 类型 颜色；

border-radius：圆角

2.内边距

设置元素的内容与边框之间的距离

3.外边距

设置元素边框与外部元素之间的距离

margin

元素的自动水平方向居中

1.3.6浮动

1.HTML标准DOM流

HTML中的元素，以两种方式排列，行内元素和块级元素

1. 行内元素

从左向右一个个排，如果一行放不下，才会换行

strong，b，i，em，sub，img，th，td，input，select，textarea，button

span

1. 块级元素

从上往下，每一个块级元素都会独占一行

h1~h6,p,br,hr,ol,ul,dl,dt,dd,table,caption,thead,tbody,tr,form

div

display：设置元素的类型

2.浮动

float：left/right

左浮动:所有左浮动的元素,会脱离HTML的标准文档流,按照从左往右的方向排列,一行装不下,才会换行.

右浮动:所有左浮动的元素,会脱离HTML的标准文档流,按照从右往左的方向排列,一行装不下,才会换行

3.清除浮动

找回因浮动丢失的空间

clear：left，right，both

left：只清除左浮动带来的空间损失

right：只清除右浮动带来的空间损失

both：左右浮动带来的空间损失都会清除

4．伪元素

在HTML中没有的元素，通过CSS控制，可以像HTML元素显示在页面中

before:在指定元素内部最前面添加一个伪元素。

after:在指定元素内部最后面添加一个伪元素。

选择器::before{   // 在原有元素内部头部添加子元素

content: "内容";  // 伪元素的内容

}

选择器::after{

    content: "";/* 让伪元素显示出来 */

    display: block;     /* 将伪元素变成块元素*/

    clear: left;/* 清除浮动 */

}

1.3.7定位

position：static，relative，absolute，fixed

1. 相对定位：

relative

元素在DOM流中的位置会保留下来。

可以通过left，right，top，bottom属性设置元素相对于

left和top的优先级高于right和bottom

1. 绝对定位

absolute

元素在DOM流中的位置会消失。

可以通过left，right，top，bottom属性设置元素的绝对位移。

相对于最近的被定位的父元素进行位移

当没有定位的父元素时，相对html位移

应用：在网页中出现元素相互重叠的情况，大部分都是绝对定位

1. 固定定位

fixed

元素在DOM流中的位置也会消失。

可以通过left，right，top，bottom属性设置相对于浏览器的窗口进行位移。

非必要情况下不要使用定位！

能使用浮动就优先使用浮动！

1. 层次

z-index：定位元素的层次 1最底层~999最顶层

1.3.8伪类样式

超链接有四种状态

1. 未点击过
2. 已点击过
3. 鼠标移上
4. 鼠标按下

注意：

1）如果直接设置a标签的样式，所有的状态都是

1.3.9页面布局

div+CSS

1）先从上往下将页面分成几个部分

导航栏

Banner

内容

页脚

2）对每一块先自上而下，将一块分成几个部分，在从左往右

1.4JavaScript

JS——一种可以运行在浏览器中的面向对象的脚本语言。

脚本语言：读一行执行一行，不用编译，没有编译性语言严格。

作用：丰富网页中的交互

JS与HTML和CSS都是运行在用户客户端的浏览器中。

JS与HTML和CSS是不一样的。

JS与Java是没有关系的

JS参考了Java一些语法和思想

1.4.1JS的简单使用

1.行内

<标签名 属性=“JS代码”></标签名>

<a href="javascript:;" οnclick="console.log('超链接的点击事件')">超链接</a>

2.内部

在HTML文档中，在script的标签内部编写JS。

通常放在body最后面。

3.外部

单独写在js文件中的JavaScript。

最常用的方式。

在需要的页面中使用script标签引入js文件。

script标签只能干一件事。

引入外部js文件的script，内部不能再写js代码。

1.4.2语法

1.变量

JS是一种弱类型的语言

var 变量名；

变量是没有数据类型的，可以保存任何类型的数据。

2.数据类型

1）基础数据类型

数值型           number         整数，小数           NaN：not a number

字符串           string             可以使用单引号，也可以使用双引号

布尔型           boolean         true，false

null               

undefined      没有定义，如果一个变量只声明，没有赋值，它的值就是undifined

typeof（）     查看类型

parseInt（）  转成整数格式的number

parseFloat（）      转成小数

tostring（）   转成字符串

2）引用类型

数组

对象

函数

function 函数名（参数列表）{

body

}

1. 函数没有返回值类型的可以使用return返回一个值。
2. 参数也不需要数据类型
3. 函数是一种数据类型，也就是一种值

函数调用

1. 函数调用时，可以传递参数，也可以不传递参数
2. JS中没有函数的重载

3.变量的作用域

1）全局变量

在当前的页面中，都可以访问的变量就是全局变量

在页面的根部定义的变量都是全局变量

在函数中没有使用var定义的变量也是全局变量

2）局部变量

在函数中用var定义的变量，只在当前函数中有效

1. 闭包变量

在函数的函数中使用的外层函数的局部变量，就是闭包变量。

1. 运算符

1. 算术运算符

/针对number时

1. 比较运算符
2. 逻辑运算符
3. 位运算符
4. 赋值运算符
5. 三目运算符

1. 流程控制

1. 顺序结构

1. 选择分支

1. 循环结构

条件：类0值会当作false来处理，非类0值会当作true来处理

比较运算符：

==只比较字面量，不比较数据类型

===比较字面量和数据类型

true==“true“ 结果是false

1.4.3DOM操作

1.选取HTML中的元素

2.操作元素

1.4.4事件

1.5JQuery

jQuery就是一个js库。

1.5.1jQuery语法

jQuery/$（“选择器“）。函数/事件（）；

选择器与CSS的选择器基本上一样，扩展了一些东西。

1.5.2DOM操作

1.增

2.删

3.改

4.查

对DOM树上结点的遍历

1）向上，父结点，祖先节点

2）向下，子结点，孙子节点

3）横向，兄弟节点

1.5.3事件

1.5.4动画

1.显示和隐藏

2.淡入和淡出

3.滑上和滑下

4.自定义动画

可选项：