华清远见 前端技术总结与学习心得

技术总结

这里总结的是html、css、以及js的部分知识点，jquery相关的内容还没有添加进来

html

文本相关标签

标签属性

align = "right(靠右)/center(居中)/left(靠左)"

每个标签都有style属性，用于设置标签的样式

标题标签--h1~h6

字号逐渐变小，换行显示，默认靠左显示

段落标签 --p标签

文本标签

span标签

行内元素，没有默认的样式效果，不换行显示

div标签

块级元素，没有默认的样式效果，换行显示

换行标签

br标签

换行标签，是一个单标签，用于换行

hr标签

单标签，产生一条横线

width属性：设置宽度

color属性：设置颜色

列表标签

ul标签--无序列表

常用方式：

<ul>
    <li></li>
    <li></li>
</ul>

ol标签--有序列表

常用方式：

<ol>
    <li></li>
    <li></li>
</ol>

加粗标签

b标签、strong标签

<b>b标签:加粗</b>
<strong>strong标签:加粗</strong>

倾斜标签

em标签、i标签

<em>em标签:倾斜</em>
<i>i标签:倾斜</i>

删除线标签

del标签

<del>del标签:删除线</del>

下划线标签

<u>u标签:下划线</u>

上标签、下标签

sub下标签

<b>H<sub>2</sub>O</b>

sup上标签

<b>3<sup>3</sup>=27</b>

img标签

功能：引用一张存在的图片，在网页上显示图片

src:引用的图片资源的路径

