一般为htm.html.shtml.asp.php.jsp.net 没有后缀的原因是为了让用户浏览速度加快，很多个人网站或非专业网站不希望相应的广告连接在自己的相关网页上出现，所以就利用服务器的文件解释漏洞,将网页扩展名改为其他名称。 因为服务器端对网页加入广告代码的规则是根据文件的扩展名的。 只要其分析到文件的扩展名为.htm，.html，则对页面加入广告代码，否则忽略。所以，只需要把网页的.htm，.html后缀改为.gif，.jpg，txt等，然后访问，即可正常显示

前端技术构成

结构：HTML

样式：CSS

行为：JavaScript

前端技术标准

W3C：万维网联盟（the World Wide Web Consortium)

W3C标准：www.w3.org

目前最新标准：HTML5，CSS3，JavaScript

HTML(HyperText MarkUp Language)

超文本标记语言，是制作网页的标准语言，决定了网页的结构

HTML不区分大小写（大小写不敏感）

标签间层次的关系可以由一个树表示，叫做HTML的DOM树（文档对象模型，Document Object Model）

html文件结构

<meta>:元数据，可以放入网页作者，时间等信息

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>		<!--文档类型：符合HTML5标准-->
<html lang="en">	<!--提供给搜索引擎：en英文，zh中文-->
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
</html>

字符集

Unicode：所有语言

UTF-8：所有语言，占用空间更小

乱码问题

需要注意的标签

段落

1
2
3
4
5
6
7
8
<p>每个段落自动换行</p>
<p>段落内部文字忽略连续空客，不显示空行，也不显示换行</p>

<br />段内换行
<p>hhh <br /> 要有/哦</p>

&nbsp;		空格字符，全小写
<p>连续空格用这个&nbsp;&nbsp;&nbsp;想要空行<br /><br /></p>

预留格式pre

1
2
3
4
5
6
7
8
9
<body>
    <pre>
   	这是预留格式文本,换行与空格都会被保留
    </pre>
    <pre>
    for i = 1 to 10
    	print(i)
    </pre>
</body>

行内组合span

1
2
3
4
5
6
7
8
9
<style type="text/css">
    span
    {
        color:blue;
        font_weight:bold;
    }
</style>

<p>这是要<span>强调</span>的</p>

水平线

1
2
3
<p>111</p>
<hr />
<p>222</p>

超链接a

href：hyperlink超链接

1
2
3
4
5
6
7
8
9
10
<a href="网址">文字或图片</a>

链接到本站其他网页
<a href="news.html">aaa</a>

链接到其他站点
<a href=“http://www.baidu.com”>百度</a>	要有带上协议

虚拟超链接
<a href="#">板块2</a>	还不知道链接到哪里时

图片img

1
<img src="图片来源,路径" alt="图片替换文本" />

和<p></p>等一起用，控制换行等

区域div

页面的导航栏，页脚等都是一个个区域，分开处理易于管理

列表

1
2
3
4
5
6
7
8
9
10
11
<ul>无序列表标签
    <li>1</li>列表项标签
    <li>2</li>
    <li>3</li>
</ul>

<ol>有序列表标签
    <li>1</li>列表项标签
    <li>2</li>
    <li>3</li>
</ol>

表格

1
2
3
4
5
6
<table>
    <tr>	<th>data</th>	<th>data</th>	<th>data</th>	</tr>表头
    <tr>	<td>data</td>	<td>data</td>	<td>data</td>	</tr>	
	<tr>	<td>data</td>	<td>data</td>	<td>data</td>	</tr>
    <tr>	<td>data</td>	<td>data</td>	<td>data</td>	</tr>
</table>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form	action="数据处理页面链接">
    账号：<input type="text" name="username" />
    <br />
    密码：<input type="password" name="userPsd" />
    <input type="submit" value="提交" name="submitBtn" />
    <input type="reset" value="重置" />
    性别：
    男	<input type="radio" value="boy" name="gender" />单选框的name要相同
    女	<input type="radio"	value="girl" name="gender" checked="checked" />默认选项
    爱好：
    <input type="checkbox" value="1" name="music" />音乐
    <input type="checkbox" value="2" name="sport" />体育
    <input type="checkbox" value="3" name="reading" />阅读
    
    下拉列表框
    <select>
        <option>111</option>
        <option selected="selected">222</option>
    </select>
    
    文本域
    <textarea rows="行数" cols="列数">提示文本</textarea>
