前端架构分析
开发流程
设计页面样板–>前端工程师将样板做成静态网页–>后端工程师将静态网页修改为动态网页
##C/S架构
B/S架构
B/S架构顾名思义就是 B代表浏览器，则S代表服务器的意思
2.B/S架构就是说以网址的形式使用，将运算 操作等储存到远程服务器
W3C标准
**W3C标准是由万维网联盟所制定及修改
1.结构（HTML）
用于描述页面结构
2.表现（CSS)
用于控制页面中元素的样式
在前端中起美化页面的作用
3.行为（JavaScript）
用于响应用户的操作
在前端中起网页布局修改的作用
网站协议
协议就是一种加密方式 别名（超文本传输协议） 目前世界通用HTTP协议相对安全，如果网站涉及密码安全与支付安全的同时，在此诞生了HTTPS协议
#HTML语言（超文本标记语言）
HTMl语言有多种版本而我就不一一列举了，今天我主要介绍HTML5 第五代超文本标记语言，（编写过程中是不分行的当然为了代码好区分还是缩进为好）
##超文本
顾名思义就是超链接的意思，可以实现页面间的对接
##标记
又名标签用来识别网页中的不同组成部分
##HTML页面基本代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
- HTML中的标记指的就是标签用来描述网页
<title>网页标题</title>
<标签名/>
常用标签
<html>
作用：<html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body
<head>
作用：<html>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
用法：head标签作为html标签的子元素出现，一个网页中只要有一个head
<title>
作用：<title>标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容
<body>
作用：<body>标签用来设置网页的主体，所有可视页面都编写在body标签中
用法：body标签作为html的子标签使用
<p>
作用：<p>标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行
<br/>
作用：<br/>标签表示一个换行标签，使用br标签可以使标签后的内容另起一行
<hr/>
作用：<hr/>标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分
<img/>
作用：<img/>标签是图片标签，可以用来向页面中引入一些外部的图片
属性：src指向一个外部的图片路径
alt图片的描述
<a/>
作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面
属性：href指向一个链接地址
target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口
元素
- 一个完整的标签称为元素
<h1>网页正文</h1>
h1和/h1是一个完整的元素
- 子元素和父元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素
- 祖先元素和后代元素
<body>
<p><em>段落</em></p>
</body>
body也是一个元素
body是p和em的祖先元素
p和em是body的后代元素
##标题
- 标题分为一到六级分别写法为
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
##属性
- 可以为标签设置属性
- 通过属性为元素添加附加信息
- 属性总是以名称/值对的形式出现 比如：name=“value”
-有些属性可以是任意值
<img src=""alt="" />
- 有些属性是指定值
<h1 title="我是一个标题">标题</h1>
常见属性
- id
id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
- class
class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class
- title
title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字
##注释
注释就是解释的意思 为了方便记忆可以使用注释
<!-- 注释内容 -->
##解决显示乱码问题
在头标题中添加
<meat charset="utf-8" />