相对路径：根据当前文件所在的位置，查找需要引用资源的位置(../img/2.jpg) 绝对路径：从协议开始的全路径(http://127.0.0.1:8848/2022.8.5/img/1.jpg)可以省略协议及其域名，直接从根目录开始的路径，也就是绝对路径

alt:如果图片没有正常加载成功，则显示alt的文字说明

<img src="img/1.jpg"
            width="200px"
            height="200px"
            title="美女子"
            alt="这里有一位女子" />

../ 表示退出当前文件夹

./ 表示当前文件夹，一般可以省略

<img src="./img/2.jpg"width="200px" height="200px"/><!--相对路径-->

超链接标签--a标签

点击超链接标签，可以让页面跳转到新的资源路径，网页的内容被更新

href属性：指定需要跳转的url地址(相对地址、绝对地址)

url：统一资源定位路径(网络上可以访问的资源的路径)

target属性——_blank：打开的内容显示在一个新窗口

target属性——_self：打开的内容显示在当前窗口

表格标签—table标签

用于实现的表格

caption：设置表格的名字

tr:行

td/th:列(单元格) th中的文字会加粗

table标签的属性

border:边框 width:宽度

cellpadding="0":设置文本内容和表格边框的宽度 cellspacing="0":设置的单元格之间的宽度 align:表格显示位置

<!-- colspan="3":把三列合并为1列,让每行的列数相等 -->
<td colspan="3" align="center">260</td>

表单相关标签

form标签

表单相关的标签，其内部嵌套用于用户输入数据的标签

action:表单提交的请求地址(url) method:请求的方式get/post encytype:设置enctype的类型，对请求参数的处理方式

如果表单中涉及到文件上传，要求：method只能是post，enctype设置为multipart/form-data

 <form action="#" method="get" enctype="application/x-www-form-urlencoded">

label标签

label标签的for属性对应的数据值的input标签的id. 那么单击label标签的时候，input标签获取焦点(光标就在输入框内部，用户就可以直接输入数据)

<label for="inputname">用户名：</label>
<label for="inputpwd">密码：</label>

input标签

用于用户输入数据

type:设置标签的类型，对用户输入的数据进行一些设置 name:用户输入的数据，传输到服务器端的时候，Java程序根据name的值，获取到输入框的数据 value:对应的就是用户输入的数据值

type="submit":提交请求(请求的地址+请求的参数)的按钮,单击按钮会触发表单提交事件 “表单提交事件”：发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端

reset事件：清空表单中的数据值

 <!-- input标签：用于用户输入数据
      type:设置标签的类型，对用户输入的数据进行一些设置
      name:用户输入的数据，传输到服务器端的时候，Java程序根据name的值，获取到输入框的数据
      value:对应的就是用户输入的数据值
 -->
<input id="inputname" type="text" name="username" value="tom"/><br>
<input id="inputpwd" type="password" name="userpwd"/><br>
<!-- type="submit":提交请求(请求的地址+请求的参数)的按钮,单击按钮会触发表单提交事件
                “表单提交事件”：发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端
 -->
<input type="submit" value="提交"/>
<!-- reset事件，清空表单中的数据值 -->
<input type="reset" value="重置"/>

表单的相关元素

单行文本框:<input type="text" name="user" /><br>
密码框:<input type="password" name="pwd" /><br>
隐藏域:<input type="hidden" name="hide" /><br>
文件上传:<input type="file" name="photyo" /><br>
<!-- 单选按钮：
         一般一组一个单选按钮，需要设置相同的name值，才能保证只有一个按钮被选中 
         标签后面的文本提示，是给用户看的，标签的value值是给程序使用的。程序中用0表示男，1表示女
         checked="checked"，表示设置为默认选中
 -->    
单选按钮:<input type="radio" name="sex" value="0"/>男
         <input type="radio" name="sex" value="1" checked="checked"/>女<br>
复选框:<input type="checkbox" name="hobbys" value="看书"/>看书
      <input type="checkbox" name="hobbys" value="弹琴"/>弹琴
      <input type="checkbox" name="hobbys" value="跑步"/>跑步
下拉列表(单选):<select name="city">
                 <option>请选择</option>
                 <option value="0">上海</option>
                 <!-- 设置默认中选项 -->
                 <option value="1" selected="selected">北京</option>
                 <option value="2">深圳</option>
            </select>
下拉列表(多选):
         <!-- multiple="multiple":用于设置下拉列表，支持多选 -->
         <select name="language" multiple="multiple" size="6">
             <option value="java">java</option>
             <option value="c">c</option>
             <option value="c++">c++</option>
             <option value="python">python</option>
             <option value="html">html</option>
             <option value="c#">c#</option>
         </select><br>
多行文本框:
         <!-- cols="5":设置宽度 rows="10":设置高度 -->
         <textarea name="info" cols="5" rows="10"></textarea><br>
         submit:<input type="submit" value="提交数据"/><br>
         reset:<input type="reset" value="清空数据"/><br>
         button:<input type="button" value="普通按钮"/><br>
分组标签:
         <fieldset>
             <legend>地址</legend>
             邮箱:<input type="email" name="email"/>
             phone:<input type="number" name="phone"/>
             date:<input type="date" name="date"/>
             颜色:<input type="color" name="color"/>
         </fieldset>

iframe标签

在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中

<iframe src="1.表单相关标签.html" width="400" height="400"></iframe>
<iframe src="../2022.8.5/img/1.jpg" width="400" height="400"></iframe>
<ul>
    <!-- a标签的target，指定为iframe标签的name值，那么超链接的内容，则显示到iframe标签中 -->
    <li><a href="../2022.8.5/1.html文件的结构.html" target="content">1.文件结构</a></li>
    <li><a href="../2022.8.5/2.文本相关标签.html" target="content">2.文本相关</a></li>
    <li><a href="../2022.8.5/3.特殊样式的文本标签.html" target="content">3.特殊样式文本</a></li>
</ul>
<!-- 单击li中的超链接，把超链接的内容显示到iframe标签中 -->
<iframe src="../2022.8.5/1.html文件的结构.html" width="300px" height="300px" name="content"></iframe>

html标签分类

display:none;  隐藏标签

块级元素

占据一整行，其他内容换行显示。可以设置width、height。比如：h1,div,p

display:block  设置为块级元素

行内元素

宽高由内容决定，剩下的区域可以显示其他元素。不支持设置width、height比如：span、input

display:inline-block  设置为行内元素

块级行内元素

具有块级元素的特征，但是不换行。可以设置width、height。比如：img

display:inline-block  设置为行内块级元素

css样式

级联样式表，用途调整html中标签的形式的语言

语法规则

"样式名:样式值",比如 color:red 这个指定字体的颜色为红色 "样式名1:样式值1,样式名2:样式值2",比如 color:red,font-size:20px

三种使用方式

内联样式

直接在标签上，通过style属性进行使用

内部样式

在head标签中，通过<style>css语言<style>标签，使用样式

外部样式

通过在head标签中，使用<link href="xx.css">标签，引入css文件，进行样式的使用

#p2{
    width: 400px;background-color:blueviolet;
}
/* 标签选择器 :标签名{}*/
p{
    color: crimson;
}
<!--  内联样式：只对当前使用的标签有效 -->
<p id="p1" style="width: 500px;background-color: aquamarine;">hello world</p>
<!-- 内部样式：css语言通过选择器找到标签，然后添加对应的样式 -->
<p id="p2">hello world</p>
<!-- 外部样式:在css文件中写样式,在html中引用css文件 -->
<p id="p3">hello world</p>

