Fork me on GitHub

玩转HTML5

相关知识

  1. HTML
  2. XHTML
  3. CSS
  4. CSS3
  5. JavaScript
  6. JQuery
  7. HTML5

HTML5

HTML5特性

HTML5新特性

  1. 用于绘画的canvas标签
  2. 用于媒介回放的video和audio元素
  3. 对本地离线储存的更好支持
  4. 新的特殊内容元素
    如:article、footer、header、nav、section
  5. 新的表单控件
    如:calendar、date、time、email、url、search
  6. 浏览器的支持
    Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

HTML5元素、属性和格式化

HTML最基础代码

1
2
3
4
5
6
7
8
9
10
<!-- HTML5的声明 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

HTML5元素

  1. 元素指的是从开始标签到结束标签的所有代码
  2. 大多数HTML元素可拥有属性
  3. 大多数的HTML元素都是可以嵌套的

主题内容标签body

一般网页内容均放入此标签组之间

1
2
3
4
5
6
<!--
设置网页背景颜色
bgcolor="aquamarine"
-->
<body bgcolor="aquamarine">
</body>

标题

1
2
3
4
5
6
7
8
9
10
11
12
<!--
标题位置默认居左,align可以设置标题位置居左居中居右
align="left"
align="center"
align="right"
-->
<h1 align="right">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

段落

1
<p>段落</p>

链接<a>

1
2
3
4
5
6
7
8
<!--
默认在当前页面打开新链接,即target="_self";target="_blank"指在新页面打开链接
target="_self"
target="_blank"
-->
<a href="http://www.yanghuii.com" target="_blank">杨辉的博客</a>
<!-- 图片链接 -->
<a href="http://www.yanghuii.com" target="_blank"><img src="img/风景.jpg" width="100px" height="100px"/></a>

锚点

1
2
<a name="tips">hello</a>
<a href="#tips">跳转到hello</a>

图片<img>

1
2
<!-- alt属性当图片没有显示出来时,会显示出alt的文字 -->
<img src="img/风景.jpg" width="100px" height="100px" alt="logo" />

换行

1
<br />

HTML5属性

常用标签属性

特定HTML元素属性在上面的HTML元素中贴出

通用属性

1
2
3
4
5
6
7
8
9
<!--
class :规定元素的类名
id :规定元素唯一ID
style :规定元素的样式,一般放在头文件引入css样式
title :规定元素的额外信息
-->
<title>杨辉的博客</title>
<style type="text/css"></style>
<h1 id="标题1" class="标题1">标题1</h1>

HTML5格式化

1
2
3
4
5
6
7
8
9
10
正常文字<b>定义粗体文字</b><br />
正常文字<big>定义大号字</big><br />
正常文字<em>定义着重文字</em><br />
正常文字<i>定义斜体字</i><br />
正常文字<small>定义小号字</small><br />
正常文字<strong>定义加重语气</strong><br />
正常文字<sub>定义下标字</sub><br />
正常文字<sup>定义上标字</sup><br />
正常文字<ins>定义插入字</ins><br />
正常文字<del>定义删除字</del><br />

效果展示:

HTML5样式和表格