</form>

web语义化

人和机器更容易理解的

1
2
3
4
5
6
<p>
    <em>强调</em>	斜体
</p>
<p>
    <strong>重点强调</strong>	粗体
</p>
1
2
3
4
5
6
<dl>	自定义列表
    <dt>HTML</dt>	列表项
    <dd>超文本标记语言</dd>	对上面进行描述
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

CSS（Cascading Style Sheets）

概述

控制内容样式

为了分离内容和样式

语法

1
2
3
4
5
6
样式名叫选择器
p{
    font-size:12px;		/*字号*/
    color:blue;			/*字体颜色*/
    font-weight:bold;	/*加粗*/
}

添加方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p style="color:red;">
    行内样式
</p>
-------------------------------------------------------------------
<head>	<!--内嵌样式，只对当前页面有效-->
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>内嵌</p>
</body>

最佳方法是单独样式表文件

1
2
3
4
5
<!--已有同目录下的样式文件style.css-->
<!--link文件链接；rel决定文件类型；type文本形式的css文件；href文件路径-->
<head>
    <link rel="styleheet" type="text/css" href="css/style.css" />
</head>
  • 多重样式可以层叠，可以覆盖
  • 就近原则
  • 行内 > 内嵌 > 链接 > 浏览器默认样式

选择器

1
2
3
4
5
6
7
8
9
标签选择器

类别选择器
.one{font-size:12px;}
<p class="one"></P>

id选择器
#one{font-size:12px;}
<p id="one"></P>
  • 嵌套声明
1
2
3
p span{
    ******
}
  • 集体声明
1
h1,p{text-align:center;}
  • 全局声明
1
* {text-align:center;}

可混合使用

文字样式

单位 描述
px 像素
em 1em——1个字符
2em——2个字符
自动适应用户使用字体
% 百分比

DOM树中子层会继承父层的字体大小**，百分比是对父层来说的

颜色 描述
red,blue,green
rgb(x,x,x) 0-255
红色：rgb(255,0,0)
灰色：rgb(66,66,66)
rgb(x%,x%,x%) 0-100%
红色:rgb(100%,0%,0%)
rgba(x,x,x,x) a：0.0（完全透明）——1.0（完全不透明）
#rrggbb 红色：#ff0000
红色：#f00(去掉重复位)
属性 描述 取值
color 文本颜色 red #f00 rgb(255,0,0)
letter-spacing 字符间距 2px -3px
line-height 行高 14px 1.5em 120%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-through
text-indent 首行缩进 2em
  • line-height和height一样时，可以实现文本垂直居中
  • 装饰线none一般用于去掉超链接的下划线
属性 描述
font 设置所有字体属性 font:bold 18px ‘幼圆’
font-family 字体 font-family:”Microsoft YaHei”,sans-serif;
font-size 字号 14px 120%
font-style 斜体 italic
font-weight 粗体 bold
  • 字体有空格要用“”

背景和超链接

  • background-color:
  • background-image:url("logo.jpg")
  • background-repeat:
    repeat 棋盘填充
    repeat-x x轴填充
    repeat-y y轴填充
    no-repeat 单图片填充全页
  • background:同font

若color和image同时存在，则image优先

1
2
3
4
5
div{
    height:30px;
    weight:600px;
    background:url("images/bg1.gif") repeat-x;
}
  • a:link：未访问链接
  • a:visited：已访问链接
  • a:hover：鼠标悬停
  • a:active：被点击时

:伪类选择器

有一定次序

a:hover要在a:link和a:visited之后

a:active要在a:hover之后

Love & Hate

1
2
3
4
5
6
7
/*鼠标悬停放大字体*/
a{
    font-size:22px;
}
a:hover{
    font-size:120%
}

列表和表格样式

  • list-style：所有列表属性
  • list-style-image：列表项设置图像
  • list-style-position：标志的位置
  • list-style-type：标志的类型
1
2
3
4
5
6
7
8
9
10
11
/*表格内外边框重合*/
table{
    border-collapse:collapse;
}

/*奇偶选择器*/
/*隔行显示不同的数据*/
/*:nth-child(odd|even)*/
tr:nth-child(odd){
    background-color:#EAF2D3;
}

css布局与定位

概述

  • 盒子模型：页面元素大小，边框，元素间的距离
  • 定位机制：文档流，浮动机制，层定位

