前端学习笔记 - 有感记录

HTML基础教程

HTML文档结构

HTML文档由多个部分组成，包括文档类型声明、HTML标签、头部信息和主体内容等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<link rel="icon" href="图标路径 - 网站图标">
<link rel="shortcut" href="图标路径 - 地址栏显示图标">
<!-- 其他元数据和资源引用 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

HTML标签

标题标签

HTML提供了6级标题标签，从H1到H6，用于表示不同级别的标题。

<h1>一级标题，一个网页尽量出现一次H1</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

文本标签

文本标签用于格式化文本内容，如粗体、斜体、上标等。

<strong>文本标签：粗体</strong>
<em>文本标签：斜体</em>
<sup>文本标签：上标</sup>
<sub>文本标签：下标</sub>
<s>文本标签：中划线</s>
<u>文本标签：下划线</u>
<big>大号文本</big>
<small>小号文本</small>
<code>代码文本</code>

特殊字符

HTML中使用特殊字符实体来表示一些特殊符号。

空格&nbsp; ：&nbsp;(三个空格等价于一个汉字)
分节&sect; ：&sect;
版权&copy; ：&copy;
注册&reg;  ：&reg;
商标&trade;：&trade;
欧元&euro; ：&euro;
日元&yen;  ：&yen;
摄氏&deg;  ：&deg;
大于>   ：>

列表标签

HTML提供了三种列表标签：有序列表、无序列表和定义列表。

有序列表

<div id="有序列表">
<ol type="i">
<!--只能包含li元素-->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</div>

无序列表

<div id="无序列表">
<ul type="disc"><!--disc/circle/square-->
<!--只能包含li元素-->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</div>

定义列表

<div id="定义列表">
<dt>名词1</dt>
<dd>描述1</dd>
<dt>名词2</dt>
<dd>描述2</dd>
<dt>名词3</dt>
<dd>描述3</dd>
</div>

表格标签

表格用于展示结构化数据，由表头、表体和表脚组成。

<div id="表格">
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>一班</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>二班</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>三班</td>
<td>王五</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td></td>
<td>275</td>
</tr>
</tfoot>
</table>
</div>

图片标签

图片标签用于在网页中插入图片，并提供图片的相关属性。

<img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度" />

链接标签

链接标签用于在网页中插入超链接，并提供链接的相关属性。

<a href="链接地址" target="_blank">链接文本</a>

表单标签

表单标签用于创建网页表单，并提供表单的相关属性。

<form action="提交地址" method="post">
<label for="name">姓名</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">邮箱</label>
<input type="email" id="email" name="email" />
<br />
<label for="message">留言</label>
<textarea id="message" name="message"></textarea>
<br />
<input type="submit" value="提交" />
</form>

框架标签

框架标签用于创建网页内嵌框架，并提供框架的相关属性。

<iframe src="框架地址" frameborder="0"></iframe>

CSS基础教程

CSS选择器

CSS选择器用于选择网页元素，并应用相应的样式。

标签选择器

标签选择器用于选择特定标签。

标签名 {
    /* 样式 */
}

类选择器

类选择器用于选择具有相同类属性的元素。

.类名 {
    /* 样式 */
}

ID选择器

ID选择器用于选择具有相同ID属性的元素。

#ID名 {
    /* 样式 */
}

通配选择器

通配选择器用于选择所有元素。

* {
    /* 样式 */
}

后代选择器

后代选择器用于选择特定元素的后代元素。

父元素 > 子元素 {
    /* 样式 */
}

子元素选择器

子元素选择器用于选择特定元素的直接子元素。

父元素 < 子元素 {
    /* 样式 */
}

相邻兄弟选择器

相邻兄弟选择器用于选择特定元素的相邻兄弟元素。

元素A + 元素B {
    /* 样式 */
}

属性选择器

属性选择器用于选择具有特定属性的元素。

元素[属性名=属性值] {
    /* 样式 */
}

CSS样式

CSS样式用于设置网页元素的样式。

字体样式

字体样式用于设置字体。

font-family: 字体名称, 字体名称, ...;
font-size: 字体大小;
font-style: normal/italic/oblique;
font-weight: normal/bold/bolder/lighter;
font-variant: normal/small-caps;
line-height: 行高;
text-align: left/right/center/justify;
text-decoration: none/underline/overline/line-through/blink;
text-transform: none/capitalize/uppercase/lowercase;
text-indent: 缩进距离;
letter-spacing: 字符间距;
word-spacing: 单词间距;
color: 颜色;

背景样式

背景样式用于设置背景。

background-color: 背景颜色;
background-image: 背景图片路径;
background-repeat: no-repeat/repeat/repeat-x/repeat-y;
background-position: 背景位置;
background-attachment: scroll/fixed/local;
background-size: 背景大小;

边框样式

边框样式用于设置边框。

