精选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

签

标签：又称元素，是HTML的基本组成单位双标签（绝大多数都是双标签）：<标签名>标签体</标签名>第一个标签叫起始标签，第二个标签叫结束标签例：<marquee>尚硅谷，让天下没有难学的技术！</marquee>单标签：<标签名/>/可以省略例：<input>
标签名不区分大小写，但推荐小写，因为小写更规范
标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进
1
2
3
4
5
<marquee>
尚硅谷，让天下没有难学的技术！
<input>
</marquee>
<input>

标签属性

用于给标签提供附加信息
可以写在起始标签或单标签中，形式如下：<标签名属性名="属性值" 属性名="属性值">
1
2
<marquee loop="1" bgcolor="orange">尚硅谷，让天下没有难学的技术！</marquee>
<input type="password">
有些特殊的属性，没有属性名，只有属性值，如：<input disabled>

不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）属性名、属性值不能乱写，都是W3C规定好的属性名、属性值，都不区分大小写，但推荐小写双引号，也可以写成单引号，甚至不写，但推荐写双引号标签中不要出现同名属性，否则后写的会失效，例如：<input type="text" type="password">

基本结构

想要呈现在网页中的内容写在body标签中
head标签中的内容不会出现在网页中
head标签中的title标签可以指定网页的标题
1
2
3
4
5
6
7
8
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>

注释

特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
作用：对代码进行解释和说明
写法
1
2
3
4

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>
注释不可以嵌套

文档声明

作用：告诉浏览器当前网页的版本
写法

旧写法：要依网页所用的HTML版本而定，写法有很多参考：W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
新写法：W3C 推荐使用 HTML 5 的写法
1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

文档声明必须在网页的第一行，且在html标签的外侧

字符编码

计算机对数据的操作存储时，对数据进行：编码读取时，对数据进行：解码
编码、解码，会遵循一定的规范 —— 字符集
常见的字符集ASCII：大写字母、小写字母、数字、一些符号，共计128个ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个GB2312：继续扩充，收录了 6763 个常用汉字、682个字符GBK：收录了的汉字和符号达到 20000+ ，支持繁体中文UTF-8 ：包含世界上所有文字与符号
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码
1
2
3
<head>
<meta charset="UTF-8"/>
</head>

设置语言

主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化
具体写法：<html lang="zh-CN">
lang属性的编写规则语言-国家/地区zh-CN ：中文-中国大陆（简体中文）zh-TW ：中文-中国台湾（繁体中文）zh ：中文en-US ：英语-美国en-GB ：英语-英国语言—具体种类（已不推荐使用）zh-Hans ：中文—简体zh-Hant ：中文—繁体W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》 W3C官网上的说明：《Language tags in HTML》

标准结构

HTML标准结构如下
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

</body>

</html>

VSCode 删除行快捷键：Ctrl+Shift+K

输入!，随后回车即可快速生成标准结构
配置VScode 的内置插件 emmet ，可以对生成结构的属性进行定制
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

在线咨询

上一篇：setTimeout和setImmediate到底谁先执行
下一篇：jQuery UI 实例-缩放（Resizable）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

精选13个HTML5学习必备网站

选13个HTML5学习必备网站

签

标签属性

基本结构

注释

文档声明

字符编码

设置语言

标准结构

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

您的项目需求