HTML5，CSS3，JavaScript基础知识与使用

Web前端开发基础

前端发展史

1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。

在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏览器百花齐放……

我们经历了前端的洪荒时代、Prototype时代、jQuery时代、后jQuery时期、三大框架割据时代，这其中均是由国外开发者主导，直到如今的小程序时代，才是中国开发者独创的。

现在只有三个浏览器拥有自己的内核：谷歌浏览器，IE浏览器，火狐浏览器。

浏览器都遵循W3C：World Wide Web Consortium(万维网联盟)制定的标准。

HTML5

HTML：Hyper Text Markup Language(超文本标记语言)

超文本包括：文字、图片、音频、视频、动画等

基本结构

<!--DOCTYPE：告诉浏览器，我们需要使用什么规范-->
<!DOCTYPE html>
<html>
    <!--head标签代表网页头部-->
    <head>
        <title>网页标题</title>
        <!--meta描述性标签，它用来描述网站的一些信息-->
		<meta charest="UTF-8">
		<meta name="keywords" content="html5">
    </head>
    <!--body标签代表网页主体-->
    <body>
        网页主体
    </body>
</html>

块级元素和行内元素

网页标签生成的区域分为块级元素和行内元素。

块元素：无论内容多少，独占一行。

常见块元素：div、form、h、hr、p、table、ul、ol
行内元素：内容撑开宽度，左右都是行内元素可以排在一行。

常见行内元素：a、br、em 、font、img、input、select、span、strong 、textarea

网页标签

<!--标题标签-->
<h1></h1>

<!--段落标签-->
<p></p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
<br/>

<!--块标签-->
<div></div>

<!--重点显示标签-->
<span></span>

<!--居中标签-->
<center></center>

<!--加粗标签-->
<strong></strong>

<!--斜体标签-->
<em></em>

<!--图片标签,src:图片地址 alt:图片名-->
<img src="" alt="">

<!--超链接标签,href:链接路径 target:窗口打开方式 _blank 在新窗口打开-->
<a href="" target=""></a>

<!--特殊符号-->
空格：&nbsp;
大于号:&gt;
小于号：&lt;
版权符号：&copy;

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
</ol>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>自定义</dt>
    <dd>Java</dd>
    <dd>Python</dd>
</dl>

<!--表格标签 <tr>:行 <td>:列 border:线条宽度 cellspacing:单元格间距-->
<table border="">
    <tr><!--跨列 colspan-->
        <td colspan="3">1-1</td>
    </tr>
    <tr><!--跨行 rowspan-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<!--视频 src:资源路径 controle:视频控制工具 autoplay:自动播放-->
<video src="" controls autoplay></video>

<!--音频-->
<audio src="" controls autoplay></audio>

<!--内联框架 src:地址 w-h:宽高度-->
<iframe src="https://www.baidu.com" frameborder="0" width="800px" height="800px"></iframe>

表单

用来收集用户信息的输入框

<!--
表单 form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post get 提交方式
    get:可以在url中看到提交的信息，不安全，高效
    post:比较安全，传输大文件

type:
	text:文本输入框
	password:密码框
	submit:提交按钮
	reset:重置
	radio:单选按钮
	checkbox:多选按钮
	file:上传框
	date:日期
	button:按钮
		submit:提交
		reset:重置
	hidden:隐藏域

	email:邮箱
	url:链接
	number:数字
	range:滑块
	search:搜索框
		
input:
	id:唯一标识符
	nama:后台通过name获取对应表单的值
	value:表单元素对应的值
    readonly:只读
	checked:默认选中

	readonly 只读，不可改
	hidden 隐藏，不可见
	disabled 禁用，不可选

	placeholder:提示信息
    required:非空判断
    pattern:正则表达式判断，在网上获得正则表达式
	
select:下拉列表框
	option:列表框
	selected:默认选中
	
textarea:
	cols="50" 50列
	rows="10" 10行
