<!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.οnclick=function(e){
e.preventDefault();
enroll.innerHTML="报名成功";
enroll.style.borderColor="#27cb8b";
enroll.style.background="#27cb8b";
}
最后展示结果
点击 邀您参加 有简单的效果