前路漫漫，写给初级前端的学习指南

最新推荐文章于 2024-09-16 06:30:00 发布

2401_84434331

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量600

点赞数 24

分类专栏：程序员文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_84434331/article/details/140399643

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

// background-attachment 的值可以是 scroll（跟随滚动），fixed（固定）

background 缩写

background:#ff0000 url(bg01.jpg) no-repeat fixed center

6. 字体样式

字体族 font-family

font-family:“微软雅黑”,“黑体”;

font-size font-size:12px;

网页默认字体大小是 16px

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

字体粗细

font-weight font-weight:400;

normal（默认）
bold（加粗）
bolder（相当于 <strong> 和 <b> 标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

字体颜色【color】
颜色的英文单词 color:red;
十六进制色：color: #FFFF00;
RGB(红绿蓝) color:rgb(255,255,0)
RGBA（红绿蓝透明度）A 是透明度在 0~1 之间取值。color:rgba(255,255,0,0.5)
字体斜体
font-style font-style:italic

7. 文本属性

行高

line-height line-height:50px;

可以将父元素的高度撑起来

文本水平对齐方式【text-align】
left 左对齐
center 文字居中
right 右对齐
文本所在行高的垂直对齐方式【vertical-align】
baseline 默认
sub 垂直对齐文本的下标，和 <sub> 标签一样的效果
super 垂直对齐文本的上标，和 <sup> 标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
文本缩进

text-indent text-indent:2em;

通常用在段落开始位置的首行缩进

字母之间的间距 letter-spacing
单词之间间距 word-spacing
文本的大小写 text-transform
capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义仅有小写字母
文本的装饰 text-decoration
none 默认
underline 下划线
overline 上划线
line-through 中线
自动换行 word-wrap

word-wrap: break-word;

8. 基本样式

宽度 width

width:200px;

定义元素的宽度

高度

height height:300px
//元素默认没有高度
//需要设置高度
//可以不定义高度，让元素的内容将元素撑高

鼠标样式 cursor

cursor:pointer //定义鼠标的样式
//default 默认
//pointer 小手形状
//move 移动形状

透明度 opacity

opacity:0.3
//透明度的值 0~1 之间的数字，0 代表透明，1 代表完全不透明
//透明的元素，只是看不到了，但是还占据着文档流

可见性 visibility

visibility:hidden;
//visible 元素可见
//hidden 元素不可见
//collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏 overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

边框颜色 outline

input 文本输入框自带边框，且样式丑陋，我们可以通过
outline 修改边框
outline:1px solid #ccc;
outline:none 清除边框

9. 样式重置
10. 盒模型样式
11. 浮动float
12. 定位position
13. 浏览器默认样式
14. CSS3 新增选择器
15. CSS3 新增属性
16. 新增变形动画属性
17. 3D 变形属性
18. CSS3 的过渡属性
19. CSS3 的动画属性
20. CSS3 新增多列属性
21. CSS3 新增单位
22. 弹性盒模型

JavaScript基础篇

1. JavaScript基础

外部引入 js 文件：

关键词
变量名大小写敏感
命名规范

JavaScript 数据类型

字符串(String)
数字（Number）
布尔值（Boolean）
未定义（Undefined）

//undefined 有两种结果
//1、真的没定义
alert(typeof dada); //undefined
//2、定义了，但是没有放东西进去
var dada; alert(dada); //undefined

undefined：表示未定义或只声明未给值的变量

对象（Object） js 中内置了如下的对象：
Object 是所有 JS 对象的超类(基类），JS 中的所有对象都是继承自 Object 对象的
Array 数组对象定义数组属性和方法
Number 数字对象
Boolean 布尔对象布尔值相关
Error 错误对象处理程序错误
Function 函数对象定义函数属性和方法
Math 数学对象
Date 日期对象
RegExp 对象正则表达式对象定义文本匹配与筛选规则
String 字符串对象定义字符串属性和方法

3. 算术运算

var y = 3;

4. 强制转换

字符串转数字 parseInt() parseFloat() isNaN()
数字转为字符串 toString()

5. 赋值运算
6. 关系运算
7. 逻辑运算
8. 三元运算
9. 分支循环
10. switch
11. while
12. do-while
13. for
14. break和continue
15. 数组
16. 数组方法
17. 二维数组
18. 字符串