前のページ

前端三件套速成

HTML + CSS + JS 的前端囫囵吞枣速成指南

HTML

一般而言，一个初始的 HTML 文件拥有如下结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

其中：

  • <!DOCTYPE html> 作为 文档声明 用于声明当前 HTML 文件的版本，这条语句表示当前使用的 HTML 版本为 5
  • <html lang="en"></html> 作为 HTML 的根标签，包括了除文档声明之外的所有文件中的 HTML 语句
  • <head></head> 作为 头部，也是当前页面的配置信息，用于外部引入文件
  • <body></body> 作为 内容，用于显示浏览器页面内的内容

注意：

  • 主流采用 HTML 5 规范
  • HTML 的文件拥有 .html 和 .htm 两种扩展名
  • html 标签不区分大小写，在 html 标签中，推荐等号左右不添加空格以增加可读性

HTML 的常用标签有：

  • 标题：从 <h1></h1> 到 <h6></h6>，标题字号逐渐减小，标题之间有嵌套关系
  • 段落：<p></p>
  • 粗体：<b></b>，同时还有易混淆的 <strong></strong> 用于强调，其中视障人士的屏幕阅读器会在 <strong> 标签时重读，由此 <b></b> 和 <strong></strong> 的区别在于一个是为了粗体而粗体，一个是为了强调而粗体
  • 斜体：<i></i>，同上有 <em></em>
  • 删除线：<s></s>，同上有 <del></del>
  • 下划线：<hr/>
  • 换行：<br/>
  • 图片标签：<img src="" width="" height="" alt="" title=""/>
  • 无序列表：<ul type=""><li></li></ul>
    • type="circle/square" 表示无序列表前符号使用空心圆还是实心方块
  • 有序列表：<ol start="" type=""><li></li></ol>
    • start= 表示起始引索，默认为 1
    • type= 表示有序列表前符号类型：
      • 1 阿拉伯数字
      • a 小写英文字母
      • A 大写英文字母
      • i 小写罗马数字
      • I 大写罗马数字
  • 超链接：
    • <a href="" target="">...</a>
      • href 表示地址，target 表示打开方式，在 ... 中写下希望让用户读到的内容
    • <a href="#"></a> 为假链接，原因是 # 在HTML中表示当前页面的锚点，但如果没有指定具体的锚点 ID，点击后只会回到页面顶部
  • 表格：
    • <table>：表格容器
    • <tr>：表格行（table row）
    • <th>：表头单元格（table header），默认加粗居中
    • <td>：标准单元格（table data）
    • <thead>：表头部分
    • <tbody>：表格主体
    • <tfoot>：表格页脚
<table>
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </tbody>
</table>

HTML 标签的一个难点在于对表单 <form> 的使用。<form> 声明了表单：创建一个表单容器，包含各种输入控件，收集用户输入并通过 HTTP 请求发送到服务器。 格式形如 <form action="" method="" target="">，其中主要属性有

  • action= 用于指定表单提交的 URL
  • method= 表示提交的方式 GET/POST
    • GET：在地址栏后面携带，只能携带字符串，携带的数据大小一般不允许超过 4 KB，缺点是数据暴露、长度限制和编码限制（只能选 URL 编码）
    • POST：在 HTTP 协议的请求体中携带，可以携带任意类型数据，携带数据大小无限制，同时比 GET 更安全，但是 POST 请求不可缓存、不可书签化、多次提交可能重复操作而且性能会比 GET 稍差
  • target= 在何处打开响应 _self, _blank, _parent, _top
  • enctype= 表示编码类型
  • autocomplete= 表示是否启用自动填充
  • novalidate 表示禁用表单验证

常用的表单控件（表单项）有：输入类型 <input>，选择菜单 <select>，文本域 <textarea>：

  • <input> 输入框：最常用的表单控件，通过 type 属性可以创建多种不同类型的输入字段
  • <select> 选择菜单：允许用户从预选项中选择
  • <textarea> 多行文本域：用于输入多行文本内容，适合长文本的输入