-->
<form action="" method="post">
	姓名:
		<input type="text" id="name" name="name"><p></p>
	密码:
		<input type="password" id="pwd" name="pwd"><p></p>
    邮箱:
    	<input type="email" name="email"><p></p>
	性别:
		<input type="radio" name="sex" id="" value="">男
		<input type="radio" name="sex" id="" value="">女
		<p></p>
	爱好:
		<input type="checkbox" name="hobby">羽毛球
		<input type="checkbox" name="hobby">敲代码
		<input type="checkbox" name="hobby">游戏
		<input type="checkbox" name="hobby">足球
		<p></p>
	国家:
		<select>
			<option value="" selected="selected">中国</option>
			<option value="">美国</option>
			<option value="">日本</option>
			<option value="">俄罗斯</option>
		</select>
    附件:
    	<input type="file" id="file" name="file">
		<p></p>
		<input type="submit">
    	<input type="reset"/>
    	<p></p>
    介绍:
    	<textarea rows="20" cols="50"></textarea>
</form>

CSS3

CSS：Cascading Style Sheet(层叠级联样式表)

样式包括：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等

导入方式

导入方式离的越近，优先级越高。

行内样式 > 内部样式 > 外部样式

<html>
    <head>
        <!--内部样式-->
        <style>
            h1{color: brown;}
        </style>

        <!--外部样式-->
        <link rel="stylesheet" href="../主页.css">

        <!--导入式 css2.1-->
        <style>
            @import url(../主页.css);
        </style>
    </head>

    <body>

        <!--行内样式，在标签元素中，编写一个style属性，添加样式-->
        <h1 style="color:aqua">标题</h1>
    </body>
</html>

选择器

选择器越精准越优先

id选择器>类选择器>标签选择器

/*标签选择器*/
h1{}

/*类选择器*/
.hd{}

/**/
#hd{}

/*并集选择器:选中所有标签*/
div,p,#hd{}

/*交集选择器:标签选择器+类选择器或id选择器*/
div.hd{}

/*后代选择器:选中body标签下的所有h1标签*/
body h1{}

/*属性选择器 =绝对等于 *=包括等于 ^=开头等于 $=结尾等于*/

	/*选中所有带有id的标签*/
	a[id]{}

	/*选中类为lee的标签*/
	a[class=lee]{}

	/*选中href为https开头的标签*/
	a[href^=https]{}

	/*选中href为com结尾的标签*/
	a[href$=com]{}

	/*选中href中包括google的标签*/
	a[href*=google]{}


/* 超链接伪类 */

	/* 未访问的链接 */
	a:link{}

	/* 被访问过的链接 */
	a:visited{}

	/* 鼠标悬停的链接 */
	a:hover{}

	/* 鼠标选择的链接 */
	a:active{}

样式属性

<!--
通用属性:
	宽度(像素或百分比)1px=0.4mm
	height:高度
	align:对齐方式

文本属性:
	color:颜色
	line-height:行高
	text-align:对齐方式
	text-decoration:文本装饰
	font-size:字体大小
	font-family:字体
	font-size:字号
	font-weight:字体粗细
	text-align:排版居中
	text-indent:首行缩进

	text-decoration:overline; 上划线
	text-decoration:underline; 下划线
	text-decoration:line-through; 中划线
	text-decoration:none; 超链接去下划线

背景属性:
	background-color: 背景色
	background-image: 背景图片
	background-position: 背景开始位置(x轴或y轴:left|center|right|像素|百分比)
	background-repeat: 背景填充方式
	background: 合写方式
	background-size: 拉伸背景图片

列表属性:
	list-style-image: 将列表设置为列表标志
	list-style-type: 设置列表标志的类型(disc|circle|square)
	list-style: 合写方式

鼠标属性:
	cursor:鼠标形状控制(default|pointer|wait|help|text|crosshair|move|url)
-->

盒子模型

浏览器对盒子模型水平方向有自适应，但垂直方向没有。

内边距会把当前的容器撑大，外边距不会。

只有块级元素才能用盒子模型，只有块级元素才有宽高。

<!--
外边距:
margin-top
margin-right
margin-bottom
margin-letf
margin:auto(网页居中)

