前端三剑客HTML+CSS+JavaScript

Posted 2021-01-25 wilbur0402

前端三剑客html+CSS+javascript

HTML(超文本标记语言)负责网页的结构
CSS(层叠样式表)负责网页的样式(比如颜色/字体/边框等属性设置)
JavaScript(脚本语言)负责网页的行为(点击/输入输出/滚动等等)

---

 

HTML部分:

html文档结构:整个html文档一般都包括header/body两部分: header头部标签主要包含html的描述性内容:
title标签是网页在浏览器标签栏上显示的标题
meta标签是网页的原信息
link标签用来链接其他内容,引用外部css样式,就是通过link标签
script标签是调用js脚本

body标签中就是在网页上展示的内容:
标题标签: h1~h6 标题大小逐次减小 (标题标签是为了突出层级关系,所以为了不要只是为了调节文本大小而使用标题标签)
段落标签: p
文本修饰标签:加粗<b> 斜体<i> 下划线<u> 删除线<s> 上标<sup> 下标<sub> 强调斜体<em> 强烈强调<strong>
列表标签:
ol有序列表:type属性 表示标签标记类型 A大写字母 a小写字母 1数字 I大写罗马数字 i小写罗马数字
ul无序列表:type属性 disc实心圆 circle环形 square实心矩形 none不显示标记
<li>是列表元素
超链接标签a:
target属性:默认为_block,在新窗口打开链接;_self是在当前窗口打开链接
href属性:指向的目标可以为文件,则链接动作为下载文件;指向目标是链接,跳转链接;可以指定当前页面中的元素id(#id),跳转到指定元素的位置;如果不写,默认跳转到当前的页面;也可以指向一个js脚本;如果希望点击这个按钮不触发任何动作可以用"javascript:;"的js代码来阻止标签动作;
盒子标签div 图片标签img
其他标签:br 换行 hr分割线 特殊符号 比如空格&nbsp;

表格标签table

表单标签form:
action属性:定义表单提交时发送到服务器的地址
method属性:定义提交方式,get明文提交显示在地址栏中(大小限制为2KB),post密文提交,不显示在地址栏中
enctype属性:限制表单提交的数据类型只允许普通字符,允许普通字符/特殊字符,允许文件被上传;如果上传文件method必须为post;

表单控件:
textarea文本域:允许用户输入多行文本;cols属性设置列数,rows属性设行数;
select选择菜单:当size为1显示为下拉选择框,当size大于1显示为选择框;
input控件:
type:
text属性:明文文本;
password属性:密文文本;
radio属性:单选框 checkbox复选框;
file属性:文件上传
submit属性:提交表单的按钮
button普通按钮

value:提交给服务器的数据;
name:控件名;
disabled:不可用属性;
lable关联表单元素:点击该文本如同点击关联元素一样;

标签分类:块级元素/行内元素/行内块元素
块级元素:可以设置宽高,不设置默认为父级元素的100%大小,独占一行,(后面的元素同样换行)主要有div p h1~h6 table form ol ul li等
行内元素:在一行内显示,不能设置宽高,主要有span a 标签
行内块元素:也属于行内元素,可以设置宽高 img input;

---

css部分:
css的引入方式:
内嵌式:直接在标签内写 <p style: "color:red;">
内联式:在header内写 <style type: ‘text/css‘> .box{font-size:14px;}</style>
外联式:链接外部css <link rel= ‘stylesheet‘ type= ‘text/css‘ href= ‘./css/index.css‘>
导入式: @import url(‘./css/index.css‘)

选择器:
基本选择器:
* 通配符选择器 选择所有标签元素(不建议使用)
#box id选择器 选择指定id的标签元素
div 标签选择器 选择指定标签的标签元素
.active 类选择器 选择指定类的标签元素

高级选择器(组合选择器):
子代选择器: ul>li 只选择儿子元素
后代选择器: div a 选择父代元素之后的所有后代
相邻选择器: li+a 选择紧贴li的下一个a
弟弟选择器: li~a 选择li之后的所有兄弟元素a
分组选择器: li,p 选择多个元素类型
选择器权重问题:
内联(1000)>id(100)>类(10)>标签(1)
属性选择器:
选择有相同属性的元素
伪类选择器:
a:link a在未访问的样式
伪元素选择器:
E:before

font相关:
font-style字体风格:
正常字体:normal 斜体:italic 倾斜字体:oblique
font-weight 字重:
normal bold bolder lighter 整百数(100-900)
font-size 字体大小:
font-family 字体集:
指定文本使用一系列的字体,优先级由高到低

color相关:
颜色表示的四种方式:
颜色名: red green yellow lightgray
十六进制:#ccc #rr #5c5c5c #f80
rgb: rgb(255,254,253)
rgba: rgb(255,254,253,0.5)

text相关:
text-align文本对齐:
left左对齐
right右对齐
center中间对齐
justify 两端对齐(只适用于英文)
text-indent文本缩进:
建议用em为单位(字符单位)
text-decoration 文本修饰:
none无修饰
underline下划线
overline上划线
line-through 删除线
line-height 行高:
指定行高,设置行高等于文本盒子高度,可以使文本垂直居中

background相关:
background-image 背景图
background-position:调整背景图位置(使用精灵图)
background-repeat:平铺设置
repeat 横纵平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 不平铺
background-attachment:固定方式 scroll fixed
background-color:背景颜色 默认为透明 transparent

盒模型:
width height border边框 padding内边距 margin外边距

浮动相关:
float:left左浮动 right右浮动 none默认不浮动
浮动特性:
脱离标准流
都可以设置宽高
提升层级
并排显示,浮动的元素会相互贴靠
贴边现象
字围效果

浮动带来的问题:
一般父盒子不设置宽高,全靠子元素撑起来,但是使用浮动后父盒子就没有高度了
因此需要清除浮动

消除浮动带来的问题:
给父盒子设置高度:
不灵活不推荐,一般用于导航栏之类的固定高度的盒子
clear:both:
在浮动元素之后加一个空盒子,并给盒子追加clear:both属性,使其不浮动,用这个不浮动的空盒子填充父盒子.结构冗余

伪元素清除法:
给父级元素添加clearfix类
在给父元素设置样式:
.clearfix:after{
content:‘‘;
clear:both;
display:block;
}
overflow:hidden
给父盒子设置overflow:hidden属性


定位相关:
分为:不定位static/相对定位relative/绝对定位absolute/固定定位fixed
相对定位relative:
相对于自己原来位置的定位:
特点:不脱离标准流/形影分离/占据原位置
用途:微调元素

绝对定位absolute:
脱离标准流 ,提高层级, 不区分块和行内
如果没有父盒子相对定位,以页面左上角为基准;如果父元素有相对定位,则以父盒子为基准定位

固定定位fixed:
以页面为基准固定定位

z-index属性:
给元素设置优先级
特点:同级后来居上,有定位的元素z-index才能生效,从父现象(父盒子优先)

---

 

javascript部分:
引入方式:
内接式/外接式
ECMA5基础语法:
数据类型:
数字 字符串 布尔值 null空对象 undefined未定义变量
引用数据类型:
function函数 object对象 array数组

流程控制:
if if-else if-else if-else 逻辑与&& 逻辑或|| switch-case while do-while for

内置对象:
数组array: concat合并分组 join插入分隔字符 pop弹出最后一个元素 shift移除第一个元素 unshift插入一个元素到数组第一个位置,返回新的长度 slice切片 push压入最后一元素 sort排序 reverse反转 length返回数组长度

DOM:
文档对象模型
获取文档对象的三种方式:
document.getElementById() 根据id获取文档对象
document.getElementByClassName() 根据类名获取文档对象
document.getElementByTagName() 根据标签名获取文档对象

事件三要素:
事件源 事件 事件驱动

js的事件:
onclick单击 ondblclick双击 onkeyup/onkeydown 键盘弹起/按下 onchange 文本/菜单发生改变时 onfocus获得焦点 onblur失去焦点 onmouseover 鼠标悬浮 onmouseout鼠标移除 onload 网页文档加载 onunload关闭网页时 onsubmit提交表单时 onreset重置表单时
js入口函数:
window.onload() 在网页加载完成后(包括图片和文档) 触发onload() 函数

js和html文档是同时加载的,设置onload不会报错

问题 图片资源加载失败,js就不会生效

样式的操作 : Object.style.marginLeft = ‘30px‘;

值的操作: innerText 文本内容 innerHTML 文档内容 value (表单控件)

属性操作:
getAttribute()获取属性 removeAttribute()移除属性
setAttribute()/Object.attr = ‘‘ 设置属性

DOM对象的创建/增加/删除
document.createElement() 创建
Object.appendChild() 加子节点
Object.insertChild(要插入的节点,参考节点) 把要插入的节点插入到参考节点之前
Object.removeChild() 删除子节点
object.parentNode.removeChild(Object) 删除自己

client/offset偏移量(与父相子绝有关)/scroll

定时器:
setTimeOut(func,200) 一次性定时器,在延时后执行func
setInterval(func,200) 循环定时器,周期执行func

---

jQuery部分
jQuery是js的一个库

入口程序:$(document).ready(function(){}) 简写$(function(){})
与js的入口程序的区别
js是整个文档资源(包括图片)加载完成之后才执行 而jQuery的入口程序是在DOM结构绘制完成就执行

js对象与jQuery对象相互转化:
jQuery对象 = $(js对象)
jQuery对象[0] = js对象

jQuery选择器:
基本选择器: id 类 标签

层级(组合)选择器: 后代(空格) 子代(>)

基本过滤选择器:
:eq 获取指定索引对象
:odd 获取奇数索引对象
:even 获取偶数索引对象
:gt(3)/lt(3) 获取索引大于/(小于) 3的对象
:first/last

属性选择器:
含有指定属性/指定属性为指定值/正则匹配

筛选选择器:
find:后代选择 所有后代
children:子代选择
siblings:兄弟选择(不包括自己,用于互斥按钮)
parent:父级选择
eq:索引选择

动画效果:
显示隐藏:
show显示/hide隐藏 开关式显示隐藏toggle

淡入淡出:
fadeIn/fadeOut fadeToggle

卷帘效果:
slideUp/slideDown slideToggle

停止动画:
stop

自定义动画:
animate({最终样式},速度,回调函数)

值的操作:
html:操作html文档 获取/设置
text:操作文本内容 获取/设置
val:针对有value属性的对象,比如input

属性操作:
attr(key)获取属性
attr(key,value) 设置单个属性
attr({key:value,key:value}) 设置多个属性
removeAttr()删除属性

prop()操作元素集的第一个dom对象的属性
removeProp

addClass removeClass toggleClass

DOM操作:
父子之间:
插入到父级元素最后 父.append(子) 子.appendTo(父)
插入到父级元素第一位 父.prepend(子) ...
兄弟之间:
插入到目标兄弟元素之后 目标对象.after(待插入对象) 待插入对象.insertAfter(目标对象)
之前 before insertBefore

删除操作:
remove detach(删除节点事件保留) empty(置空,删除所有子元素)

位置信息:
width height innerHeight innerWidth(内部宽高) outerHeight outerWidth(外部宽高) scrollTop scrollLeft(元素相对于滚动条卷起的宽高) position (元素相对于父级元素的偏移量) offset(元素相对于当前视口的偏移量)

jquery事件:
三个阶段 :事件捕获 处于目标阶段 事件冒泡阶段
冒泡导致逻辑不正确,阻止冒泡的两种方法:
E.stopPropagation()阻止冒泡 E.preventDefault() 阻止默认行为

鼠标事件:
单击 click 双击 dbclick mousedown mouseup mousemove mouseover/out进入离开目标元素和目标的子元素时触发 mouseenter/leave focus/blur keydown/up

表单事件:
change 表单元素发生变化时 select 文本元素发生变化 submit表单元素发生变化


ajax技术:
异步JavaScript和XML
在不刷新整个网页的情况下,刷新页面局部内容