这三者的共同重要特性有：

  • name 属性：所有控件都需要 name 属性，用于在提交时标识数据
  • id 和 <label>：使用 id 与 <label> 关联，提升可访问性和用户体验
  • required：HTML 5 验证属性，即标记的必填项/必选项
  • placeholder：输入提示文字
  • value：控件的默认值或选中状态 还有一些杂七杂八的比如音频、视频、图片标签，还有 <a href="#top">Back to Top</a> 这样的假链接和 <summary></summary> 、<details></details> 之类的需要时查询即可。

CSS

关于 CSS，首先要引入 HTML 中 div 和 span 的概念：

  • div 是 HTML 中的一个标签，无特定含义，通常作为自定义的容器配合 CSS 完成网页的基本布局
  • span 也是没有特定语义的标签，一般作为文本容器出现 两者的区别体现在：
  • div 是“块级元素”，会独占一行；span 是行内元素，不会独占一行
  • div 可以再嵌套其他标签（因而容易滥用）；span 中只能嵌套文本/图片/超链接 CSS 的基本语法如下：
{
	Property: Value Value;
	Property: Value Value
}

要点在于：

  • 属性和属性值用 : 连接
  • 如果一个属性有多个值直接用空格隔开
  • 如果有多个属性，属性和属性之间用 ; 隔开，最后一个 ; 可省略也可写 关于 CSS 引入方式的优先级要记住：行内样式优先级永远最高，而内部和外部样式谁写在后面谁优先。

内联（行内）样式通过标签的 style 属性来结合：

<p style="Property: Value; Property: Value Value"></p>

内部样式通过 style 标签来结合：

<head>
  <style type="text/css">
    Selector {
      property: Value Value;
    }
  </style>
</head>

其中 style 标签必须写在 head 标签的开始和结束标签之间，同时 style 标签中的 type 属性默认即为 text/css 因而可省略不写。 外部样式则为通过 link 标签来结合。

<head>
  <link rel="stylesheet" href="loc/custom.css" />
</head>

接下来来看一下 CSS 的基本选择器吧：

选择器 描述 语法 Eg
标签选择器 根据 HTML 标签名称选择标签 Selector {} div { Property:Value; }
ID 选择器 根据 id 属性值选择标签 #id {} #d1 { Property:Value; }
类选择器 根据 class 属性值（类名）选择标签 .class {} .c1 { Property:Value; }
同源选择器 选取所有标签 * {} * { Property:Value; }

此处的优先级大小为：ID > 类 > 标签 > 通用 还有被称为 CSS 组合选择器的：

选择器 描述 语法 Eg
层级选择器 层级关系选择标签 Parent Son div a{}
属性选择器 根据指定属性的值筛选元素 [Property='Value'] input[type='text'] {}
并集选择器 多个选择器的结果进行合并 Selector1, Selector2, ... .c1, span {}

以下分别为三种 CSS 中常见的属性：背景属性、文本样式和字体属性。

功能 属性名 属性取值
背景色 background-color 1. 颜色常量
2. 使用十六进制
3. RGB
背景图片 background-image url()
平铺方式 background-repeat _ repeat：默认，背景图像将在垂直方向和水平方向重复
_ repeate-x：背景图像将在水平方向重复
_ repeate-y：背景图像将在垂直方向重复
_ no-repeat：背景图像仅显示一次
背景位置 background-position left, top
功能 属性名 属性取值
颜色 color 颜色
设置行高 line-height 像素
文字修饰 text-decoration _ underline：下划线
_ overline：上划线
_ ine-through：删除线
_ none：无线条
文本缩进 text-indent 缩进文本，单位可用 em
文本对齐 text-align 默认值由浏览器决定，有 left, right, center 三种取值
功能 属性名 作用
字体名 font-family 设置字体，需要本机拥有或者在线引入
设置大小 font-size 像素
设置样式 font-style _ normal：默认，标准字体样式
_ italic：斜体
设置粗细（字重） font-weight 加粗使用 bolder

