![](https://img-blog.csdnimg.cn/20210112132102512.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发学习笔记
文章平均质量分 90
Javascript, JQuery
少儿编程乔老师
信息学奥林匹克山东省赛区优秀辅导教师,蓝桥杯TOP 1%考生指导教师
展开
-
HTML学习笔记1——Web标准
学习目标能根据psd文件,用HTML+CSS布局出符合W3C规范的网页。课程安排 内容 要点 核心能力 现实问题 HTML 常用浏览器与浏览器内核 HTML的语义化表格和表单 HTML中常用的标签以及每个标签的语义 能够使用常见的开发工具 能够制作结构化的页面并进行基本的SEO优化 能够使用CSS对网页进行美化 能够使用Photoshop切图 能够运用常用的网页原创 2021-09-08 22:36:18 · 631 阅读 · 0 评论 -
HTML学习笔记2——初识HTML
学习目标理解HTML的概念HTML标签的分类HTML标签的关系HTML标签的语义化应用HTML骨架格式HTML初识HTML指的是超文本标记语言(Hyper Text Markup Language)HTML不是一种编程语言,而是一种标记语言(Markup Language)标记语言是一套标记标签(Mark Tag)网页是由网页元素组成的,这些元素是利用HTML标签描述出来的,然后通过浏览器解析,就可以显示给用户了。作为超文本,有2层含义:除了文本之外,还原创 2021-09-09 06:18:40 · 348 阅读 · 0 评论 -
HTML学习笔记3——HTML常用标签
学习目标理解:相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,可以查询手册来学习。排版标签排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。标题标签h (熟记)为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等原创 2021-09-09 06:33:24 · 520 阅读 · 0 评论 -
HTML学习笔记4——路径
路径(重点、难点)实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。**目录文件夹 **就是普通文件夹,里面只不过存放了我们做页面所需要的 相关素材,比如 html文件,图片等等。**根目录 **打开目录文件夹的第一层就是根目录页面中的图片会非常多, 通常我们再新建一个文件夹专门用于存放图像文件(images),这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为: 相对路径和绝对路径。相对路径以引用文件之网页所在原创 2021-09-14 16:22:36 · 423 阅读 · 0 评论 -
HTML学习笔记5——标签拓展
1. 锚点定位通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:<!--1. 使用相应的id名标注跳转目标的位置。 (找目标)--> <h3 id="two">第2集</h3> <!--2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) --> <a href="#two"> 2. base 标签语法:<base target="_blan原创 2021-09-15 13:32:14 · 500 阅读 · 0 评论 -
HTML学习笔记6——表格
为了让我们页面显示的更加整齐,HTML提供了三个标签:表格、表单、列表。表格 table(会使用)目标:理解:能说出表格用来做什么的表格的基本结构组成应用:能够熟练写出n行n列的表格能简单的合并单元格表格作用:表格是较为常用的一种标签,但不是用来布局,主要用来显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是原创 2021-09-16 15:59:22 · 759 阅读 · 0 评论 -
HTML学习笔记7——列表
列表标签(重点)学习目标理解无序列表的应用场景自定义列表的应用场景应用无序列表语法自定义列表语法表格一般用于数据展示的,但是网页中还是有很多跟表格类似的布局,如下图所示:这里可以通过列表来实现。那什么是列表? 表格是用来显示数据的,那么列表就是用来布局的。因为通过列表来实现上述布局时会更整齐和自由。特点列表里面装载着结构、样式一致的文字或图表。整齐 、整洁、 有序,跟表格类似,组合的自由度更高。1.1 无序列表 ul (重点)无序列表的各个列表项之间没有顺序原创 2021-09-16 20:25:30 · 234 阅读 · 0 评论 -
HTML学习笔记8——表单
表单标签(掌握)目标能写出最常用的注册类表单能说出input表单标签常见属性现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图:作用表单目的是为了收集用户信息。在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。如下图所示:表单控件包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息一个表单中通常还需要包含一些说明性的文原创 2021-09-17 18:24:04 · 450 阅读 · 1 评论 -
CSS学习笔记1—初识CSS
学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式HTML的局限性说起HTML,只关注网页中内容的语义,比如<h1>表明这是一个大标题,用<p> 表明这是一个段落,用<img> 表明这儿有一个图片, 用<a> 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑。这个是早期的亚马逊网站,以及淘宝的变迁历史如果使用HTML去改变标签属性原创 2021-09-29 16:25:54 · 336 阅读 · 0 评论 -
CSS学习笔记2—CSS选择器
学习目标理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式CSS选择器作用(重点)找到特定的HTML页面元素,把我们想要的标签选择出来。CSS的核心在于两件事: 选对人和做对事。h3 { color: red;}上述代码就是2件事:把h3选出来把它变成了 红色选择器分为基础选择器和复合选择器CSS基础选择器1. 标签选择器概念标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为原创 2021-10-04 21:07:32 · 262 阅读 · 0 评论 -
CSS学习笔记3—文字样式、外观属性和Emmet语法
CSS学习笔记3—文字样式、外观属性和Emmet语法原创 2021-10-13 22:10:58 · 291 阅读 · 0 评论 -
CSS学习笔记4—复合选择器
学习目标复合选择器重点:后代选择器并集选择器理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的1 后代选择器(重点)概念后代选择器又称为包含选原创 2021-10-20 13:07:24 · 413 阅读 · 0 评论 -
CSS学习笔记5—标签的显示模式、行高、背景
1. 标签显示模式(display)重点目标理解标签的三种显示模式三种显示模式的特点以及区别理解三种显示模式的相互转化应用实现三种显示模式的相互转化1.1 什么是标签显示模式什么是标签的显示模式?标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个作用我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。1.2 块级原创 2021-10-20 21:24:27 · 476 阅读 · 0 评论 -
CSS学习笔记6—CSS的三大特性和注释
1. CSS 三大特性目标理解能说出css样式冲突采取的原则能说出那些常见的样式会有继承应用能写出CSS优先级的算法能会计算常见选择器的叠加值1.1 CSS层叠性概念所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉原则样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。样式不冲突,不会层叠CSS层叠性最后的执行口诀: 长江原创 2021-11-01 15:05:40 · 254 阅读 · 0 评论 -
CSS学习笔记7—盒子模型
盒子模型(CSS重点)学习目标理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1. 网页布局的本质网页布局中,我们是如何把里面的文字、图片,按照美工给我们的效果图排列的整齐有序呢?网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置。原创 2021-11-03 20:20:30 · 825 阅读 · 1 评论 -
CSS学习笔记8—浮动
CSS浮动(float),CSS 的布局的三种机制,普通流在布局中的特点,为什么用浮动为什么要清除浮动。原创 2021-11-10 12:56:11 · 523 阅读 · 0 评论 -
CSS学习笔记9—定位
为什么要用定位,定位的4种分类,四种定位的各自特点。原创 2021-12-07 19:52:25 · 385 阅读 · 0 评论 -
CSS学习笔记9—单页面开发实例
Photoshop 切图常见的图片格式jpg图像格式:JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的gif图像格式:GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景PSD图像格式PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。PS切片工具ps切原创 2021-11-17 19:28:09 · 384 阅读 · 0 评论 -
CSS学习笔记10—CSS高级技巧
元素显示隐藏最常见的写法,精灵图产生目的,去除图片底侧空白缝隙的方法等原创 2021-12-15 12:11:29 · 189 阅读 · 0 评论 -
Javascript学习笔记一:ECMAScript
Javascript概述和ECMAScript基础语法原创 2021-01-12 17:51:28 · 217 阅读 · 0 评论 -
Javascript学习笔记二:BOM和DOM
1. BOM1.1 概念BOM(Browser Object Model) 浏览器对象模型。将浏览器的各个组成部分封装成对象。1.2 组成window:窗口对象location:地址栏对象navigator:浏览器对象screen:显示器屏幕对象history:历史记录对象1.3 window:窗口对象方法与弹出框有关的方法:alert(),显示带有一段消息和一个确认按钮的警告框。confirm(),显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按原创 2021-01-18 16:59:33 · 156 阅读 · 0 评论 -
Web前端开发技术期末测试及解析一
Web前端开发技术期末测试及解析原创 2021-12-13 11:49:06 · 13777 阅读 · 0 评论