前言:我们知道做一个系统而言,分为前端和后端,后端简单点来说就是做业务处理等工作,前端就是用来显示的。
首先,学习前端之前我们一起来看软件的架构:B/S和C/S架构;
前端工程师主要开发的是我们的B/S架构下的系统,一个成熟的软件的开发流程分为下面几步:
一个网页的组成分为,结构(HTML用来描述页面的结构),表现(CSS用来控制页面元素的样式)和行为(JavaScript用来响应用户操作);
HTML——>超文本标记语言,下面是一个简单的HTML的结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- 设置字符集 -->
<title>这里是网页的标题</title> <!-- 一般搜索引擎优化的做 -->
</head>
<body>
<h1>我是第一个web网页,我是主体<h1/><!--可以通过属性修饰,但是一般样式是在css中进行的 -->
</body>
</html>
出现乱码的情况,无非是编码和解码使用的方式不一样,所以要设置相同的字符集,这就是字符集的作用;
一个HTML的小练习使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
<center>
<a href="#bottle">回到底部</a>
<h1>这是我的个人博客</h1>
<hr />
<h2>东风破</h2>
<a href="#">周杰伦</a>
<p>
一盏离愁 孤单伫立在窗口 <br />
我在门后 假装你人还没走 <br />
旧地如重游 月圆更寂寞 <br />
夜半清醒的烛火 不忍苛责我 <br />
一壶漂泊 浪迹天涯难入喉<br />
你走之后 酒暖回忆思念瘦<br />
水向东流 时间怎么偷<br />
花开就一次成熟 我却错过<br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
<img src="img/1.jpg" alt="mv图片" width="300px"><br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
一壶漂泊 浪迹天涯难入喉<br />
你走之后 酒暖回忆思念瘦<br />
水向东流 时间怎么偷<br />
花开就一次成熟 我却错过<br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
<img src="img/2.jpg" alt="mv图片" width="300px"><br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
</p>
<hr />
友情链接:<a href="#" target="_self">A网站</a> | <a href="#" target="_blankS">B网站</a> | <a href="#">C网站</a>
<br /> <br />
<a href="#" id="bottle">回到顶部</a> | <a href="mailto:123@163.com">联系我们</a>
</center>
</body>
</html>