盒子模型

组成

content内容

height

width

padding内边距

border边框

margin外边框

属性

实际宽度：content+padding+border+margin

内容溢出盒子时：

overflow属性：hidden，scroll（显示滚动条），auto（如果超出则显示滚动条）

边框

  • border-width：px thin medium thick
  • border-color：
  • border-style：dashed dotted solid double
  • border：
1
2
3
4
5
6
/*用盒子来设计一个水平分割线*/
.line{
    height:1px;
    width:500px;
    border-top:1px solid #e5e5e5;
}
1
2
3
4
5
/*对浏览器默认的设置清零*/
*{
    margin:0;
    padding:0;
}

margin在垂直方向合并，水平方向不合并

div水平居中:margin:0 auto

定位机制概述

文档流flow：默认定位，和平时书写一样，从上到下，从左到右

浮动float：向左浮动，向右浮动，float属性

层定位layer：图层，可以有重叠，position属性

文档流

元素有行的有块的

引出以下分类：

block:需要独占一行

inline:width和height不可设置

inline-block

还可以使用display属性可以实现元素类型转换

常见block元素：<div> <p> <h1>···<h6> <ol> <ul> <table> <form>

1
2
3
a{
    display:block;
}

常见inline元素：<span> <a>

display:inline;

  • inline元素有一个间距问题，所以导航条用<ul>或<p>来设计
  • 该问题可以通过父元素的font-size:0;取消

inline-block

  • 不单独占一行
  • 元素属性都可以设置

常见：img

display:inline-block;

浮动定位

让div标签实现横向布局

一旦浮动就脱离原有位置，原位置被后续元素占有

float：left right none

clear：清除浮动效果

清除是指令该元素某方向无元素

both：清除左右两边的浮动

left和right：清除特定方向的浮动

none：默认，移除清除

层定位

position属性

  • fixed
  • relative
  • absolute

left属性

right属性

top属性

bottom属性

z-index属性：值大在上面

position属性

fixed:固定定位，相对于浏览器窗口定位，不随滚动条消失（广告栏）

relative：相对定位，相对于直接父元素定位，脱离文档流但是流中原位置还在

absolute：绝对定位，相对于static定位以外的第一个父元素定位，脱离文档流而且流中原位置消失

static：默认，元素在正常流中，不是层定位

css3

概述（新特性）

文本阴影

鼠标悬停动态效果

分栏分列排版

盒子圆角边框，盒子阴影，盒子倾斜效果

圆角边框和盒子阴影

一个或两个参数（先左右后上下）

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

border-radius

box-shadow：inset | outset 水平偏移 垂直偏移 模糊距离 颜色；

inset 内部阴影

outset 默认，外部阴影

文字与文本

text-shadow属性

水平偏移 垂直偏移 阴影大小 颜色

外发光？描边？浮雕？

word-wrap属性：break-word;

适用于长单词和长文本

@font-face规则

字体放在服务器端

不同浏览器支持的字体不同，有网站可以转换字体格式文件

1
2
3
4
5
6
7
8
9
10
@font-face{
    font-family:hhhFont;/*自定义字体名字*/
    src:url('fonts/qz.ttf'),/*逗号*/
    src:url('fonts/qz.eot'),
    src:url('fonts/qz.woff'),
    src:url('fonts/qz.svg');
}
p{
    font-famliy:hhhFont;/*引用*/
}

2D变换

对元素进行旋转，缩放，移动，拉伸

transform属性

1
2
3
4
5
/*正数顺时针，负数逆时针*/
transform:rotate(30deg);
/*缩放*/
transform:scale(1.2);
transform:scale(x, y);

过渡和动画

过渡transition属性

transition-property：属性名 | all 对某些属性进行变化

transition-duration：持续时间

transition-timing-function：过渡使用的方法（函数）

transition-delay

动画

@keyframes规则

animation属性

1
2
3
4
5
6
7
8
9
10
11
@keyframes mycolor
{
    0%	{background-color:red;}
    30%	{background-color:blue;}
    60%	{background-color:yellow;}
    100%	{background-color:green;}
}

div:hover{
    animation:mycolor 5s linear infinite;
}

3D变换

transform-style：preserve-3d

transform属性

rotateX()

rotateY()

rotateZ()

透视perspective属性

变换内容放在父容器中，父容器放在舞台上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*观众和舞台的距离*/
#stage{
    perspective:100px;
}

