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>
<dt>计算机</dt>
<dd>用来计算的仪器 … …</dd>
<dt>显示器</dt>
<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 — 代表一个单元格
由于篇幅有限，今天的内容就介绍这么多。如果你有什么想法或者建议，欢迎评论交流！
