html5系列视频教程第一讲《html5基础知识》


如果不能播放请更换浏览器或者百度云:http://pan.baidu.com/s/1bpp1sRl
html5系列视频教程第一讲《html5基础知识》
主讲人:竹客令
QQ:1281754665
微博:ZKLHY
——————————————————————————————————————————-

html
html5
html4.01 之后xhtml1.0
html5 2008 w3c

html4.01 代码是凌乱的
xhtml1.0 严格html
xhtml2.0 2009 终结开发

html5 自由开发者
用户至上
开发者
浏览器
HTML5 到底涵盖了哪些功能?这些功能到底在主流的浏览器支持情况如何?
1.HTML5 核心:这部分主要由W3C 官方的规范组成,涉及新的语义元素、新的增强的
Web 表单、音频和视频、以及通过JavaScript 绘图的Canvas。这部分大多数主流浏览器
均得到很好的支持;

2.曾经的HTML5 标准:这部分主要来自于最初制定的HTML5 规范,其中大多数功能需
要JavaScript 且支持富Web 应用开发。比如:本地数据存储、离线应用和消息传递;

3.非HTML5 标准:这部分通常指下一代功能,虽然从未进入HTML5 标准,但人们还是
会把它认做HTML5 的一部分。这些包括最为常见的CSS3,以及很热门的地理定位。

html

html5
css
javascript

注册码:http://www.zklhy.com/fx/3721.html
工具:Sublime Text3

Font Awesome图标应用 简单实例教程

Font Awesome图标应用 简单实例教程 应上一篇文章Font Awesome 4.5图标 一款风靡全球的图标字体库和CSS框架 里面说的这篇文章就讲讲Font Awesome图标的实际运用起来会是怎么样子的 我懂的也不多 有说的不好的地方 多多包涵!好了废话不多说我们开始吧!最后我会把这这词教程的文件放到文章最后面提供下载 你们可以去看看!

我这一次是在本地测试 首先我们去下载我们的Font Awesome图标的文件 百度云下载地址:http://pan.baidu.com/s/1c2g9EH6  

下载好了 解压了会是这样的:

QQ截图20160414133136

里面的所以东西的所以然我也说不出 不过重要的就是css和那个fonts 就这两个 css不用解释了吧!fonts这个里面放的是一些字体什么什么的 反正它们是必须的就对了  剩下的那些是协议什么的 不太清楚反正不要也是可以的

好了所以最终就是这样的:

QQ截图20160414133653

那个index.html是我刚才新建的

好了 现在我们来调用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

本来我是想这截图的 后来一想还不如直接发代码的好  上面就是一个简单的html 有头部 head 有主体body 然后我们调用了 css文件夹里面的连个css 文件font-awesome.min.css和font-awesome.min.css  好了接下来就是从css里面调用出来我们的Font Awesome图标了 我们来调用一个妹子图标  female 就是妹子图标的代码不懂的可以去上篇文章里面去找Font Awesome 4.5图标 一款风靡全球的图标字体库和CSS框架 里面有Font Awesome所有图标的样子和代码  好了知道了调用什么图标了 然后我们就开始写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
</body>
</html>

好了我们来看 我们的浏览器里面显示的是什么:

QQ截图20160414140700

看一个妹子出现了  好了 是不是太小了一点 我们来弄大一点

不过在这之前我们来解释一下这段代码

<i class="fa fa-female"></i>

开始我们说了妹子图标是

female

然而我们这里写的是

fa fa-female

这没有什么好奇怪的 别人css里面就是这样写的fa-female 不过前面为什么要加一个fa 我就不知道了

反正就是在你调用一个图标的时候 你知道了它的一个代码 就在前面加一个fa fa-然后再写咋i标签的class里面就可以了

好了 这就是简单的一个Font Awesome图标的调用 现在我们来把妹子变大吧!

QQ截图20160414142002

看是不是大了很多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
<i class="fa fa-female fa-lg"></i>
<i class="fa fa-female fa-2x"></i>
<i class="fa fa-female fa-3x"></i>
<i class="fa fa-female fa-4x"></i>
<i class="fa fa-female fa-5x"></i>
</body>
</html>

我们来看看代码 其实没有什么改变就是多了一个fa-lg 和fa-2x到5x 我刚才测试了最多就是5x 所以最大就是那么大了 如果还有什么其它变大的方法除外 fa-lg是放大30%  fa-2x到5x 这个是单位吧 我也不太清楚反正就是放大的东西

其实我们可以更改很多东西的用style控制 可以就可以更改:(比如说最简单的颜色)

QQ截图20160414144821

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i style="color:#ffb5b5" class="fa fa-female"></i>
<i style="color:#ff9696" class="fa fa-female fa-2x"></i>
<i style="color:#ff6b6b" class="fa fa-female fa-3x"></i>
<i style="color:#fe3b3b" class="fa fa-female fa-4x"></i>
<i style="color:#ff0e0e" class="fa fa-female fa-5x"></i>
</body>
</html>

就这样就可以了  好了今天就说到这里 简单教程 简单的实例呵呵!

它有很多标签是可以弄的不过今天就不说了 你们可以去它的官网去看看!

今天教程的原文件百度云下载:http://pan.baidu.com/s/1byEx7g