整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一键看懂Html5,就这么简单

TML5是WEB开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势。曾几何时,当HTML5出现在web端开发领域的时候,并没有引起太多人的注意,究其原因,一方面是它还没有被广泛的支持,在IE中不好使,另一方面就是程序员自身对于XHTML代码的情有独钟了,毕竟对于成熟的程序员而言,新鲜的技术面临挑战和泡沫。

彷徨和疑虑从根本上讲是来源于对于HTML5技术内核和未来发展的不了解。HTML5技术用于实现我们能够看到的所有网站,但是不涉及到数据层面(也就是负责将一张设计好的网页图片[设计师的工作],用代码实现出来,在一个地方放置个块,给一个块设置颜色,调整字体大小,让图片动起来等)。

也许你会有这样的疑虑,以上这些工作内容网页设计与制作职位也能完成啊,通过网页三剑客PhotoShop、Flash、Dreamweaver就可以做到。然而原有的网页设计与制作,主要针对PC平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。近年来随着移动互联网的飞速发展,HTML5的地位迅速提升。移动设备有其特殊的开发要求,原有的网页设计与制作,早已无法满足开发的需要。

如今HTML5被广为流传,各类媒体更是炒的如火如荼,很多文章都在不遗余力的介绍HTML5技术,加之Apple的支持, Adobe围绕HTML5的产品开发,以及移动flash的死亡,如此多网站的支持,HTML5已经揭去了神秘的面纱,切实迎来了发展的浪潮。

行业的快速发展,未来必将面临更多的竞争,只有不遗余力的把自己打造成一把利剑,从专业度到职业素质,只有比别人更突出、更优秀,才能够在这个相互选择的世界中拥有选择的权利。

