前端基础总结
-
HTML
- 什么是HTML:
HTML:超文本标记语言(Hyper Text Markup Language),标准通用标记语言的下一个应用,“超文本”指页面可以包含图片、连接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(head)和“主体”部分(body),头部分提供关于网页的信息,主题提供网页的具体内容
- 浏览器的内核
渲染器:负责取得网页的内容(XML、图像等)、整理讯息(加入css等)、计算网页的显示方式,然后输出至显示器或打印机
js引擎:解析js语言,执行js语言来实现网页的动态效果(浏览器的内核不同,所渲染的效果不同)
- HTML网页基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
- HTML元素分类
块状元素:<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<form>
宽高可设置,不与其他元素在同一行(独占一行)
内联元素:<a><span><br><i><em><b><strong><label>
宽高不可设置,可与其他元素在一行显示
内联块状元素:<a><img>
宽高可设置,可与其他元素在一行显示
有序列表、无序列表和自定义列表的区别:
有序列表前面由序号,默认从1开始到n;无序列表默认前面以一个小黑点来表示项目符号;自定义列表可以定义出树形结构,其中dt表示父节点,dt之后的dd表示其子节点,在dd下还可以包含dl子节点(可以定义多层结构)
超链接<a>:
href属性:指示连接的目标
target属性:_blank(在新窗口打开目标连接)、__parent(在父级框架集中打开连接目标)、_top(在整个窗口的顶层框架中打开连接目标)、_self(在当前框架下打开连接目标【默认】)、framename(在指定框架中打开连接目标【target目标和框架的name属性一致】)
锚链接:快速连接到指定本页面的指定位置。写法:#位置的元素ID。常见用法:回到网页顶部位置
-
CSS
-
CSS简介
CSS(Cascade Style Sheet)层叠样式表;对网页进行美化、修饰
-
CSS基本语法
选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 。。。 属性N:属性值N; }
-
CSS的三种引入方式:
-
内联样式表:卸载标签内部,以标签的style属性出现
-
内部样式表:
<style rel="stylesheet"> 选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 。。。 属性N:属性值N; } </style>
-
外部样式表:创建一个css文件,在文件中写css样式,在HTML中按如下方式引入:
<link rel="stylesheet" href="../css/css文件名.css">
- CSS选择器
- 基本选择器:id选择器、class选择器、标签选择器、属性选择器
- 组合选择器:后代选择器(选择指定元素的后代元素)、子代选择器、相邻兄弟选择器
- 伪类选择器:<selector>:first-child{…}(当选择器为某一个元素的第一个子元素时应用样式);<selector>:focus{…}(当选择器拥有键盘输入焦点时应用样式);<a>:link{…}(当a未被访问过时应用样式);visited(当a已被访问时应用);hover(当鼠标悬浮在a上时应用);active(当a被鼠标按下但未松开时应用样式)
- 选择器的优先级:!import>id>class>标签
- CSS的布局
- 流动布局模型(flow):默认的网页布局方式;元素按自上而下、从左到右的方式布局
- 浮动布局模型(float):把一个HTML网页看成两层,高层时浮动层(存放浮动元素),低层时一般层(存放一般元素);如果浮动层元素与一般层元素重叠,则浮动层元素覆盖一般层元素(注:浮动,就是将元素脱离文档流)
- 层模型(layer):
- 绝对定位(absolute):将元素从文档流中拖出来;相对于上一级具有定位属性的父级元素;拖出来后原位置可被占用
- 相对定位(relative):将元素从文档流中拖出来,相对上一级具有定位属性的元素;拖出来后原位置不可被占用
- 固定定位(fixed):与absolute定位类似,当它的相对移动坐标时视图(屏幕内的网页窗口);由于视图本身时固定的,它不会随浏览器窗口的滚动而变化,除非改变浏览器的大小和移动浏览器的位置。
- 元素类型转化:display属性【block(将元素以块状元素的方式进行显示)、inline(将元素以内联元素的方式进行显示)、inline-block(将元素以内联块状元素的方式进行显示)、none(隐藏元素)】
- 盒模型:内外边距、边框、内容
-
-
-
JS(是执行在浏览器上的一种脚本语言)
-
js的特点:
- 是一种解释型的脚本语言,在程序执行的过程中进行解释
- 基于对象,不仅可以创建对象,也能使用现有的对象
- 简单,弱类型的语言,对使用的数据类型未作出严格的要求
- 动态性,js是一种采用事件驱动的脚本语言,不需要经过web服务器就可以对用户的输入做出响应
- 跨平台,js脚本不依赖操作系统,仅需要浏览器的支持
-
js编写的位置
- 可以嵌入到HTML文件中,并写在<script></script>标签内
- 创建一个js文件进行编写,然后再HTML中引用
-
js的数据类型
- undefined:未定义的数据类型,即只是创建了变量名单时并未进行赋值操作
- Number:数值型,js中不分浮点数等,任何数值都是number类型
- String:字符串型,js中没有字符型
- Boolean:布尔型
- Object:除了上方的数据类型,其他的都是Object类型
-
运算符:
- ±*/=、==、===
-
数组(定义、初始化、常用方法)
-
流程控制
-
函数
-
JSON对象
-
js的面向对象
-
内置对象
- 字符串对象
- 日期对象
- 正则表达式
- 异常处理
-
浏览器对象
-
window对象
-
screen对象
-
location对象
常用功能:
location.href=’’:转向到其他的页面
获取URL参数
刷新页面:location.reload()
-
history对象
-
消息框对象
- 警告框(alert):常用于确保用户可以得到某些信息
- 确认框(confirm):常用于使用户验证或者接受某些信息
- 提示框(prompt):常用于提示用户进入某个页面前输入某个值
-
Navigator对象
-
计时器对象
- setTimeout()方法:用于在指定的毫秒数后调用函数或计算表达式
- setInterval()方法:按照指定的周期来调用函数或计算表达式
-
cookie对象
-
-
document对象
- 操作document对象
- 每个载入到浏览器的HTML文档,都会成为document对象
- 作用:可以通过document对象对页面上的所有元素进行操作
- 使用步骤:
- 找到需要操作的元素
- 对找到的元素进行需要的操作
- 事件
- 操作document对象
-