风之力科技
股票代码:781340
400-718-5885或13605745691
service@nwpit.com

技术资讯

28Mar2016
点击

HTML5学习总结

1.什么是HTML5
HTML5是一个概括性的术语,包含了新的以及增强的HTML元素、CSS样式、JavaScript API和事件。这些技术相互交叉,提供了大量的新特性来替身用户体验,使用网站更贴近于原声应用,而且能够与设备更好的集成。可用的,新的或增强的功能包括:
  • 提高网页的语义;
  • 表单;
  • Canvas绘图;
  • 拖放;
  • 本地存储;
  • 页面之间的信息传递;
  • 桌面通知;
  • 视频与音频;
  • 网页套接字;
  • 地理位置;
  • 历史信息;
  • 微数据;
在web开发中,并非所有的新东西都术语HTML5,CSS3就不是HTML5,但是它也很新而且很炫,因此将它放入到HTML5的范畴中。CSS是一款完全不同于HTML的语言和技术,CSS是为展示而生,HTML是为搭建而生。

1. HTML5中的新的结构元素:
1.1 doctype:
文件第一行

1.2字符编码

1.3 javacsript和CSS链接

1.4 语法编写风格
可以全部使用大写;
可以不使用引号;
可以忽略闭合斜杠;
或混合使用;

初始页面:

1.2 这新新的元素从何而来

2005年,google分析了10亿多个Web网站,并找到了开发人员和Web作者常用的类名,这使得HTML5规范的主编辑开始考虑这些新的元素。以下是常用的20个类名:

footer menu Tile
Samll Text Content 
Header nav Copyright
Button main Search
Msonormal data Smalltext
body stytle1 top
White link

有些类名供显示使用(比如white、style1、msnormal),而其他类名则构成了HTML5桂法中的元素(footer、nav、header)。

为什么要使用这些新的元素呢?HTML5让你可以为自己的内容提供语义含义。例如,如果你在页面中使用了导航,那么就可以试用nav元素,因为该元素蕴含了器内容的意义。

1.3 header元素建立网站表头

代码:

结果显示以及不同元素的作用:

下面列出了可以包含在header元素中的内容,
  • logo
  • 网站名/标题
  • 网站副标题
  • 搜索栏
  • 主导航栏
每个网站并没有限制只使用一个header元素,也没有要求它必须在页面的最顶部。

1.4 hgroup元素组合标题

使用新的HTML5元素hgroup,可以为header添加更多信息。
这个元素用来对多个相关联的h1~h6标题进行分组。

如果只有一个h1-6的标题,就没有必要使用hgroup了。

1.5使用nav元素创建导航

顾名思义,nav元素的作用是提供导航(navigation)。它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录,在wiki中经常可以看到)。

nav最常用的用途是作为网站的主导航。很多情况下,开发者都使用无序列表编写导航:

1.5理解
HTML5规定。只能在元素中放一些网站版权信息、作品来源、法律权限以及链接之类的信息。不能在里面放太多链接、重要的内容或无关的内容,如广告、社交媒体以及网站部件等。

1.6通过占位符文本添加提示
这种占位符文本也叫水印,因为这些文本的颜色一般是浅灰色的,用以区别用户真正输入的文本,要创建占位符,使用placeholder属性:
input id=name placeholder=Baron Scbwartz