.box{
    width:100px;
    height:100px;
    float:left;
    transition:linear 1s;
    transform-style:preserve-3d;
}

.x:hover{
    transform:rotateX(60deg);
}
.y:hover{
    transform:rotateY(60deg);
}
.z:hover{
    transform:rotateZ(60deg);
}

JavaScript

概述

是一种运行于JavaScript解释器/引擎中的解释型脚本语言

运行环境：

  • 独立安装的JS解释器（NodeJS）
  • 嵌入在[浏览器]内核中的JS解释器

解释型：运行之前不需要编译，不检查错误，直到碰到错误为止

编译型：源码编译，检查语法错误（C/C++）

  • 弱类型语言
  • 大小写敏感

JS组成

  1. 核心（ECMAScript）
  2. 文档对象模型（DOM），与网页对话
  3. 浏览器对象模型（BOM），与浏览器对话（如光标位置等）

浏览器内核作用

  • 内容排版引擎解析HTML和CSS
  • 脚本解释引擎解析JavaScript

嵌入方法

  • 直接嵌入元素“事件”
  • <script></script>
  • 写入外部脚本js文件，<script src="11111.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 内嵌js -->
    <script>
        alert("嵌入js代码，页面加载就会执行");
    </script>
    <!-- 外部js -->
    <script src="pop.js"> <!--可以输入script:src-->
        alert("此处不能写js代码，不会被执行");
    </script>
</head>
<body>
    <!-- 行内 -->
    <button  onclick="alert('行内js代码,button')">单击试试</button>
</body>
</html>

语法注意点

  • 变量名可以有$

  • 不加var的变量为全局变量，会有安全问题

  • 对象未赋值null

  • 变量未赋值或访问对象没有的属性undefined

  • 任何类型和string相加时结果都是string

  • ==比较数值

  • isNaN()会抛开数据类型来判断数据是否为数字

  • 放在HTML中<body>部分JavaScript会在页面加载的时候被执行

    1
    2
    3
    4
    5
    console.log()

    document.write()

    var input = prompt("请输入一个数据：");
1
2
3
4
function 函数名(){
	语句;
	return 返回值;
}
1
2
3
4
5
6
var arr=[];
var arr=new Array();

arr[arr.length-1]
arr[arr.length-n]
数组缩容
  • 不限制元素个数
  • 不限制下标越界
  • 不限制元素类型，可以混合