HTML样式

  1. 外部样式表

    1
    <link ref="stylesheet" type="text/css" href="mystyle.css">
  2. 内部样式表

    1
    2
    3
    4
    <style type="text/css">
    body {background-color:red}
    p {margin-left:20px}
    </style>
  3. 内联样式表

    1
    <p style="color:red"></p>

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<style>
p{
color:red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
<a href="http://www.yanghuii.com" target="_blank" style="color:chartreuse">我的博客</a><br />
</body>
</html>

HTML表格

表格 描述
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性

各种形式的表格

没有边框的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<table >
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
表格中的表头(th)

表格中的表头有着重效果(字体加黑加粗)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<table >
<tr>
<th>单元格1</th>
<th>单元格2</th>
<th>单元格3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>

带有标题的表格caption
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<table >
<caption>标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
</tr>
</table>
</body>
表格内的标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<table border="1px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
</td>
<td>单元格2</td>
</tr>
</table>
</body>
单元格边距cellpadding
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<table border="1px" cellpadding="10px">
<caption>标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
单元格间距cellspacing
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<table border="1px" cellspacing="10px">
<caption>标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
表格内的背景颜色和图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<!-- bgcolor是给单元格添加背景颜色,也可以添加图片:background="img/风景.jpg"; -->
<table border="1px" bgcolor="#FFFF00">
<caption>标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
跨行跨列单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- colspan="2"跨2行;rowspan="2"跨2列 -->
<body>
<table border="1px" >
<caption>标题</caption>
<tr>
<td colspan="2">单元格1</td>
<td rowspan="2">单元格2</td>
</tr>
<tr>
<td rowspan="2">单元格1</td>
<td>单元格2</td>
</tr><tr>
<td colspan="2">单元格1</td>
</tr>
</table>
</body>

HTML5列表、块、布局和表单

HTML列表

  1. 无序列表
    使用标签:

    1
    2
    3
    属性:disc、cricle、square
    2. 有序列表
    使用标签:```<ol>、<li>

    属性:A、a、I、i、start

  2. 嵌套列表
    使用标签:
    1
    2
    4. 自定义列表
    使用标签:```<dl>、<dt>、<dd>
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
<body>
<!-- 无序列表 默认type为disc,实体圆。cricle为空心圆。square为方块-->
<ul type="disc">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<!-- 有序列表 默认为数字。A为ABCD,a为abcd,I为大写罗马数字,i为小写罗马数字,start代表从几开始-->
<ol type="I" start="10">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<!-- 嵌套列表 -->
<ol>
<li>动物</li>
<ul>
<li></li>
<li></li>
</ul>
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</ol>
</body>

HTML块

  1. HTML块元素
    块元素在显示时,通常会以新行开始,如:<h1><p>ul
  2. HTML内联元素
    内联元素通常不会以新行开始,如:<b><a><img>
  3. HTMLdiv元素
    <div>元素也被称为块元素,其主要是组合HTML元素的容器
  4. HTML<span>元素
    <span>元素是内联元素,可作为文本的容器

HTML布局

  1. 使用<div>元素布局
  2. 使用<table>元素布局

HTML5表单

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
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="get">
用户名:
<input type="text" />
<br/>
密码:
<input type="password" />
<br/>
你喜欢的水果有?
<br />
苹果<input type="checkbox" />
西红柿<input type="checkbox" />
香蕉<input type="checkbox" />
<br />
请选择您的性别:
<input type="radio" name="sex" />
<input type="radio" name="sex" />
<br />
下拉框
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<input type="button" value="按钮"/>
<input type="submit" value="提交确定"/>
</form>
<textarea cols="30" rows="30" >文本域</textarea>
</body>
</html>

效果:

HTML框架

内联框架iframe

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="index03.html" width="600px" height="600px">
</iframe>
</body>
</html>

HTML实体(><&)

表格 描述 实体名称 实体编号
" quotation mark &quot; "
' apostrophe &apos; '
& ampersand &amp; &
< less-than &lt; <
> greater-than &gt; >

CSS3

CSS3 入门基础

引入CSS文件

1
2
3
4
5
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/mystyle.css" />
</head>

背景颜色

属性 描述 使用场景
background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-attachment:fixed
background-color 设置元素的背景颜色 background-color:black
background-image 把图片设置为背景 background-image:url("bg.jpg")
background-position 设置背景图片的起始位置 background-position:right right/center/top/left/100px 100px/10% 10%
background-repeat 设置背景图片是否及如何重复 background-repeat:no-repeat
background-size 规定背景图片的尺寸 background-size:1000px 1000px

文本

通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
CSS文本效果
| 属性 | 描述 | 使用场景 |
| —– | —– | —– |
| color | 文本颜色 | color:red |
| direction | 文本方向 | |
| line-height | 行高 | |
| letter-spacing | 字符间距 | |
| text-align | 对齐元素中的文本 | text-align:right |
| text-decoration | 向文本添加修饰 | |
| text-indent | 缩进元素中文本的首行 | text-indent:-2em(-2字符) |
| text-transform | 元素中的字母 | text-transform:capitalize/lowercase/uppercase |
| unicode-bidi | 设置文本方向 | |
| white-space | 元素中空白的处理方式 | |
| word-spacing | 字间距 | |
注:capitalize(首字母大写)/lowercase(全小写)/uppercase(全大写)
CSS3文本效果
| 属性 | 描述 | 使用场景 |
| —– | —– | —– |
| text-shadow | 向文本添加阴影 | text-shadow:5px 5px 5px #FF0000 |
| text-wrap | 规定文本的换行规则 | width:100px;text-wrap:normal |
注:text-shadow:5px 5px 5px #FF0000的各参数为:背景距当前文本左边距离、背景距当前文本上方距离、清晰度设计、背景颜色

字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形
CSS字体
| 属性 | 描述 | 使用场景 |
| —– | —– | —– |
| font-family | 设置字体系列 | font-family:fantasy |
| font-size | 设置字体的尺寸 | font-size:40px |
| font-style | 设置字体风格 | |
| font-variant | 以小型大写字体或正常字体显示文本 | |
| font-weight | 设置字体的粗细 | |

链接

CSS链接的4种状态

1. `a:link` 普通的、未被访问的链接
2. `a:visited` 用户已访问的链接
3. `a:hover` 鼠标指针位于链接的上方
4. `a:active` 链接被点击的时刻
1
2
3
4
a:link{
color: #FF0000
text-decoration: none //去掉链接下划线
}

列表

CSS列表
| 属性 | 描述 |
| —– | —– |
| list-style | 简写列表项 |
| list-style-image | 列表项图像 |
| list-style-position | 列表标志位置 |
| list-style-type | 列表类型 |

1
2
3
4
5
6
7
8
ul li{
list-style-type:decimal
list-style-image: url("icon1.gif");
}
//ul1为ul的class名
ul.ul1{
list-style-position: inside;
}

表格

CSS表格属性可以帮助我们极大的改善表格的外观
| 属性 | 描述 | 使用场景 |
| —– | —– | —– |
| border | 表格边框 | border: 1px solid blue |
| border-collapse | 折叠边框 | border-collapse: collapse |
| width/height | 表格宽高 | width: 400px;height: 400px |

轮廓

CSS轮廓主要是用来突出元素的作用(轮廓指的是包裹元素的线框)
| 属性 | 描述 | 使用场景 |
| —– | —– | —– |
| outline | 设置轮廓属性 | |
| outline-color | 设置轮廓的颜色 | outline-color: aqua |
| outline-style | 设置轮廓的样式 | outline-style: dotted(虚线) |
| outline-width | 设置轮廓的宽度 | outline-width: 2px |

语法

  • 属性大于1个之后,属性之间要用分号隔开

    1
    h1 {color:red;font-size:14px;}
  • 如果值大于1个单词,则需要加上引号

    1
    p {font-family:"sans serif";}
  • 选择器分组

    1
    h1,h2,h3,h4,h5,h6{color:red;}
  • 继承

    1
    2
    3
    4
    <!-- 如果body的子元素有自己的color属性,就用自己的,没有就用body的 -->
    body{
    color:green;
    }

选择器

元素选择器

文档的元素就是最基本的选择器

1
2
3
4
5
6
7
h1{
color: blue;
}
<!-- 通配符 -->
*{
color: red;
}

派生选择器

通过依据元素在其位置的上下文关系来定义样式

1
2
3
li strong{
color: red;
}

后代选择器

后代选择器可以选择作为某元素后代的元素

1
2
3
4
<!-- p标签里面包含一个strong标签 -->
p strong{
color: red;
}

子元素选择器

与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素
例如:h1>strong{};
后代选择器和子元素选择器的区别可以看这里

id选择器

  • id选择器可以为标有id的HTML元素指定特定的样式
  • id选择器以”#”来定义
  • 目前比较常用的方式是id选择器常常用于建立派生选择器
1
2
3
4
<!-- id为pid的元素下的a标签单独定义颜色 -->
#pid a{
color: red;
}

