一 、什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3,前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
二 、开发流程
产品设计好原型，UI设计好页面样板-->前端工程师将样板做成静态网页-->后端工程师将静态网页修改为动态网页
从软件分类来说: (根据使用的目的不同)
系统软件
应用软件
从软件信息存储位置的不同:
单机软件：
软件和数据都存储在客户端
C/S架构软件 Client / Server：
软件程序和数据一部分存在客户端,一部分存在服务器端
B/S架构软件 Browser / Server：
软件程序和数据全部存在服务器端、
前端开发也叫作web前端开发, 是为B/S架构的软件提供界面解决方案的.
三 、W3C标准
W3C标准是由万维网联盟所制定及修改
1.结构（HTML）
用于描述页面结构,指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了, 即HTML5。
2.表现（CSS)
用于控制页面中元素的样式,在前端中起美化页面的作用。
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
3.行为（JavaScript）
用于响应用户的操作,在前端中起网页布局修改的作用。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。
四 、网站协议
协议就是一种加密方式 别名（超文本传输协议） 目前世界通用HTTP协议相对安全，如果网站涉及密码安全与支付安全的同时，在此诞生了HTTPS协议
五 、HTML页面基本代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页正文
</body>
</html>
六 、 常用块级元素
html常用块级标签.png
<!DOCTYPE html>
<html>
<head> <!--<html>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息-->
<meta charset="UTF-8">
<title>网页标题</title> <!--<title>标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容-->
</head>
<body> <!--<body>标签用来设置网页的主体，所有可视页面都编写在body标签中-->
<h1>常用块级元素</h1>
<div>div盒子</div>
<h1>标题一级</h1>
<h2>标题一级</h2>
<h3>标题三级</h3>
<h4>标题四级</h4>
<h5>标题五级</h5>
<h6>标题六级</h6>
<hr> <!--水平分割线-->
<p>段落</p>
<pre>预格式化 可 保留空格</pre>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>定义列表：</dt>
<dd>定义内容</dd>
</dl>
<table border="1">
<th>标题1</th>
<th>标题2</th>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<form>表单</form>
<blockquote> 段落缩进 前后5个字符</blockquote>
<marquee>滚动文本</marquee>
<address> 定义地址 </address>
<center>居中文字</center>
</body>
</html>
七 、 常用行内元素
html常用行内元素.png
<!--常用行内元素-->
<a href="http://www.baidu.com">标签可定义锚</a>
<b>字体加粗</b>
<br /><!--换行-->
<i>倾斜文本效果</i>
<img src="../img/a1.jpg" alt="" />
<input type="text" />
<span>组合文档中的行内元素</span>
<sub>定义下标文本</sub>
<sup>定义上标文本</sup>
所以我们要根据网页上显示的内容, 使用合适的标签, 可以优化之前的代码.
八 、 CSS样式介绍
CSS使用格式:
选择器 {
属性 : 值;
属性 : 值;
...
}
说明:
●选择器是将样式和页面元素关联起来的名称
●属性名是希望设置的样式属性, 每个属性有一个或者多个值
●属性和值之间用冒号隔开
●一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
div {
width: 100px;
height: 100px;
background: gold;
}
1.内联式:
<div style="width:100px; height:100px; background:red">这是个div标签</div>
2. 嵌入式:
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
3.外联式:
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
九 、 CSS属性入门
| 属性 | 作用 | 举例 |
|---|---|---|
| width | 设置元素(标签)的宽度 | width: 200px; |
| height | 设置元素(标签)的高度 | height: 200px; |
| background | 设置元素背景色或者背景图片(详看下面) | background: pink; |
| border | 设置元素四周的边框 | border: 1px solid pink; |
| border-top | 设置元素顶部边框 | border-top: 1px solid pink; |
| border-left | 设置元素左边边框 | border-left: 1px solid pink; |
| border-right | 设置元素右边边框 | border-right: 1px solid pink; |
| border-bottom | 设置元素底部边框 | border-bottom: 1px solid pink; |
| padding | 设置内边距(同时设置四个边,也可以分开设置) | padding: 20px; |
| margin | 设置外边距(同时设置四个边,也可以分开设置) | margin: 20px; |
| float | 设置元素浮动,浮动可以让块元素在一行排列 | float:left(左浮动) float: right(右浮动) |
十 、 入门样式
div基础样式.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sea{ /*类选择*/
width:200px; /*宽度*/
height: 200px; /*高度*/
border: 2px solid #FF0000; /*边框*/
color: #000000; /*文本颜色*/
line-height: 200px; /*行高*/
text-align: center; /*对齐方式*/
border-radius: 8px; /*圆角*/
margin: 20px 10px 10px 100px; /*外边距 距上右下左*/
background: green; /*背景颜色,也可放图片路径*/
}
/* #sea{
id选择 唯一的
} */
</style>
</head>
<body>
<div class="sea" id="sea">面朝大海</div>
</body>
</html>
网友评论