1.VScode的使用：

如何快速生成HTML模板

输入！然后tab就可以快速生成html模板了

绘制三角形：

总结：

1.display:flex(弹性盒子布局)详解_display: flex_羡阳公子的博客-CSDN博客
2.CSS：N种使用CSS 绘制三角形的方法_三角形css_打瞌睡的兔兔小姐的博客-CSDN博客【前端怪谈】两个行内块元素之间的间距问题_行内块元素间距问题_hhhhhhhssss的博客-CSDN博客 css之div盒子居中常用方法大全

2.如何在输入框前设置图片：

input里面添加图片_input输入框添加图片_heromps的博客-CSDN博客

输入框文本缩进的方法：

**CSS中的text-indent属性可以实现：**text-indent 属性规定文本块中首行文本的缩进。可以给改属性赋值px,百分比等，默认是0；
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
html的缩进属性介绍 • Worktile社区
3.Live Server是一款在vscode上面修改编码刷新界面就可以反馈在浏览器的插件

第3次实验总结：

1.如何在无序列表的列表项下边生成下划线

只需要设置无序列表项的下边框就可以了

1
2
3

ul li {
border-bottom: 1px solid black; /* 设置下划线的宽度、样式和颜色 */
}

2.js中动态生成的元素也受css的影响

3.行内块元素，块元素，行元素的区别：

每个块级元素都是独自占一行；
高度，行高，外边距（margin）以及内边距（padding）都可以控制；
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
多个块状元素标签写在一起，默认排列方式为从上至下
一般作为容器使用

<address>  // 定义地址 
<caption>  // 定义表格标题 
<dd>      // 定义列表中定义条目 
<div>     // 定义文档中的分区或节 
<dl>    // 定义列表 
<dt>     // 定义列表中的项目 
<fieldset>  // 定义一个框架集 
<form>  // 创建 HTML 表单 
<h1>    // 定义最大的标题
<h2>    // 定义副标题
<h3>     // 定义标题
<h4>     // 定义标题
<h5>     // 定义标题
<h6>     // 定义最小的标题
<hr>     // 创建一条水平线
<legend>    // 元素为 fieldset 元素定义标题
<li>     // 标签定义列表项目
<noframes>    // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>    // 定义在脚本未被执行时的替代内容
<ol>     // 定义有序列表
<ul>    // 定义无序列表
<p>     // 标签定义段落
<pre>     // 定义预格式化的文本
<table>     // 标签定义 HTML 表格
<tbody>     // 标签表格主体（正文）
<td>    // 表格中的标准单元格
<tfoot>     // 定义表格的页脚（脚注或表注）
<th>    // 定义表头单元格
<thead>    // 标签定义表格的表头
<tr>     // 定义表格中的行

行内元素不可以设置宽（width）和高（height）,或者说设置了高宽无效
不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而
变化；
高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
设置行高有效，等同于给父级元素设置行高；
元素的宽度就是它包含的文字或图片的宽度，不可改变；
行内元素中不能放块级元素，a 链接里面不能再放链接；

<a>     // 标签可定义锚 
<abbr>     // 表示一个缩写形式 
<acronym>     // 定义只取首字母缩写 
<b>     // 字体加粗 
<bdo>     // 可覆盖默认的文本方向 
<big>     // 大号字体加粗 
<br>     // 换行 
<cite>     // 引用进行定义 
<code>    // 定义计算机代码文本
<dfn>     // 定义一个定义项目
<em>     // 定义为强调的内容
<i>     // 斜体文本效果
<kbd>     // 定义键盘文本
<label>     // 标签为 input 元素定义标注（标记）
<q>     // 定义短的引用
<samp>     // 定义样本文本
<select> // 创建单选或多选菜单
<small>     // 呈现小号字体效果
<span>     // 组合文档中的行内元素
<strong> // 加粗
<sub>     // 定义下标文本
<sup>     // 定义上标文本
<textarea>     // 多行的文本输入控件
<tt>     // 打字机或者等宽的文本效果
<var>    // 定义变量

1
2
3

高度、行高、外边距以及内边距都可以控制；
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，
才会消除间隙；

<button> 
<input>   
<textarea> 
<select> 
<img>

4.ul元素和li元素之间是有一定的间隔的，去掉他们之间间隙的方法：

ul{
margin-left:-50px;
}
//利用margin负数左移原理对齐，但是不建议。

//其实这里的li可以看出是ul元素中的内容，浏览器默认设置了它与li之间的左padding;只有我们手动
把padding设置为0就可以解决你。
ul{
padding:0px;}

5.去除行内块元素之间的空格：

浏览器处理空格的规则：文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。浏览器会自动把换行符号转成普通的空格键。
white-space ：是css针对浏览器对应空格处理的方法。
产生原因：html文档中标签与标签之间有换行符和空格，而这些会被解析为文本节点，其中换行符被解析为1个空格，多个连续的空格会被解析为1个空格。这些空格的文本节点在行之间会占据一定的空间的，因此在行内元素和行内块元素之间会有空格，这空格的参数是因为这些标签之间的换行符和空格产生的。
消除方法：
例子：

<div class="wrapper">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

方法1：把这些标签紧密书写，让其中没有换行符号和空格

1
2
3

<div class="wrapper">
    <div class="child1">child1</div><div class="child2">child2</div>
</div>

方法2：使用margin为负值移动特定的元素（不建议）

1
2
3

.child2 {
    margin-left: -5px;
}