css特征

继承性

父元素的一些样式会被其子元素继承。比如字体颜色

<!-- 继承性 -->
<div style="background-color: red;color: white;">
    <p>hello</p>
    <a href="#" style="color: white;">a标签</a>
</div>

层叠性

一个元素可以有多个样式效果进行叠加

<!-- 层叠性 
    background:yello; 背景色
    font-size:20px;  字体大小
    color:#FF0000;  字的颜色
    font-weight:bold;  字体的粗细
    width:300px;height:200px;  标签的宽、高
    overflow:scroll;  溢出，则使用滚动条
-->
<p style="background-color: yellow;font-size: 20px;color: cyan;font-weight: bold;width: 300px;height: 200px;overflow:scroll;">hello</p>

优先级

浏览器默认样式 < 标签的默认样式 < [外部样式/内部样式/内联样式]

其中：外部样式/内部样式/内联样式：根据谁后写，谁优先

<!-- 内联样式的优先级高于内部样式和外部样式 -->
<h1 style="color: green;">中秋节快到了</h1>
<!-- 内部样式和外部样式：谁后写，谁优先 -->
<h2>中秋节是团圆的节日</h2>
<!-- 通过内部样式设置h3，①根据标签选择器设置字号50px,字体颜色黄色
                      ②根据id选择器，设置h3标签边框，字体颜色绿色
 -->
<!-- id选择器优先级 > class选择器 > 标签选择器 -->
<h3 id="h3">中秋节：海上生明月，天涯共此时</h3>
<!-- 使用三种不同的方式给标签设置样式，不冲突情况都是有效的(层叠性)，冲突则以优先级为准 -->

css的选择器

selector，根据某个特征，找到标签

标签选择器

根据标签的名字，选择对应的标签(当前html页面中的该标签都会被选出来)

id选择器

根据标签的id选择标签(一个html页面，id是唯一的，只会选择出一个符合条件的标签)

class选择器

根据标签的class属性选择标签(一个html页面，class允许重读，可以选择多个符合条件的标签)

分类选择器

元素选择器和class/id选择器一起使用

/* 分类选择器的使用 */
span.three{
    width: 120px;
}

分组选择器

选择器1，选择器2，选择器n...{样式}

/* 分组选择器 */
p,h1{
    border: 3px solid black;
    border-radius: 5px;/*设置边框为圆角*/
}

派生选择器

找子标签(嵌套在内部的第一层符合条件的标签元素) 选择器 > 选择器{} 找子孙标签(嵌套在内部的所有符和条件的标签元素) 选择器 选择器{}

/* 派生选择器：选择子孙 */
#sel span{
    padding: 5px;
    border: 3px solid #008000;
} 
            
/* 派生选择器：选择子 */
#sel>span{
    padding: 5px;
    border: 3px solid red;
}

伪类选择器

hover

鼠标移入元素就是hover

