web学习的第一课

最新推荐文章于 2023-06-14 12:01:50 发布

七什么七

最新推荐文章于 2023-06-14 12:01:50 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/weixin_43913003/article/details/107334893

版权

文件的后缀名

文件名后跟着的.*文件的后缀名(文件的扩展名)

显示与隐藏文件的扩展名: 打开一个【文件夹】，在文件夹中找到【组织】-【文件夹和搜索选项】-打开【文件夹选项】对话框-【查看】选项卡-【高级设置】中-【隐藏与显示文件的扩展名】

常见的文件扩展名:

.txt 文本文档 .doc word文档 .exe 可执行文件等

web前端

1989年 www
1990年前端
1995年 javascript 网页设计师 html+css
html的进化史(html,xhtml)
1999年 xhtml
2005年 html5
2009年 web前端 html+css(html5+css3) + javascript
less对css语法的改进
2011年 node.js
jquery bootstrap angular vue react rn

前端的工作岗位

web前端前端工程师 JavaScript工程师 node工程师 angular工程师前端架构师等

浏览器

html是浏览器能识别的标记结构

css是用来修饰标记中的内容样式

JavaScript 行为

浏览器名称浏览器的内核

Google webkit/Blink

火狐 Gecko

Opera Presto/webkit

Safari webkit

IE Trident

网页文件

.html / .htm 模板

网站

是由多个html文件组成的

分类

搜索网站

门户网站

商城网站(淘宝，天猫等)

个人网站

企业网站（）

等

编译器

vscode

汉化: 扩展中搜索【chinese】- 安装-重启

按【F1】键或者ctrl+shift+p 打开搜索框【configure display language】选择 zh-cn 重启软件;

浏览器显示

在扩展中搜索【open in browser】安装；

html 是什么

html 超文本标记语言 Hyper Text Markup Language

文本:内容，图片，音频,视频等

标记：

尖括号包围的关键字
成对存在的，第一个是开始标记，第二个是结束标记（斜线），内容写在开始标记之后，结束标记之前
少量的单标记出现，自我结束，也叫空标记（自闭合标记）

标记的属性

是在开始标记关键词的后面，以【空格】隔开
属性的书写规范：以名值对形式显示 name="value";

语言：

html标记

div 定义区块

span 无语义标记

标记分类

块级标记:会独占一整行,排列方式是从上到下;可以设置宽高

行内标记:只占据内容的宽度,排列方式是从左到右；不可以设置宽高

css样式

width 宽度

height 高度

background-color 背景颜色

css书写格式:

div{
    width:100px;
    height:100px;
    background-color:pink;
}

圆角属性 border-radius

border-radius:top-left  top-right  bottom-right  bottom-left;

单位
- px 绝对单位
- % 相对单位
属性值 :
- 一个值
- 两个值
- 三个值
- 四个值 top-left top-right bottom-right bottom-left;
注：当四个值缺少某一个值的时候，由对立面的值进行补充

平移 transform:translate(x,y)

x 表示水平方向移动
y 表示垂直方向移动

旋转 transform:rotate(角度)

deg 角度单位 0-360deg

缩放 transform:scale(x,y)

x 表示的水平方向的缩放
y 表示的垂直方向的缩放
1 表示原图形大小，不缩放
比1小缩小
比1大放大

关键帧动画

创建动画

@keyframes

@keyframes 动画名称{
    0%{}      /*动画的起始状态*/
    ...
    100%{}    /*动画的完成状态*/
}

调用动画 animation
```
animation: 动画名称  完成动画的时间（s/ms） 曲线速度  延迟时间  动画播放的次数  是否反向;
```
- 动画名称自定义
- 动画的时间 s/ms
- 曲线速度 ease-in-out 慢入慢出 linear 匀速
- 延迟时间 s/ms
- 动画播放的次数 number/infinite无限次
- 是否反向 alternate