【前端入门必看】手把手带你打开前端的大门（涵盖HTML,CSS3,JS）
-
前言
-
一、制作HTML页面
-
- 1.1 创建首个HTML5页面
-
1.2 增加必要的页面元素
-
1.3 页面中那些看不见的代码
-
二、页面的美化
-
- 2.1制作贺卡的页面背景
-
2.2调整贺卡内容区域位置
-
2.3 调整贺卡文字字体与字号
-
2.4 制作贺卡的按钮
-
2.5 创建一个外部CSS文件
-
三、为页面创建交互
-
- 3.1 创建按钮的javascript交互
-
总结
=================================================================
如果你跟我一样也是一名前端初学者，是一个准备学习H5的小白，而HTML5就像是耸立在远处的一座小山，看上去朦朦胧胧，不甚清晰。很容易就一头扎进各种标签、属性、参数这些细节中去。如果只看这些，反而失去了趣味。既然我们要学习他，就要远远地欣赏一下它的全貌，本篇文章通过设计一张贺卡，直观地体验一下HTML5页面的诞生过程。
=========================================================================
<!doctype html>
这相当于一个声明，用于浏览器标准化
反正只需要记住制作HTML5网页都把它放在第一行就完事了
接下来我们构建HTML5页面最基本的框架
//相当于一面围墙用来囊住整个页面 //相当于页面的头 //相当于页面的身体 //标签都是一对一对出现的 就像是网页的一张身份证，需要有两个基本信息，一个是“名字”，一个是“语言”,中唯一必须的元素就是//一般页面编码都指定为UTF-8
新年贺卡
便签则是所有要呈现给浏览者的内容信息Happy NewYear!
接下来我们将它命名为2022.html,那么我们的首个HTML网页变创建完成，使用浏览器把他打开就是这个样子：
因为我们已经在body中添加了标题，但是在网页中我们根本看不出来那是一条重要的标题，因此我们应该给“Happy NewYear!”添加一个标题标签。
标题标签一共有六个，按层次结构分为< h1 >到< h6 >。那么我们先给"Happy NewYear!"冠以< h1 >这个最大的标题。修改< body >代码如下：
Happy NewYear!
有了标题后，也应该有段落内容，这时候就用到了< p >标签，修改< body >代码如下：
Happy NewYear!
祝您虎年大吉，阖家欢乐，万事如意，心想事成！
最后，还想加一个收红包的按钮加入到页面中。这个按钮实质上就是一个文本链接，点他就会跳转到某个URL。链接的标签为< a >，在此，我们假定单击"收下红包"后，页面会跳转到一个名为"hu.php"的其他网页。修改< body >代码如下：
Happy NewYear!
祝您虎年大吉，阖家欢乐，万事如意，心想事成！
保存2022.html,在浏览器中打开这个页面，效果如下图所示：
如果把我们的< body >比作是一个衣柜的话，那么里面的内容都是一件件的衣服，但是我们平常的衣柜都有很多隔断，有的里面放裤子，有的放衣服，有的放帽子。总不能把这些都混在一起放。这个时候< body >标签里就需要 " 容器 "，来将他们分类，使页面结构变得井井有条。HTML5中的容器有很多，有一些是新增的标签，如< header >、< section >、< footer >等，还有则是< div >这样通过的区块。
在这个例子中，由于只有几项简单的内容元素，没有涉及到一个页面中存在多个版块的情形，因此不适用< section >这样的标签。在此，我们用一个< div >将所有内容都包含进去就行：
Happy NewYear!
祝您虎年大吉，阖家欢乐，万事如意，心想事成！
如果代码中有很多< div >，为了更好的控制其中某个区块，应该给< div >都赋予名字，这样我们通过名字就能直接对应到这个区块。我们就给他增添一个 id 属性，命名为 first ，修改< div >这一行代码如下：
======================================================================
下一步就是完成贺卡的美化工作，我们将使用HTML5的核心 – CSS来完成 通俗来说，HTML5相当于我们构建了一个整体的框架，而CSS就是套上了一套皮肤。这里，我准备了一张名为chun_jie.jpg的图片作为贺卡的背景，但是像素大小没整好显得尺寸偏大了很多。
注意，chun_jie.jpg这一图片文件应放在和2022.html同一路径下
如下图所示：
chun_jie.jpg:
路径：
接下来我们就要创建CSS样式：
在定义CSS样式之前，我们应该创建相应的容器来容纳这些样式。
所以我们可以在页面头部创建一个style元素来作为样式的容器。在< head >标签中，增加< style > 标签，将type属性设置为 “text/css”。代码如下：
新年贺卡
创建完容器后，我们就可以往里面添加CSS样式了。首先，将chun_jie.jpg设置为页面的背景。因为< body >中包含了所有呈现给浏览者的内容信息，因此只需要给body 创建 background样式就能设置为背景，在style中添加代码如下：
body 表示样式应用的对象事< body >标签。括号内为样式的详细内容。在浏览器中访问该页面，如下图所示：
一看这个图就知道，测试效果不尽如人意，他显得太大了。像素超过了浏览器的显示分辨率。我们应该确保图片主题填满浏览器整个区域。此外，为了让背景图片居中我们还得设置body的background属性在横向和纵向两个方向上都居中，就得添加两个" center "。最后，浏览器默认是没有给予body高度属性的，要确保图片自适应全屏要给html设置height属性，将其设置为100%，最后在body原有样式中添加background-size属性，设置为" cover "。
html{
height: 100%;
}
body{
background:url(chun_jie.jpg) center center;
background-size: cover;
}
浏览该页面有：
然后我们再改变一下字体颜色，设置为白色：
body{
background:url(chun_jie.jpg) center center;
background-size: cover;
color: #ffffff;
}
浏览该页面：
下面我们想要实现文字放在整个页面的正中，但是实现这一操作并没有这么简单。
首先我们实现水平方向上的居中，我们的思路是，通过设置first这个容器的宽度为100%，即横向撑满整个屏幕，然后再设置内部文字居中。代码如下：
#first{
width: 100%;
text-align: center;
}
浏览网页：
再改变竖直方向到一个合适的位置：
body{
background:url(chun_jie.jpg) center center;
background-size: cover;
color: #ffffff;
margin: 0; //用来消除浏览器对页面元素预设的一些默认边距值
padding: 0;
}
#first{
width: 100%;
text-align: center;
transform: translateY(150%); //自行动态修改
}
浏览网页看一下效果：
位置确定了，接下来修改一下字体：
h1{
font-size: 54px; //字体大小
text-transform: uppercase; //设置为大写
margin-bottom: 20px; //控制标题与下方元素的边距
}
修改后的显示效果：
同样方法，修改一下段落文字：
p{
font-size: 21px;
margin-bottom: 40px;
}
修改后的显示效果：
现在，贺卡已经初见雏形，再来稍加修缮，下面我们制作一个" 收下红包 " 的按钮，并认识一下HTML5中另一个非常重要的样式运用 — 边框
在此我们想制作一个圆角细线按钮，接下来创建如下代码：
a{
font-size: 18px;
color: #fff;
border: 1px solid #fff; //细线边框宽度为1像素
border-radius: 3px; //圆角像素
padding: 10px 100px; //按钮垂直和水平方向的内边距
text-decoration: none; //消除链接下划线
}
让我们一起看看效果：
是不是还不错，但是到这里还远没有结束，让我们继续完善一下细节
不知不觉间我们已经创建了许多的CSS样式，这些都放在了< head >的 style 元素中，这样代码显得复杂，看起来就很难受。下面我们就将样式和HTML代码区分开，把所有样式都放在外部CSS文件中，然后在HTML文件中引入样式文件。
我们在代码编辑器中新建一个CSS文件，命名为css.css，放置在与2022.html同一路径下，下面我们将2022.html中的样式全部拷贝在新文件中，代码如下：
@charset “UTF-8”;
html{
height: 100%;
}
body{
background:url(chun_jie.jpg) center center;
background-size: cover;
color: #ffffff;
margin: 0;
padding: 0;
}
#first{
width: 100%;
text-align: center;
transform: translateY(150%);
}
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
p{
font-size: 21px;
margin-bottom: 40px;
}
a{
font-size: 18px;
color: #fff;
border: 1px solid #fff;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}
接下来，修改2022.html,去掉 < style >标签，取而代之使用< link >标签来引入CSS样式文件，代码如下：
这样将HTML文件与CSS文件区分开，文档的结构和分工就更清晰了。
修改后的2022.html全部代码如下：
Happy NewYear!
祝您虎年大吉，阖家欢乐，万事如意，心想事成！
顶到这里，是不是已经感觉非常有成就感啦，下面才是前端基础的重点，也就是大家熟悉的javascript。
========================================================================
接下来需要创建一个< script > 标签，后续的javascript代码都写在这个标签里，在body中添加代码如下：