前端学习心得与难点解析-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72954164/article/details/126589842

本文作者回顾了前端学习经历，主要包括HTML、CSS、JavaScript和jQuery的知识。在HTML中，重点提到样式、图片和超链接、表单标签的使用。CSS部分强调了样式的选择器、定位和基本特征。JavaScript部分涵盖了语法和正则表达式。jQuery的学习中，作者总结了append()和remove()等函数的使用。在学习过程中，作者体会到理论与实践相结合的重要性，尤其是对难点知识的反复练习和理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感受

在本阶段的学习中，我收获了很多，学习到了很多的新知识。其中不乏简单易懂的基础知识，更有让人晦涩难懂的高级应用知识。本阶段主要的学习内容为三个部分，分别是HTML与CSS知识、JavaScript知识、JQuery知识。因为专业相关的因素，此三部分知识在大学安排的专业核心课程中都浅浅地接触过，但没有专业系统地学习过相关的核心基础知识。在经过华清远见教育集团的冯老师的耐心教授之后，我掌握了很多相关基础知识的理解和应用。特别是JQuery知识部分，大学课堂中知识稍微提过，并正式没有教授过。刚开始的时候，觉得还是简单，也能听懂，但是对于它的应用却稍显困难，总是跟前面的知识相混，我归根于是自己对于基础知识掌握不牢靠的原因。对于学习这部分内容，不得不说对于一个大学生来说，听懂那是相当的，但是对于知识的应用能力还是有待提高，对于知识的细节部分的理解还需自己钻研琢磨，以便更好的将理论知识融入生活中应用。此番自我发现，正是对于这种能力的不足，使得自己在做练习的过程中屡屡受挫。即使有思路，却不知如何下手，仔细回想并复习过相关知识点之后，又茅塞顿开，道：“原来如此！”。总之，在这个学习过程中，“酸甜苦辣”尽尝，“酸”的是别人早已完成练习，自己却刚理清思路；“甜”的是在遇到与自己已十分掌握的知识点相关的练习时，分分钟思路清晰，得出结果；“苦”的是知道要用哪个知识点，却总得不出想要的结果；“辣”的是双薪时代大楼一楼旁边那家“辛一面”的鸡杂面是真的辣啊，特呛喉咙。

难点知识总结

有了收获，自然要学会总结，以下是我在前端部分的知识的学习过程中总结的我觉得难于理解并需要加强练习的知识点：

HTML部分

样式

-border: 1px solid green 边框（宽度，类型，颜色）



-<b>标签：加粗

-<strong>标签：加粗

-<em>标签：倾斜

-<i>标签：倾斜

-<del>标签：删除线

-<u>标签：下划线

图片和超链接

img标签：引用一张存在的图片，在网页上显示

src: 引用的图片路径

相对路径：根据当前文件夹的路径，查找资源的路径；

绝对路径：从协议开始的全路径，可以省略协议及其域名，直接从根目录开始的路径也是绝对路径

alt标签：图片说明,当显示图片失败时，会展示图片说明。

表单相关标签

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

form标签：

属性：enctype:设置enctype的类型，对请求参数的处理方式。如果表单涉及文件上传 lock 块级元素

label

属性：

for: label的for属性对应的数据值是input标签的id，单击label标签时，input标签获取焦点（光标显示在输入框内部，用户可直接输入数据，增强了用户体验感。

type：设置标签的类型，设置用户输入的数据

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

name: 用户输入的数据，传输到服务器时，java程序根据name的值，获取到输入框的数据

value: 对应的就是用户输入的数据值

css部分

css : cascading style sheet,级联样式表，用户调整html中标签的样式的语言。

语法规则：“样式名：样式的值” ，例如： color : red,指定字体颜色。 “样式名：样式的值，样式名：样式的值 ” ，color : red,font-size　：２０ｐｘ

css三种使用方式

1、内联样式：直接在标签上，通过style属性进行使用

2、内部样式：在head标签中，通过<style>css语言<style>标签，使用样式

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

内联样式：只对当前使用的标签有效

内部样式：在<head>的<style>中写css样式

外部样式：在css文件中（test.css）,写样式。在html文件中<head>中引用文件（<link rel="stylesheet" type="text/css" href="../day2/test.css"/>）

css特征

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

2、层叠性：一个元素可以有多个样式效果进行叠加。

3、优先级：浏览器默认样式 < 标签的默认样式 < 【内部样式/内联样式/外部样式】（根据编写的代码的先后顺序，谁后写，谁优先。）

优先级

内联样式的优先级高于内部样式的优先级；

内部样式和外部样式：谁后写谁优先；

id选择器优先级 > class选择器 > 标签选择器无冲突，根据层叠性都显示，有冲突，根据实际情况定

css的基本选择器

选择器：selector ，根据某个特征，找到标签

1、标签选择器：根据标签的名字，选择对应的标签（当前html页面中的该标签都被选择出来））

2、id选择器：根据标签的id，选择标签。

3、class选择器：根据标签的class属性，选择标签（一个html页面，class允许重复，可选择除多个符号条件的标签）

