网页开发HTML5入门内容，一起来学习吧

么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。那什么又是HTML呢？HTML 是用来描述网页的一种语言。HTML的上一个版本诞生于1999年。自从那以后，Web 世界已经经历了巨变。HTML 指的是超文本标记语言： Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言。而标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，因此HTML文档也叫做 web 页面。

HTML5 是如何创建的？

HTML5 是 W3C 与 WHATWG 合作的结果。W3C 致的是World Wide Web Consortium，也就是万维网联盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年的时候，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些新规则

新特性基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如 Flash）；更优秀的错误处理；更多取代脚本的标记；HTML5 应该独立于设备；开发进程应对公众透明。

为 HTML5 建立的一些新特性

用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储得更好地支持；新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search。

HTML 编辑器

专业的 HTML 编辑器来编辑 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法，高手们都是用记事本写的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到简称DW），大家可以自己尝试各种编辑器，再选择自己喜欢的。本教程是实用性类，不会长篇大论阐述理论，会留一些问题供大家去理解，不了解的话百度谷歌。

还需要的软件就是浏览器的准备，大家肯定知道什么是浏览器啦，现在谷歌，微软新版浏览器以及360等众多浏览器都是支持查看网页源代码的。鼠标右键选择查看源代码即可。

学习资料推荐：

在本文中，需要理解的点，在下面讲解中可能会混着讲，所以大家要看完教程之后自己去总结。

HTML文档是什么样
如何新建一个HTML文档
怎么打开HTML文档

首先打开DW，新建一个HTML文件，就是后缀是html结尾的文件。

用DW这样的HTML专业软件有个好处就是新建的文件已经自动写好的一个HTML文件的基本结构。文档标题在页面中间上部的标题处可以修改，也可以保存后自己再修改。

保存名字为教程1，可以看到文件是这样的。

之后，我们尝试用记事本打开这个文件。

用记事本打开的样子。跟DW打开是一样。

在body部分输入文字，内容随意，然后保存。

再用浏览器打开，我这边用的谷歌浏览器。打开之后可以看到如下图所示。相信大家对HTML文件已经有了一点点概念了。

再回到DW打开，可以看到，文件下边是代码，上边是结果。如果只看到代码，这是因为在页面左上角传视图的方式选择。选择拆分即可。

在DW中新建一个文件之后，你其实就已经看到一个HTML的基本结构了，这是我们刚才新建的教程1

红色的矩形框内部的内容，我们称为<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

<!DOCTYPE> 声明之后就是 <html> .....</html> 中间的那些我们暂时忽略。这两个尖括号之间的内容就告诉了浏览器，这段内容是html页面的内容。

在html页面中，哪些是被显示的，哪些是代码？相信通过第一节大家已经有所认识了，在HTML中，标签是通过"< >"表现的。而每一个标签都以对应的“</ >”来结束，如<html></html>,<head></head>,<title></title>.....。(当然也有例外，之后再说)

接下来就是在 <html> ，</html>之间编辑整个页面的头部和身体了.

头部用<head></head>来表示，之间的内容一般包含meta 和title，meta大家可以自己去了解，如果没有这一块，显示可能会出现乱码。一些预先的设置都会放在头部里，样式表等，就像是C语言程序中的头文件。title标签就是整个网页的标题。

编辑好了头部，就进入页面的身体啦。用body标签来表示很直观，也不需要刻意去记了。在实例1中body的内容很简单，只有一行文字，之后的内容也就是教大家如何将body丰富起来~~

掌握三个标签

1.HTML 标题<h1>-<h6>

2.HTML 段落<p>

3.HTML <br/>

HTML 标题

在 HTML 文档中，标题很重要。

标题是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

看看实例效果

关于查看文件的效果，大家可以保持浏览器打开，当DW中保存过文件以后，在浏览器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。在<p> </p>中输入如下内容，并在浏览器打开看一下效果。

如果我缩小浏览器的宽度，效果如下。

现在大家可以发现，html语言是一种排版语言，他会保证你可以看到内容的全部，随着浏览器的变化，文字排版也会跟着变化。你自己敲的空行，是不会显示出来。那么如何自己定义断行呢？介绍一个新的标签<br/>

<br/>标签

英文brake的缩写，很显然，就是打断的意思。因为这个标签是放在内容的结尾的，所以它的开始就是结束，因此他没有结束标签，所以没有</br>,只有<br/>,大家要记清楚~

这时就能看到断行啦。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。<hr>标签与<br>标签一样，没有结束标签。所以也可以写成<hr/>.

属性

在设置完水平线之后，我们还可以及设置水平线的宽度。

代码<hr width=50%> 这里的50%是指页面的50%，也可以设置一个具体的数值,比如50，是指50个像素，大家可自行尝试。

这里的width就是这个标签的属性。像这样的属性值，还有，align，size。但不同的效果，大家可以试试。这些效果学了CSS之后，都建议通过CSS样式表来实现。

<hr width=50>设定绝对长度；

<hr align=left>设置左对齐，当然也可以设置右对齐。

<hr size=1>这表示线宽；

曾有有一段时间属性值“=”后面是需要加引号的，<hr width=“50”>，但现在所有浏览器都支持不加引号，大家看到有引号不要觉得是错误的。

<标签名属性名=color> - 指定颜色

比如我可以给水平线设置颜色

在DW中输入color=“之后会弹出颜色选择，可以只选择颜色，DW会自动生成颜色代码。

代码为：

<h3>第四节水平线</h3>
<hr width=90% color=”#FF0000“>
插入一条水平线

效果如下：

字体样式

我们会举例说一些，但是在学习CSS之后，字体样式等于格式有关的功能，都会通过CSS样式表来实现。所以，这里大家只要稍微了解下就好。

举几个例子