类选择器

  • 类选择器以一个点显示
  • class也可以用作派生选择器
1
2
3
4
5
6
7
.pclass a{
color: red;
}
<!-- 多类选择器 p1、p2 -->
.p1.p2{
color: red;
}

属性选择器

  • 对带有指定属性的HTML元素设置样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[title]{
color: blue;
}
[title=te]{
color: red;
}
</style>
</head>
<body>
<!-- 选择器不指定值[title],值怎么写无所谓 -->
<P title="t">属性选择器</P>
<!-- 选择器指定值[title=te],选择对应的效果 -->
<P title="te">属性和值选择器</P>
</body>
</html>

盒子模型

  • 盒子模型的内容范围包括:
    margin、border、padding、content部分组成

内边距

  • 内边距在content外,边框内
  • 内边距属性
    | 属性 | 描述 |
    | —– | —– |
    | padding | 设置所有边距 |
    | padding-bottom | 设置底边距 |
    | padding-left | 设置左边距 |
    | padding-right | 设置右边距 |
    | padding-top | 设置上边距 |
    1
    2
    3
    4
    5
    6
    7
    8
    9
    td{
    padding: 100px;
    <!-- padding:1px(top) 1px(right) 1px(bottom) 1px(left)(顺时针) -->
    padding: 10px 10px 10px 10px;
    padding-top: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    padding-left: 100px;
    }