边框:
border-color:边框颜色
border-边框宽度
border-style:边框类型:solid(实线)|dashed(虚线)|none(无边框)

border-top
border-right
border-bottom
border-left
border

内边距:
padding-top
padding-right
padding-bottom
padding-left
padding

浮动

float:left|right|none

让当前的元素脱离默默人文档流，处于默认文档流的"第二层"位置，当前元素之前占用的默认文档流的位置将会释放。

浮动的元素根据设置的方向浮动，直到遇到浮动元素或者父类边界。

当一个div里面的所有元素都浮动以后，该div会出现塌陷(没有高度)，导致后面的元素向前挤。
页面上的文字不会被浮动元素盖住，文字会环绕在元素的周围。

当缩小浏览器时，导致宽度减少，元素会换行，可以加一个div设置宽度即可。

但一般不设置div的高度，所以需要清除浮动。

清除浮动：指定元素的一边不挨着浮动元素。

可以解决div塌陷和浮动元素换行的目的。

clear:left|right

定位

position属性:

relative(相对定位)：

相对于自己所在文档流的位置进行移动。
元素移动后并不会释放原来在文档流中的位置。

absolute(绝对定位)：

相对于非static定位的元素。
如果没有非static定位的父元素，会相对于浏览器。
设置为绝对定位会释放其在原来文档流中的默认位置。
使用绝对定位的元素会覆盖后面的文字，浮动不会。

fixed(相对于浏览器固定定位)：

不管怎么拖动滚动条，始终在一个位置固定。

static(默认)

参数：

left|right|top|bottom：像素|百分比

/*一种块元素居中方式*/
#div1{
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}
/*
块级元素的显示与隐藏:解决下拉列表框功能。
1.display:none/block
这种方式元素隐藏之后，不占用原来的位置
2.visibility:hidden/visible
元素隐藏之后，占用原来的位置
*/

溢出处理

设置当内容超出块元素时如何处理。

overflow属性：

visible：默认，内容会呈现在元素框外。

hidden：内容会被修剪，隐藏。

scroll：如果内容被修剪，就会显示滚动条

auto：如果内容被修剪，就会显示滚动条。

JavaScript

JavaScript 是脚本语言，一种轻量级的编程语言。是可插入 HTML 页面的编程代码。

JavaScript由三部分组成：ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。
js代码可以写在网页的任意位置。
js为弱类型编程语言，对语法要求不严格，但是要求尽量遵守Java的语法规则。
浏览器在加载页面时顺序加载。Js代码的位置对网页的加载有影响。

导入方式

<!--行内js-->
<button type="button" onclick="script: location.href='https://www.baidu.com';">baidu</button>

<!--内部js-->
<script>
	/*js代码块*/
</script>

<!--外部js-->
<script src="new_file.js" type="text/javascript" charset="utf-8"></script>

数据类型

js中定义变量时不考虑数据类型都用var，在每次赋值时自动改变数据类型。

undefined：定义了变量没有赋值，默认为undefined。

null：空，没有值。

number：数字类型，包括整型和浮点型。

boolean：true或false。

object：对象或数组或null类型。

function：函数方法。

/* 
运算符:
1.数字和字符串在进行除加法之外的运算时,字符串会自动转换成数字.
2.===:绝对等于,比较内容和数据类型.
3.在js中,认为"",null,0,false,NaN,undefined是flase.
4.在使用||进行运算时,如果前面的表达式不为flase,那么返回前面的数据.
5.在使用&&进行运算时,如果前面的表达式部位flase,那么返回后面的数据.
*/
var i = 9;
var y = "3";
//document.write:向网页中插内容
document.write("计算i+y="+(i+y));
document.write(i+y);

函数

定义函数时并不需要指定返回值，并且参数也不需要指定类型。
方法必须调用才会执行。

//定义函数
//定义方法1.
function add(i,j){
    return i+j;
}
var sum = add(20,30);

