前端架构分析
开发流程
设计页面样板–>前端工程师将样板做成静态网页–>后端工程师将静态网页修改为动态网页 ##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页面基本代码
网页标题
网页正文
HTML中的标记指的就是标签用来描述网页
网页标题
<标签名/>
常用标签
作用：标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body
作用：标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
用法：head标签作为html标签的子元素出现，一个网页中只要有一个head
</p>
<p>作用：<title>标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容</p>
<p><body></p>
<p>作用：<body>标签用来设置网页的主体，所有可视页面都编写在body标签中</p>
<p>用法：body标签作为html的子标签使用</p>
<p><p></p>
<p>作用：<p>标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行</p>
<p><br/></p>
<p>作用：<br/>标签表示一个换行标签，使用br标签可以使标签后的内容另起一行</p>
<p><hr/></p>
<p>作用：<hr/>标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分</p>
<p><img/></p>
<p>作用：<img/>标签是图片标签，可以用来向页面中引入一些外部的图片</p>
<p>属性：src指向一个外部的图片路径</p>
<p>alt图片的描述</p>
<p><a/></p>
<p>作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面</p>
<p>属性：href指向一个链接地址</p>
<p>target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口</p>
<p>元素</p>
<p>一个完整的标签称为元素</p>
<p><h1>网页正文</h1></p>
<p>h1和/h1是一个完整的元素</p>
<p>子元素和父元素</p>
<p><p>我是一个<em>段落</em></p></p>
<p>p也是一个元素，em是p的子元素，p是em的父元素</p>
<p>祖先元素和后代元素</p>
<p><body></p>
<p><p><em>段落</em></p></p>
<p></body></p>
<p>body也是一个元素 body是p和em的祖先元素 p和em是body的后代元素 ##标题</p>
<p>标题分为一到六级分别写法为</p>
<p><h1>一级标题</h1></p>
<p><h2>二级标题</h2></p>
<p><h3>三级标题</h3></p>
<p><h4>四级标题</h4></p>
<p><h5>五级标题</h5></p>
<p><h6>六级标题</h6></p>
<p>##属性</p>
<p>可以为标签设置属性通过属性为元素添加附加信息属性总是以名称/值对的形式出现 比如：name=“value” -有些属性可以是任意值</p>
<p><img src=""alt="" /></p>
<p>有些属性是指定值</p>
<p><h1 title="我是一个标题">标题</h1></p>
<p>常见属性</p>
<p>id</p>
<p>id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值</p>
<p>class</p>
<p>class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class</p>
<p>title</p>
<p>title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字 ##注释 注释就是解释的意思 为了方便记忆可以使用注释</p>
<p><!-- 注释内容 --></p>
<p>##解决显示乱码问题 在头标题中添加</p>
<p><meat charset="utf-8" /></p>
</p>
<div style="text-align: left;background:#f1f1f1;padding:20px;line-height:50px;">
<a href="/1ec54f7eb28b39e0/ad9956a3c6d65e0c.html">SQL Server中几种遍历方式比较</a><br><a href="/2ef4d23c20058859/221de07f96836368.html">带炭的成语(包含炭字的成语</a>
</div>
</div>
<h6 class="post-footer">
<a href="/1ec54f7eb28b39e0/index.html">世界杯塞尔维亚</a></h6>
</div>
<ul class="msg mutuality">
</ul>
</div>
<script type="text/javascript" src="/static/js/sf_praise_sdk.js"></script>
<link rel="stylesheet" href="/static/css/Jz52_code.css"><script src="/static/js/clipboard.min.js"></script><script src="/static/js/Jz52_code.js"></script>
<div id="divBottom">
Copyright © 2022 1994世界杯_1954年世界杯 - hengshuifu.com All Rights Reserved.</h3>
</div>
</div>
<div id="divSidebar">
<dl class="function" id="newmodule">
<dt class="function_t">最新发表</dt><dd class="function_c">
<ul>
<li><a title="”170/171“开头的电话为何欲接不敢？背后真相让人心惊……" href="/2febbda428c19fa9/1adf92f9aada3106.html">”170/171“开头的电话为何欲接不敢？背后真相让人心惊……</a></li>
<li><a title="神器进阶" href="/1ec54f7eb28b39e0/c4f2501828f7e8fe.html">神器进阶</a></li>
<li><a title="如何购买国外的东西" href="/2febbda428c19fa9/e384200a0a67ec66.html">如何购买国外的东西</a></li>
<li><a title="2025最新雪莲烟价格表多少钱一包" href="/2febbda428c19fa9/b7d6d58d5fc4e5cc.html">2025最新雪莲烟价格表多少钱一包</a></li>
<li><a title="免费的知识竞赛答题软件哪个好用 实用的答题app排行榜" href="/1ec54f7eb28b39e0/2b697d31520c1a54.html">免费的知识竞赛答题软件哪个好用 实用的答题app排行榜</a></li>
<li><a title="长期身在美国的中国人如何从零基础开始学习射击？" href="/2ef4d23c20058859/bbda75eee1746291.html">长期身在美国的中国人如何从零基础开始学习射击？</a></li>
<li><a title="芋头一次吃多少合适？营养美食专家为你解析" href="/2febbda428c19fa9/307ea085e3bcc5b1.html">芋头一次吃多少合适？营养美食专家为你解析</a></li>
<li><a title="购买虚拟商品的平台有哪些？七大细腻平台排行榜" href="/2febbda428c19fa9/005c131e9be34f8d.html">购买虚拟商品的平台有哪些？七大细腻平台排行榜</a></li>
<li><a title="《逆战》SCAR星系武器推荐 星云性价比高值得入手_手机网易网" href="/2ef4d23c20058859/f9cdddcdb6fb9384.html">《逆战》SCAR星系武器推荐 星云性价比高值得入手_手机网易网</a></li>
<li><a title="外交官Diplomat品牌简介" href="/2febbda428c19fa9/98a97cc5c7122a39.html">外交官Diplomat品牌简介</a></li>
</ul>
</dd>
</dl>
<dl class="function" id="divLinkage">
<dt class="function_t">友情链接</dt><dd class="function_c">
<ul><script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script>
</ul>
</dd>
</dl> </div>
</div>
</div>
<script type="text/javascript" src="/static/js/sf_praise_sdk.js"></script>
</body>
</html>