/* 伪类：hover(鼠标移入元素就是hover)。鼠标移入到图片上，图片边框变为白色的2px */
.box img:hover{
    border: 2px solid white;
}

focus

输入框获取焦点饿时候，设置的样式

/* 伪类：focus,输入框获取焦点的时候，设置的样式 */
#ipt:focus{
    height: 30px;
}

溢出—overflow

overflow: hidden;/*溢出的解决方式，隐藏溢出部分*/
overflow: scroll;/*设置出现滚动条，溢出的内容通过滚动条查看*/
overflow: visible;/*溢出部分可见，溢出的默认处理方式*/
overflow: auto;/*继承父元素的溢出处理方式*/

css—背景图

/* 
    背景颜色：background-color
    背景图片：background-image:url
            background-repeat:no-repeat/repeat-x/repeat-y/repeat
            bacground-size:大小
            background-position:图片的区域
            background-attachment:背景固定
组合设置：background:颜色 背景图片 重复方式 背景图片top 背景图片left 
*/
div{
    border: 1px solid blueviolet;
    width: 1000px;
    height: 300px;
    background-color: aqua;/*背景色*/
    background-image: url(img/a.jpg);/*背景图片：url是背景图片地址*/
    background-repeat: no-repeat;/*是否重复*/
    background-size: cover;/*完全覆盖标签的区域*/
    background-position: 0px 0px;
    background-attachment: fixed;/*背景固定*/
}
div{
    background: url(img/b.jpg) no-repeat -30px -30px;
}

定位—position

top、left、right、bottom设置元素的具体的位置

流定位

页面中的块级元素从上到下一个接一个显示，行内元素在一行中从左到右排，水平分布

浮动定位

让元素脱离了普通的流定位，通过css的float属性设置元素的浮动方向，浮动元素依然在父元素的内部，用它可以实现特殊的定位

.outer {
    background-color: gray;
    /* 子元素浮动之后，父元素高度为0，造成溢出现象。
        解决方式 ：①给父元素设置高度   ②使用overflow，隐藏溢出  
    */
​
    /* height: 100px;  内部嵌套的元素浮动之后，包裹元素的高度为0，可以给包裹元素设置高度 */
    overflow: hidden;/*内部嵌套的元素浮动之后，包裹元素的高度为0，可以使用overflow:hidden;让包裹元素的高度和内部元素高度匹配*/
}
​
p {
    float: right;
    /*右浮动：标签浮动之后，影响力其他标签的显示。如果其他标签不想受其影响，可以在标签中通过clear，清除浮动的影响*/
}
​
h1 {
    clear: both;
    /*清除浮动的影响 none-不清楚，both-清除两边元素的影响，left-清除左边的影响，right-清除右边的影响*/
}

相对定位—relative

参考自己本身原来的位置

<!-- 父元素div,只是设置了position:relative;没有修改原本的位置 -->
<div style="width: 400px;height: 400px;background-color: aquamarine;position: relative;"></div>

绝对定位—absolute

参考的是自己的右相对定位的包裹元素。如果直接父元素没有相对定位，那么就直接找父辈的；如果最终也没有，就找html(body)为准

<!-- 父元素div,只是设置了position:relative;没有修改原本的位置 -->
<div style="width: 400px;height: 400px;background-color: aquamarine;position: relative;">
    <!-- 调整p标签，让其在四个角落和中心 -->
    <p style="border: 1px solid blue;position: absolute;top: 0px;left: 0px;">这个是p1标签</p>
    <p style="border: 1px solid blue;position: absolute;top: 0px;right: 0px;">这个是p2标签</p>
    <p style="border: 1px solid blue;position: absolute;bottom: 0px;left: 0px;">这个是p3标签</p>
    <p style="border: 1px solid blue;position: absolute;bottom: 0px;right: 0px;">这个是p4标签</p>
    <p style="border: 1px solid blue;position: absolute;top: 189px;left: 150px;">这个是p5标签</p>
</div>

固定定位—fixed

参考的是html(body)