边框

  • 我们可以创建出效果出色的边框,并且可以应用于任何元素
属性 描述
border-style 边框的样式,定义了10个不同的非继承样式,包括none
border-top/left/right/bottom-style 边框的单边样式
border-width 边框的宽度
border-top/left/right/bottom-width 边框单边的宽度
border-color 边框的颜色
border-top/left/right/bottom-color 边框单边的颜色
border-radius 圆角边框(CSS3边框)
box-shadow 边框阴影(CSS3边框)
border-image 边框图片(CSS3边框)
1
2
3
4
5
6
7
8
p{
border-style: dotted;
border-top-width: 10px;
border-color: red;
border-radius: 10px;
<!-- 4个属性分别是:右,下,透明度,颜色 -->
box-shadow: 10px 10px 5px red;
}

外边距

  • 围绕在内容边框的区域就是外边距,外边距默认为透明区域
  • 外边距接受任何长度单位、百分数值
  • 外边距合并:
    外边距合并就是一个叠加的概念,遵循多的那一部分(2个盒子的margin都是100px,那么它们的外边距距离就是100px,若是一个50,一个100,距离也是100px(遵循多的一部分))
属性 描述
margin 设置所有的外边距
margin-top/left/right/bottom 设置单边外边距
1
2
3
4
<!-- auto是居中的意思 -->
margin:0 auto;
<!-- margin:1px(top) 1px(right) 1px(bottom) 1px(left)(顺时针) -->
margin: 10px 10px 10px 10px;

定位和浮动

定位

  • CSS定位:
    改变元素在页面上的位置
  • CSS定位机制:
    普通流:元素按照其在HTML中的位置顺序决定排布的过程
    浮动
    绝对布局
  • CSS定位属性
    | 属性 | 描述 |
    | —– | —– |
    | position | 把元素放在一个静态的、相对的、绝对的、或固定的位置中 |
    | top/left/right/bottom | 元素向上/左/右/下的偏移量 |
    | overflow | 设置元素溢出其区域发生的事情 |
    | clip | 设置元素显示的形状 |
    | vertical-align | 设置元素垂直对齐方式 |
    | z-index | 设置元素的堆叠顺序(看哪个div在上面) |
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    #position{
    width: 100px;
    height: 100px;
    background-color: blue;
    <!-- 包括static/relative/absolute/fixed -->
    position: relative;
    left: 10px;
    }
    </style>
    </head>
    <body>
    <div id="position"></div>
    </body>
    </html>

浮动

  • 浮动
    float属性可用的值:
    left/right:元素向左/右移动
    none:元素不浮动
    inherit:从父级继承浮动属性
  • clear属性:
    去掉浮动属性(包括继承来的属性)
    clear属性值:
    left、right:去掉元素向左、向右浮动
    both:左右两侧均去掉浮动
    inherit:从父级继承来clear的值
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #position{
    width: 100px;
    height: 100px;
    background-color: blue;
    <!-- 向左浮动 -->
    float: left;
    <!-- 去掉向左的浮动 -->
    clear: left;
    }

CSS常用操作

对齐

  • 使用margin属性进行水平对齐margin: 0 auto(设置居中)
  • 使用position属性进行左右对齐
  • 使用float属性进行左右对齐

尺寸操作

属性 描述
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
min-height 设置元素最小高度
width 设置元素宽度
max-width 设置元素最大宽度
min-width 设置元素最小宽度

分类操作

属性 描述
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见

页面特效

CSS3瀑布流效果

mark

Javascript