JavaScript

JavaScript 能干什么呢？

  • 操作浏览器（BOM）：网址跳转、历史记录切换、浏览器弹窗
  • 操作网页（DOM）：操作 HTML 标签、标签属性、样式、文本等

注意到 JS 在浏览器内存中进行运行时操作，不修改网页根本源码，刷新网页之后网页还原。

根据 JS 的作用，不难推断出 JS 的组成：

  • ECMAScript：JS 的基本语法规范
  • BOM (Browser Object Model)：浏览器对象模型，与浏览器交互
  • DOM (Document Object Model)：文档对象模型，操作网页

类似于 CSS，JS 的引入也有在 <script></script> 中直接编写和 <script src="custom.js"></script> 引入两种手段。显然，一个 <script> 标签不能同时引入和编写。

JS 有如下控制台方法：

  • console.log()：控制台输出正常语句
  • console.warn()：控制台警告框
  • console.error()：控制台错误提示

JS 作为一门 弱类型语言，其变量类型由其值决定，定义变量使用关键字 var 或者 let。在作用域、变量提升、重复声明等方面存在显著差异。推荐优先使用 let 和 const，避免使用 var 除非有特殊兼容性需求。常见 JS 变量类型如下：

  • 数值类型 number，如 1, 2, 3, 3.14
  • 布尔类型 boolean，true, false
  • 字符串类型 string，如 "string", 'string'
  • 对象类型 object，如 new Date()，null
  • 以及尚未确定的类型 undefined，如 var a 有一函数 typeof() 用于判断变量的类型 对于变量，有运算符 == 比较数值以及 === 比较变量数值和类型。所以会出现经典的：
var i = 2;
var j = "2";
alert(i == j); // true
alert(i === j); //false

JS 也有和 C++ 长得几乎相同的 for, if, switch：

// for
for (let i = 1; i <= n; i++) {
    for (let j = 1; j <= i; j++)、
        document.writeln(i + j)

}

// if
var e = 7;
if (e == 1) {
    alert('1');
} else if (e == 2) {
    alert('2');
} else {
    alert('7');
}

// switch
var s = "js";
switch (s) {
    case "java":
        alert("java");
        break;
    case "javascript":
        alert("javascript");
        break;
    case "js":
        alert("js");
        break;
}

JS 的函数内部有一个 arguments array 用于存放传入的参数，故 函数声明时的参数个数和函数调用时传入的参数个数可以不一致。JS 没有函数重载，同名函数后者覆盖前者。参数列表中直接写参数名而无需写 var。

// 普通函数
function func(args) {
    //...
    return val;
}

// 匿名函数
function (args) {
    // ...
    return val;
}

匿名函数的核心应用场景是快速嵌入配合其他函数作用，比如回调函数、事件监听，以及 ES6 中引入的箭头函数，但是注意其无法递归、复用性差。同时 Debug 时在报错栈中会显示为 anonymous 或 ? 难以定位来源。在 JS 中，单独声明一个匿名函数且不将其赋值、传递或立即执行，基本上等于写了一行“废代码”。因而单独的匿名函数声明是无法通过解析的。

JS 的 事件 指的是发生在 HTML 元素上的“事情”，即浏览器/用户做的某些事情。事件通常与函数配合使用，通过绑定的形式让发生的事件来驱动函数运行。有以下常见事件：

属性 对应“事件”
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onchange 域的内容被改变
onblur 元素失焦
onfocus 元素获焦
onload 页面或图像完成加载
onsubmit 确认按钮被点击，表单被提交
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按住
onkeyup 某个键盘按键被松开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onmouseout 鼠标从某元素移开
omouseover 鼠标移到某元素之上
onmousemove 鼠标被移动

如何将事件绑定呢？对于普通/匿名函数各有其方式：