目标清晰并且勤于努力的人,才会成为HTML5(http://www.bjstudents.com/H5.html)浪潮中的受益者。翡翠科技HTML5专项实训课程,就是针对这部分年轻人倾力打造的专属课程,在“基础知识+动手实操+项目实践”的综合训练下,帮助学员快速成长成为HTML5高手,在HTML5的浪潮中站稳脚跟,变得优秀起来。

行业好,也不能盲目跟风,找到适合自己的发展方向,才能最终赢得完美的结局。HTML5浪潮来袭,你找到自己成功起航的路径了吗?

TML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行:

<!DOCTYPE html>

如果你想跟其他标签一样使用小写,可以使用以下代码:

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母:

  • 混合了大小写的风格是非常糟糕的。

  • 开发人员通常使用小写 (类似 XHTML)。

  • 小写风格看起来更加清爽。

  • 小写字母容易编写。

不推荐:

<SECTION>

<p>这是一个段落。</p>

</SECTION>

非常糟糕:

<Section>

<p>这是一个段落。</p>

</SECTION>

推荐:

<section>

<p>这是一个段落。</p>

</section>

除此之外,中星小编还介绍4款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧。

1、基于HTML5 Canvas的图表插件Chart.js

chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效,这也是HTML5 Canvas的一大功劳。

柱形图折线图饼状图环形图雷达图极线图

2、HTML5 3D动画柱状图表

这次我们要分享一款很酷的HTML5 3D图表应用,它是一款柱状图表,呈3D的外观样式,并且我们可以改变图表的颜色主题,让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据,在切换的时候有不错的动画效果,而且,我们还可以切换图表的大小,以适应不同大小的浏览窗口。

3、CSS3 3D环形进度条 带进度百分比

这是一款基于纯CSS3的环形进度条,而且,从外观上看,这款进度条很有3D立体的感觉,尤其是在进度条上有立体的投影,显得非常小巧迷人。另外,进度条的环形中央带有进度百分比,可以实时根据进度来更新百分比的数值,和之前分享的HTML5/CSS3扇形进度条动画相比有一定优势。

4、纯CSS3垂直Tab菜单 Tab样式可自定义

Tab菜单在网页上使用起来非常方便,也比较节省空间,所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单,它是用纯CSS3实现的,加载和切换特别灵活。另外,Tab菜单的样式你可以使用CSS重新定义,扩展很方便。

、编码格式:使用UTF-8

请确保您的编辑器使用的字符编码为UTF-8,没有字节顺序标记。在html模板或文档中通过meta来定义编码格式。

6、注释

根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!

7、TODO待定项

尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。在todo项中如果有必要列明联系人,比如负责人。在TODO后追加一个冒号作为行动内容,例如TODO:为网站增加html5模板。

么是html?

html是一种简单易记,功能强大的标记语言,它是学习前端知识的第一站,也是所有WEB开发者、乃至产品经理、运营人员必须学习的一项基础内容。

为什么学习html5?

1. html5是WEB开发者,必须掌握的基础知识;

2. html5应用广泛,它可以用来开发网站、WEB应用、WEB游戏等等,如微信小程序、移动端小游戏等都跟html5有关;

3. html5很容易掌握,花几个小时就可以掌握它;

课程特点

1. 讲师讲课风格幽默,整个学习过程轻松有趣,不枯燥、不乏味;

2. 以就业为导向,与实战相结合,满足大部分学员的学习需求;

学习建议

1. 学完每一节课程,动手将代码打一遍;

2. 举一反三,学完每节课程,思考一下它的应用场景;

3. 完成本门课程,试着自己写一个纯html5的网页;

适宜人群

1. 零基础学员;

2. 前端爱好者;

1、DOCTYPE 描述文档的类型,规定web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

网页可以使用的具体版本,网页中可以使用那些标记,每个版本的DTD版本均有不同

2、<html></html> 网页文档中的根标记

html 标签有三个特殊的属性  

  • manifest 指定网页缓存文件,可以让用户离线的时候也可以访问文件。
  • xmlns 设置html名空间,比如把网页设置成xhml的时候可以使用这个值。
  • lang 设置网页的描述语言,比如中文是zh;英文是en。

3、<head></head>头部标签在网页中只能有一个,设置HTML文档的头部信息,里面内容不会在页面中显示出来·。

head里面的标记

  • <meta> 标记
  • <title>定义网页的标题
  • <link> 链接
  • <script> 标记JavaScript脚本的内容
  • <style> 标记css样式
  • meta 标记

4、<body></body>只能有一个,显示网页的主体内容。

(一)、<meta>标签

<meta>元素的属性:

  • name 描述信息的名称,来标记这是一个什么样的信息
  • http-equiv 描述行为
  • content 描述的内容
  • charset 指定网页的编码

1、name 属性

1 <meta name="author" content="nyw">
2     <!--作者, 定义网页的作者 -->
3 <meta name="description" content="meta标记学习">
4     <!-- 描述,描述网页的实际内容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 关键字,定义网页关键字 -->

2、http-equiv属性

1 <meta http-equiv="refresh" content="30">
2     <!-- 网页30s后自动刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 网页30秒后跳转到dom.html文档 -->

<meta http-equiv="refresh" content="5,url=dom.html">

http-equiv描述网页的行为,行为 refresh刷新,内容为5,表示5秒后跳转到 dom.html这个文档。

3、content 属性

特殊属性

  • content-type 指定http头部信息的文字编码(最为常用)
  • default-style 指定优先使用的样式单(stylesheet)
  • refresh 用于网页的自动刷新或是页面跳转
  • set-cookie 设置页面的cookie(现在已经不再推荐使用)

4、charset属性

指定网页的编码,推荐使用UTF-8来增加网页的兼容性。

代码实例:

为搜索引擎抓取机器人准备一些信息

这段代码可以禁止搜索引擎缓存和跟踪网页。

<meta name="robots" content="noindex,nofollow">
    <!-- name定义的是机器人,内容部分表示不要被搜索引擎缓存,也不要被搜索引擎跟踪 -->

代码实例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>网页标题(显示在浏览器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者, 定义网页的作者 -->
 8     <meta name="description" content="meta标记学习">
 9     <!-- 描述,描述网页的实际内容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 关键字,定义网页关键字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 网页30s后自动刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 网页30秒后跳转到dom.html文档 -->
16     <meta name="robots" content="noindex,nofollow">
17     <!-- name定义的是机器人,内容部分表示不要被搜索引擎缓存,也不要被搜索引擎跟踪 -->
18 </head>
19 <body>
20 </body>
21 </html>

(二)、title、base标记

title和base标记都是写在head标签中

title:设置网页的标题

写法:<title>内容</title>。

base:指定网页跳转基准URL,如果不指定的话默认为当前网站的当前路径。

写法:<base href="http://www.aaa.zzz/">

base属性值:

  • href 指定网页跳转到基准URL,如果不指定的话则默认为当前网站的当前路径。

<base href="http://baidu.com/"> 这是将页面跳转到百度的网站打开。

  • target 指定链接的跳转帧如果不指定的话,则是在当前页面中跳转。

<base target="_blank"> 网页中的链接都应该在新的窗口中打开。

terget属性值:

  • _blank 在新窗口中打开被链接的文档
  • _self 默认值,在相同框架中打开被链接的文档
  • _parent 在父框架集中
  • _top 在整个窗口中打开被链接文档·
  • framename 在指定框架中打开被链接文档

(三)、link标记

link标记:链接外部文件时使用的标记,可以把外部文件的内容引入到当前文件中来,使当前网页实现更多的功能。

link属性:

href:指定链接外部路径的路径和文件名,要设置全路径并且带文件名

rel:引用文件,引用资源的类型定义

我们在使用link标签引用外部文件的时候,外部文件的类型是多种多样的。

alternate 代替文档(种子,其他语言版本,其他格式等等)

author 网页的作者

help 帮助文件的链接

icon 网页的图标

next 如果是连续网页的时候,指定下一个网页

prefetch 把链接外部资源时提前缓存起来。

prev 如果是连续网页

media 链接文件或是资源属于哪一种资源。

hreflang 链接文件的语言种类

type 链接文件的mi/me类型(比如说,图片图标文本)

sizes 根据link链接文件的类型,来指定文件的大小

代码示例:

链接网页图标:

网站的图标指定,可以显示在浏览器的图标栏,也可以被手机读取作为网站的图标存入收藏夹
1 <!-- 网站的图标指定,可以显示在浏览器的图标栏,也可以被手机读取作为网站的图标存入收藏夹 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意:后面的href和前面type标注的类型要一致,这样既可以显示在浏览器,又可以显示在手机上

链接外部样式单

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主题样式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">

说明:

alternate 会在浏览器中会弹出一个对话框,供用户可以进行选择

media 表示媒体类型为屏幕,可以是手机,但不包括打印机和投影仪

title 对这个link进行简单的说明

网站RSS种子指定

<!-- 网站RSS种子指定 -->
    <link rel="alternate" type="application/rss+xml">

为搜索引擎的准备的网页的URL

<!-- 为搜索引擎的准备的网页的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告诉搜索引擎代替URL是哪里。