极其敷衍的前端入门(version:两天速成)
本文最后更新于:6 天前
Hyper Text Markup Language -----HTML
曾经网页需要flash实现一些功能,但是html5已经完全可以做到了
W3C标准包括
- 结构化标准语言——HTML、XML
- 表现标准语言——CSS
- 行为标准——DOM、ECMAScript
1.HTML
1…1网页基本信息
1 |
|
1.2行内元素和块元素
块元素:无论内容多少,该元素独占一行,如p、h1~h6
行内元素:通俗点说不会换行…,如a、strong、em
1.3基本标签
-
p:段落
-
br:换行
-
h1~h6:六级标题
-
strong:粗体
-
em:斜体
-
 :空格
这应该算特殊符号,不算tag
-
img:图像标签
src、alt、title、width、height属性
-
a:链接标签
href target
1.4列表
-
有序列表ol
-
无序列表ul
有序列表和无序列表的表项均用li标签
-
自定义列表dl
dt标签确定题目,dd标签确定表项
1.5表格
1.6视频元素与音频元素
1.7iframe内联框架
好神奇!
1.8表单
重点
2.CSS
2.1选择器
选择页面上的某一个后者某一类元素
2.1.1基本选择器
当一个标签的样式同时被标签选择器、类选择器、id选择器生效时,优先级为:id选择器>类选择器>标签选择器。
标签选择器会选中页面的所有标签
1 |
|
这样会改变所有的h1与p标签
类选择器则会改变目标类的元素
1 |
|
tag是一个标签所属的类,可以自定义设置。
1 |
|
id选择器则会对全局唯一的目标id产生效果
1 |
|
2.1.2层次选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用选择器
以上均顾名思义…
1 |
|
2.1.3结构伪类选择器
1 |
|
2.1.4属性选择器
结合了id与class属性。
标签[属性]
标签[属性=值]
其中,=可以替换为
- *= 通配符
- ^= 开头
- $= 结尾
2.2网页元素美化
CSS字体样式
-
span标签
-
文本样式
font-family、font-size、font-weight
列表样式
背景
渐变
2.3盒子模型
- margin
- border
- padding
2.4浮动
2.5定位
2.6层级
z-index
3.JavaScript
外部导入
1 |
|
3.1运算符
-
逻辑运算
-
比较运算
=
== 等于:类型不一样,值一样为true
=== 绝对等于:类型一样,值一样为true
例:
1 == “1” true
1 === “1” false
这是JS的缺陷,坚持不要使用==
3.2严格检查模式
在代码的开头加入单独的一行
1 |
|
就进入严格检查模式,以防止JS的随意出现的问题。
3.3变量定义
默认所有的全局变量,都被绑定在全局对象window上
1 |
|
实际上,即使是alert也是绑定在window上的
1 |
|
var定义会有一些局部作用域冲突问题,所以建议使用let去定义局部作用域的变量。
3.4数据类型
字符串
- 字符串使用单引号或者双引号
- 也可以使用`(波浪线对应的点)构造多行字符串
- 模板字符串
数组
1 |
|
可以给arr.length赋值,数组大小会发生变化。赋值过小则会丢失元素
-
slice():截取arr的一部分,返回新数组,切片操作。
-
push(), pop()
-
unshift(), shift(),与push pop相反,对头部元素操作。
对象
js的对象类似json的格式…好离谱。
使用不存在的对象属性不会报错,只会出现undefined。
可以使用delete obj.attribute删除对象属性
也可以直接添加属性,类似python
Map与Set:ES6新特性
3.5函数
如果没有执行return,函数执行完也会返回结果,结果是undefined
不过js里有两种定义方式
1 |
|
函数调用时参数的数量是任意的…甚至可以不传
麻了
- 可以通过typeof对传入参数的类型进行检查
- 可以通过arguments遍历传入的所有参数。auguments是一个数组
- 也可以通过增加*…rest*参数,函数体内可以通过rest数组遍历所有未定义的参数。
3.6apply
js中可以控制this的指向。
3.7内部对象
Date
JSON
Ajax
3.8操作BOM对象
BOM:浏览器对象模型
window screen document等
3.9操作DOM对象
DOM:文档对象模型
1 |
|
3.10jQuery
jQuery是一个库,里面存在大量的javascript函数
$(selector).action;jQuery好舒服!
selector
css有的,jQuery都有。
action
各种事件,没啥好说的
一般的js代码都要求在网页元素加载完成后执行。将js代码写到下面的大括号内即可。
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!