border: 边框宽度 边框样式 边框颜色;
border-width: 边框宽度;
border-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
border-color: 边框颜色;
border-top: 边框宽度 边框样式 边框颜色;
border-right: 边框宽度 边框样式 边框颜色;
border-bottom: 边框宽度 边框样式 边框颜色;
border-left: 边框宽度 边框样式 边框颜色;
border-top-width: 边框宽度;
border-right-width: 边框宽度;
border-bottom-width: 边框宽度;
border-left-width: 边框宽度;
border-top-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
border-right-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
border-bottom-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
border-left-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
border-top-color: 边框颜色;
border-right-color: 边框颜色;
border-bottom-color: 边框颜色;
border-left-color: 边框颜色;
border-collapse: collapse/separate;
border-spacing: 边框间距;
outline: 轮廓宽度 轮廓样式 轮廓颜色;
outline-width: 轮廓宽度;
outline-style: none/solid/dashed/dotted/double/groove/ridge/inset/outset;
outline-color: 轮廓颜色;

盒子模型样式

盒子模型样式用于设置盒子模型。

width: 宽度;
height: 高度;
margin: 外边距;
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
padding: 内边距;
padding-top: 上内边距;
padding-right: 右内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
border-radius: 圆角半径;
box-shadow: 阴影水平偏移量 阴影垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
overflow: visible/hidden/scroll/auto;
display: inline/block/inline-block/list-item/table/table-cell/table-row/none;
position: static/relative/absolute/fixed;
top: 上边距;
right: 右边距;
bottom: 下边距;
left: 左边距;
z-index: 层级;

其他样式

其他样式用于设置其他样式。

cursor: pointer/auto/crosshair/default/pointer/move/e-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/w-resize/text/wait/help/progress;
opacity: 透明度;
visibility: visible/hidden/collapse;
clear: none/left/right/both;
content: 内容;
quotes: 引号;
counter-reset: 计数器名称;
counter-increment: 计数器名称;
nav-index: 导航序号;
nav-up: 上一导航链接;
nav-right: 下一导航链接;
nav-down: 下一导航链接;
nav-left: 上一导航链接;
text-shadow: 水平偏移量 垂直偏移量 模糊半径 颜色;
text-emphasis-color: 颜色;
text-indent: 缩进距离;
text-decoration-color: 颜色;

JavaScript核心知识点

JavaScript基础

变量

变量用于存储数据，可以是任意类型。

var 变量名 = 值;
let 变量名 = 值;
const 变量名 = 值;

条件语句

条件语句用于执行不同的代码块。

if (条件) {
    // 代码块
} else if (条件) {
    // 代码块
} else {
    // 代码块
}

循环语句

循环语句用于重复执行代码块。

for (初始化; 条件; 迭代) {
    // 代码块
}
for (var i = 0; i < 10; i++) {
    // 代码块
}
while (条件) {
    // 代码块
}
do {
    // 代码块
} while (条件);

函数

函数用于封装代码，可以重复使用。

function 函数名() {
    // 代码块
}
函数名();

事件处理

事件处理用于响应用户操作。

元素.addEventListener('事件类型', 函数);
元素.removeEventListener('事件类型', 函数);

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。

var obj = {
    '属性名': '值',
    '属性名': '值',
    '属性名': '值',
};
var json = JSON.stringify(obj);
var obj = JSON.parse(json);

JavaScript对象

JavaScript对象用于存储数据。

对象字面量

对象字面量用于创建对象。

var obj = {
    '属性名': '值',
    '属性名': '值',
    '属性名': '值',
};

属性

属性用于获取或设置对象的值。

obj.属性名 = 值;
var 值 = obj.属性名;

方法

方法用于操作对象。

obj.方法名();

原型

原型用于创建对象。

function 构造函数() {
    this.属性名 = '值';
}
构造函数.prototype.方法名 = function() {
    // 代码块
};
var obj = new 构造函数();

JavaScript数组

JavaScript数组用于存储一组数据。

创建数组

创建数组有两种方式。

var arr = new Array();
var arr = [元素1, 元素2, 元素3];

数组方法

数组方法用于操作数组。

arr.push(元素); // 尾部添加元素
arr.unshift(元素); // 头部添加元素
arr.pop(); // 尾部删除元素
arr.shift(); // 头部删除元素
arr.splice(起始索引, 删除个数, 新元素1, 新元素2, ...); // 插入/删除元素
arr.indexOf(元素); // 返回元素的索引
arr.lastIndexOf(元素); // 返回元素的最后一次出现的索引
arr.sort(); // 排序
arr.reverse(); // 反转
arr.join('' / ''); // 转换为字符串
arr.slice(起始索引, 结束索引); // 切片

JavaScript正则表达式

JavaScript正则表达式用于匹配文本。

创建正则表达式

创建正则表达式有两种方式。

var regex = /正则表达式/gi;
var regex = new RegExp('正则表达式', 'gi');

正则表达式方法

正则表达式方法用于匹配文本。

regex.test(文本); // 返回布尔值
regex.exec(文本); // 返回匹配结果数组
regex.match(文本); // 返回匹配结果数组
regex.replace(文本, 新文本); // 替换文本
regex.search(文本); // 返回匹配到的第一个位置

函数定义

