reckless2861-CSDN博客

原创初学JavaScript

初学JS1.行内式JS< input type=“button” value=“点我试试” οnclick=“alert(‘hello world’)”/>可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号可读性差，在html中编写JS大量代码时，不方便阅读引号易错，引号多层嵌套匹配时，非常容易弄混特殊情况下使用2.内嵌JS< script>a

2021-12-11 16:12:03 530

原创 CSS提高2

CSS 2D转换transform转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果移动：translate旋转：rotate缩放：scale2D移动是2D转换里面的一种功能，可以改变元素中在页面中的位置，类似定位1.语法：transform：translate（x，y）；或者分开写transform：translatex（n）；transform：translateY（n）；2.重点：定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优

2021-12-03 15:32:51 70

原创 HTML5和CSS3提高

HTML5和CSS3提高HTML5新增的语义化标签< header>：头部标签< nav>：导航标签< article>：内容标签< section>：定义文档某个区域< aside>：侧边栏标签< footer>：尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签HTML5新增的多媒体标签1.音频：&

2021-11-15 22:55:27 216

原创 CSS高级技巧

CSS高级技巧为了有效地减少服务器接受和发送请求的技术，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS 雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了精灵图（Sprites）的使用使用精灵图的核心：1.精灵技术主要针对于背景图片使用。就是把多个小背景整合到一张大图片中。2.这个大图片也称为sprites精灵图或者雪碧图3.移动背景图片位置，此时可以使用background-position。3.移动的距离就是这个目

2021-11-14 13:08:37 321

原创 CSS的定位

CSS的定位标准流或浮动都无法快速实现，此时需要定位来实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中央中某个位置，并且可以压住其他盒子定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位 = 定位模式 + 边偏移定位模式定位模式决定元素的定位方式，它通过CSS的position属性来设置，可以分为四个：static | 静态定位relative | 相对定位absol

2021-11-13 14:32:28 206

原创 CSS的注意

CSS属性书写顺序1.布局定位属性：dispaly/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）2.自身属性：width/height/margin/padding/border/background3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word4.其他属性（CSS3）：content/cursor/b

2021-11-11 22:20:41 203

原创初学Web第六天

去掉li前的小圆点：list-style：none圆角边框border-radius属性用于设置元素外边框的圆角语法：border-radius：length；参数值可以为数值或百分比的形式如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或直接写为50%如果是个矩形，设置为高度的一半级就可以做该属性是一个简写属性，可以跟四个值，分别代表左上角（border-top-left-radius）、右上角、右下角、左下角盒子阴影语法：box-shadow：h-shadow v-

2021-11-10 19:01:04 80

原创初学Web第五天

CSS三大特性层叠性、继承性、优先级层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。原则：①样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。②样式不冲突，不会层叠。继承性子标签会继承父标签的某些样式，如文本颜色和字号。恰当的使用继承可以简化代码，降低CSS样式的复杂性；子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）行高可以跟单位也可以不跟单位如果子元素没有设置

2021-11-09 16:43:38 89

原创初学Web第四天

Emmet语法1.快速生成HTML结构语法①生成标签，直接输入标签名按tab键即可②如果想生成多个标签，加上就可以了，例：div3③如果有父子级关系标签，可以用>，例：ul > li④如果有兄弟关系的标签，用+即可，例：div+p⑤如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了⑥如果生成的div类名是有顺序的，可以用自增符号$⑦如果想要在生成的标签内部写内容可以用{}表示2.CSS基本采取简写形式即可①例：w200 按tab 可以生成width

2021-11-08 20:59:49 57

原创初学Web第三天

CSSHTML局限性：只关注内容的语义，做简单的样式CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表和级联样式表主要设置HTML 页面中的文本内容、图片的外形以及版面布局和外观显示样式。语法规范两部分组成：选择器以及一条或者多条声明。/* 选择器{样式} */选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式属性和属性值以"键值对"的形式出现代码风格1.样式格式书写①紧凑格式h3 { color: dee

2021-11-07 18:08:24 52

原创初学Web第二天

表格标签主要作用：用于显示、展示数据基本语法：< table>< tr>< td>单元格内的文字< /td>…< /tr>…< /table>1.< table>< /table>是用于定义表格的标签2.< tr>< /tr>用于定义表格中的行，必须嵌套在< table>< /table>中3.< td>< /td>用

2021-11-05 11:22:21 197

原创初次前端接触

初学Web前端HTMLHTML指的是超文本标记语言（Hyper Text Markup Language),他是用来描述网页的一种语言。是一种标记语言。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。Web标准的构成：主要包括**结构（Structure）、表现（Presentation）和行为（Behavior）**三个方面。最佳体验方案：结构、样式、行为相分离。HTML标签尖括号包围的关键词通常是成对出现的，双标签，单标签。

2021-11-03 16:47:46 66

reckless2861的博客