加粗<b></b>；斜体<i></i>；下划线<ins></ins>；变小<small></small>；在html中，标签是可以嵌套的。大家可以仔细对比，以下代码，和效果。

短语格式

以下标签的显示结果是由浏览器和样式表决定的，这些标签标识的意思而不是效果。这句话可能有一些难以理解，大家学习久了就会有所体会。

<em>强调</em>；<strong>着重</strong>；<dfn>definition</dfn>；<code>表示这一行是源代码，仅用于小部分代码。</code>；<samp>例子代码</samp>；<kbd>用户输入</kbd>；<bar>变量</bar>；<site>引用</site>

我们试着输入这些代码。

列表

掌握几个标签<ul><li><ol><dl><dt><dd>，标签是可以嵌套的，大家自己可以试一试。

无序列表 <ul>和<li>标签

<ul>un-odered list <li>list item,一项

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。将<ol>标签与<li>标签一起使用，创建有序列表。

代码：

ol和ul可以嵌套自动缩进ul缩进每层标记不一样会有实心和空心等不同的标记。

<dl>、<dd>和<dt>标签

定义：<dl> 标签定义了定义列表（definition list）。<dd> 在定义列表中定义条目的定义部分。<dt> 标签定义了定义列表中的项目（即术语部分）。

用法：<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

举例代码：

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

浏览器中的效果如下：

table 标签 -- 代表HTML表格

table标签是成对出现的,以<table>开始,以</table>结束
引用网址:http://www.dreamdu.com/xhtml/tag_table/
属性

Common -- 一般属性

summary -- 代表表格的摘要说明

width-- 代表表格的宽度

border -- 代表表格边框(此属性应该使用CSS实现)

cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)

cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)

table，中文"表格"的意思

示例

<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

HTML表格示例 -- 可以尝试编辑

HTML table 标签示例
HTML th 标签示例
HTML cellpadding cellspacing 属性示例
HTML rowspan 属性示例
HTML colspan 属性示例
HTML colgroup col示例

说明

width-- 是表格的宽度,可以使用象素px或者百分比
border-- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
tr -- 代表一行
th -- 代表表格头
td -- 代表一个单元格

由于篇幅有限，今天的内容就介绍这么多。如果你有什么想法或者建议，欢迎评论交流！

事Web前端开发，HTML5语言是绕不开的话题，学好HTML5语言对于从事Web前端开发的人非常重要。那么，在广州Web前端培训班学习的人要如何学好HTML5语言呢?下面，小编就给大家分享一下。

1、基础

如果之前接触HTML4，可以尝试着去学习HTML5，如果没有基础建议去w3cshool官网了解一下HTML、css(css3)及JavaScript等知识。

2、建立逻辑思维

HTML5基础打好后，逻辑思维是下一步晋级必须面对的问题，这个阶段也许新手会感到复杂和棘手，但是如果你能迎难而上坚持下来不断自我总结，这是成为大牛必须经历的过程。

3、多跟后端交流

了解一下服务器开发，做前端总是要跟服务器配合的，你要是完全不懂后端，我可以说你的工作会遇到很多问题而且这些问题是完全无法避免的。

4、多实践

你跟大牛的其实不是技术的差别，而是一个项目和一百个项目经验的差别，每做一个项目比你单纯去看一本书实用得多，有机会要多尝试各种类型的开发，不断打破自己的舒适区。

对于零基础的学员如何才能在短时间内成为一名合格的Web前端开发?参加培训班无疑是最高效便捷的方式，千锋广州Web前端开发培训课程结合时下流行技术，三大阶段帮助学员从基础到进阶：

1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局，WebApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。

2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能，实现网站上的交互效果，以及模块化应用等，实现完整的前端工程。

3、Web前端框架、混合开发(Hybrid，RN)、大数据可视化。主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid，RN)、Angular前端框架、大数据可视化等。学习目标是可以独立完成相应的项目，如微信场景，应用Vue.js/Ionic/React.js等框架开发WebApp，微信小程序项目开发，以及各类混合应用项目开发等。

TML5 是一个新的web标准的集合，它包括全新定义的HTML标签和更为规范化的HTML标签，CSS3以及全新的javascript API接口。这些接口既能操作前端所见所得，也能操作后台输送到前台的数据，比如离线存储功能。【推荐教程：Html5视频教程】

HTML5技术主要用来做Web应用、WebAPP的开发，网页、网站的开发和维护等工作。HTML5技术开发的应用可以运行在PC端和移动端，iOS端和Android端。

HTML5都能做什么？

第一：刚出现不久的小程序，很流行，在开发的过程，HTML5技术就会应用的很多。

第二：移动端是HTML5不可缺少的技术，现在都是移动端的市场，人们手机的一些功能，缓存，音乐，视频，地位，Canvas绘图还有大量的特效，好看的效果，都是不可能离开HTML5技术。

第三：现手游的火爆程度，PC端游戏受到了冲击，比如LOL被王者荣耀冲击，这是时代的变化，HTML5可以做手机游戏，前景光明。

第四：互联网的各种应用，在如今变化多端的互联网，好像任何东西都仿佛离不开了HTML5的技术。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

· 新的解析规则增强了灵活性

· 新属性

· 淘汰过时的或冗余的属性

· 一个HTML5文档到另一个文档间的拖放功能

· 离线编辑

· 信息传递的增强

· 详细的解析规则

· 多用途互联网邮件扩展（MIME）和协议处理程序注册

· 在SQL数据库中存储数据的通用标准（Web SQL）

以上就是html5能做什么的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

在线咨询

上一篇：html乱码-解决gb2312编码导致乱码问题
下一篇：如何在 Web 服务器文档根目录上设置只读文件权限

您的项目需求

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

整合营销服务商