HTML
概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
格式
HTML有自己的语法格式约定：
<HTML>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
//TODO...
</body>
</HTML>- <html> 标签： 代表当前书写的是一个HTML文档
- <head>标签：存储的本页面的一些重要的信息，它不会显示
- <head>标签：有一个子标签<title>它是用于定义页面的标题的
- <body>标签：书写的内容会显示出来
分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 HTML、head、body都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。
双标签
<body>文字</body>单标签
<br/>标签关系
标签关系就分为两种：并列关系和嵌套关系。
并列关系
<head></head>
<body></body>嵌套关系
<head><title></title></head>常见标签样式
换行标签
<br/>段落标签
<p></p>水平线标签
<hr></hr>行内标签
<span></span>块标签
<div></div>div和span都可以起到容器的作用，区别是什么？
- div标签会自动换行，span标签不会
- div划分整体，span划分局部
字体标签
<font></font>标题标记标签
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>标题标签中h1最大h6最小，会自动换行，会字体加粗，还会有一定距离
无序列表标签
<ul></ul>有序列表标签
<ol></ol>图像标签
<img></img>- src：代表图片路径
- width和height分别代表宽高
- alt：如果图片不显示，默认显示文本信息
- title：鼠标悬停时，显示文本信息
- align：图片附件文字对齐方式
超链接标签
<a></a>- href：代表跳转路径
- target：规定在何处打开这个链接文档。blank表示新窗口，self为当前窗口
表格标签
<table></table>
//表格中的行
<tr></tr>
//表格中的单元格
<td></td>表单标签
<form></form>- action：整个表单提交的目的地
- method：表单提交的方式。get或者post
表单中的元素标签
//用于搜集用户信息，根据type属性值的不同，样式不同
<input></input>
//下拉列表
<select></select>
//文本域
<textarea></textarea>- text：默认值，文本输入框
- password：密码样式
- checkbox：复选框
- radio：单选
- file：文件上传
- reset：重置按钮
- submit：提交按钮
- button：普通按钮
框架标签
<frameset></frameset>注意：框架标签和body标签不能共存。
元信息标签
//当前页面的字符编码
<meta charset="UTF-8">
//窗口的宽度为设备宽度 文字和图形初始比例为1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//任何IE版本都以当前版本所支持的最高级标准模式渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge">注意：元信息标签必须写在头标签之间。
CSS
概念：CSS指层叠样式表(Cascading Style Sheets) ，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS与HTML结合
内部样式
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>内联/行内样式
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>外部样式（链入式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>CSS规则
CSS样式规则如下：
- 选择器用于指定CSS样式作用的HTML对象，花括号内是该对象设置的具体样式
- 属性和属性值以“key:value”形式出现
元素选择器（标签选择器）
用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }类选择器
类选择器通过“.”来获取对应的类，格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }id选择器
id选择器通过“#”来获取对应的id，格式如下：
#id{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }多类名选择器
通过给标签指定多个类名，达到更多的选择目的。如：
<div class="content T_Content"><a>文字</a></div>id选择器和类选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的。
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于使用次数上。
派生选择器
用“>”来选择子代，但不管隔代。用“ ”（空格）来选择后代。
伪类
伪类可对css选择器添加特殊效果
- :active 向被激活的元素添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。
- :first-child 向元素的第一个子元素添加样式。
注意：超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha。
CSS文本属性
px：像素 em：倍数
- font-family : value; 指定字体
- font-size : value; 字体大小
- font-weight : normal/bold; 字体加粗
- color : value; 文本颜色
- text-align : left/right/center; 文本排列样式
- text-decoration : none/underline; 文字修饰
- line-height : value; 行高
- text-indent : value (2em); 首行文本缩进
CSS背景属性
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
- background-repeat 设置背景图像的墙纸效果，是否及如何重复
repeat：在垂直方向和水平方向重复，为重复值 repeat-x/repeat-y 仅在水平/垂直方向重复 no-repeat 仅显示一次
- background-position 设置背景图像的起始位置
x轴：正值，右移。负值，左移 y轴：正值，下移。负值，上移。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动
scroll：背景随文档滚动 fixed：背景图像固定
- background-origin：指定了背景图像的位置区域
border-box：背景贴边框的边 padding-box：背景贴内边框的边 content-box：背景贴内容的边
- background-clip: 裁切背景
border-box 边框开切 padding-box 内边距开切 content-box 内容开切
- background-size: 背景尺寸
cover 缩放成完全覆盖背景区域最小大小 contain 缩放成完全 适应背景区域最大大小
圆角
- border-radius：左上 右上 右下 左下;
- border-radius：四个角;
- border-radius：50%; 圆形
阴影
- box-shadow：1 2 3 4 5;
- 水平偏移
- 垂直偏移
- 模糊半径
- 扩张半径
- 颜色
渐变
线性渐变
- background:linear-gradient([方向/角度]，颜色列表)；
径向渐变
- background: radial-gradient(颜色列表);
CSS列表属性
- none：无标记。（去除标记）
- disc：默认。标记是实心圆。
- circle：标记是空心圆。
- square：标记是实心方块。
- decimal：标记是数字。
- decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
- lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
- upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
CSS边框属性
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
- double：边框为双实线
盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- margin(外边距) - 盒子与盒子之间的距离
- border(边框) - 盒子的保护壳
- padding(内边距/填充) - 内填充，盒子边与内容之间的距离
- content(内容) - 盒子的内容，显示的文本或图像
CSS布局定位
默认定位
- 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
- 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
- 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高
浮动定位（float）
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
相对定位（relative）
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
注意：相对定位是以自己的左上角为基点移动。
绝对定位（absolute）
本元素与已定位的父级元素的距离。如果父级元素定位了，就以父级为参照物； 如果父级没定位，向上找爷爷级，爷爷定位了，以爷爷为参照物。 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。
固定定位（fixed）
将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动。
叠放次序（z-index）
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。需要配合相对或者绝对定位来使用。
定位方式总结如下：
CSS过渡、动画
- transition｛1 2 3 4｝
- 过渡或动画模拟的css属性
- 完成过渡所使用的时间
- 过渡函数如图所示
- 过渡开始出现的延迟时间
transition: width 2s ease 1s; 
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }
动画属性： animation{ 1 , 2 , 3 , 4 , 5 }
- 动画帧
- 执行时间
- 过渡函数
- 动画执行的延迟
- 动画执行的次数
JavaScript
概念： JavaScript是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。它是一种网页编程技术，用来向HTML页面添加交互行为。由网景公司在Netscape2.0首先推出JavaScript，正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”。
特点
- 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运 行）
- 解释执行：事先不编译，逐行执行
- 基于对象：内置大量现成对象
组成
- ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
- DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每 一个节点。
- BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改 变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀 疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准则。
HTML与JavaScript相互方式
行内脚本
<button onclick="alert('弹框测试')">按钮</button>内部脚本
<body>
<script>
alert("这是弹窗");
</script>
</body>外部脚本
- 在项目根目录下创建一个目录js
- 在js目录中创建一个文件，后缀名是.js
- 在html页面中使用
<script src="js/xx.js"></script>JavaScript的基本语法部分和其他语言大同小异，此篇文章记录JavaScript独有特点。
函数
使用关键字function定义函数
function 函数名( 形参列表 ){
// 函数体
return 返回值;
}
注意：
- 形参一定不要带参数，函数声明后不会立即执行，会在我们需要的时候调用执行
构造函数
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
匿名函数
// 没有名字的函数，应该用一个变量来接收
var fn = function(a, b) {
return a * 10 + b;
};
闭包
概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一
个函数。
作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理。
JavaScript中的全局变量和局部变量
// 全局变量，声明的时候可以不使用var
a = 10;
// 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能 在其声明的函数内部
var c = 30;
闭包的优缺点
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干扰。 直观的说就是形成一个不销毁的栈环境。
- 闭包的优点： 方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题 。
- 闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭 包就会造 成内存泄露，内存消耗很大。
DOM操作
操作DOM的本质是:获取+触发+改变
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节 点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难。
- 在节点树中，顶端节点就是根节点（root）
- 每个节点都有父节点（除了根节点）
- 任何一个节点都可以拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
DOM访问
- getElementById：通过id属性获得元素节点对象
- getElementsByName：通过name属性获得元素节点对象集
- getElementsByTagName：通过标签名称获得元素节点对象集
DOM修改
修改HTML DOM意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
事件
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