方法3：空格也是文本的一种可以在其父节点设置font-size: 0,这样就会让子元素中的文字不会显示，同理想要在标签当中的文本也不会显示，这个时候我们在额外设置子标签中的文本大小就可以了

.wrapper {
    font-size: 0;
}
.child1, .child2 {
    font-size: 14px;
}

方法4：既然是有标签之间的换行符和空格产生的，我们可以在这之间添加一个不会显示在浏览器上的内容占据换行符和空格就好了。没错这种内容就是注释。

<div class="Resolve Resolve5">

  <span>左侧行内元素</span><!-- 消除行内元素换行导致的空白

--><span>右侧行内元素</span>

</div>

方法5：使用负的文字间距（letter-spacing）。通过将行内元素和行内块元素之间的文字间距设为负值，同样可以达到移除空白间距的效果。
方法6：使用float

CSS中的float属性：

CSS 深入理解之 float 浮动 - 掘金
 滑动验证页面
1.浮动的概念：就是一个元素脱离了标准流，然后在原本的位置浮起来了（第一个浮起来的元素在本行，后面的可能会紧跟前面浮动元素的行）。其后的块级元素会移动占据浮动元素原来的位置，其中块级元素里面的内容不会占据浮动元素原来的位置，而是环绕它
2.特性：包裹性：包裹指的是一个浮动元素，如果子元素宽度足够小，则浮动元素的宽度就是该子元素的宽度。
自适应指的是如果浮动元素的父元素有设置宽度，并且浮动元素的子元素宽度超出了父元素，则浮动元素的宽度最终表现为父元素的宽度；
破坏性：浮动元素会让父元素发生高度塌陷。也就是父元素的高度为0（父元素没有边框的情况，有边框的话高度在边框的1~2倍之间）
块状化：一旦元素float的属性不为none，则其display计算值就是block或者table。这里的块状化意思是可以像block元素一样设置宽和高，并不是真正的块元素。
没有任何的margin重叠：也就是说上下左右两个浮动元素之间的大小是其各自元素设置的margin之和。

清除浮动：

1.清除元素只是清除元素自身的浮动效果，没有浮动的元素也可以清除浮动。清除浮动是让元素盒子的边不能和前面的浮动元素相邻。

上面的clear:left表示该元素的左边不能有浮动元素存在。clear:right表示该元素右边不能有浮动元素，clear:both表示该元素的左右都不能有浮动元素。
2.使用伪类元素清除：

这里的.clearfix:after::after 是 CSS 中的一种特殊选择器，它可以在选中的元素的末尾插入一个虚拟的子元素。这个虚拟的子元素可以用于添加样式、内容或进行其他操作。

导航栏的书写：

给每一个导航栏设置一个index属性，然后获取所有相应的div元素，利用排他算法，想把其他设置为空，然后在设置特定的结果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.table {
width: 600px;
height: 600px;
margin: 100px auto;
}
.table_title {
width: 100%;
height: 30px;
background-color: #000;
}
.table_title ul {
display: flex;
text-align: center;
color:#fff;
}
.table_title ul li {
list-style: none;
width: 200px;
height: 30px;
line-height: 30px;
}
.p1 ul{
    padding-left: 0;
    list-style: none;
}
.p1 li{
    border-bottom: 1px dashed gray;
    height: 30px;
    line-height: 30px;
}
.hong {
background-color: #aaa;
}

</style>
</head>
<body>
<div class="table">
    <div class="table_title">
        <ul>
            <li class="hong" >热门排行</li>
            <li >美图速递</li>
            <li>前沿科技</li>
        </ul>
    </div>
    <div class="table_content">
        <div style="display:block;" class="p1">
            <ul>
                <li>习近平出席推进“一带一路”建设工作5周年座谈会</li>
                <li>中共时隔接近三年再修党纪条例子&nbsp;这些高压线不能碰</li>
                <li>全国高中2019年秋季起分步实施新课程使用新教材</li>
                <li>个税法修正草案将二申&nbsp;起征点会否超5000元?</li>    
            </ul>
        </div>
        <div class="p1" hidden>
            <ul>
                <li>鹅教官,羊陪练......这所中学养的动物成了“网红”</li>
                <li>最伤身体的10个生活习惯,一定要避开</li>
                <li>12岁孩子带着父亲去西藏&nbsp;吃住行自己拿主义</li>
                <li>16岁男孩暑假干了俩月工地,练出满是肌肉,只为赚学费</li>    
            </ul>
        </div>
</div>
<script>
        var lis = document.querySelector('.table_title').querySelectorAll('li');
        var divs = document.querySelector('.table_content').querySelectorAll('div');
        for(var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index',i);
        lis[i].onmouseover = function() {
        for(var i = 0; i < lis.length; i++) {
        lis[i].className = '';
        }
        var index = this.getAttribute('index');
        this.className = 'hong';
        for(var i = 0;i < divs.length; i++){
        divs[i].style.display = 'none';
        }
        divs[index].style.display = 'block';
        }

        }
</script>
</body>
</html>

localstory:
前端本地存储之LocalStorage - 掘金
 localStorage存取数组和对象不像存取字符串那样，需要序列化和反序列化

rolePower=["a","b","c"]
存：localStorage.setItem('rolePower',JSON.stringify(rolePower))
取：JSON.parse(localStorage.getItem("rolePower"))

var userNews={id: "aa", userId: "1234", loginName: "test", name: "测试", orgId: "1001"}
存：localStorage.setItem('user',JSON.stringify(userNews))
取：JSON.parse(localStorage.getItem("user"))