前端初步认识

前言:我们知道做一个系统而言,分为前端和后端,后端简单点来说就是做业务处理等工作,前端就是用来显示的。

首先,学习前端之前我们一起来看软件的架构: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>

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值