// 普通函数
<标签 属性="js 文件, 调用函数"></标签>;

// 匿名函数
标签对象.事件属性 = function () {
  // ...
};

JS 的数组构建方式如下：

var arr = new Array(size);
var arr = new Array(elem1, elem2, elem3, ...); // 注意此处上下两种命名方式的设计缺陷：当只有一个参数时语义歧义突变
var arr = [elem1, elem2, elem3, ...]; // 绝对推荐

由 JS 的变量特性我们不难得到：JS 数组中的每个元素都可以是任意类型，JS 数组长度可变，类似于 list。 对于数组 Array 常用的方法有：

  • concat()：连接若干个数组并返回结果
  • join()：把数组中所有元素放入一个字符串中并通过指定的分隔符进行分隔
  • reverse()：颠倒数组中元素的顺序 对于二维数组：
var arrs = [
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
];

for (let i = 0; i < arrs.length(); i++) {
  for (let j = 0; j < arrs[i].length(); j++) {
    // ...
  }
}

JS 另一个重要的内置对象是 Date 日期：

  • 创建当前日期 var date = new Date()
  • 创建指定日期 var date = new Date(Y, M, D, H, M, S) 注意月从 0 开始，0 表示 1 月。 日期也有不少自己的 方法。

JS 的 BOM 中封装了浏览器中各个对象，使得开发者可以方便的 操作浏览器中的各个对象。常见的有 windows（窗体对象）、navigator（浏览器导航对象）、screen（屏幕对象）、histroy（历史对象）、location（当前路径信息）。

方法 作用
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
prompt() 弹出输入框
setInterval(func,time) 按照指定的周期（以毫秒计）来调用函数或计算表达式，请注意是传入函数名
setTimeout(func,time) 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 Interval()。
clearTimeout() 确认按钮被点击，表单被提交
onkeydown 取消由 setTimeout() 方法设置的 timeout。
方法 作用
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
方法 作用
width 返回显示器屏幕的分辨率宽度
height 返回显示屏幕的分辨率高度
方法 作用
back() 加载 history 列表中的前一个 URL
forword() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
方法 作用
host 设置或返回主机名和当前 URL 的端口号
href 设置或返回完整的 URL
port 设置或返回当前 URL 的端口号

JS 的 DOM 用于 访问网页中的所有内容。当网页被加载时，浏览器会创建页面的 DOM 对象。DOM对象模型是一棵树：网页里所有的标签、属性和文本都会被转换成节点对象，按照层级结构组织成 树形结构。其中：

  • document：整个网页封装成的对象
  • element：标签封装成的对象
  • attribute：属性封装成的对象
  • text：文本封装成的对象 对于标签，获取标签有如下方法：
方法 作用 返回值
document.getElementById(id) 根据 id 获取标签 Element对象
document.getElementsByName(name) 根据元素的 name 属性获取一批标签 Element 类数组
document.getElementsByTagName(tagName) 根据标签名获取一批标签 Element 类数组
document.getElementsByClassName(className) 按根据类名获取一批标签 Element 类数组

接下来看怎么操作标签：

方法 作用 返回值
document.createElement(tagName) 创建标签 Element对象
parentElement.appendChild(sonElement) 插入标签
element.remove() 删除标签

操作属性：

方法 作用 返回值
getAttribute(attrName) 获取属性值 属性名称
setAttribute(attrName, attrValue) 设置属性值 属性名称, 属性值
getElementsByTagName(tagName) 根据标签名称获取一批标签 Element 类数组
document.getElementsByClassName(className) 根据类名获取一批标签 Element 类数组

还有操作标签体本身：

方法 作用
content.innerHTML 获取标签体内容
content.innerHTML = "..." 设置标签体内容

完结撒花，接下来就是学 TypeScript 了 🎉🎉🎉

© 2023 - 2026 起汐のBlog ♪
「馬鹿なわたしは歌うだけ」
Built with Hugo
Theme exStack modified by Qixyi