4、伪类选择器

伪类：hover（鼠标移入元素就是hover.）鼠标移入到图片上，图片边框变成白色的2px

/* 伪类：focus，输入框获取焦点时，设置的样式 */

    #ipt:focus{
		height: 30px;
}

选择器：selector

选择器：selector ，根据某个特征，找到标签

1、标签选择器：根据标签的名字，选择对应的标签（当前html页面中的该标签都被选择出来））

2、id选择器：根据标签的id，选择标签。

3、class选择器：根据标签的class属性，选择标签（一个html页面，class允许重复，可选择除多个符号条件的标签）

4、分类选择器：元素选择器和class/id选择器一起使用

5、分组选择器：选择器1，选择器2，选择器n........

6、派生选择器：找子（儿子，嵌套在内部的第一层符号条件的标签元素。选择器 > 选择器{}）找子孙（嵌套在内部的所有符号条件的标签元素。选择器选择器{}）

css的定位

position:定位 top: 100px; left: 100px; right: 100px; bottom: 10px;设置元素的具体位置

1、相对定位：relative,参考自己本身原来的位置。

2、绝对定位：position：absolute；,参考的是自己的有相对定位的包裹元素，如果直接父元素没有相对定位，，那么就找父辈的。如果最终也没有，那么就找html（body）为准。给父元素设置一个relative的相对定位）

3、固定定位: fixed

css的z-index : 数据；标签设置z-index之后，数据值越大的显示在越上层（即能被看见的。）

css中一些样式总结

line-height: 20px; --垂直居中

margin: 0 auto; 居中设置：margin:上下为0，左右为auto

text-decoration: none; 去掉超链接的下划线

html标签分类： 1、块级元素：占据一整行，其他内容换行显示。可以设置宽高。 2、行内元素：宽高由内容决定，剩下的区域可以显示其他元素。不支持设置宽高。比如：span、input。 3、块级行内元素：具有块级元素的特征，但是不换行。可以设置宽高，比如：img。

css样式中的display：

display：none；--隐藏列表标签

display：block；--设置为块级元素 display：inline；--设置为行内元素，设置不换行显示 display：inline-block；--设置为行内块级元素

display:inline-block; 不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行被解析成空格，总而言之，inline-block包含了行内元素和块内元素的特点，即设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

span标签是行内元素，宽度和高度由内部的内容决定，若设置width,height,则需要修改span标签的显示方式：display:inline-block(行内块级元素：不换行，支持设置宽高，如img标签。)

line-height: 30px; 行高：如果文字只有一行，然后行高等于高度，则文字垂直居中

margin:外边距，设置元素之间的间距

margin: 10px;/四个方向都是10px margin: 10px 20px; /margin: 上下左右 margin: 5px 10px 20px 30px;/margin: 上右下左 margin-top: 20px;/等同margin: 20px 0px 0px 0px;

padding:4px; 设置4个方向的内边距，设置元素和自己内部的内容之间的间距

list-style-type: none; 去掉li标签前面的符号

border-radius: 5px；设置边框为圆角

overflow : scroll；溢出，则使用滚动条

overflow : hidden ；溢出隐藏，当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。

JavaScript部分

js的三种使用方式

1、事件定义的方式

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

3、把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="xx.js">引入文件，进行使用

语法总结

.语法:text-overflow:clip | ellipsis

默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(...)。

当然这还是不够的，需要加点调料才能出现效果:

那就是配合

overflow:hidden

white-space:overflow;

display: none;

隐藏元素并脱离文档，流就是隐藏该区域，不占实际空间，但对后台来说真实存在，可以获取被隐藏的元素简单的来说就是将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。

display:block 就是将元素显示为块级元素。

οnfοcus="" 获取焦点 οnblur="" 失去焦点

. 代表任意字符 trim() 去掉前后空格

选择器优先级：id选择器 > class（类）选择器 > 标签选择器

border-collapse：collapse

正则表达式 NegExp（）

a.[字符] \d纯数字、\表示匹配字母数字[0-9a-zA-Z]

b.字符个数{n} or {n,m} +(至少一次{1，}) ?（0或者1{0，1}） *{0,}

c.开始匹配行首^

d.匹配结尾$

e..等价于任意内容

f.\用于转义，.表示.本身

g.（）用于分组

h. | 或

i. i -忽略大小写 g-全局查找

jquery部分

零碎知识点总结

append ()函数用于向每个匹配元素内部的末尾位置追加指定的内容。. 指定的内容可以是：html字符串、DOM元素 (或数组)、jQuery对象、函数 (返回值)。. 与该函数相对的是prepend ()函数，用于向每个匹配元素内部的起始位置追加指定的内容

//在第一个li中，添加超链接
            let $a = $("<a></a>");
            $a.text("这是最热的城市，查看天气预报");
            $a.attr("href","https://www.msn.cn/zh-cn/weather/");
            $(".u0 li:first").append($a);

appendTo() 让某个元素成为参数元素的最后一个子元素let k = appendTo($("div")):让k元素成为div的最后一个子元素。