JavaScript中函数是一等公民，可以通过多种方式定义。

   function 函数名() {
       // alert("Hello");
   }
   函数名();

函数参数

JavaScript函数可以有多个参数。

// 显式类型转换：Number() parseInt() parseFloat() toString()
// 前面一种是只能全为数字，后面两种是将开头为数字的部分转换（正负号除外）
// document.write中的换行用<br> alert用\n
// isFinite() 某数是否有限数值
// isNaN()
// escape() unescape()
// eval()

字符串操作

JavaScript提供了丰富的字符串操作方法。

var str = 'Hello World!';
str.length;
str.toLowerCase();
str.toUpperCase();
str.charAt(n);
str.substring(左闭, 右开);
str.replace(原字符, 新字符);
str.replace(正则表达式, 新字符);
str.split('分隔符')[n];
str.indexOf('首次出现的下标位置');
str.lastIndexOf('首次出现的下标位置');

数组操作

JavaScript数组是动态的，可以包含不同类型的元素。

var array = new Array(); / [];
array.slice(左开, 右闭);
array.unshift();
array.push();
array.shift();
array.pop();
array.sort(up/down);
array.reverse();
array.join();
str.split();

日期和数学对象

JavaScript提供了日期和数学对象来处理时间和数值计算。

var oDate = new Date();
getFullYear();
getMonth();
getDate();
getHours();
getMinutes();
getSeconds();
getDay();
Math.floor(Math.random() * (m - n + 1)) + n;

DOM操作

DOM (Document Object Model) 操作允许JavaScript动态修改网页内容。

DOM对象获取

// DOM对象的获取：getElementById、getElementsByTagName、getElementsByClassName、getElementsByName、document.title、document.body
// document.querySelector、document.querySelectorAll写法和CSS选择器一样

DOM元素操作

// 创建元素：document.createElement、document.createTextNode => appendChild、insertBefore、removeChild
// 复制元素：obj.cloneNode(1/true: 复制子元素、0/false: 不复制子元素)
// 替换元素：document.body.replaceChild
// 删除元素：removeAttribute

样式操作

// 获取CS属性值：getComputedStyle + '.attr' / ["attr"] 可直接赋值修改属性值
// getComputedSytle是计算后的样式，只有这个属性获得的对象才可以修改行内样式，上面的直接调用属性的方法属性只能修改标签中的内部样式
// cssText属性 = CSS代码
// 切换CSS样式一般是用JS直接修改标签的className

节点关系

// 查找父元素：.parentNode
// 查找子元素：.childNodes、firstChild、lastChild 包含所有元素节点、文本节点等
// 查找子元素：.children、firstElementChild、lastElementChild 只包含所有元素节点
// .length 可返回类数组的长度
// nodeType：1元素、2属性、3文本、8注释、9文档
// 查找兄弟元素：previousSibling、nextSibling、previousElementSibling、nextElementSibling
// 内部元素：innerHTML、内部文本：innerText

事件处理

JavaScript通过事件处理机制响应用户交互。

事件类型

// 鼠标事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove
// 键盘事件：onkeydown、onkeyup
// 表单事件：onfocus、onblur、onselect选中文本框内容、onchange选择某一项 -> 方法：focus()、select()
// HTML5中的表单新增元素：placeholder，聚焦前空内容显示特定文本
// 编辑事件：oncopy、onselectstart、oncontextmenu => 返回布尔值即可
// 页面事件：onload、onbeforeunload

事件绑定

// 事件处理器：obj.onclick = function(){};
// 绑定事件：addEventListener(type"不带on的事件类型名", fn函数名, false事件冒泡); // 可为同一个元素添加多个相同的事件
// 解除事件：removeEventListener
// event对象（function(e)、e.）：type、keyCode、shiftKey、ctrlKey、altKey
// this：调用this所在的函数的DOM对象

window对象

window对象是浏览器的全局对象，提供了许多有用的方法和属性。

// window对象 下一级 document文档对象、location地址对象、navigator浏览器对象、history历史对象、screen屏幕对象
// window对象的方法：alert、confirm、prompt、open、close、setTimeout、clearTimeout、setInterval、clearInterval

目录

HTML基础教程

HTML文档结构

HTML标签

标题标签

文本标签

特殊字符

列表标签

有序列表

无序列表

定义列表

表格标签

图片标签

链接标签

表单标签

框架标签

CSS基础教程

CSS选择器

标签选择器

类选择器

ID选择器

通配选择器

后代选择器

子元素选择器

相邻兄弟选择器

属性选择器

CSS样式

字体样式

背景样式

边框样式

盒子模型样式

其他样式

JavaScript核心知识点

JavaScript基础

变量

条件语句

循环语句

函数

事件处理

JSON

JavaScript对象

对象字面量

属性

方法

原型

JavaScript数组

创建数组

数组方法

JavaScript正则表达式

创建正则表达式

正则表达式方法

函数定义

函数参数

字符串操作

数组操作

日期和数学对象

DOM操作

DOM对象获取

DOM元素操作

样式操作

节点关系

事件处理

事件类型

事件绑定

window对象