关联数组(hash数组）：下标自定义

length属性无效，遍历只能用循环

1
2
3
for(var key in hash){
    hash[key]
}

数组API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*元素转字符串，逗号分隔*/
String(arr)

/*每个元素转为字符串，用自定义连接符分割*/
arr.join("连接符")
arr.join("")
"<开始标签>"+arr.join("</结束标签><开始标签>")+"</结束标签>"

/*拼接，返回新数组*/
arr.concat(arr1, 50, arr2)

/*返回现有数组的子数组*/
/*含头不含尾*/
arr.slice(starti, endi+1)

/*删除从start开始的n个元素*/
/*不考虑头尾*/
arr.splice(starti, n)
/*插入*/
arr.splice(starti, 0, 值1, 值2, ···)

/*排序*/
/*只排列字符串*/
arr.sort()

/*翻转*/
arr.reverse()

DOM

一个标准，一个接口

查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*精确查找一个元素；只能用在document上；效率非常高*/
var elem=document.getElementById("id");

/*指定parent节点下的所有标签为tag的子节点；查抄所有子代；返回一个集合*/
var elem=parent.getElementsByTagName("tag");

/*name*/
document.getElementsByName('name属性值')

/*class*/
var elem=parent.getElementsByClassName("class");

/*css选择器；返回第一个匹配的*/
var elem=parent.querySelector("selector");
/*所有*/var elem=parent.querySelectorALL("selector");

修改

核心DOM

HTML DOM

添加

parentNode.appendChild（childNode）

parentNode.insertBefore（newChild, existingChild）

BOM

  • window：整个窗口
  • history：当前窗口打开后，访问过的历史url记录
  • navigator：浏览器配置信息
  • document：当前正在加载的网页内容
  • location：当前窗口正在打开的url地址
  • screen：屏幕信息
  • event：网页的事件机制

定时器

周期性

1
2
3
4
5
6
7
8
setInterval(exp, time)


var timer = setInterval(function(){
    console.log("Hello World");
}, 1000);

clearInterval(timer);

一次性

1
setTimeout(exp, time)

JQuery

快速，间接的第三方js库

DOM操作，事件，动画效果，Ajax

使用

  • CDN网络上共享的JQuery.js
  • JQuery.js下载到服务器本地

工厂函数$()

$("#myList");

操作

获取：$("···").attr("属性名")

修改：$("···").attr("属性名", 值)

获取元素代码：$("p").html()

设置：$("p").html("<strong>强调</strong>")

获取值：$("input:eq(5)").val()

设置：$("input").val("点击就送")

$("···").css("CSS属性名")

$("···").css("css属性名", 值)

$("···").hasClass("类名")

$("···").addClass("类名")

$("···").removeClass("类名")

1
2
3
4
5
6
7
8
9
10
11
/*创建新元素*/
var $new = $("html代码")
/*添加到DOM树*/
var $li = $("<li title='橘子'>橘子</li>");
var $parent = $("ul");
$parent.append($li);

/*获取第二个<li>元素节点后，删除*/
$("ul li:eq(1)").remove();
/*删除*/
$("ul li").remove("li[title!=1]");

事件

绑定

语法：$("···").bind("事件类型", function(e){······})

例：$("···").bind("click", function(e){······})

简写：$("···").click(function(e){······})

e是一个对象，包含与事件相关的信息，提供可以影响事件在DOM中传递进程的一些方法（鼠标位置，键盘按键状态，触发对象）

HTML5

新结构元素

<header> <nav> <aside> <content> <footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*音频标签*/
/*支持.mp3   .wav   .ogg*/
/*controls控制条*/
<audio src="peppa.mp3" controls="controls">
	浏览器不支持HTML5:audio
</audio>

/*视频标签*/
/*多个source是多种视频格式*/
<video id="myVideo" width="420">
	<source src="course.mp4" type="video/mp4" />
    浏览器不支持HTML5:video
</video>
<button onclick="playPause()">播放/暂停</button>
<script>
	var v=document.getElementById("myVideo");
    function playPause()
    {
        if(v.paused)
            v.play();
        else
            v.pause();
    }
</script>

Canvas

  • 定义画布
1
2
3
<canvas id="myCanvas" width="860" height="480">
    浏览器不支持画布
</canvas>
  • 设置画布样式
1
2
3
#myCanvas{
    border:1px solid black;
}
  • JS准备绘图上下问环境
1
2
3
4
5
6
7
8
9
10
11
12
<script>
    function draw(event){
        var canvas = document.getElementById("myCanvas");
        var pen = canvas.getContext("2d");
        pen.moveTo(50, 50);
        pen.lineTo(300, 300);
        pen.lineWidth = 5;
        pen.strokeStyle = "red";
        pen.stroke();
    }
    window.onload = draw;
</script>

Bootstrap

响应式布局：在不同的设备上显示不同的布局，匹配多个终端设备

布局方式

固定宽度布局：主流的宽度有960px/980px/1190px/1210px

流式布局：百分比设置相对宽度

响应式布局：检测设备信息，设备宽度不同，布局不同

混合布局

Viewport视口

显示网页的区域

视口规定：

  • 布局视口=设备视觉视口
  • 不可缩放

通过meta设置

meta:vp扩展就行

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

媒体查询

根据设备宽度设置CSS样式

设备屏幕 尺寸px
超小屏extra small <768
小屏small >=768
中屏medium >=992
大屏large >=1200 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*min-height min-width max-height max-width*/
<style>
    body{
        background-color: #fff;
    }
    @media screen and (min-width: 768px){
        body{
            background-color:orange;
        }
    }
    @media screen and (min-width: 992px){
        body{
            background-color: #ccc;
        }
    }
</style>

概述

来自Twitter， Bootstrap4

移动优先的前端框架

基于HTML，CSS，JavaScript，JQuery的页面适配

栅格系统

类似表格布局，通过单元格合并来调整宽高

单网页开发流程

  1. 根据设置好的UI界面，用div建立框架，对css进行初始化（清除浏览器自带的格式，a的下划线和颜色，列表的列表项，定义一些浮动效果类），然后添加container类，设置css样式，让内容在正确位置

一些骚操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
!

div#nav.bar

link:css

script:src

img[src=logo.jpg]

a>img+p

ul>li*5

lorem50
1
2
3
4
5
div{
    w30
    h50
    bgc
}