Web前端基础
学习前端的随缘笔记
Tiny_G
If we desire, we can create the whole world
展开
-
day12JavaScript
1.函数 函数就是将具有一定功能的一段JS代码的封装,可以在程序的多个地方被反复调用。 1)定义函数 格式一: function 函数名([形参列表]){ 函数体; [return [<表达式>];] } 格式二: var 变量名 = function([形参列表]){ 原创 2020-11-16 14:05:12 · 69 阅读 · 0 评论 -
day11JavaScript
1.网页构成 结构(HTML)+表现(css)+行为(JavaScript) 2.JavaScript的组成: 1)ECMAScript(标准:ECMA-262):基础、面向对象 2)DOM(标准:W3C):节点操作 3)BOM(无标准):浏览器操作 3.JavaScript的特点: 1)松散型:JS中的变量没有一个明确的类型,也叫弱类型的语言(允许将一块内存看做多种类型)。 2)对象的属性:也可映射为任意属性的数据。 3)JS是基于原型继承的。 4.JavaScript的使用 1)使用Scri原创 2020-11-16 14:02:21 · 85 阅读 · 0 评论 -
day10.photoshop基础
1.link:favicon 2.5.网页所支持的图片格式 1.jpg 24位压缩格式的图片,压缩率越大的图片,显示的内容越模糊,文件会越小 2).png 是一种无损压缩的位图图形格式,背景为透明效果,使彩色图像的边缘能与任何背景平滑地融合,从而彻底地消除锯齿边缘 3).gif 分为GIF格式的动画和静态图像也是高压缩的图像文件,静态图像也是高压缩的图像文件。 4) .svg HTML5新增的矢量图,一般用作图标字符。 5) base64(图像编码) 设计时把图像文件解析成字符编码,浏览器会原创 2020-11-13 16:49:48 · 68 阅读 · 0 评论 -
day9基础属性-布局
1.多列布局(分栏处理) 属性 描述 column-count 规定元素应该被分隔的列数(栏数)。 column-gap 规定列之间的间隔。 column-rule 设置栏间分割线。 column-width 规定列的宽度。 columns 规定设置 column-width 和 column-count 的简写属性。 column-count:number|auto 栏数 column-gap:length|normal 栏间距 a)column-rule-style:原创 2020-11-13 16:48:48 · 166 阅读 · 0 评论 -
day8CSS3动画
一.CSS3 2D变形 1.tranlate transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 函数 描述 translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换,沿着 X 轴移动元素。 translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。 scaleX(n) 定义原创 2020-11-13 16:48:00 · 122 阅读 · 0 评论 -
day7CSS3新特性
一.认识CSS3 7.1.1 CSS3介绍 CSS3是CSS2.1的一个升级版,它是对CSS的一个扩展 7.1.2 CSS3的新特性 1)选择器 2)阴影 3)形状转换(2D---3D) 4)变形 5)动画(过渡动画,帧动画) 6)边框 7)多重背景 8)反射 9)文字 10)颜色(RGBa/hsl/hsla) 11)滤镜(filter) 12)弹性布局 13)多列布局 14)盒模型 15)Web字体 16)媒体查询 CSS3不是所有浏览器或同一浏览器的不同版本都支持,所以需要做兼容处理,通常的做法就是加厂原创 2020-11-13 15:04:05 · 256 阅读 · 1 评论 -
day6HTML5新特性
一.HTML5介绍 1.1 什么是HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 1.2 HTML5是如何起步的 HTML5 是 W3C 与 WHATWG 合作的结果。 WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创原创 2020-11-12 15:10:34 · 761 阅读 · 0 评论 -
day5.CSS定位布局
1.定位(position) 设定元素在文档中的位置。会将标签(元素)转换为块级。 1.1定位的分类 1)static:静态定位 默认值,没有定位,不设置偏移值(left/top/right/bottom),占用标准流(文档流) 2)relative:相对定位 占用标准流(文档流),它会出现在文档流中它该出现的位置,通过设置偏移值改变其位置。它相对于自身位置所占的位置做偏移 3)absolute:绝对行为 脱离文档流,相对于body做偏移(left/top/right/bottom) 绝对定位一般与相对定位原创 2020-11-12 15:09:48 · 112 阅读 · 0 评论 -
day4CSS浮动布局&盒模型
1.浮动 1.1什么是浮动? 浮动就是让块级标签不独占一行。 目的:块级标签排在一行 1.2浮动的原理: 就是让元素脱离文档流,不占用标准流。 1.3浮动的属性值 left :元素向左浮动。 right: 元素向右浮动。 none :默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit :规定应该从父元素继承 flfloat 属性的值。 浮动后,后面的元素(块级/行级)都不会显示在下一行 1.4清除浮动 让后面的元素自动掉到下一行 方法: 1)添加标签,并设置样式:clear:both;原创 2020-11-12 15:09:01 · 198 阅读 · 0 评论 -
day3CSS基础介绍
s3.1CSS介绍 层叠样式表,又称串样式列表,由W3C定义和维护,一种用来为结构化文档(如html文档和XML应用)添加样式(字体,间距和颜色等)的计算机语言。 3.2CSS的使用 使用CSS可以让结构(HTML)和表现(CSS)分离,方便维护 3.3CSS的基本语法 选择器 { 属性:属性值; } 3.4CSS的四种引用方式 1.行间样式:应用内嵌样式到各个网页元素。** <p style="color:red; margin-left=20px">p标签</p> 2.内联原创 2020-11-12 15:08:06 · 155 阅读 · 0 评论 -
day2html相关内容
0.作业 熟悉HTML文件结构,并练习基本标签使用。 //搜索引优化关键字 <title> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <meta name="keyw原创 2020-11-12 15:06:20 · 101 阅读 · 0 评论 -
day1前端背景
一.注意规范 meta 是元的意思,通过加name用来完成对应的设置! 网站的icon的图标: favicon.ico中图片格式是png后面x-iocn改为png,是icon则是x-icon,是x-iocn改为jpg 块级元素里面可以放行级元素 行级元素里面不可以放块级元素 内联元素不能包涵块级元素,只能包涵其他内联元素 块级元素不能放在P标签里面 几个特殊块级元素只能包涵内嵌元素,不能再包涵块级元素: h1_h6 ,p ,dt 块级元素与块级元素并列,内嵌与内嵌并列 eg:> 二.语义化标签原创 2020-11-12 15:05:25 · 69 阅读 · 0 评论