<!-- 固定定位 position:fixed
            opacity:0.5;透明度的设置，数据值是0-1(文字也有透明度)
            backround-color:ragb(29%,10%,61%,0.3),ragb,rag代表颜色的比例，a(0-1)代表透明度(只有背景色透明度有效)
-->
<div style="position: fixed;left: 1000px;top: 900px;padding: 10px;background-color: rgba(29%, 10%, 61%,0.3);">
    <span>京东秒杀</span><br>
    <span>特色优选</span>
</div>

z-index的使用

给元素设置了定位之后，如果被定位的元素的位置相同，则会发生堆叠现象(重合在一起)，可以使用z-index,修改显示

z-index:数据；标签设置z-index之后，数据值越大的显示在越上层(就是能被看见的)

img{
    position: absolute;
    width: 70%;
    height: 70%;
    z-index: 10; 
}
​
img:hover{
    z-index: 20;
}

JavaScript

简称js,<script>标签内部只能写符合js语法规则的语句

作用：操作html和css,实现动态页面

<script type="text/javascript">
// JavaScript简称js,<script>标签内部只能写符合js的语法规则的语句
// 功能：单击id是close的标签，把id是top的标签隐藏
//let span;定义变量(let是定义变量的关键字)
let span = document.getElementById("close");//document对象是js的内置对象，getElementById("close")是一个函数，根据id找到元素
let div = document.getElementById("top");
            
//onclick:js中的单击事件，当元素被单击的时候，则执行单击事件对应的函数
span.onclick = function(){//function表示函数
    div.style.display = "none";//修改元素的style属性对应的display样式，赋值为none
}
</script>

js的三种使用方式

事件定义的方式

<!-- onclick是标签的事件属性， alert('hello')是js中定义的一个弹出警告框的函数-->
<button οnclick="alert('hello')">你好</button>

js嵌入到html页面，通过<script>标签来使用

<script>
    //自定义函数
    //js是弱数据类型语言
    function f1(a){
        alert(a)
    }
    //getElementById,根据id获取元素，id是唯一的，所以找出来的是唯一的符合要求的一个元素
    let btn = document.getElementById("btn1");
    btn.onclick = function(){
        alert("点我呀！点我呀！什么都没有！哈哈哈哈");
    }
</script>

js相关内容写在单独的.js文件中

在html页面上，通过<script src="xx.js">引入js文件，进行使用

<!-- 解释执行的时候，先加载完按钮，js文件中才找得到btn2这个按钮 -->
<script src="4.js的使用.js"></script>
​
// 只能写符合js语法规则的语句
let btn2 = document.getElementById("btn2")
btn2.onclick = function(){
    alert("我爱祖国");
}

for循环的使用

语法规则：

for(循环的起点；循环的判断条件；循环条件的变化){

循环体；

}

//2.练习：在网页上生成10个div标签显示为一行
//通过循环，创建10个div
let str = "";
for(let i=0;i<10;i++){
    str += "<div></div>";
}
//通过innerHTML,把html的字符串，放在body标签中;document.body:找到body元素
//为了避免body标签中原本的内容被覆盖了，把新的标签内容str+原来的内容，然后一起赋值给document.body.innerHTML
document.body.innerHTML = str + document.body.innerHTML;
//修改十个div的left值，使其不重叠在一起
let divs = document.getElementsByTagName("div");//根据标签名字找，找到的结果是数组
for(let j=0;j<divs.length;j++){
    divs[j].style.left = j*110 + "px";//设置div的left的值
    //单击div的时候，div的颜色修改为红色
    divs[j].onclick = function(){
        //this.style.backgroundColor = "red"; this表示当前被单击的对象
        divs[j].style.backgroundColor = "red";
    }
}

js中的变量：用于条件判断的时候，非空转换为true，空转换为false

// js中变量：用于条件判断的时候，非空转换为true,空转换为false
let m;
if(m){
    alert("非空转换为true")
}else{
    alert("空转换为false")
}
console.log(m)

数据类型的转换

js—弱数据类型语言

数据类型

