电工基地软件组前端培训0

有些网站的界面会让你看上去狂拽炫酷吊炸天，各种动画效果，有些网站看上去会让你觉得这TM是上个世纪的网站吧，合理的布局，舒适的使用颜色和字体可以让你的网站有不一样的效果，这些都归功于HTML+CSS+JS的连续组合拳，别看这三个缩写好像是三种不一样的语言，其实他们是相互关联，相互依赖的，只不过是负责执行不同的功能的。

1.HTML:

超文本标记语言，决定了一个网页的架构，由一个个标签组成，这些标签可以表现为自然段，列表，块等等，一个页面可以看作是一个个标签堆叠而成的。

这里只是放出了最基本的标签，其实还有很多其他的标签，在vue.js中也可以自定义标签（组件）。

2.CSS

层叠样式表，说白了就是用来装饰HTML中插入的标签的，你可以通过CSS来规定这一段话的字体，字号和字的颜色，或者是一张图片该放在什么位置，图片显示的大小，你也可以让图片轮流播放，甚至更高级的是通过CSS来做动画，让你的网页动起来。你说看到那些高端大气上档次的网站基本都是通过很多的css去修饰得到的，如果把那些网站的css全去掉，那么和上个世纪的网站没什么区别，甚至更烂。你的网站的CSS写的怎么样决定了你的网站给别人的印象如何。

p{
  color:red;
  font-size:10px;
  font-family:Microsoft YaHei;
}

上面的就是CSS的一段代码，CSS的代码可读性还是非常高的，这是我对p（自然段）这个标签添加样式，即让这个自然段中的字为红色，字体大小为10个像素，字体是微软雅黑。

3.JS（JavaScript）

这个和Java没有半毛钱关系，基本类似于雷锋和雷峰塔的关系，JS是个脚本语言，由浏览器执行，常用于实现与用户交互的功能，常见的有你在一个网站注册账号的时候，如果账号太短的话网页上会提示你，或者你点一个按钮，他给跳出个提示框等等，合理运用JS可以很大提升用户使用体验。

在这里只是简单的介绍了HTML+CSS+JS的基本概念，要想深入了解，灵活应用还是需要多读读文档，这方面的资料在网上是非常多的，在这里推荐：https://www.runoob.com/（菜鸟教程），这个网站中HTML，CSS，JS的教程全都有，而且教程中可以随时执行相应的代码，你可以更改代码后看看会有什么不一样的效果。

因为这是第一次培训，我们希望能够培养大家的基础功，培养审美（？），所以第一次的作业主要以阅读文档为主，然后布置一个小作业。

作业

阅读HTML文档和CSS文档，然后写一个单页面网页（.html文件）来介绍一下你自己，类似一个个人博客主页。尽量做到美观舒适。下周一之前提交