网页开拓工具有很多，我利用的是对新手较为友好的Dreamweaver，其优点在于简便、直不雅观、功能丰富，简称为“傻瓜化”。下载请点击这里。
1.1 创建首个HTML5页面
在准备好的开拓工具中，首先输入第一行HTML代码，如下：
<!doctype html>
接下来，我们须要为页面构建最基本的构造框架。首先要建立最外侧的围“围墙”，来席卷全体页面，这须要利用到< html >标签，后续所有页面内容都卸载这对标签之内。而围墙之内又分为“头”和“身体”两部分，分别用< head >和< body >标签来指定。
<html> <head> </head> <body> </body></html>
< head >类似“身份证”，里面须要两项基本信息，一项是“名字”和“措辞”。
正如每个人都有一个名字，< head >中唯一必须的元素便是< title >，即页面的标题。此外，还须要标注“措辞”来使浏览器精确解读我们的页面而不会涌现乱码
<head><meta charset=\"大众UTF-8\"大众><title>HTML5学习约请函</title></head>
< body >标签中则包含了所有要呈现给浏览者的内容信息。
<head>Let's Learn HTML5</head>
.
1.2 增加必要的页面元素
为了对页面内容加以充足，我们利用标题标签。在HTML的各种标签中，标题标签有六个，按从大到小的层次构造为< h1 >到< h6 >。在这里我们就用< h1 >。
<body> <h1>Let's Learn HTML5</h1></body>
接着要添加解释笔墨。解释笔墨放在段落标签< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开拓的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p></body>
末了是添加按钮。按钮的本色是文本链接，单击后跳转到某个URL。链接的标签为< a >，跳转的URL可以用该标签的href属性来指定，单击跳转到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开拓的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href=\"大众invite.php\"大众>邀您参加</a></body>
1.3 页面中看不见的代码
页面中加入区块，可以将各种标签放入不同的内容区域中，可以是页面构造变得井井有条，便于后续的页面美化。而这次利用的便是通用区块< div >。修正代码如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开拓的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href=\"大众invite.php\"大众>邀您参加</a> </div></body>
此外，区块还可以进行命名，我们以便直接对应到这个区块。添加一个id属性，命名为container：
<div id=\公众container\"大众> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开拓的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href=\"大众invite.php\"大众>邀您参加</a> </div>
2.1 添加页面背景
背景图片要放置在和 index.html相同的路径下。css样式代码可以指定各种页面元素的呈现形式，但是在创建css样式代码之前，还须要在头部创建style元向来作为样式的容器。
<head><meta charset=\"大众utf-8\公众><title>HTML5学习约请函</title><style type=\"大众text/css\"大众></style></head>
添加背景须要创建background样式：
<style type=\"大众text/css\"大众> body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)} </style>
这是网页的预览图，有没有创造什么问题？网页背景图片没有和网页的大小相匹配，涌现了两张或好多张图片一起添补网页背景的情形。这是由于图片分辨率和浏览器的显示分辨率不同，因此要使图片根据浏览器的分辨率进行缩放。这就须要设置background属性在横向和纵向上的属性，使其充满全屏。
<style type=\"大众text/css\"大众> html,body{height: 100%;} body{ background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center; background-size:cover; } </style>
想要改变字体颜色的话，须要利用color属性：
html,body{ height: 100%; color: #ffffff; }
2.2 调度区域位置
调度区域位置在网页设计中很主要，就想写微信推文，一个好的排版总能让民气境愉悦想要连续读下去，网页也一样，不能总是把东西都堆在一块，或者所有页面千篇一律。
在这个页面上，我想让内容居中显示，于是通过设置container这个容器（便是前面的id为container的div），使其宽度为100%，即横向充满全体屏幕，然后设置个中的笔墨居中：
#container{ width: 100%; text-align: center; }
在创建css样式时，id类型的选择器须要利用“#”来定义。
之后须要变成垂直居中，先对container的父级，即页面的body做些属性定义，然后通过改变top属性来实现：
body{ background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center; background-size:cover; margin: 0; padding: 0; position: relative; } #container{ width: 100%; text-align: center; position: absolute; top: 50%; }
要掌握container的top属性，就要使container的定位办法为“绝对定位”，而这又须要body（container的父级）为“相对定位”。
top: 50%;使得container的顶部位于全体页面的50%位置。
不过要使得内容区块整体居中，还要使container向上移动其高度的一半。但问题在于container的高度是随着后续的字体、按钮样式而不断动态变革的值，以是不可以直接设置确定值，须要设置transform属性，设置其translateY的数值，使其在Y轴上移动-50%，即向上移动其高度的一半而无需声明container详细多高。代码如下：
#container{ width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transfrom:translateY(-50%); }
这里多次重复定义是由于，不同浏览器对付transform属性的支持并不相同，为了使得页面在各种浏览器下都能够正常显示不得不这么做。
2.3 调度字体和字号
考虑到不同电脑上字体库的问题，可能同一个字在不同电脑上显示不同或生僻字不能显示，须要设置font-family属性为sans-serif，即系统默认的无衬线字体;
html,body{ height: 100%; color: #ffffff; font-family: sans-serif; }
接下来要调度笔墨大小，将h1标题的字号设置为了更大的54像素，并且小写变大写：
h1{ font-size: 54px; text-transform: uppercase; margin-bottom: 20px; }
设置解释笔墨的样式，使段落笔墨字号更大，且拉开间隔，代码如下：
p{ font-size: 21px; margin-bottom: 40px; }
后记：对付大部分转行的人来说，找机会把自己的根本知识补齐，边事情边补根本知识，至心很主要。\"大众我们相信大家都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚拢地。\"大众