//定义方法2.
//方法名相同时将覆盖上方的方法
var = function add(i,j){
    return i+j;
}
add(20,30);

//异常调用
add(20,30,40,60);//只使用前两个参数

window

window对象是js中的最顶层对象。

调用其方法如window.ducment可以省略window.

history属性：back()方法：返回，forward()方法：前进。

location属性：href方法：跳转链接

<script type="text/javascript">
	function myForward(){history.forward();}
	function myBack(){history.back();}
	function myLocation(){location.href="https://www.baidu.com";}
</script>

<button type="button" onclick="myBack()">上一页</button>
<button type="button" onclick="myForward()">下一页</button>
<button type="button" onclick="myLocation()">baidu</button>

弹窗

在js中，最顶层的对象是window(类似于Object)，在写js代码时window可以省略。

//alert():弹出警告框
alert("欢迎使用js...")
		    
prompt():提示信息框
var pwd = prompt("请输入密码")
if (pwd == 123456){
    alert("密码正确")
}else{
	alert("密码错误")
}

//confirm():确认框
var flag = confirm("是否确定删除")
if (flag){}

//typeof():判断当前变量数据类型
alert(typeof(pwd))

事件

事件通常与函数配合使用，当事件发生时调用函数。

函数名不能使用页面上已经存在的id的值，也不能是相关的系统函数或属性名称。

鼠标事件

onclick：鼠标单击。

onmouseover：鼠标移入。

onmouseout：鼠标移出。

/* onclick点击事件 */
var num = 0;
function dz(){
	num++;
	var input = document.getElementById("num");
	input.value = num;
}

/* 鼠标移入事件 */
function over(){
	var div = document.getElementById("div1");
	/* 通过js设置页面元素的css样式 */
	div.style.backgroundColor = "#3A6587";
}
/* 鼠标移出事件 */
function out(){
	var div = document.getElementById("div1");
	div.style.backgroundColor="white";
}
			
/* 获取焦点事件 */
function inputFocus(){
	var input = document.getElementById("query");
	var inputValue = input.value;
	input.value = "";
}

/*
<input type="text" id="num" readonly="readonly"/>
<button onclick = "dz()">点赞</button>

<div id="div1" onmouseover="over()" onmouseout="out()">这是div1</div>
*/

框架事件

onload：页面加载完成。

onunload：退出页面。

表单事件

onchange：当绑定元素的value值发生改变的时候会触发该事件,但是一般用在下拉列表框。

onfocus：获取焦点

onblur：失去焦点

/* 获取焦点事件 */
function inputFocus(){
	var input = document.getElementById("query");
	var inputValue = input.value;
	input.value = "";
}
			
/* 失去焦点事件 */
function inputBlur(){
	var input = document.getElementById("query");
	var inputValue = input.value;
	if(!(inputValue!=null && inputValue!="")){
		input.value = "搜索一下";
	}
}

/*
<input type="text" name="query" id="query" value="搜索一下" onfocus="inputFocus()" onblur="inputBlur()" />
*/

键盘事件

onkeydown：某个键盘按键被按下。

onkeyup：某个键盘按键被松开。

onkeypress：某个键盘按钮被按下并松开。

window.onkeydown=function(e){
	var div1=document.getElementById("div1");
	if(e.keyCode==89){
		div1.style.display="block";
	}
	if(e.keyCode==78){
		div1.style.display="none";
	}
}

更多事件

计时器

js的计时器并不精确。

setInterval：启动计时器。

clearInterval：停止计时器。

var timeIn;
var num = 0;
function start(){
	document.getElementById("ks").disabled=true;
	timeIn = setInterval(function(){
		num++;
		document.getElementById("time").value = num;
	},100)
}
			
function stop(){
	document.getElementById("ks").disabled=false;
	clearInterval(timeIn)
}
			
function myClear(){
	document.getElementById("ks").disabled=false;
	clearInterval(timeIn);
	document.getElementById("time").value = 0;
	num = 0;
}

