HTML+CSS+JS前端总结html:(Hyper Text Markup Language）超⽂本标记语⾔
基本标签：
div p span hr br h1-h6
⽂本标签：
u del sup sub big small b/strong i/em
列表标签：
ul ol li
dl dt dd
表格：
table tr td th  (cellspacing cellpadding border colspan rowspan)
img video audio  (autoplay属性为⾃动播放)
超级链接：
<a href="#" target="_blank"></a>
form input select textarea iframe框架标签
表单form ：表单标签、表单域、表单按钮
action：服务器地址
method：get/post  规定在提交表单时所⽤的 HTTP ⽅法
表单域: text password hidden radio checkbox(checked) file
select(option selected) textarea  submit reset
属性：是以键值对的形式出现，⽤空格隔开
sort函数 jsclass id style title
快捷键accesskey="" (input中设置) 可编辑contenteditable="true"
⽂字⽅向dir="ltr" dir="rtl" 隐藏hidden="hidden" 选中checked selected
事件：
窗⼝事件：onload onunload onresize onfocus onblur
表单事件：onfocus onblur onchange
键盘事件：onkeydown onkeypress onkeyup
⿏标事件：onmousedown onmouseup onmouseenter onmouseleave
onmousemove onmousewheel
css：指层叠样式表 (Cascading Style Sheets)
基本语法：选择器{属性：属性值}
三种样式优先级：内联>内部>外联
内联：body中style
内部:head中style
外联:head中link src="路径"引⼊
选择器：
基本选择器：id class * 标签
符号选择器：, > 空格 + ~
属性选择器：
[属性名] [属性名="属性值"]
[属性名^="属性值开头"] [属性名$="属性值结尾" ]
[属性名*="带属性值符号"] [属性名~="其中⼀个属性值"]
伪类选择器：
:link初始颜⾊ :visited访问过颜⾊
:
hover把⿏标移动到元素上⾯ :active点击元素那⼀下的效果
:enabled :disabled :checked 针对于HTML中的Form元素操作
考虑所有
:first-child :last-child
:nth-child(n) :nth-last-child(n) :only-child
考虑当前：
:first-of-type :last-of-type
:nth-of-type(n) :nth-last-of-type(n) :only-of-type
:empty 没有⼦标签，没有内容
input:not([type="submit"]) {border: 1px solid red;}
字体样式：
font-family font-size font-weight
font-style  字体倾斜效果 normal不倾斜、oblique和italic倾斜
Italic是使⽤⽂字的斜体，Oblique是让没有斜体属性的⽂字倾斜！
⽂本样式：
text-transform(capitalize uppercase lowercase)
text-decoration(underline下 line-through中 overline上)
text-indent(缩进2em汉字)
text-align(left right center)
word-spacing单词距离 letter-spacing字符距离
背景:
background-color
background-image：url();
background-repeat(repeat no-repeat repeat-x repeat-y)
background-position(right top 或者 x y坐标)
列表样式：
list-style-type(disc circle square)
list-style-image
***list-style-position(outsiide/inside)
盒⼦模型：margin border padding content
width和height只定义内容⼤⼩
border:
border-width
border-color
border-style
border：可以写⼀起
四边可独⽴设置：
border-left-width
border-left-color
border-left-style
border-left：可以写⼀起
padding:
边框和内容之间的空⽩宽度
综合设置padding:2px;
单边设置padding-left:2px;
margin:
标签和它相邻的标签之间的空⽩宽度
**外边距的设置是上下相叠
综合设置margin:2px;
单边设置margin-left:2px;
Display属性：
CSS使⽤display设置的标签的显⽰
none 隐藏
block 块元素
inline ⾏内元素
inline-block ⾏内块元素
float：浮动(left right)
**clear：清除浮动，另起⼀⾏(left right both)
position定位:
static 默认值使⽤基于“⽂档流”的定位
relative相对定位 即在“⽂档流”的基础上，结合left和top属性，相对定位
absolute绝对定位 脱离“⽂档流”，并基于它的“包含框”，使⽤left和top属性来定位
fixed固定定位    特殊的绝对定位，即它的“包含框”为浏览器
sticky粘性定位  当没有滚动到特殊位置时，跟随滚动条滚动，到达特定位置时位置不再发⽣变化
因特⽹上最流⾏的脚本语⾔，轻量级的编程语⾔，可插⼊html页⾯
引⼊：1.body 2.head 3.外部⽤script src="路径"
注释： //单⾏  /* */多⾏
输出：
alter("内容");//警告框，会阻断javascript执⾏
document.write("内容");//向⽂档写⼊html或js代码
console.log();//控制台输出，调式
变量：
var全局：如果不初始化会输出undefined，不会报错
let局部：函数内部使⽤let定义后，对函数外部⽆影响。
const常量，不可修改
类型检测：typeof(obj)
数据类型：
基本：
1.字符串string
2.数字number
3.布尔boolean
4.null空值，⽤来清空
5.undefined不含有值
复合：数组[]，对象{}
类型转换：toString() toSting(radis)
运算符：
算数：+ - * / %  i++  ++i  i--  --i
赋值：=  +=  -=  *=  /=  %=
⽐较：> >= <  <=  != == ===
逻辑：&& || ！
运算符的优先级:！ > 算术运算符 > 关系运算符 > && > || > 赋值运算符
流程控制语句：
顺序结构：
分⽀结构：if(){}  if(){}else{} if(){}elif(){}else{}
switch(n){case 1:....break;case 2 :...break;default:....break;}    循环结构：for(){}  while(){} do{}while()  in(遍历对象)
break：结束循环
continue：结束当前循环，进⼊下⼀次循环
对象：var obj = new object()
obj.name = 'aa'
obj.study = function(){console.log("⽅法作为对象的键所存储的值")}
序列化：
JSON：是⼀种轻量级的数据交换格式，我们称之为JavaScript对象表⽰法JSON.parse(str)将字符串转
换为json对象
JSON.stringify(obj)将json转换为字符串

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。