文章目录CSS简介HTML的局限性CSS-网页的美容师CSS语法规范CSS代码风格样式格式书写样式大小写空格规范CSS基础选择器CSS选择器的作用选择器分类标签选择器类选择器类选择器-多类名id选择器通配符选择器基础选择器总结CSS字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本样式文本颜色对齐文本装饰文本文本缩进行间距文本属性总结CSS的引入方式CSS的三种样式表内部样

目录一、字体属性1、color字体颜色2、font-size字体大小（默认16px)3、font-weight文本粗细4、font-style字体样式5、font-family指定一个元素的字体二、背景属性1、background-color背景颜色2、background-image:url("img/do.png");背景图片3、background-repeat背景图片是否重复4、backg

目录07CSS选择器一、关系选择器二、伪类选择器三、伪对象选择器四、属性选择器总结07CSS选择器一、关系选择器后代选择器EF{}(所有被E元素包含的F元素，中间用空格隔开)通用兄弟选择器E~F{}(选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开)相邻兄弟选择器E+F{}(选择紧跟E元素后的F元素，用加好表示，选择相邻的第一个兄弟元素)子代选择器E>F{}(选择所有作为E元素的直接子元素

目录章节03表单一、Form表单二、表单元素1、表单2、表单元素三、HTML5新增type类型1、email2、url3、search4、tel5、color6、number7、range8、date9、month10、year四、HTML5新增属性1、autofocus属性2、multiple属性3、placeholder属性4、required属性五、实体字符章节03表单一、Form表单表单在

由于大前端知识点太多，所以一一做了分类整理，详情可见本人博客http://www.cnblogs.com/luxiaoyao/一、HTML1.注释格式：作用：1.解释说明代码的含义（代码量大，后期维护，便于新人交接）2.调试代码2.head内标签//meta:定义关于HTML文档的元信息3s之后刷新3s之后刷新并跳转到百度//title：定义文档的标题网站的标题//link:定义文档与外部资源的关

基本结构表格标题表格头部默认样式就是头部整体加粗h:heads表格主体d:data表格脚注常用属性table表格width：设置表格的宽度双height：设置表格最小高度，表格最终高度可能比设置的值大border:设置表格边框宽度cellspacing:设置单元格之间的间距thead表格头部height:设置表格头部高度双align:设置单元格的水平对齐方式，可选值如下：left:左对齐cente

Web前端笔记（1-20）一、HTML+CSS系列教程之导学1、拨云见日2、溯本求源3、风生水起4、巧夺天工二、什么是HTML和CSS1、HTML和CSS是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言

1.单位px像素1em1em---1个字符2em---2个字符（自动适应用户所使用的字体）%百分比2.文本color文本颜色red#f00letter-spacing字符间距2px-3pxemline-height行高14px1.5em120%（一般用于垂直居中）text-align对齐center、left、right、justify（两端对齐）text-decoration装饰线none（去掉

❝转眼，2020已近尾声，这一年里，收获了很多知识，也认识了很多朋友，相信还有很多朋友不是很了解我，下面是我的个人介绍❞我的简介我，id又叫落落落洛克,非科班自学前端，一年左右经验，今年7月份裸辞面试，最终入职国内一线某金融公司,长期活跃于掘金社区我的学习路线❝大家可能好奇我非科班出身是怎么学习的，非科班出身又是如何确定前端学习路线以及学习方式,以下是来自于我的学习分享❞对于前端学习，应该是一个系

HTML(安装liveserver插件)我们上网时所看到的所有内容其实就是body里面的内容！！+tab快速生成一个html模板；https://www.runoob.com/tags/html-elementsdoctypes.htmlhtml的菜鸟教程！html中的元素分为两种，一种是块状元素，宽度是100%他可以占满一整行一种是行内元素(比如a标签)不会占一行。br是换行标签CSS(安装ht

Web前端笔记记录概念理解1、网站2、VSCode3、htmlhtml的超文本性html的语言性html的标记性写法4、css5、Web前端的三大核心技术6、网站开发实操快捷键的使用在VSCode里可以进行的操作

Web前端笔记记录（四）strong与b；em与ii与b的应用场景引用标签blockquoteqabbraddressciteiframe嵌套页面br与wbrpre与codemap与areaembed和

flex弹性布局：1.flex弹性盒模型：随着移动互联网的发展，对布局的要求越来越高，传统的布局方案对于实现特殊布局非常的不方便，比如垂直居中，2009年W3C提出了一种新的布局方案---flex布局，可以简便，完整，响应式的实现各种页面布局。目前所有浏览器都支持这种布局方案。Title#parent{width:300px;height:300px;border:1pxsolidblack;ma

目录一:概要简介二：如何写一段JS代码并运行。三：输入和输出语句四：变量五：数据类型六：运算符七：逻辑控制八：函数九：JavaScript的作用域十：JavaScript的预解析问题十一：对象十二：new关键字的执行过程。十三：遍历对象十四：内置对象十五：数组十六：简单数据类型和复杂数据类型一:概要简介JavaScript是一种轻量级的脚本语言，也是一种嵌入式语言，是一种对象模型语言，简称JS，它

一：什么是WEB前端还原**活**的设计，也就是将设计师设计好的图片，用代码编辑成HTML页面效果的网页。传统的前端[]进行切图编写标签和样式实现效果HTML5时代的前端各种端的兼容开发移动app开发和移动站点开发ajax及服务器端技术开发高级设置模式和框架自动化工作流网站安全，SEO，测试，源代码管理，团队合作，游戏，特效。全栈时代集前端和后端一体的大神一专多能时代二：操作系统的常用配置系统调整

**URL(UniformResourceLocator)**统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。结构基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源

最终效果如下：翻页后首先把bootstrap-table.js和bootstrap-table.css下载下来。把英文改成中文，如下：把需要用表格的页面在前加入此JavaScript代码：$(document).ready(function(){$("#table_page").bootstrapTable({columns:[{field:'name',title:'名称'},{field:'p

焦点图和轮播*{margin:0;padding:0;}a{text-decoration:none;}body{padding:20px;}#container{width:600px;/*这里600x400是图片的宽高*/height:400px;border:3pxsolid#333;overflow:hidden;/*隐藏溢出的图片，因为图片左浮动，总宽度为4200*/position:r

Web前端笔记第七部分：jQuery1.jQuery介绍jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。

注册CSDN发布的第一个博客，纪念一下~以后发布一些自学的web前端笔记，和在学习过程中踩过的坑，顺便复习复习之前的知识。

这里有两种方式！第一种是使用setInterval：代码如下：lettime=setInterval(function(){if(sun.sun.rotation>=TWO_PI-0.0625){sun.sun.rotation=0;}sun.sun.rotation+=(TWO_PI-sun.sun.rotation)*0.0625;},300);运行截图如下：第二种是使用two.bind('u

一Css文件Css:美化HTML的4种选择器：元素选择类选择ID选择伪类选择常用的布局方案1写在什么位置能好用。1.1元素里面优先级是最高的1.2元素外，文件内优先级次之1.3外部文件引入方式：组成：选择器：标签/元素选择器classID伪类选择器属性选择器（不常用）组合形式：层级选择器.wangjianlin,.mahuateng{color:yellow;}/*组合选择器*/父子.wangji

一：CSS定义什么是CSSCSS就是层叠样式表（CasadingStyleSheets），通常称为CSS样式表，或者是级联样式表。主要用于设置HTML中的文本，内容（字体，大小，对齐），图片外形（宽高，边框样式，边距等），以及版面的布局等外观样式。CSS以HTML为基础，提供了丰富的功能。还可以针对不同的浏览器设置不同的样式。HTML和CSS的关系HTML结构层：负责从语义的角度搭建页面CSS：负

Web前端笔记第十一部分：js移动端库和bootstrap框架，re正则1.移动端js事件移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件

就是在慕课上学的前端视频课程，看的时候记了一点笔记。过后想总结到博客上一为了知识梳理记忆，二是怕以后忘记，便于查询。内容是针对我个人的知识点方面的查漏补缺，若需要认真学习、了解前端建议去W3school或者是菜鸟教程。什么是web前端？web前端开发：以网站形式呈现，通过浏览器访问完成一定功能。web->web系统前端->网页上为用户呈现的部分开发->编写代码前端：网页上用户呈现的部分。后端：数据

目录最简单的使用i标签做小图标修改前端源码注意的问题最简单的使用i标签做小图标运行截图如下：实例结构如下：此处就是使用i标签制作的小图标其中html源码如下：HelloWorldcss源码如下：.icon{display:inline-block;width:100px;height:100px;background-image:url(girl.jpg);background-position:

1、margin对于table相关类型（除了table-caption、table和inline-table这三类）的元素是不起作用的，如td、tr和th等。另外对于行内非替换元素（如span元素），垂直方向的margin是不起作用的。2、外边距折叠外边距折叠是指相邻的两个或多个外边距会合并成一个外边距。比如下面三个div的上外边距是相邻的，因此其边距会折叠：.parent{border:1pxs

前端完整页面设计：1.PC端布局：通栏：自适应浏览器的宽度版心：固定一个宽度，并让容器居中页面中需要用到的图片：(由于本人未能找到原版的图片资源，所以只是利用截屏到的图片，进行简单截图后使用，清晰度不够，单用于学习前端学习已足够)图片资源链接：https://pan.baidu.com/s/1ZhaQ8oc2pGuH5uZvXsxjlQ提取码：vj93博文尚美#banner{position:re

CSS3笔记CSS3选择器规范地址：问题：1.CSS:cascadingstylesheets（层叠样式表）面试常问2.样式表及组成关系：由一条条规则（选择器+声明块）组成笔试常考声明：CSS属性+CSS属性值组成的键值对3.浏览器读取编译CSS的顺序：从右往左eg.divulli.test{}为什么？有机会一次选中目标元素（算法复杂度低）4.选择器1)基本选择器及其扩展*.#后代组合（#test

这里主要是利用jquery，在移动端时也可以实现视角的移动效果。程序运行截图如下：这里用触屏操作与鼠标操作一样：关键源码如下：//移动端触碰开始$stage.bind('touchstart',function(event){originalPositionX=event.changedTouches[0].pageX;originalPositionY=event.changedTouches[

程序运行截图如下：旋转下：代码如下：import*asTwofrom"JS/two";import*as$from"JS/jquery";letisPressed=false;letoriginalPositionX=0;letoriginalPositionY=0;lettwo;letmouse;exportfunctiondrawGraphic(){letelem=document.getEl

HTML-HyperText超文本Mark标记Language语言。-什么是超文本？不仅仅是纯文本，除了文本之外还包括字体信息，还包括多媒体信息（图片、音频、视频）。-和XML的不同点：xml的标签是可以扩展的,html标签是固定的。常用标签1.文本标签-内容标题：h1-h6属性align:left/right/center独占一行，上下留有空白-段落标签：p独占一行上下留有空白-水平分割线hr-

目录最终结果过程最终结果截图如下：这里的数据都是从Mysql数据库中直接读取到的，下面演示下过程，把后端的数据通过Thymeleaf，把数组传输给前端的JS。过程这里曲线的存储结构是这样的：其中的getDataList()的结构是这样的这里可以看到是一个存储了String的ArrayList，其中里面的数据其实是Mysql中的数据，数据如下：前端处理的关键如下：这里要注意：vardataList=

程序运行截图如下：结构图如下：关键代码如下：界面调用HelloWorld.vueimport"JS/two"import"JS/zui";import{demo1}from"JS/test1";exportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp'}},mounted(){demo1();}}js关键代码

3D在2d的基础上添加z轴的变化3D位移：在2d的基础上添加translateZ（），或者使用translate3d（）translateZ（）：以方框中心为原点，变大3D缩放：在2d的基础上添加scaleZ（），或者使用scale3d（）scaleZ（）和scale3d（）函数单独使用时没有任何效果3D透视：perspective规定3D元素的透视效果可以取值为none或不设置，这种情况下说明没

Web前端笔记HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag

今天开始学习前端，这个主要是参加百度ife的笔记。记笔记方便自己，也给其他自学的同学一个参考。任务一：零基础HTML编码学习的资料均在上面链接中有，我在这里也贴一下Web相关名词通俗解释MDNHTML入门慕课HTML+CSS基础教程视频而这篇既然叫笔记，也就是简单记录方便我回顾，毕竟只学一遍是容易忘记的。因为任务一只是html学习，慕课网的教程先学完前五章便可，后面的在任务二的时候再学习。Web相

界面是这样的源码如下：index.htmlHelloWorldfunctioncallFunctionDemo(){alert("HelloWorld");}js.js;functionjsFileCall(){alert("jsFileCall");}在控制台中调用jsFileCall()通过这种方式就可以进行弹窗了。下面是vue中，首先在指定的vue文件中exportdefault{name:

##Javascript多浏览器兼容性问题及解决方案1自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。2input.type属性问题问题说明：IE下input.type属性为只读；但是F

学习和完成任务二的笔记任务二：零基础HTML及CSS编码（一）学习的资料MDNHTML入门[MDNCSS入门教程](https://developer.mozilla.org/zh--CN/docs/Web/Guide/CSS/Getting_started)慕课HTML+CSS基础教程视频css介绍CSS是用来指定文档显示的，让页面有不同的外观。如何定义一个样式，可以新建一个文件strong.c

CSS样式CSS概述CSS--CascadingStyleShees层叠样式表HTML定义网页的内容，CSS定义内容的样式。内容和样式相互分离，便于修改样式。CSS语法p{font-size:12px;/*字号*/color:bule;/*文字颜色*/font-weight:bold;/*加粗*/}注意：1.最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。2.为了使用样式更加容易阅

一话题引入1使用表格布局的缺陷嵌套层级太多,一旦出现嵌套顺序错乱，整个页面达不到预期的效果采用表格布局，页面不够灵活2解决方法使用HTML的块标签(配合css一起使用才有用处)：div标签自动换行，默认占一行span标签内容显示在同一行二CSS概述CascadingStyleSheets：层叠样式表美化HTML页面，HTML是网页的骨架，CSS来装修。将页面美化和代码进行分离，提高代码复用性。1.

今天的web前端笔记主要讲述文本属性，希望能帮助到正在学习web前端开发的初学者们，废话不多说了，一起来看看文本属性的相关内容吧。

今天的web前端笔记主要讲述文本属性，希望能帮助到正在学习web前端开发的初学者们，废话不多说了，一起来看看文本属性的相关内容吧。

HTML+CSS部分 IE6使用PNG的透明问题 解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下，下载之 <!--[if lte IE 6]> <script type="text/javascript" src="DD_belatedPNG_0.0.8a.js">&l

　　比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 　　所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来 　　控制背景图片的显示的。所以一般用作背景图片的有2类： 　　 　　1.是一整张大图，尺寸和区域大小刚好吻合 　　2.一个很小的条状图，通过re