/*
<input type="text" name="time" id="time" value="0" readonly="readonly" />
<button onclick="start()" id="ks">开始</button>
<button onclick="stop()" id="zt">暂停</button>
<button onclick="myClear()" id="js">结束</button>
*/

图片轮播

var flag = 1;
window.onload = function(){
	setInterval(function(){
		flag++;
		var img = document.getElementById("img");
		img.src = "../img/dd_scroll_"+flag+".jpg";
		if(flag==6){
			flag=0;
		}
	},3000);
}
/*
<img id="img" src="../img/dd_scroll_1.jpg" >
*/

DOM

DOM：文档对象模型。

获取元素

getElementById()：返回拥有指定id的第一个对象。

innerHTML()：获取当前节点对象包含的html代码。

innserText()：获取当前节点对象包含的文本。

getElementByName：通过name获取页面元素，返回的结果是一个数组。需要遍历数组才能获取所有元素的值。

var hobbys = document.getElementsByName("hobby");
for(var i=0;i<hobbys.length,i++){
    if(hobbys[i].checked){//返回true
        hobbys[i].values;//获取到value值
    }
}

getElementTagName：通过标签名称获取页面元素。

var ul = document.getElementById("ul");
var lis = ul.document.getElementsByTagName("li");//获取ul下的li标签对象
for(var i=0;i<lis.length;i++){
	lis[i].innerText;
}

parentNode：获取元素的父元素。

var div = document.getElementById("div");
div.parentNode.innerHTML;

childNodes：获取元素的子元素

var ul = document.getElementById("ul");
var subs = ul.childNodes;

nodeName：获取元素属性名称

nodeTepe：获取元素属性类型

nodeValue：获取元素属性值

for(var i=0;i<lis.length;i++){
	subs[i].nodeName;
	subs[i].nodeType;
	subs[i].nodeValue;
}

firstElementSibling：获取第一个元素

nextElementSibling：获取下一个元素

添加元素

document.createElement("")：创建一个标签节点。

parentNode.insertBefore("","")：插入到一个元素后。

function addNode(){
	var numValue = document.getElementById("input").value;
	//创建节点
	var li4 = document.createElement("li");
	//给li4设置html
	li4.innerHTML = numValue;
	var li5 = document.getElementById("li5");
	li5.parentNode.insertBefore(li4,li5);//插入相邻节点
}

parentNode.appendChild()：将一个节点添加到指定父节点的子节点列表的末尾。

Node.cloneNode()：复制节点。

function cyNode({
	var li5 = document.getElementsByName("wu");
	li5[0].cloneNode(true);
}

删除元素

parentNode.removeChild()

function delNode(){
	var li5 = document.getElementById("wu");
	li5.parentNode.removeChild(li5);
}

替换元素

parentNode.replaceChild(newNode,oldNode)

内置对象

String

alert(str.sumstr(3,5));//从下标为3开始截取5个字符
alert(str.substring(3,5));//从下标为3开始截到下标为5,且不包括5

Math对象

alert(Math.random());//获得一个0-1
Math.ceil();//对数进行向上舍入
Math.floor();//对数进行向下舍入
Math.round();//把数四舍五入为最接近的整数

操作css

通过js的.style只能获取和设置元素行内样式表。

通过getComputedStyle方法可以获取元素的内部或外部样式表，但不能设置。

<script type="text/javascript">
	document.getElementById("but").onclick=function(){
		var div=document.getElementById("div");
		var divWidth=parseInt(div.style.width.substring(0,div.style.width.indexOf("px")));//100px
		var divHeigth=parseInt(div.style.height.substring(0,div.style.height.indexOf("px")));
		div.style.width=(divWidth+50)+"px";
		div.style.height=(divHeigth+50)+"px";
	}
	document.getElementById("but1").onclick=function(){
		var div1=document.getElementById("div1");
		//var cssDom=getComputedStyle(div1);
		div1.className="newDivCss";
	}
</script>
<body>
		<div id="div" style=" 100px;height: 100px;"></div>
		<button id="but">变大</button>
		<div id="div1"></div>
		<button id="but1">获取样式</button>
</body>