基础介绍

  • JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务器、pc端、移动端。
  • JavaScript脚本语言:
    JavaScript是一种轻量级的编程语言
    JavaScript是可插入HTML页面的编程代码
    JavaScript插入HTML页面后,可由所有的浏览器执行

JavaScript实现

  • JavaScript用法:
    HTML中的脚本必须位于<script></script>标签之间
    脚本可被放置在HTML页面的<body><head>部分中
  • JavaScript标签
    在HTML中插入JavaScript,使用<script>标签
    <script></script>之间书写代码
  • JavaScript使用限制:
    在HTML中,不限制脚本数量
    通常会把脚本放置于<head>中,以不干扰页面内容

demo:

1
2
3
4
5
6
7
8
9
10
11
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
addEventListener("DOMContentLoaded",function () {
finishLesson(1)
})
</script>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>

JavaScript语法

  • JavaScript语句:
    JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
  • 分号
    语句之间的分割是分号(;)
    注意:分号是可选项,有时候看到不以分号隔开的。
  • JavaScript代码:
    按照编写顺序依次执行
  • 标识符:
    JavaScript标识符必须以字母、下划线或美元符号开始
    JavaScript关键字
  • JavaScript对大小写敏感
  • JavaScript注释
    单行注释://
    多行注释:/**/

JavaScript数据类型

  1. 字符串(String)
  2. 数字(Number)
  3. 布尔(Boolean)
  4. 数组(Array)
  5. 对象(Object)
  6. 空(null)
  7. 未定义
  8. 可以通过赋值为null的方式清除变量
  9. 所有的变量都是通过var来声明的

JavaScript函数

  • 定义函数

    1
    2
    3
    function 函数名(){
    函数体; (代码块)
    }
  • 注意:JavaScript对大小写十分敏感,所以这里的function必须小写。在函数调用时,也必须按照函数的相同名称来调用函数

  • 调用函数:
    函数在定义好之后,不能自动执行,需要进行调用
  • 调用方式:
    1).在<script>标签内调用:demo();
    2).在HTML文件中调用:onclick="demo();"
  • 函数的返回值
    通过return语句可以将函数的值返回给调用他的地方
  • 全局变量:在函数外
  • 局部变量:在方法内

异常捕获

try{
发生异常的代码块;
}catch(err){
错误信息处理;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
function demo(){
try{
alert(str);
}catch(err){
alert(err);
}
}
demo();
//这个可以用于input框中是否有输入值的情况
function demo1(){
try{
var e = document.getElementById("txt").value;
if(e==""){
throw "请输入";
}
}catch(err){
alert(err);
}
}
</script>

JavaScript事件

  • 什么是事件?
    事件是可以被JavaScript侦测到的行为
事件 描述
onclick 单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移出事件
onchange 文本内容改变事件
onselect 文本框选中事件
onfocus 光标聚集事件
onblur 移开光标事件
onload 网页加载事件
onunload 关闭网页事件

HTML5新特性

HTML5音频视频

音频播放

  • Audio音频
    HTML5 提供了播放音频文件的标准
  • control(控制器)
    control 属性供添加播放、暂停和音量控件
  • 标签
    <audio>定义声音
    <source>规定多媒体资源,可以是多个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>播放音频</title>
</head>
<body>
<!-- 加上controls="controls" 可以显示播放条-->
<!--<audio src="raw/董小姐.mp3" controls="controls">您的浏览器不支持</audio> -->
<button onclick="clickA()">播放/暂停</button>
<audio id="audio" src="raw/董小姐.mp3" >您的浏览器不支持</audio>
<script>
var a = document.getElementById("audio");
function clickA(){
if(a.paused){//如果暂停
a.play();
}else{
a.pause();
}
}
</script>
</body>
</html>

视频播放

视频编解码工具

  • FFmpeg
  • 官方网址:www.ffmpeg.org 点击这里
  • 下载流程:进入网站–>Download–>Windows–>Windows builds–>Download FFmpeg

    HTML5拖放

    HTML5Canvas标签

    HTML5Canvas应用

    SVG

    Web储存

    HTML5 应用缓存与Web Workers

    服务器推送事件

1
2
3
4
5
<script type="text/javascript">
addEventListener("DOMContentLoaded",function () {
finishLesson(1)
})
</script>
「真诚赞赏,手留余香」