8.16
前端负责 数据的收集和展示
后端负责 数据的运算和存储
经典前端——主流前端
bootstrap 经典前端框架
layui 经典模块化前端框架 自学 火
浏览器只认识html，css，js 三种文件 .vue文件不认识，只能先编译
树形结构
XML语法：
标签—关闭标签：
html 超文本标记语言 头+主体
<!DOCTYPE html> //文件使用html 这种规范
body 元素的内容会显示在浏览器中。
title 元素的内容会显示在浏览器的标题栏中。 标签是 <head> 标签中唯一要求包含的东西。<br /></strong><br /><strong>标题标签 <h1><h2>。。。</strong><br /><strong>段落标签 <p></strong><br /><strong>图片<> src 相对路径和绝对路径 上一级 ../ alt 提示</strong><br /><strong>a标签 超链接 href：链接 target： blank/self</strong><br /><strong>特殊字符的表达方式：</strong>4<4， 空格  "<br /><strong>列表标签List 如 热搜排行，百度实时热点： 有序列表<ol><li>/无序<ul><li>/自定义列表<dl><dt><dd></strong><br /><strong><br /></strong>表格标签 table <tr >跨行<td rowspan="2"> 跨列<td colspan="2"><strong><br /></strong><br /><strong>音频/视频标签</strong><br /><audio src="../aa.mp4 controls"><br /><video src=" " controls ></p>
<p>CSS ，是一种用来表现HTML /XML 等文件格式的语言 ，基本功能是美化页面。 <br />如果说HTML 是毛坯房，那么CSS就是精装房</p>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597765081290-07848738-9dd3-4cd1-b802-6c9c9409530f.png#align=left&display=inline&height=197&margin=%5Bobject%20Object%5D&name=image.png&originHeight=393&originWidth=904&size=210513&status=done&style=none&width=452" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597927663495-3ec0bf48-f830-4154-9bc6-1f9f947f60b0.png#align=left&display=inline&height=196&margin=%5Bobject%20Object%5D&name=image.png&originHeight=392&originWidth=877&size=207629&status=done&style=none&width=438.5" alt="image.png"><br />div 标签 占一行<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597928037418-317ad7a2-80b1-4ccf-8023-e12fcda36211.png#align=left&display=inline&height=287&margin=%5Bobject%20Object%5D&name=image.png&originHeight=382&originWidth=837&size=210812&status=done&style=none&width=629" alt="image.png"></p>
<p>背景图 background: url(./ XXX.jpg) no-repeat</p>
<p>border 边框 实线 solid 四个方向 border-left/right/top/bottom</p>
<p>区分顺序style=” font：italic bold 100px ‘Microsoft yaHei’; text-decoration=none;” 至少有字体大小和格式</p>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597996785767-e495eb03-1c4d-4dee-b9d0-bb46c73c8e68.png#align=left&display=inline&height=229&margin=%5Bobject%20Object%5D&name=image.png&originHeight=343&originWidth=716&size=237557&status=done&style=none&width=479" alt="image.png"><br />行内元素，一行占满才换行，不可设置宽高 <span></span> <br />—标签：span，a,b,strong,i,em<br />块内元素：一行接一行 。 会自动换行<br />—标签：块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现<br />行内块元素： 也是一行，但可设置宽高<br />—标签：img<br />display：inline-block</p>
<p>标签的嵌套规则：<br />—标签：<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597941816486-a3671cb5-7bb0-477f-a589-116616f46475.png#align=left&display=inline&height=170&margin=%5Bobject%20Object%5D&name=image.png&originHeight=339&originWidth=1036&size=170067&status=done&style=none&width=518" alt="image.png"><br />外链样式 （用的多 ）<br />作用：相当于全局变量，做一个通用设置，比如字体大小，取消下划线</p>
<p>选择器<br />基础选择器<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597987108310-8747d97c-4e2f-4b59-9ea0-2798f0626ff2.png#align=left&display=inline&height=179&margin=%5Bobject%20Object%5D&name=image.png&originHeight=357&originWidth=905&size=226301&status=done&style=none&width=452.5" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597996707015-d33e0045-ed07-4dec-8ffe-d75a2d9348e1.png#align=left&display=inline&height=107&margin=%5Bobject%20Object%5D&name=image.png&originHeight=213&originWidth=850&size=86792&status=done&style=none&width=425" alt="image.png"><br />伪类选择器： 实现 鼠标悬浮在超链接时，字体样式改变 a：hover{}<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597992839524-76d1f95d-be7f-49d7-9ca1-02669a6138d5.png#align=left&display=inline&height=140&margin=%5Bobject%20Object%5D&name=image.png&originHeight=280&originWidth=861&size=153131&status=done&style=none&width=430.5" alt="image.png"></p>
<p>设置了一个超链接的按钮，<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597993126952-6084ec21-d7db-4832-a454-0a5ce052a28d.png#align=left&display=inline&height=242&margin=%5Bobject%20Object%5D&name=image.png&originHeight=485&originWidth=924&size=212838&status=done&style=none&width=462" alt="image.png"><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597993176023-9a72bb77-c2b6-4fd1-8ca2-00b3868ecb62.png#align=left&display=inline&height=47&margin=%5Bobject%20Object%5D&name=image.png&originHeight=94&originWidth=201&size=5356&status=done&style=none&width=100.5" alt="image.png"><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597993159634-799a2143-f7e4-4ae1-86a5-5a84ad613fd3.png#align=left&display=inline&height=46&margin=%5Bobject%20Object%5D&name=image.png&originHeight=92&originWidth=191&size=5573&status=done&style=none&width=95.5" alt="image.png"></p>
<p><a name="PcaZ1"></a></p>
<h1 id="almsg6"><a name="almsg6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>盒子模型</h1><p>一个页面，分成一块块，每一块看成一个盒子。<br />盒子模型 = 边框+内边距（padding）+外边距（margin）+内容 </p>
<p>内边距是，元素与边框间的距离</p>
<p>先在html网页里内嵌的调试器进行调整，F12—elements 里面可调间距，然后在工程里写</p>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2061189/1597994018559-2ddda41d-85d5-4fd1-a6ad-5c1222a5dc17.png#align=left&display=inline&height=244&margin=%5Bobject%20Object%5D&name=image.png&originHeight=488&originWidth=1384&size=149112&status=done&style=none&width=692" alt="image.png"></p>
<p><a name="pvzSy"></a></p>
<h1 id="32uret"><a name="32uret" class="reference-link"></a><span class="header-link octicon octicon-link"></span>定位</h1><p>回到顶部——鼠标悬浮时 变换图标 ：<br /><div style："cursor:pointer"> </div></p>
<p><a name="IAUnE"></a></p>
<h2 id="503qj0"><a name="503qj0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>fixed 参照物：网页可视区</h2><p><a name="RwNh3"></a></p>
<h2 id="5va0l0"><a name="5va0l0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>absolute 参照物：body</h2><p><a name="gtWnY"></a></p>
<h2 id="4xk2w6"><a name="4xk2w6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>relative 配合绝对地位，里面的元素参照物是绝对定位的那块</h2><p>position： fixed / absolute / relative</p>
<p><a name="0PTap"></a></p>
<h1 id="27bw56"><a name="27bw56" class="reference-link"></a><span class="header-link octicon octicon-link"></span>浮动</h1>
