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样式规则如下:
h1 {
color:red;
font-size:10px;
}
- 选择器用于指定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 表单被提交时
- 当用户触发按键时