<!doctype html>
每种浏览器内部都有许多的渲染模式，比如html和xhtml等等，我们制作的网页需要告诉浏览器如何用正确的方式去渲染它。上行代码就告诉浏览器要用标准，兼容的模式来解析渲染这个HTML页面。
<html>
<head>
</head>
<body>
</body>
</html>
某种程度上可以把head标签视为一张身份证，更加正确地说head标签应该是html文档中所有元数据(metadata)的集合之处。
head元素包含了title，link，style，base和meta元素。唯一必须需的元素是<title>,正如每个人都需要一个名字一样。此外，标注语言也是一件重要的事，这样能便于浏览器正确地解读我们的页面而不会出现乱码。这个语言在我们使用<meta>标签的charse来加以设置，将页面的编码指定为“UTF-8”，这是一种通用的编码，又称为万国码，这样我们就能在网页上显示任何语言了。
PS:除了"UTF-8"之外，还有许多不同的范围较窄地编码形式，如简体中文地"GB2312"。问题在于设置了以后，一旦页面中出现韩文或日文，这部分字符将显示乱码。为了避免此类问题地出现，强烈建议所有页面都选用"UTF-8"的编码形式。
下面为html文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5学习邀请函</title> <link href="css/text.css" rel="stylesheet"> </head> <body> <div id="invite" > <h1>Let's Learn Html5</h1> <p>发挥您的美感与想象力，探索web开发的无限可能性,现邀请您一同踏上HTML5的学习之旅。</p> <a href="invite.php" id="enroll">邀您参加</a> </div> <script src="js/text.js"> </script> </body> </html>
在<body>中，我们加入了一项标题，一项段落元素，以及一项链接元素。这些元素都直接位于<body>元素的下级，这就好像在一个空荡荡的房间里放进去几件衣服，让人感觉有几分怪异。衣服本来应该是整整齐齐地放入房间的衣柜中，而现在在我们地代码里，衣柜不见了。
要解决这一问题，就要在页面中加入一些“容器”或是“区块”。通过将更细小的事务归类到不同的功能或内容区域中，能够使页面结构更加井井有条，并且有利于后续的页面美化。而html这样的区块有很多，比如<header>,<section>,<article>,<aside>,<footer>。
PS:当页面结构比较复杂，区块较多，就出现<div>,<div>,<div>扎堆的情况，给代码的阅读增加很大困难。因此，给div命名，能够在某种程度上增强代码的阅读性，而且命名最好有涵义，以便于理解div对应的功能或内容。比如上述给div取名为invite。
下面为css部分代码
html,body {
height: 100%;
color: #fff;
}
#invite {
width: 100%;
text-align: center;
position: absolute;
top: 18%;
/*transform: translateY(-50%);*/
/*-ms-transform: translateY(-50%);/* IE 9*/
/*-moz-transform: translateY(-50%);/* Firefox */
/*-webkit-transform: translateY(-50%);/* Safari Chrome */
/*-moz-transform: translateY(-50%);/* Opera */
}
body {
background: url(../img/宁静.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
/*position: relative;*/
}
h1 {
color: #ffffff;
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
p {
font-size: 21px;
margin-bottom: 50px;
}
a {
font-size: 18px;
color:#fff;
border: 1px solid #fff;
border-radius: 3px;
/*height: 40px;
width: 240px;*/
padding: 10px 100px;
text-decoration: none;
}
下面为js部分代码
var enroll=document.getElementById("enroll");
enroll.onclick=function(e){
e.preventDefault();
enroll.innerHTML="报名成功";
enroll.style.borderColor="#27cb8b";
enroll.style.background="#27cb8b";
}
最后展示结果
点击 邀您参加 有简单的效果
