web前端学习笔记
拉勾教育前端笔记
拉勾教育前端笔记一、前端学习的初体验刚接触拉勾教育的前端课程的时候，我就感觉像是打开了一个新世界的大门。
那一堆堆的代码，就像神秘的符号一样，既让人觉得高深莫测，又充满了无限的吸引力。
前端这玩意儿啊，就像是给网站或者APP穿上漂亮衣服的魔法师，能让一个光秃秃的框架变得超级酷炫。
我还记得刚开始学HTML的时候，那些标签就像一个个小积木，只要按照一定的规则拼接起来，就能构建出网页的基本结构。
比如说那个<h1>标签，一看到它，我就知道这是用来做一级标题的，就像文章里的大标题一样重要。
二、CSS的奇妙之旅学完HTML之后就进入到CSS的世界啦。
CSS可太好玩儿了，它就像是给网页化妆的化妆品。
可以改变字体的颜色、大小，还能调整元素的布局。
比如说我想让一个按钮看起来很时尚，我就可以给它设置一个漂亮的背景颜色，再调整一下边框的样式。
而且啊，CSS 还有很多神奇的属性，像display:flex，这个属性一用，元素的排列就变得超级整齐，就像一群训练有素的士兵。
我在学习这个属性的时候，可费了不少劲儿呢，要不断地调整参数，才能达到理想的效果。
三、JavaScript的挑战与乐趣JavaScript可就是前端的大boss了。
它的功能超级强大，可以让网页动起来，实现各种交互效果。
比如点击一个按钮，就弹出一个小窗口，或者让一个图片在页面上滑动。
不过JavaScript也很难，它的语法很复杂，有很多概念需要理解。
我记得在学习函数的时候，一开始总是搞不清楚函数的参数和返回值是怎么回事。
但是当我终于理解了之后，那种成就感简直无法形容。
就像攻克了一座很难攀登的山峰一样。
四、前端框架的探索在学了基础的HTML、CSS和JavaScript之后，就开始接触前端框架了，像Vue和React。
这些框架就像是一个超级工具包，里面有很多现成的组件和功能，可以让开发效率大大提高。
比如说Vue 的组件化开发，就可以把一个复杂的页面拆分成很多小的组件，每个组件负责自己的功能，这样代码就变得更加清晰和易于维护。
棒棒团前端学习日记 丨 第10天
棒棒团前端学习日记丨第10天
加入棒棒团自学前端的第10天，今天的学习日记有以下内容：
一、复习学过的知识：
复习上次学过的服务端编程：学习服务端的概念、web服务器的概念、XML与JSON;、复习学习AJAX：学习异步数据交互、模板引擎的使用、跨域的实现方案；复习学习移动web开发：学习响应式布局、bootstrap框架剖析、zepto.js库、预编译CSS；今天用两个小时把昨天学过的内容复习一遍，做一些练习巩固学到的知识。
二、学习计划：
1、学习面向对象在js中的体现与实践：学习面向对象理论；学习对象的基本概念；学习对象的属性和方法；
2、学习开发过程中常用到的模式与思想：学习开闭原则；学习mvc思想；学习工厂模式；
3、学习JavaScript高级特性：学习通过构造函数创建对象、原型对象和原型链；学习继承的多种实现方式；学习函数的本质以及function构造函数、作用域链、闭包；
三、学习方法：
今天的学习还是和以前一样，基础知识还是采取知识与视频结合的方式学习，其他部
分分成模块一点一点攻破。
每攻破一个版块，就做一个相应的代码练习。
如果这一部
分练习做得不顺利，就重新把知识点捋一遍。
遇到解决不了的难题就到的棒棒团里请
教大神帮忙解决。
四、学习总结：
学习到了这里已经比较顺利了，学习的内容基本上可以算的上是进阶内容了。
虽然之
前学习比较顺利，但也不能掉以轻心，毕竟任何一个环节出错，都可能会影响学习结果。
今天代码写的不算太容易，明天得花一些时间，再把这一块学习一下。
web前端知识点总结记忆
web前端知识点总结记忆在当今互联网时代，Web前端开发已经成为了一门非常热门的技术，前端开发人员的需求也越来越大。
在这个过程中，掌握一些基础的Web前端技术和知识是非常重要的。
本文将总结一些常见的Web前端知识点，希望能够帮助读者更好地理解Web前端开发技术。
HTML（HyperText Markup Language）HTML是Web前端开发的基础，它是用来描述网页结构的一种标记语言。
HTML由一系列的元素（elements）组成，每个元素都由起始标签（start tag）和结束标签（end tag）组成。
标签中还可以包含一些属性（attributes），用来指定元素的一些特性。
常见的HTML元素包括标题（<h1>~<h6>）、段落（<p>）、列表（<ul>、<ol>、<li>）、链接（<a>）、图片（<img>）、表格（<table>、<tr>、<td>）等等。
在HTML5中，还新增了一些新的语义化元素，例如<section>、<article>、<header>、<footer>等等。
CSS（Cascading Style Sheets）CSS被用来描述网页的样式和布局。
它可以控制网页中元素的颜色、大小、位置等各种外观特性。
使用CSS可以将网页内容和其外观样式分离，提高了代码的可维护性。
CSS规则（rule）由选择器（selector）和声明块（declaration block）组成。
选择器用来选择需要应用样式的元素，声明块中包含了一系列的样式声明，每个声明由属性名（property）和属性值（value）组成。
除了普通的样式声明外，CSS3还引入了一些新的功能，例如渐变（gradient）、阴影（box-shadow）、动画（animation）等。
web前端基础开发笔记
01.HTML简介HTML(Hyper Text Mark-up Language超文本标记语言)，标记就是用来描述网页内容的一些特定符号，HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来实现的.HTML文档的创建方式: 用HTML语言创建的文档·手工直接编写(例如记事本)·通过图形化的HTML开发软件Dreamweaver·由Web服务器上的动态网页程序生成标记也称为标签或元素.02.HTML语法HTML最基本的语法是: <标记符>内容</标记符>标记符通常都是成对出现的，有一个开头标记和结束标记，结束标记只是在开头标记的前面加一个斜杠"/"，当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。
例如:<hr width="80%" /)<font size="7">文字内容</font>制作一个html网页文件:·新建一个记事本的文件，命名为*.html·在文件里面输入内容HTML标记的类型: 单标记与双标记·单标记: <标记名称>·单一型，无属性值: 如: <br />·单一型，有属性值: 如: <hr width="80%" />·双标记·无属性值: <标记名称>...</标记名称> 如: <title>...</title>·有属性值: <标记名称属性="属性值">...</标记名称> 如: <font size"7">...</font>说明:·标记与属性、属性之间以空格分隔·属性不区分先后顺序，且属性不是必需的.·虽然在HTML中标记不区分大小写，但在XHTML中所有标记都必须小写，所以建议所有标记都采用小写.03.HTML文档结构所有的网页文件，通常由四对标记来构成文档的骨架:<html><head><title>标题<title></head><body>正文</body></html>说明:·<html>...</html> 标识网页文件的开始与结束，所有的html元素都要放在这对标记中.·<head>...</head> 标识网页文件的头部信息，如标题、搜索引擎关键字等. ·<title>...</title> 标识网页文件的标题·<body>...</body> 标识网页文件的主体部分04.注释:注释格式: <!--注释内容-->05.头部(head)标记meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。
Web前端笔记整理
Web前端笔记整理不使⽤Ajax⽆刷新提交：header('HTTP/1.1 204 No Content');var a=document.createElement('img'); a.setAttribute('src','./01.php');<form action="" target="regzone"></form> <iframe name="regzone" style="display:none"></iframe>Ajax处理XML：var xml = obj.responseXML.getElementsByTagName("city");var res = xml[0].childNodes[0].nodeValue;Ajax处理JSON：var res=eval("("+obj.responseText+")");alert();jQuery的Ajax处理JSON：var obj = JSON.parse(data);alert(er_id);jQuery的AJax操作：function ajaxGet(){$.ajax({type:"GET",url:"test.php?key=123",success:function(data){alert(data);}});}function ajaxPost(){$.ajax({type:"POST",url:"test.php",data:'{"id":1,"name":"abc"}',contentType:"application/json;charset=utf-8",success:function(data){alert(data);}})}【HTML】1.邮件链接：<a href="mailto:?subject=title">点击发送邮件</a>2.表格：单元格与单元格的间距cellspacing，单元格与内容间距cellpadding，跨⾏rowspan，跨列colspan。
web前端实习日记
web前端实习日记《web 前端实习日记》今天，又是在 web 前端实习岗位上努力奋斗的一天。
早上，我带着满满的期待和一点点的紧张走进了公司。
一到工位，我就赶紧打开电脑，准备开始一天的工作。
先查看了昨天遗留的任务和今天新分配的工作，心里默默给自己打气：“加油，今天也要攻克这些难题！”上午，组长给我安排了一个新的页面布局任务。
我看着设计稿，心里想着这应该不算太难。
可当真正开始动手写代码的时候，才发现事情并没有我想象的那么简单。
这个页面需要实现一个复杂的响应式布局，要在不同的屏幕尺寸下都能呈现出完美的效果。
我先是按照常规的方法设置了一些CSS 样式，可在手机端测试的时候，页面元素全都乱了套。
那一瞬间，我感觉自己像是走进了一个迷宫，怎么也找不到出口。
我皱着眉头，反复检查代码，嘴里还念念有词：“这到底是哪里出了问题呢？”旁边的同事听到我的嘀咕，凑过来瞅了一眼，笑着说：“嘿，你这少了个媒体查询呀！”我恍然大悟，原来是这个小细节没注意到。
经过一番修改，页面终于在手机端显示正常了。
我松了一口气，感觉就像是打了一场小小的胜仗。
不过，这只是开始，还有更多的挑战等着我呢。
中午吃饭的时候，和同事们一起在餐厅闲聊。
大家分享着工作中的趣事和遇到的难题，让我感觉特别温馨。
有个同事说他昨天为了修复一个 bug，熬到了半夜，结果今天发现是个特别低级的错误，把我们都逗得哈哈大笑。
下午，我继续完善页面的功能。
其中有一个交互效果，需要用户点击按钮时出现一个弹出框。
我写好了 JavaScript 代码，满心期待地点击按钮，结果弹出框闪了一下就消失了。
我顿时傻眼了，这是咋回事呢？我开始仔细检查代码，一行一行地看，眼睛都快看花了。
最后发现是一个变量的命名写错了，导致整个逻辑都乱了。
哎呀，我真是太粗心了！修改好之后，弹出框终于正常显示了，我心里的一块大石头总算落了地。
快下班的时候，组长过来检查我的工作进度。
我紧张地给他展示了完成的页面，心里七上八下的，生怕有什么问题。
web前端考试知识点总结
web前端考试知识点总结一、HTML知识点总结1. HTML基础知识- HTML的基本结构- HTML的常用标签- HTML的元数据标签- HTML的列表、表格、表单等相关标签2. HTML5新增的语义化标签- header、footer、nav、article、section、aside等3. HTML5新增的表单元素- input的各种类型- 新增的表单元素如datalist、keygen等4. HTML5新增的媒体元素- video、audio等5. HTML5新增的API- 本地存储、离线应用、地理定位等二、CSS知识点总结1. CSS基础知识- CSS的语法- CSS的选择器- CSS的样式属性2. CSS布局- 盒模型- 浮动- 定位- 弹性盒子布局- 栅格布局3. CSS3新增的样式- 边框、背景、文字、渐变、阴影等效果 - 过渡、变换、动画等4. 响应式设计- 媒体查询- 移动优先5. CSS预处理器- SASS、LESS等三、JavaScript知识点总结1. JavaScript基础知识- 数据类型- 运算符- 流程控制语句2. JavaScript函数- 函数的定义- 作用域- 闭包- 高阶函数3. JavaScript对象- 对象的创建- 原型链- 对象的继承4. DOM操作- 节点的增删改查- 事件处理5. AJAX与跨域- XMLHttpRequest对象- 跨域访问的解决方案6. ES6知识点- let、const- 箭头函数- 解构赋值- 模板字符串- Promise等四、Web前端知识点总结1. 前端框架- Vue.js、React、Angular等- 每个框架的基本原理和使用方法2. 前端工程工具- Webpack、Gulp、Grunt等- 理解构建工具的作用和配置3. 前端性能优化- 页面加载速度优化- 代码性能优化4. 前端安全- XSS、CSRF、点击劫持等- 前端安全常见问题和解决方案5. 前端测试- 单元测试- UI测试6. 前端工程化- 模块化开发- 前端构建流程综上所述，Web前端技术知识点之多之杂，要想在考试中取得好成绩，需要对各种知识点进行深入理解和掌握。
web前端 笔记
以下是一些关于Web前端的笔记：1. HTML（HyperText Markup Language）是网页的基础结构，用于创建网页元素和内容。
2. CSS（Cascading Style Sheets）是用于控制网页外观和样式的样式表语言。
3. JavaScript是一种脚本语言，用于在网页上添加交互性和动态功能。
4. DOM（Document Object Model）是网页的编程接口，允许JavaScript与HTML和CSS交互。
5. HTTP（HyperText Transfer Protocol）是用于在Web上传输数据的协议。
6. AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript在Web应用程序中异步发送HTTP请求的技术。
7. HTML5是一种用于创建现代Web应用程序的HTML和CSS技术集合。
8. CSS3是CSS的最新版本，包含许多新特性和改进。
9. Flexbox是一种CSS布局技术，用于创建灵活的布局和对齐元素。
10. Grid是一种CSS布局技术，用于创建复杂的二维布局。
11. SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。
12. WebGL是一种用于在浏览器中创建3D图形的技术。
13. WebAssembly是一种用于在浏览器中运行高性能应用程序的二进制代码格式。
14. React是一种用于构建用户界面的JavaScript库。
15. Vue是一种用于构建用户界面的JavaScript框架。
16. Angular是一种用于构建单页应用程序的JavaScript框架。
17. Bootstrap是一种流行的前端框架，用于快速开发响应式Web应用程序。
18. Font Awesome是一种流行的图标库，用于在Web应用程序中添加图标。
19. CSS Reset是一种CSS文件，用于重置浏览器默认样式。
web前端大一知识点
web前端大一知识点在当今数字化时代，Web前端技术的重要性日益突出。
作为大一学生，了解并掌握一些关键的Web前端知识点，将对你在未来的学习和职场发展中起到重要的推动作用。
本文将介绍一些大一学生应了解的Web前端知识点。
一、HTML（超文本标记语言）HTML是用于构建网页结构的标记语言。
了解HTML的基本语法和标签是Web前端开发的基础。
以下是一些常用的HTML标签：1. `<html>`：HTML文档的根标签。
2. `<head>`：用于定义HTML文档的头部，包含了一些元数据信息。
3. `<body>`：用于定义HTML文档的主体内容。
4. `<h1>`到`<h6>`：用于定义标题，依据重要性逐级递减。
5. `<p>`：用于定义段落。
6. `<a>`：用于定义超链接。
7. `<img>`：用于插入图片。
8. `<ul>`和`<li>`：用于创建无序列表。
二、CSS（层叠样式表）CSS用于描述HTML文档的展示方式，如字体、颜色、布局等。
以下是一些常用的CSS属性：1. `color`：设置文本颜色。
2. `font-family`：设置字体。
3. `font-size`：设置字体大小。
4. `background-color`：设置背景颜色。
5. `margin`：设置外边距。
6. `padding`：设置内边距。
7. `border`：设置边框样式。
8. `width`和`height`：设置元素的宽度和高度。
三、JavaScript（JS）JavaScript是一种脚本语言，可以为网页增添交互性和动态效果。
以下是一些JavaScript的基础知识点：1. 变量：使用`var`关键字声明变量，如`var x = 10;`。
2. 条件语句：使用`if`语句进行条件判断，根据条件的不同执行不同的代码块。
渡一教育前端笔记
渡一教育前端笔记一、前端开发概述前端开发是指网页制作的过程，是通过浏览器渲染HTML、CSS和JavaScript来实现页面效果和交互的技术。
在现代的Web开发中，前端开发扮演着至关重要的角色，其负责构建用户界面，设计交互效果，使网站/应用更加美观、友好、易用。
渡一教育前端笔记将系统地介绍前端开发的相关知识和技术，帮助学习者全面掌握前端开发的基本概念和实际操作技能。
二、HTML与CSS基础1. HTMLHTML（Hyper Text Markup Language）是一种用来描述文档结构的标记语言，用于构建网页的基础。
在渡一教育前端笔记中，学习者将学习HTML的基本语法和标签用法，掌握如何构建HTML文档、创建文本、图像、链接等基本元素，以及表单、表格、多媒体等内容的制作方法。
2. CSSCSS（Cascading Style Sheets）是一种用来描述文档样式的样式表语言，用于控制网页的布局和外观。
在渡一教育前端笔记中，学习者将学习CSS的基本语法和属性用法，了解如何为HTML文档添加样式、设置字体、颜色、背景、布局等样式，同时掌握响应式设计、动画效果等实用技巧。
三、JavaScript进阶JavaScript是一种用来向网页添加交互功能的脚本语言，具有动态性和灵活性，是前端开发中不可或缺的一部分。
在渡一教育前端笔记中，学习者将深入学习JavaScript的语法和特性，了解DOM操作、事件处理、Ajax异步请求、模块化开发、面向对象编程等高级技术，掌握如何通过JavaScript实现网页的交互效果和动态效果。
四、前端框架与工具在现代的前端开发中，前端框架和工具的使用变得越来越重要，能够帮助开发者更高效地构建复杂的前端应用。
在渡一教育前端笔记中，学习者将学习如何使用Vue、React等主流前端框架，了解Webpack、Babel等常用的构建工具和辅助工具的使用方法，同时掌握如何进行前端项目的工程化、模块化开发等实践技巧。
黑马程序员web前端课程笔记
黑马程序员web前端课程笔记【最新版】目录1.黑马程序员 web 前端课程简介2.课程学习内容3.课程学习成果4.学习建议5.未来发展正文【黑马程序员 web 前端课程简介】黑马程序员 web 前端课程是一门针对想要成为 web 前端工程师的学员开设的课程。
该课程旨在帮助学员深入理解并熟练掌握 html、css、js 等前端技术，从而能够开发并优化网站，提升用户体验。
【课程学习内容】1.HTML：HTML 是前端开发的基础，学员需要掌握 HTML 的基本语法、常用标签以及如何编写语义化的 HTML 结构。
2.CSS：CSS 是用来美化网页的语言，学员需要掌握 CSS 选择器、盒模型、布局、颜色、字体等知识，并能够利用 CSS 进行页面布局和美化。
3.JavaScript：JavaScript 是用来实现网页交互的语言，学员需要掌握 JavaScript 的基本语法、数据类型、函数、事件处理、DOM 操作等知识，并能够利用 JavaScript 实现网页的动态交互。
【课程学习成果】通过学习这门课程，学员能够熟练掌握前端开发的基本技术，并能够开发出功能完善、用户体验良好的网站。
此外，学员还能够提升自己的编程能力和解决问题的能力，为将来的职业生涯奠定坚实的基础。
【学习建议】1.认真听课：学员应该充分利用课堂时间，认真听讲，理解并掌握老师讲解的知识点。
2.多做练习：前端开发需要大量的实践，学员应该多做练习，将理论知识转化为实际操作能力。
3.积极参与讨论：学员应该积极参与课堂讨论，提出自己的问题和看法，与老师和同学进行交流和碰撞，以提升自己的理解和能力。
4.定期复习：学习新知识的同时，学员也应该定期复习旧知识，以巩固和加深理解。
【未来发展】前端开发是互联网行业的热门领域，拥有广阔的发展前景。
Web前端笔记详细版
Web前端开发理论篇WEB标准WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
结构标准语言XMLXML是The Extensible Markup Language(可扩展标识语言)的简写。
目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（/TR/2000/REC-XML-20001006）。
和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。
XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
XHTMLXHTML是The Extensible HyperT ext Markup Language可扩展超文本标识语言的缩写。
目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考/TR/xhtml1）。
XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。
因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。
简单的说，建立XHTML的目的就是实现HTML 向XML的过渡。
CSSCSS是Cascading Sty le Sheets层叠样式表的缩写。
目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考/TR/CSS2/）。
W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。
Web前端学习笔记资料
Web前端学习笔记资料第⼀章：HTML介绍1.1 HTML和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语⾔。
下⾯我们就来了解下这三门技术都是⽤来实现什么的：1. HTML是⽹页内容的载体。
内容就是⽹页制作者放在页⾯上想要让⽤户浏览的信息，可以包含⽂字、图⽚、视频等。
2. CSS样式是表现。
就像⽹页的外⾐。
⽐如，标题字体、颜⾊变化，或为标题加⼊背景图⽚、边框等。
所有这些⽤来改变内容外观的东西称之为表现。
3. JavaScript是⽤来实现⽹页上的特效效果。
如：⿏标滑过弹出下拉菜单。
或⿏标滑过表格的背景颜⾊改变。
还有焦点新闻（新闻图⽚）的轮换。
可以这么理解，有动画的，有交互的⼀般都是⽤JavaScript来实现的。
1.2 html⽂件基本结构1. <html></html>称为根标签，所有的⽹页标签都在<html></html>中。
2. <head> 标签⽤于定义⽂档的头部，它是所有头部元素的容器。
头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
3. 在<body>和</body>标签之间的内容是⽹页的主要内容，如<h1>、<p>、<a>、<img>等⽹页内容标签，在这⾥的标签中的内容会在浏览器中显⽰出来。
1.3 head标签⽂档的头部描述了⽂档的各种属性和信息，包括⽂档的标题等。
绝⼤多数⽂档头部包含的数据都不会真正作为内容显⽰给读者。
下⾯这些标签可⽤在 head 部分：<head><title>...</title><meta><link><style>...</style><script>...</script></head><title>标签：在<title>和</title>标签之间的⽂字内容是⽹页的标题信息，它会出现在浏览器的标题栏中。
棒棒团前端学习日记 丨 第3天
棒棒团前端学习日记丨第3天加入棒棒团自学前端的第3天，今天的学习日记有以下内容：一、复习学过的知识：昨天学习了前端CSS基础知识，了解了其用处及用法、学习了CSS选择器、学习CSS 样式和外观属性，今天用一个小时把昨天学过的内容复习一遍，尝试写一个静态页面代码，做一个小练习巩固学到的知识。
二、学习计划：1、学习CSS声明：基本声明：最典型的ＣＳＳ声明方式；集体声明：同时声明某个或数个元件(标签)（各元件(标签)间以逗号分隔）的一组或数组样式规则(性质)（各组规则间以分号分隔）；分项声明：将许多样式规则分组再分别声明；2、CSS的应用方法：使用STYLE属性：将STYLE属性直接加在个别的元件标签里；使用STYLE标签：将样式规则写在<STYLE>...</STYLE>标签之中；使用 LINK标签：将样式规则写在.css的样式档案中，再以<LINK>标签引入。
使用@import引入：跟LINK用法很像，但必放在<STYLE>...</STYLE> 中。
3、学习什么是盒子：盒子与盒子之间的距离（margin）；盒子与内容之间的距离（padding）；盒子边框的宽度（border）；三、学习方法：在学习基础知识时，结合网上学习视频一起学习。
在学习CSS声明时，参照代码学习。
在学习CSS应用时，要自己动手将学到的知识体现在实践中。
要将重点知识用自己的思路进行总结，并记录下来，能快速构建完整的、属于自己的知识框架。
将不理解或没有弄懂的地方标记下来，请教棒棒团的大神指导。
四、学习总结：今天的学习比较有难度，但由于之前学习的比较扎实，所以总体来说还是比较顺利的。
越有挑战的学习，越有趣。
现在我已经可以写一个完整的静态界面了，虽然还是借鉴别人的，但相信很快就能自己写出来了。
前端学习笔记知识点总结
前端学习笔记知识点总结一、HTML 基础知识1. HTML 基本结构HTML 是超文本标记语言的缩写，它是构建网页的基础。
HTML 标签是由尖括号包围的关键词，标签通常成对出现，包括开始标签和结束标签，例如 <html> 和 </html>。
2. 常用的 HTML 标签常用的 HTML 标签包括标题标签（<h1>~<h6>）、段落标签（<p>）、列表标签（<ul>、<ol>、<li>）、链接标签（<a>）、图像标签（<img>）等。
3. HTML 表单HTML 表单用于向服务器传输数据，包括输入框、单选框、复选框、下拉框等元素。
表单通过 <form> 标签来定义，通过 <input>、<select>、<textarea> 等标签来收集用户输入的数据。
4. HTML5 新特性HTML5 是HTML 的最新版本，提供了很多新特性，如多媒体元素（<audio>、<video>）、语义化标签（<header>、<footer>、<nav>、<article>、<section>）等。
二、CSS 基础知识1. CSS 选择器CSS 选择器用于选择要样式化的 HTML 元素，包括标签选择器、类选择器、ID 选择器、后代选择器、伪类选择器等。
2. CSS 盒模型盒模型是指在页面上的每个元素都被看作是一个矩形的盒子，包括内容区、内边距、边框和外边距。
通过设置盒模型的属性（如宽度、高度、内边距、外边距）来控制元素在页面上的布局和样式。
3. CSS 浮动和定位浮动和定位是用来控制元素在页面中的位置的两种方式。
浮动是指元素脱离文档流，定位是指通过设置绝对或相对位置来控制元素的位置。
html学习笔记二————第一章Web前端技术
html学习笔记⼆————第⼀章Web前端技术第1章 Web前端技术1.1 Web前端概述Web前端即指⼤家平常上⽹浏览的⽹页，如上⽹浏览新闻、查询快递信息、淘宝购物等都是在浏览⽹页。
但⽹页制作还需要了解与⽹页相关的基本概念，下⾯将对Web前端的相关概念进⾏详细讲解。
1.1.1 初识Web前端1991年8⽉6⽇，来⾃欧洲核⼦研究中⼼的科学家Tim Berners-Lee，启动了世界上第⼀个可以正式访问的⽹站（http: //info. cern. ch/），从此⼈类宣布了互联⽹时代的到来。
随着互联⽹的飞速发展，⽹站开发⼈员也变得炽⼿可热，供不应求。
据不完全统计截⽌2016年底，⽹站开发⼈员超过2000万+。
Web前端开发是从⽹页演变⽽来，名称上有明显的时代特征。
随着⼈们对⽤户体验的要求越来越⾼，前端开发的技术难度越来越⼤， Web 前端开发这个职业也从设计和制作不分的局⾯中独⽴出来。
早期的前端其实就是Table布局，后来发展到DIV+CSS⽹站重构，再到JS逐渐成为web前端开发的语⾔及web2.0的出现，涌现出相应的产品，如SNS、博客、微博等。
⼈们对⽹页的需求不断增⼤，Web前端技术也正加速发展。
Web开发职位可分为⽹页设计师（UI设计师）、Web前端开发⼯程师、Web后端⼯程师、数据库⼯程师。
下⾯来了解⼀下这四⼤职位的分⼯：l ⾸先由UI设计师根据产品的需求做出⽹站效果图，然后交付给Web前端⼯程师进⾏图⽚切割和⽹页制作。
l 数据库⼯程师负责把⽹站数据进⾏存储和优化处理。
l Web后端⼯程师负责把⽹站数据进⾏增删改查等逻辑处理，并将操作的数据返给Web前端⼯程师进⾏数据的交互与显⽰。
l Web前端⼯程师能充分理解项⽬需求和设计需求，并与UI设计师、Web后端⼯程师紧密合作，产出⾼质量的⽹站展⽰层，为⽤户呈现最好的界⾯交互体验。
图1.1 ⽹站开发模式有⼀句话⾮常形象的形容了Web前端⼯程师的特点，“它是游⾛在⼆次元与⼆进制之间的魔法师!”。
web前端开发笔记
web前端开发笔记Web前端开发是一个涉及多个方面的复杂领域，包括HTML、CSS、JavaScript等技术的使用，以及响应式设计、性能优化等方面的考虑。
以下是一些可能有用的Web前端开发笔记：1. HTML和CSS基础：了解HTML和CSS的基本语法和规则，包括如何使用标签、选择器、属性和值等。
同时，要掌握如何使用CSS进行布局和样式设计，以及如何使用媒体查询进行响应式设计。
2. JavaScript基础：JavaScript是前端开发中非常重要的语言，需要掌握其基本语法和规则，包括变量、函数、条件语句、循环语句等。
同时，要了解如何使用DOM操作来修改网页内容，以及如何使用事件处理程序来响应用户行为。
3. 响应式设计：响应式设计是一种使网站在各种设备上都能良好显示的技术。
需要掌握如何使用媒体查询来改变布局和样式，以及如何使用百分比宽度、flexbox等来适应不同的屏幕尺寸和设备类型。
4. 性能优化：性能优化是前端开发中非常重要的一部分。
需要了解如何优化网页加载速度、减少页面重排和重绘等，以提高用户体验。
这包括减少HTTP请求数量、使用CDN加速、压缩和合并代码等技巧。
5. 前端框架和库：前端框架和库可以帮助开发者更快速地构建复杂的网页和应用程序。
需要了解一些流行的框架和库，如React、Vue、Angular等，并掌握其基本用法和特点。
6. 版本控制工具：版本控制工具可以帮助开发者更好地管理代码，并方便地回溯和协作。
需要了解如何使用Git等版本控制工具进行代码管理和协作。
7. 测试和调试：测试和调试是前端开发中必不可少的环节。
需要掌握如何使用浏览器开发者工具进行调试和测试，以及如何编写单元测试和端到端测试。
以上是一些可能有用的Web前端开发笔记，希望对你有所帮助。
web前端大师课笔记
web前端大师课笔记1. HTML基础• HTML是HyperText Markup Language（超文本标记语言）的简称，是用来描述网页内容的标记语言。
◦ HTML使用标签来定义网页的各个部分，例如、、等。
◦ HTML标签通常包含起始标签和结束标签，用来定义标签所包含的内容。
2. CSS基础• CSS是Cascading Style Sheets（层叠样式表）的简称，用于描述HTML元素的样式。
◦ CSS样式可以定义在HTML文件中，也可以单独存放在外部样式表中。
◦CSS选择器可以用来选择要应用样式的HTML元素，例如元素选择器、类选择器、ID选择器等。
3. JavaScript基础• JavaScript是一种脚本语言，用于在Web浏览器中实现交互效果。
◦ JavaScript可以用来控制HTML元素、处理表单数据、动态生成内容等。
◦ JavaScript代码可以嵌入到HTML文件中，也可以通过外部脚本文件引入。
4. 响应式设计•响应式设计是指根据不同设备的屏幕大小和分辨率来调整网页的布局和样式。
◦使用媒体查询可以实现响应式设计，通过定义不同的CSS样式来适应不同的屏幕尺寸。
5. 前端框架和库•前端框架和库可以帮助开发者快速构建复杂的Web应用程序，并提供跨浏览器的兼容性。
◦常用的前端框架和库包括React、Angular、Vue等。
6. Web性能优化• Web性能优化是指提高网页加载速度和响应速度的方法。
◦常用的优化技巧包括压缩HTML、CSS和JavaScript代码，使用CDN加速资源加载，使用缓存等。
7. Web安全• Web安全是指保护Web应用程序不受攻击和数据泄露的措施。
◦常用的安全措施包括输入验证、跨站脚本攻击（XSS）防护、跨站请求伪造（CSRF）防护等。
[web]《现代前端技术解析》读书笔记
![[web]《现代前端技术解析》读书笔记](https://img.taocdn.com/s3/m/291d07ebfbb069dc5022aaea998fcc22bcd143d5.png)
[web]《现代前端技术解析》读书笔记1 Web前端技术基础1.1 现代Web前端技术发展概述前端项⽬代码越来越多，结构越来越复杂，如何实现项⽬的管理将直接决定后期的维护成本。
所以我们必须考虑⽤模块化和组件化的思路来管理.所谓的模块化和组件化是指采⽤代码管理中分治的思想，将复杂的代码结构拆分成多个独⽴、简单、解耦合的结构或⽂件分开管理，使项⽬结构更加清晰。
在页⾯内容较多、较复杂的情况下，为了让⽤户尽可能快速看到内容，我们可以通过异步的⽅式来实现，即将⼀部分内容先展⽰给⽤户，然后根据⽤户的操作，异步加载⽤户需要的其他内容，避免⽤户长时间等待。
怎样保证页⾯下载时消耗的流量尽可能⼩呢？这可能就需要考虑图⽚的优化处理了，如使⽤更⾼压缩⽐webp格式的图⽚，在图⽚质量不降低的情况下，可以⼤幅度减⼩图⽚的⽹络流量消耗，提⾼图⽚加载速度。
对于重复打开的页⾯，合理地利⽤⽂件缓存就能让浏览器不再向服务器请求重复的内容，这样可以⼤幅度提⾼⽹页资源的加载速度，⽽且幸运的是，浏览器默认可以⽀持⽂件缓存，对于⼀段时间内浏览器的重复请求，服务器可能会返回HTTP的304状态码或者不发送请求，让浏览器直接从本地读取内容。
前端应⽤开发模式演变1.2 浏览器应⽤基础从我们打开浏览器输⼊⼀个⽹址到页⾯展⽰⽹页内容的这段时间内，浏览器和服务端都发⽣了什么事情？1. 在接收到⽤户输⼊的⽹址后，浏览器会开启⼀个线程来处理这个请求，对⽤户输⼊的URL地址进⾏分析判断，如果是HTTP协议就按照HTTP⽅式来处理。
2. 调⽤浏览器引擎中的对应⽅法，⽐如WebView中的loadUrl⽅法，分析并加载这个URL地址。
3. 通过DNS解析获取该⽹站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向⽹站⽬的IP发出GET请求。
4. 进⾏HTTP协议会话，浏览器客户端向Web服务器发送报⽂。
5. 进⼊⽹站后台上的Web服务器处理请求，如Apache、Tomcat、Node.js等服务器。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.HTML是超文本格式，它可以包含普通文字，图画，视频，声音的网页；
CSS是HTML网页中文字的大小，颜色，边框的大小，颜色的修饰，总的来说CSS就相当于是HTML的外衣；
2.CSS与HTML的链接；
<h1>hello word!</h1> /*html内容*/
<caption>标题文本</caption>
A:新建浏览器窗口
<a hr页
<a href="url" target=网页
A:使用mailto在网页中链接Email地址
A: div标签命名
<div id="板块命名">..</div>
A: table表格的使用
<table></table>整体表
<tr></tr>表行
<td></td>单元格
<th></th>第一单元格也是表头
实例：
<form method="post" action="save.php">
<label>个人简介：</label>
<textarea cols="50" rows="10">在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
A:单选框与复选框代码
<form methon="post" action="save.php">
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
A:br标签的使用
<br/>表示换行
A:空格标签的使用
空格表示
A:水平下划线属性
<hr/>HTML4.01版本
<hr>XHTML1.0版本
A:地址信息属性
<li>论坛</li>
</ul>
A:添加有顺序的列表代码
<ol>
<li></li>
<li></li>
<li></li>
</ol>
A: div标签的使用
<div></div>div标签相当于一个容器，把独立的逻辑区划分出来
<input type="reset" value="重置" name="reset" />
</form>
A:文本输入框和密码输入框
<form method="post" action="save.php">
姓名：
<input type="text" name="(名称)Myname" value="文本"/>
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
A:下拉表框
<select>
<option value="提交值（向服务器提交的值）" selected=“selected”（默认值）>选项（显示的值）</option>
</select>
A:下拉列表多选
<form methon="post" action="save.php">
type="radio"时控件为单选框
type="checked"时控件为复选框
value；提交数据到服务器的值（后台PHP程序使用）
name；为控件命名，以备后台PHP使用
checked；当设置checked=“checked”时，该选项为默认。
</form>
2.<em></em> <!--文体斜体属性-->
3.<strong></strong> <!--文字粗体属性-->
4.<span></span>
A:等级标题标签
<h1></h1> 一级标签
<h2></h2>二级标签
<h3></h3>三级标签
<style type="text/css">
h1{font-size:12px;设置字体大小
color:#930;
text-align:center;
}
</style>
A:认识HTML标签
<h1>勇气</h1> /*标题标签*/
<p>这就是的第一个网页</p> /*标签段落*/
<img src="1.jpg"> /*图片插入标签*/
标签的语法
标签由英文符号<和>括起来表示，如<html>
如：<p></p>
<div></div>
p{color:blue;};选择器{属性：值；}
B:注释代码
在HTML中：<!--注释说明-->
在CSS中：/*注释说明*/
B:内选择器
<address>地址信息</address>
A:代码插入属性
<code>要插入的一行代码</code>
<pre>多行代码插入</pre>
A:新闻列表代码
<ul>
<li>信息</li>
<li>新闻</li>
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
B:嵌入式CSS代码
<style type="text/css>
span{color:red;}
</style>
B:外部式CSS样式
index.html:
<link href="base.css" rel="stylesheet" type="text/css"/>
<tbody></tbody>当表格内容多时不会一点点显示而是等全部加载完了全部显示出来；
A:表格边框
border;
A:为表格添加标题和摘要
<table summary="摘要文本">
<br/>
密码：
<input type="password" name="pass" value=" 文本"/>
</form>
A:文本域和支持多行文本输入
<text area row="行数" cols="列数">内容输入</text area>
style.css
例如：
span{
color:red;
}
B: CSS样式的优先级
内联式>嵌入式>外部式
B:什么是选择器
选择器{
样式：
}
B:CSS代码语法
<h4></h4>四级标签