整合营销服务商

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

免费咨询热线:

精选13个HTML5学习必备网站

选13个HTML5学习必备网站

Tim.D⛄ 少先队科技 产品经理 5小时前

给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对html5的学些和研究。

1. W3C HTML 5 权威教程,学习HTML5的各种标签,查询参考手册。

2. HTMLDemos可以插件HTML5标签在各浏览器的兼容性,同时你还可以查看各种HTML5的标准Demo演示。

3. 苹果提供的HTML5演示站点,提供很多很绚丽的HTML5Demo。链接

4. 测试浏览器对HTML5的支持,并打分,可以知道你当前的浏览器对HTML5的支持情况如何,各种标签和组件的支持情况。链接

5.360的HTML5基地。链接

6. WHATWG博客是网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客。链接

7. HTML5医生发表了许多文章,都是关于HTML5及其语义、及如何正确使用它的。他们也通过“询问医生”收集了很多问题,并在文章中予以回答,所有人都可从中受益。链接

8. 这是一个以表格制成的备忘单形式的单页面,描述了HTML5、CSS3、SVG及其他未来网络技术的特征。链接

9. 这个备忘单就是一个简单的可视网格,包含了所有HTML5标签和相关的属性。链接

10 .一个提供HTML5各种功能演示的网站,提供各种HTML5的显示Demo。链接

11. 这个网站提供了大量的HTML5游戏资源,喜欢HTML5游戏的童鞋们,可以千万别错过哦。链接

12. 一个HTML 5的文档资料网站,做得很出色。介绍的图片全是用了涂鸦的方式,很直观,很可爱的网站。链接

13.h5之家(中文学习园地)。链接

今天就给大家推荐到这里,这15个网站,基本上可以算得上是HTML5学习研究的上上至宝了。如果你也有更好的HTML5网站推荐,欢迎评论并留下网址信息,方便整理。

出于对PMCAFF用户的尊重,任何在PMCAFF产品经理社区发布的内容,在未经允许的情况下,不得在任何平台被直接或间接发布使用或被用于其他任何商业目的。如有违反上述声明者本网站将追究其相关法律责任。

微信公众号:pmcaffcom

投稿邮箱:tougao@pmcaff.com

Greated by PMCAFF产品经理社区 - www.pmcaff.com

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。

TML5发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐8款优秀的HTML5开发工具,帮助你更高效的编写 HTML5 应用。

1、Initializr

Initializr 是制作 HTML5 网站最好的入门辅助开发工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr 会为你生成代码简洁的可定制的网页模板。

2、HTML5demos

想知道你的浏览器是否支持 HTML5 Canvas 吗?想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗?HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。

3、HTML5 Tracker

想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧,它可以跟踪 HTML5 最新修订信息。

4、HTML5 visual cheat sheet

想要快速超找一个标签或者属性吗?看看这个非常酷的速查手册吧,每个Web开发人员的必备。

5、Switch To HTML5

Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目,可以到这里获取免费的 HTML5 网站模板。

6、Cross browser HTML5 forms

HTML5 中的日历,取色板,滑块部件等都是非常棒工具,但是有些浏览器不支持。这个页面将帮助你构建完美的HTML5表单兼容方案。

7、HTML5 Test

你浏览器准备好迎接 HTML5 革命了吗?HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。

8、Lime JS

LimeJS 是一个 HTML5 游戏开发框架,用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒的HTML5开发工具,一定要用用试试。

更多内容和资讯或者问题,更多干货分享,尽在我的个人微信公众号,

微信名:非著名程序员,微信号:smart_android(←长按复制)。

微博:涩郎