• 定义变量的时候是用let定义，没有指定数据类型，给这个变量赋值任意数据类型都可以。

• string , nubmer, date, boolean , array , object ,function

• typeof, parseInt ,parseFloat ,toString ,isNaN

• 算术运算过程中true转为1，false转为0.

• 把变量作为条件判断的时候，非空转换为true，空转换为false.

let data ;  
data = "abc" ; data=100; data=true; data=100.5; 
data = new Array();
let s = true;
let b = 12;
// *** js中，boolean参与运算的时候，true转为1，false转为0.
console.log(s+b); // 13
let s1 = false;
console.log(s1+b); // 12
let s2 = "abc";
// **  js中，有string参与运算的时候，做的是字符串的拼接
console.log(s2+b); // "abc12"
console.log(s2+s); // "abctrue"
// ** js中， 把变量直接用于条件判断的时候， 非空为true , 空为false.
//    **** null , undefind ,"" ,'' , 0 , false
let s3 = "";
if(s3){
    console.log("s3不是空");
}else{
    console.log("s3是空");
}
// ** 数据类型转换相关的函数
// 1. typeof(变量名)
let s4 = "100"; console.log(typeof(s4));
let k = typeof(s4)
console.log(k=="number"); // 判断变量是否为number类型。
// 2. toString()
var s5 = 100; 
s5 = s5.toString();
console.log(typeof(s5));
//3. parseInt
var s6 = "100.55"
console.log(parseInt(s6));
//4. parseFloat
console.log(parseFloat(s6)); 
//5. isNaN
var s7 = "aa.55" console.log(isNaN(s7)); // 不是数字，返回true，是数字，返回false.
         
// **  null 与 undefined
let s8 ;  // s8就是undefined
let s9 = null ;// s9就是null.
s7 = null; // 清除对象

数组的使用array

创建数组

数组元素可以是任意类型

let arr1 = new Array();
arr1[0] = "abc";
arr1[1] = alert; // 将alert函数的定义赋值给数组
arr1[7] = 100;
​
let arr2 = [1, 2, 3];
......

数组对象

长度可变，数组元素可以是任意类型。可以通过数组下标的方式操作数组。

数组方法

push()方法

在数组末尾增加元素

let arr3 = new Array();
arr3.push("a");
arr3.push("b");
arr3.push("c");
console.log(arr3);//['a', 'b', 'c']

pop()方法

在数组中弹出最后一个元素

let last = arr3.pop();
console.log("last:" + last);//last:c

unshift()方法

在数组的首位添加元素

// 数组头部插入
arr3.unshift("A") 
console.log(arr3);// ['A', 'b']

shift()方法

在数组的首位取出元素

let first = arr3.shift()
console.log(first);//a

学习心得

经过两周的学习时间，对前端知识的框架有了比较深刻的印象，知道前端三部分每部分的使用方法以及作用。

最开始也接触过一些前端方面的知识，觉得很简单，也比较有趣，因为写了代码能立马看得到效果，而不是像后端。随着后面的学习，对前端的看法又发生了变化，简单是因为我之前只涉及到了最基础的知识点。随着知识的深入，发现也有点力不从心了，有时候一直搞不出来。到最后面的学习，发现自己对这道题如何解答有一个大概清晰的思路，但不知道如何下笔。和一个同学交流之后，感觉就是自己代码写少了，有思路却不知如何着手写，在后续的学习中，更要锻炼自己思考的过程，也要多动手练习，努力实现到最后看到题目就会得心应手的状态

学习到后面的jquery语句，发现前面js中写的语句，使用jquery语句更加方便简洁，也比较容易理解。让我也意识到了jquery还是很重要的。

总的来说，前端的知识自己学得并不算好，虽然最终的小测试做得也还行，但是给我一道题目解答，我会卡半天，甚至可能一道题毫无思路。自我感觉就是，自己代码写少了的缘故，原理懂，知识点也知道，但是就是不会运用到实际的作业中。希望自己多练习，不管是前端还是后端的学习，努力克服这一难关，提升自我。