HTML+CSS
1. 浏览器的内核分为渲染引擎和JS引擎;
2. 渲染引擎是负责取得网页内容(HTML,XML,img),整理讯息(加入CSS)等;
3. JS引擎是负责解析Javascript语言,实现网页的动态效果;
4. 常见的浏览器内核:Trident(IE),EdgeHTML(edge),Gecko(firefox),Webkit(Safari),Blink(chrome);
5. web标准主要包括结构(HTML),表现(CSS)和行为(JS);
6. HTML是一种超文本标签语言,通过标签来将内容呈现在页面上;
1. html中,带着<>符号的被称为标签,标签分为单标签</>,双标签<></>;
2. 标签关系分为并列关系(<head></head><h1><h1/>)和嵌套关系(<head><h1><h1/></head>);
3. 标题标签:<h1>,<h2>,<h3>...<h6>;
4. 段落标签:<p></p>;
5. 水平线标签<hr/>;
6. 换行标签<br/>;
7. 盒子与范围标签:盒子(<div></div>),范围(<span></span>);
8. 结构化表现标签:粗体<strong>,斜体<em>,删除线<del>,下划线<u>;
9. 标签属性语法:<标签名 属性1="属性1" 属性2="属性2"...>内容</标签名>;
10. 图像标签<img src="图像URL"/>;
11. 图像标签属性:alt(图像不显示时出现的文本),title(鼠标悬停时显示内容),width(宽),height(高),border(图像边框宽度);
12. a标签,链接标签,语法:<a href="跳转目标" target="目标窗口的弹出方式">文本/图像</a>;
13. base标签,链接标签,设置整体链接的打开状态,写在head标签之间;
14. 锚点链接:创建锚点链接,快速定位锚点链接;
<!-- 使用a href="id名" 创建锚点 --> <a href="#two">00</a> <!-- 使用id名标注跳转的目标位置 --> <h3 id="two">第二集</h3>
1. html为特殊字符准备了专门的代码<(<),>(>)...;
2. 列表是一种很方便的容器,分为无序列表,有序列表和自定义列表;
3. 无序列表<ul><li></li><li></li></ul>,其中ul只能嵌套li,li相当与一个容器,可以容纳所有元素;
4. 有序列表<ol><li></li><li></li></ol>;
5. 自定义列表<dl><dt>名词1<dd>名词1解释1</dd></dt></dl>,列表项前没有任何项目符号;
6. 表格是一种用来处理和显示格式数据的标签;
<table> <!-- 定义表的一行,必须在table中,只能嵌套td --> <tr> <!-- 表格的单元格 --> <td></td> <td></td> </tr> </table>
1. border:设置表格的边框;
2. cellspacing:设置单元格间的空白间距;
3. cellpadding:设置单元格内容和单元格边框的空白间距;
4. width:设置表格宽度;
5. height:设置表格高度;
6. align:设置网页中水平对齐的方式(left,center,right);
7. 表格布局可以分为头部,主体和页脚,使用thread标签定义表格的头部,tbody定义表格的主题,两者都在table标签中;
8. table中使用caption定义表格标题,紧跟table标签之后,标题会在表格之上;
9. 使用rowspan属性跨行合并;
10. 使用colspan跨列合并;
11. 表单标签,from用于定义表单域,创建一个表单,实现用户数据的搜集和传递;
<form action="url地址" method="提交方式" name="表单名称">各种控件</form>
1. method用于设置表单数据的提交方式,取值可以是get或者post;
2. input输入控件,为单标签,其中type属性是基本属性:text单行文本输入框,password密码输入框,radio单选按钮,checkbox复选框,button普通按钮,submit提交按钮,reset重置按钮;
3. value可以设置控件的默认文本值;
4. name是控件的名称;
5. size必须是正整数,是控件的显示宽度;
6. checked是定义控件被默认选中的项;
7. maxlength是控件允许被输入的最多字符数;
8. radio如果是名字相同的一组按钮,那么只能选择其中一个;
9. label为input标签定义标注,用于绑定表单元素,点击label的时候,被绑定的表单元素会获得输入焦点;
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
1. textarea控件:创建多行文本输入框,语法:<textarea cols="宽度" rows="高度">文本内容</textarea>
2. select控件:下拉菜单,语法:<select><option>选项一</option></select>,select中至少要有一个option标签,并且在option中定义selected="selected"的时候,该选项为默认值;
3. css又叫层叠样式表,用于美化html;
4. 样式表可以分为内部样式表(就是在head标签中写style标签,其中设置属性type为text/css),行内样式表(在标签中写style),最后就是外部样式表(在html文件中引入css文件,<link href="css路径" rel="stylesheet">);
5. 样式表语法:选择器{属性:属性值;属性:属性值}
6. font-size是设置字号大小,单位基本都使用px;
7. font-family是字体,基本使用是SimSun(宋体),Microsoft YaHei(微软雅黑);
8. font-weight是字体粗细,有normal,bold,border,ligther,(100-900)等属性值;
9. font-style是字体风格,有normal(默认),italic(斜体),oblique(倾斜);
10. font属性也可以一次性进行综合设置:选择器{font:font-style font-weight font-size/line-height font-family},其中后两者是必须写的;
11. color用于定义文本颜色,属性值可以写颜色英文也可以写rbg代码;
12. line-height是行间距,可以用px,em(相对值)还有百分比%;
13. text-indent首行缩进,一般二字符是2em;
14. text-decoration是给链接设置装饰效果:none(默认),underline(下划线),overline(定义文本上的一条线),line-through(定义穿透文本下的一条线);
15. 要将css用在特定的html中,必须要先找到目标元素,执行样式规则的规则部分就是选择器;
16. 标签选择器(元素选择器):标签名(元素名){属性:属性值;};
17. 类选择器,在html标签中写(class="类名"),语法:.类名{属性:属性值;};
18. 多类名选择器,在一个class中声明多个类,类名先后顺序没有关系,类名间用空格隔开;
19. id选择器,在标签中定义一<div id="id名">,#id名{属性:属性值;}
20. 类选择器可以重复,但是id选择器的id名不能重复出现;
21. *通配符选择器,可以匹配页面所有元素,语法:*{margin:0;padding:0;};
22. 复合选择器是将多个基础选择器通过不同组合而成;
23. 交集选择器:第一个是标签选择器,第二个是class选择器,两个选择器不能有空格,如a.class;
24. 并集选择器:css选择器分组,任何形式的选择器都可以用逗号连接起来(.class,h3);
25. 后代选择器:外层标签写在前面,内层标签写在后面,中间用空格分割,标签发生嵌套的时候,内存标签就是外层标签后代;
26. 子代选择器:子元素只能选择某元素子元素的元素,父类标签写在前面,子级标签写在后面,中间用>进行连接;
27. 伪类选择器:用于给某些选择器添加特殊的效果(:link(未访问的链接),:hover(鼠标移动到链接上),:active(选定的链接),:visited(已访问的链接));
28. 标签显示模式分为:块状元素,行内元素,行内块元素;
29. 块状元素:单独占据一整行或多整行,可以设置宽度,高度,对齐等属性,用于网页布局和架构,常用的有h,p,div,ul,li,caption,form...;
30. 行内元素:不占用对立的区域,仅仅依靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置高度,宽度,对齐等属性,常用的标签有a,b,i,span...,水平方向的内外边距可以设置,垂直设置无用;
31. p,h等文字标签里面不能放其他元素;
32. 在行内元素有几种可以设置宽高和对齐属性的元素,叫行内块元素,如img,input,label,select,option;
33. 标签显示模块转换:块转行内(display:inline),行内转块(display:block),转行内块(display:inline-block);
34. css背景,background-color设置背景颜色,background-image设置背景图片,background-repeat是否平铺(repeat平铺,no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺),background-position背景位置(length||length,position||position),background-attachment背景是否滚动还是固定(scroll||fixed);
35. 复合写background:背景图片地址 背景平铺 背景滚动 背景位置;
36. css必须掌握的三大模块,盒子模型,浮动,定位;
37. 盒子模型就是将html元素看作一个矩形的盒子,其中有内边距(padding),边距(border),外边距(margin);
38. 网页布局的本质就是将元素放在块中,把块在页面上摆出我们想要的样子;
39. border是边框,是盒子外面的那层皮,none是没有边框,solid是单实线,dashed虚线,dotted点线,double双实线;
40. border-style中想放不同位置的边框格式,应该遵循上,右,下,左的规则,border-width和border-color也是;
41. border的边框综合设置,border:四边宽度,四边样式,四边颜色;
42. table也有自己的边框,可以用table{border-collapse:collapse;}来将相邻边框合并;
43. padding是用来设置内边距的,当其有两个值的时候,第一个值是上下边距,第二个是左右边距,当有三个值的时候第一个值是上边距,第二个是左右边距没第三个是下边距,的哥值的时候按照上,右,下,左进行设定;
44. margin用来设置外边距,设置外边距会在元素创建空白,可以通过外边距实现盒子居中,设置左右外边距为auto,可以讲块级元素水平居中;
45. margin-top上外边距,margin-right右外边距,margin-bottom下外边距,margin-left上外边距,其他上下左右以此为例;
46. 当上下两个块元素相遇的时候,两个元素都有上下外边距,会出现外边距塌陷的情况,取的是二者较大值的那个;
47. 当两个嵌套块元素出现合并的时候,父元素的上外边距与子元素也会边距塌陷;
48. 解决边距塌陷可以给父元素设定1像素的上边框或者上内边距,为父元素添加overflow:hidden;
49. 根据稳定性使用width>padding>margin来布局;
50. 标准流(普通流),就是一个网页标签元素正常从上到下,从左到右排列顺序进行布局;
51. 浮动可以改变任何盒子在一行排列,元素的浮动设置了浮动属性的元素会脱离普通流的控制;
52. float:left(左浮动),right(右浮动),none(不浮动);
53. 浮动总是找离它最近的父级元素对齐,不会超过内边距范围;
54. 如果浮动元素的上一个元素也浮动,那么两者顶部会对齐,如果上一个元素是标准流,那么顶部会和上一个元素底部对齐;
55. 一个父盒子中的其中一个子盒子浮动,其他子级也需要浮动,才能一行对齐显示;
56. 浮动的元素会自动转为行内块元素;
57. 浮动会对后续普通流造成影响,所以需要清除浮动;
58. 浮动清除是为了解决父类元素因为子级浮动引起的内部高度为0的问题;
59. 清楚浮动是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素;
60. clear属性可以用于清除浮动,left属性值清除左浮动,right清除右浮动,both同时清除左右两侧浮动;
61. 还可以给父级添加overflow属性来清除浮动,属性值是hidden|auto|scroll,内容增多的部分可能会被隐藏掉,无法显示需要溢出的元素;
62. 在父元素中使用after伪元素清除浮动,:after方式为空元素的升级版,好处就是不用单独加标签了;
63. 定位属性主要包括定位模式和边偏移，边偏移指的就会说top，bottom，left，right；
64. 在css中，position用于定义元素的定位模式，选择器{position：属性值；}，static自动定位，relative相对定位，absolute绝对定位，fixed固定定位；
65. 当使用静态定位的时候，元素处于标准静态流；
66. 当使用相对定位的时候，可以相对于它在标准流中的位置进行定位；
67. 当使用绝对定位的时候，可以在父盒子中任何一个地方布局（如果没有父盒子，则依据当前浏览器整个页面进行定位）；
68. 子绝父相；
69. 固定定位以浏览器的窗口为参照物定义网页元素，完全脱标，不占用位置，不随滚动条动；
70. 元素添加绝对定位和固定定位之后，模式也会发生转换，都转换为行内块；
71. z-index可以用来设置层叠定位元素的堆叠顺序，默认属性值是0；
72. js是一门脚本语言，解释型语言，动态语言，基于对象的语言，弱性语言；
73. ECMA是js的核心，ECMASript是一套定义语言的标准和具体实现；
74. BOM是浏览器对象模型；
75. DOM是文档对象模型；
76. 可以在html中，script标签中写js，可以在html的标签中写js，在js文件中写js，然后在html页面中引入sript标签中的src=“js路径”，还可以在控制台直接书写js代码；
77. js中的基本数据类型：Number，String，Boolean，Undefined，Null；
78. NaN是not a number；
79. alert（），console.log(),debugger,断点调试都可以进行调试;
80. 数组是一个有序的列表,var arr = [];
81. 通过push添加元素,pop删除元素;
82. 函数的作用是封装一段代码,将来重复使用,减低了复用,语法:function 函数名(),调用函数:函数名();
83. 两个函数声明相同,那么后面的会覆盖前面的,两个函数都是函数表达式,,函数名相同,函数的调用会调用最近的一个;
84. 所有的函数都有一个arguments对象,其中有callee属性(函数本身),callee.name名字,length属性(实参个数).callee.length(形参个数);
85. JS引擎会对JS代码进行解释执行,对JS代码进行预解析,会以关键字var和function开头的语句进行处理;
86. 变量和函数的声明处在作用域比较靠后的位置,变量和函数的声明会被提升到作用域的开头;
87. 变量的提升是声明的提升;
88. 当函数和变量声明同名的时候,只对函数声明进行提升;
89. 预解析的提升原则是分作用域的,提升是提升到变量运行的环境中去;
90. 函数表达式不会提升;
91. 直接编写在script标签中的js代码,都是全局作用域,在全局作用域有一个全局对象window,可以直接使用,所有创建的变量都会作为window对象的属性保存,所有创建的函数都会作为window对象的方法保存;
92. 在函数内部,就是局部作用域;
93. 在函数中声明变量用var就是局部变量,不用就是全局变量;
94. js创建对象:new Object()创建对象,对象字面量创建对象,工厂函数创建对象,自定义构造函数;
95. js的对象分为内置对象,浏览器对象,自定义对象,DOM对象;
96. 内置对象:Math,Date,Array,String,基本包装类型;
97. 一般情况下，变量取值到创建这个变量的函数的作用域中取值，如果没有查到，就往上级作用域查，直到查到全局作用域，这个过程叫作用域链；
98.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
