松垮垮
songkuakua
2025-02-15
目录

html

# HTML

没有内容的html元素叫空元素，在开始标签中关闭，例如<br>表示换行，但最好写成<br/>

html大小写无关

双引号和单引号都可以，如果属性值本身就含有双引号，那么外部必须使用单引号

html样式的输出中，多个空格、多个换行都会被视为一个空格或换行

.html和.htm都是html的后缀，服务端最好同个对象的两个后缀的文件都有，避免因浏览器的请求规则找不到对应的html

# 文本样式

# 常用文本

  • 例子：

这个文本是加粗的 这个文本是加粗的

下划线格式

这个文本字体放大

这个文本是缩小的

这个文本是斜体的 这个文本是斜体的

这个文本包含下标

这个文本包含上标

  • html代码：

<pre>这是一个可视化格式</pre>

可视化格式

# 术语文字

  • 例子：

计算机输出 键盘输入 打字机文本 计算机代码样本 计算机变量

USA
  • html代码：

# 缩略表达

当把鼠标移至缩略词时，能显示完整表达

  • 例子：

etc. WWW

  • html代码：

# 引用

<blockquote>表示块引用，显示为一个文本块，<footer>用于长引用里表示脚注

<q>表示短引用

<cite>引用前面定义过的图片等内容

  • 例子：
<blockquote>
    <p>Life is what happens when you're busy making other plans.</p>
    <footer>— John Lennon</footer>
</blockquote>

In his famous quote, Einstein said: <q>E=mc²</q>
1
2
3
4
5
6

<img src="./scream.png" width="50" height="57" alt="The Scream">

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

  • html代码：

# 删除和插入

  • 例子： <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

  • html代码：

# head元素

# title标签

在文档中是必须的，定义了：

  • 浏览器工具栏的标题
  • 在收藏夹里的标题
  • 在搜索引擎结果页面的标题

# base标签

当在head中定义了base标签，指定了后面的链接的默认行为

# link标签

定义了文档与外部资源的关系，通常用于链接到样式表

# style标签

引用的css文件地址，也可以直接添加样式

# meta标签

用于浏览器，搜索引擎或其他web服务

# Script标签

用于加载脚本文件

# 链接

语法

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">安全链接</a>

  1. href属性

    指定要访问的地址

  2. target属性（链接打开的方式）

    • _blank 在新窗口或标签页打开链接
    • _self 在当前窗口或标签页打开链接（默认）
    • _parent 在父框架中打开链接
    • _top 在整个窗口中打开链接，取消框架

  3. rel属性（定义打开链接和当前页面的关系）

    • nofollow 不使用搜索引擎，直接访问地址
    • noopener 防止新的浏览上下文（页面）访问window.opener属性和open方法。
    • noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）

  4. download（提示下载目标内容，而不是访问）

    点击下载图片

    <a href="./image1.png" download="./image1.png">点击下载图片</a>

  5. title 鼠标悬停时显示信息

    image1.png

    <a href="./image1.png" title="点击访问图片呀"> image1.png </a>

  6. id 跳转到同一页面的某个标记过的位置。用id标记一个对象，用#去访问这个标记 这是第1部分 跳转到第1部分

  7. hreflang 指定访问url的语言 访问西班牙语网站 <a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

  8. type 指定链接资源的MIME类型 样式表 <a href="style.css" type="text/css">样式表</a>

  9. class 指定元素的类名（CSS中定义） 外部链接 <a href="https://www.example.com" class="external-link">外部链接</a>

  10. style 指定css样式 红色链接 <a href="https://www.example.com" style="color: yellow;">红色链接</a>

图像链接：使用图片作为点击对象

<a href="https://www.baidu.com/">
  <img src="./scream.png">
</a>
1
2
3

注释： 始终将正斜杠添加到子文件夹。href="https://www.runoob.com/html"，会产生两次 HTTP 请求。应该这样：href="https://www.runoob.com/html/"
href="#" 导航到页面顶部 是 占位符，捕获点击事件
href="javascript:void(0)" 阻止默认行为，不刷新页面 否 阻止跳转，配合 JS 使用
href="" 刷新 是
href="about:blank" 打开空白页面 是
role="button" 链接表现为按钮，无默认行为 否 配合 JS 实现按钮功能，无跳转

base链接

当在head中定义了base标签，指定了后面的链接的默认行为

# html使用css

内联样式

在单个元素中通过style属性来添加单个css属性

hello world

<p style="color:blue;margin-left:20px;">hello world</p>

内部样式表

单个文件需要样式时，在head部分通过style指定

外部样式表

当样式需要被应用到很多页是，引用外部样式表

  • @import是css提供的方式，link是html的方式
  • 页面加载是，link的css会同步加载，@import是页面全部下载完后在加载

# 图像

<img>标签指定图像，这是空标签，没有闭合标签

<img border="0" src="url" alt="some_text" width="304" height="228">

alt属性为可替换文本，当图片无法加载时显示这个文本 border表示图片的边框大小

图像映射:

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="sun" href="./sun.png">
  <area shape="circle" coords="90,58,4" alt="Mercury" href="./mercur.png">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.png">
</map>

<img src="./all_plane.png" width="145" height="126" alt="Planets" usemap="#planetmap">
1
2
3
4
5
6
7

img中的usemap属性表示了使用图像地图，用#关联一处图像地图。

map中，用area定义图像地图中的可选区域

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

# 表格

html表格生成网站 (opens new window)

Monthly savings
列标题1 列标题2
行1，列1 行1，列2 行1，列3
行2，列1 行2，列2

table标签内的属性：

  • border表示表格边框的粗细
  • cellpadding表示表格中单元格的边距
  • cellspacing表示单元格间距

单元格元素

  • tr表示表格的一行
  • thead表示表格的标题部分，tbody表示表格的主题部分
  • th表示表头单元格，td表示数据单元格
  • colspanu属性表示当前单元格占几列，rowspan表示当前单元格占几行

<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题

# 列表

# 无序列表

# 有序列表

# 自定义列表

<dl>
<dt>Coffee </dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
1
2
3
4
5
6

<dd>为自定义列表的描述

# 区块

<div> <p> <h1>表示块级元素，<span> <a>表示内联元素，两者的区别在于

  • 块元素是一个元素，占用了全部宽度，在前后都是换行符
  • 内联元素只需要必要的宽度，不强制换行。

区块本身没有含义，在和CSS一起用时用于对大块内容设置样式属性

可开关隐藏：

<details>
<summary>显示的内容</summary>
    <pre>
    <code class="javascript">
    这是隐藏的内容
    </code>
    </pre>
</details>
1
2
3
4
5
6
7
8

# 语义元素

比起区块的无语义内容，语义元素本质上是有描述信息的区块，定义了他的内容属于哪个部分

用法和区块一样

此外还有<figure>、<figcaption>,定义了独立的流内容，如图片，代码，视频，表格等

# 表单

当希望用户输入一些信息被浏览器收集到返回给服务器时，需要用到表单，其由<form>标签指定

# <form>标签属性

# <input>标签输入标签

# <input form="text">属性

在<form>表单外的<input>也属于<form>表单的内容

# <input formaction="text.php">属性

formaction属性指定当前输入的提交处理脚本，对当前input覆盖form里的action属性

# 其他

# <input type="text">属性

  1. type="text"表示输入的是文本

  2. type="password"，输入的文本不会明文显示

    输入ID：
    输入密码：

​ 在大多数浏览器中，文本域的默认宽度是 20 个字符。

  1. type="radio"表示单选按钮

    男
    女

  2. type="checkbox"表示复选框

    I have a bike
    I have a car

  3. type="submit"表示提交按钮

    用户名:

​ 调用本地邮箱发送邮件 ​ html ​ <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> ​ Name:<br> ​ <input type="text" name="name" value="your name"><br> ​ E-mail:<br> ​ <input type="text" name="mail" value="your email"><br> ​ Comment:<br> ​ <input type="text" name="comment" value="your comment" size="50"><br><br> ​ <input type="submit" value="发送"> ​ <input type="reset" value="重置"> ​ </form> ​

  1. type="reset"表示重置按钮

    用户名:

  2. type="file"表示文件上传

    选择文件:
    1. type="button"表示单选按钮

​

  1. type="color"表示输入颜色

    选择你喜欢的颜色:

  2. type="date" 表示输入日期

    <input type="date" name="bday">

    <input type="datetime" name="bdaytime"> chrom不支持这个

    <input type="datetime-local" name="bdaytime">这个好用

    <input type="month" name="bdaymonth">只有年月

    <input type="week" name="week_year">

  3. type="email" 表示邮件

    <input type="email" name="email">

  4. type="number" 表示输入数值并限定范围

  5. type="range" 滑动范围

    <input type="range" name="points" min="1" max="10" step="1" value="4">

  6. type="search" 网站搜索

    <input type="search" name="googlesearch">

  7. type="tel" 电话

    <input type="tel" name="usrtel">

  8. type="time" 时间

    <input type="time" name="usr_time">

  9. type="url"输入url地址

    <input type="url" name="homepage">

# <textarea>标签

<textarea>标签定义多行的文本输入控件

# <select>标签

<select>标签定义下拉列表

其中selected表示默认选中

# <datalist>标签

和selected的区别是前者只能从列表选取，后者可以键盘输入，提示列表选项

<form action="">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>
1
2
3
4
5
6
7
8
9
10

# <fieldset>与<legend>标签

<fieldset>标签用于将表单内的相关元素组合，加上边框，<legend>定义标题

Personal information: Name:
E-mail:
Date of birth:

# <keygen>元素

当提交表单时，会生成公钥和私钥，公钥发给服务端，可用于之后验证客户端的证书

# <output>元素

用于处理输出

0 100 + = 150

# label

可以用于增大input的区域，label对input做解释性文本，label区域也属于input的一部分可点击

通常一个input对应一个label，其他语法上也可以通过，但不实用

# 框架

<iframe>标签用于在网页中显示一个独立的网页

<iframe src="https://www.baidu.com" width="600" height="300"></iframe>
1

frameborder表示边框的宽度

框架和链接的配合：

有些markdown的渲染器在渲染这个语法的时候和预期的不太一致，换成html来试试这个语法

# 颜色

颜色由红、绿、蓝组成，每个颜色占两个16进制的字节

  • #000000 黑
  • #FF0000 红
  • #00FF00 绿
  • #0000FF 蓝

# HTML脚本

由<script>引入JavaScript脚本，使页面更有交互性。常用于图片操作、表单验证及动态内容

如果页面不支持JavaScript，用<noscript>标签输出

# 字符实体

html中一些字符是用于html语法，无法显示，因此需要用字符实体

例如：

  • 空格：&nbsp
  • 小于：&lt

html实体参考查阅 (opens new window)

注意：字符实体语法是区分大小写的

检测xhtml格式 (opens new window)

# canvas

<canvas>是图形的容器，其中通过脚本来绘制图形

# SVG

SVG是一种可缩放的矢量图形，可以内嵌在html中

  • canvas是逐像素绘制的，一旦图形改变需要全部重新绘制。SVG被视为对象，如果对象属性改变可以跟随改变
  • SVG是用xml描述的2D图形，canvas是用JavaScript描述
  • SVG可以无限放大而不影响清晰度
  • SVG作为对象，可以被搜索、索引、压缩、脚本花，可以附加JavaScript事件处理器

# math 数学库

<math> …… </math>，用来书写数学符号、公式等

# 拖放

拖动对象里：

  • 通过draggable="true"设置可以拖动，此时可以将对象乱拖
  • 通过ondragstart="drag(event)"设置拖动时触发drag函数

放置对象里：

  • 通过ondragover="allowDrop(event)"规定当拖动对象达到放置对象上方时，触发allowDrop函数
  • 通过ondrop="drop(event)"设置当放置后，发生什么

来回拖动图片demo

# 视频

<video>`支持三种视频格式：MP4、WebM、Ogg，对应的type标签为`video/mp4、video/webm、video/ogg
1

# 其他服务

地图定位：Geolocation

音频播放：<audio>，类似视频播放，其中MP3对应标签audio/mpeg

# HTML5的Web存储

cookie能实现跨域通信，并在每次http请求都携带，能实现更多功能场景
HTML5的web存储能存储更大的数据，更快速安全

HTML5的web存储，localStorage的作用域为协议+主机名+端口,sessionstorage的作用域为标签页+协议+主机名+端口


分为两个对象，这两个对象的api相同：

  • localstorage: 长期存储，无过期时间
  • sessionstorage: 临时保存同一窗口的数据，关闭标签页时删除

结合json字段来实现多条数据的管理

# HTML5 Web IndexedDB

是一个内置于浏览器的NoSQL数据库，比起localStorage更适合存储大量的结构化数据

  • 支持事务
  • 有更大的存储能力
  • 异步执行
  • 持久化本地存储
  • 支持索引加速查询

可以用于：

  • 前端的本地数据库
  • 视频、图形、大文件的缓存
  • 支持离线web服务
  • 存储大量的结构化数据
            // 打开或创建数据库
            var request = indexedDB.open('myDatabase', 1);


​            // 如果数据库版本变化或首次创建时触发
​            request.onupgradeneeded = function(event) {
​            var db = event.target.result;

​            // 创建对象存储（表），设置主键为 'id'
​            var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

​            // 为 'name' 字段创建索引
​            objectStore.createIndex('name', 'name', { unique: false });
​            };

​            // 打开数据库成功
​            request.onsuccess = function(event) {
​            var db = event.target.result;

​            // 插入数据
​            var transaction = db.transaction(['customers'], 'readwrite');
​            var objectStore = transaction.objectStore('customers');
​            objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' });
​            objectStore.add({ id: 2, name: 'Jane Doe', email: 'jane@example.com' });

​            transaction.oncomplete = function() {
​                console.log('Transaction completed: data added.');
​            };

​            transaction.onerror = function(event) {
​                console.error('Transaction failed:', event);
​            };

​            // 查询数据
​            var queryTransaction = db.transaction(['customers']);
​            var queryObjectStore = queryTransaction.objectStore('customers');
​            var query = queryObjectStore.get(1);

​            query.onsuccess = function(event) {
​                console.log('Customer:', event.target.result);
​            };

​            // 更新数据
​            var updateTransaction = db.transaction(['customers'], 'readwrite');
​            var updateObjectStore = updateTransaction.objectStore('customers');
​            var updatedCustomer = { id: 1, name: 'John Smith', email: 'johnsmith@example.com' };

​            updateObjectStore.put(updatedCustomer);

​            updateTransaction.oncomplete = function() {
​                console.log('Transaction completed: data updated.');
​            };
​            };

​            // 错误处理
​            request.onerror = function(event) {
​            console.error('Database error:', event.target.error);
​            };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# web workers

js模型是同步的，其中的多线程编程是由主线程通过事件驱动并发实现的，只有网络io会有单独的线程并行执行

当执行耗时任务时，传统的js模型会阻塞主任务，因此提供web workders使得分配内核线程并行后台执行一些计算任务，特点：

  • web workers是独立的运行上下文，无法访问html的dom，只能通过主线程传递传递参数
  • 同样也无法访问本地磁盘，可以访问网络
  • 必须和主线程的脚本位置同源

# server-sent Event（sse）-单向流

可以使网页自动获得服务器的更新。原理上，浏览器和服务端创建一个单向流stream，客户端通过事件驱动感知stream事件，触发对应的回调函数实现更新

# websocket-双向流

提供了四个事件回调接口

  • onopen：建立连接是触发
  • onmessage ：收到消息时触发
  • onerror ：通信错误
  • onclose：关闭连接时触发

2个方法：

  • send：发送数据
  • close：结束链接

2个属性：

  • bufferedAmount：发送缓冲区的字节数
  • readyState：表示连接状态。
    • 0表示未建立
    • 1，已建立
    • 2正在关闭
    • 3已关闭

服务端可以使用库mod_pywebsocket 来实现服务端的websocket支持

# HTML插件

又叫辅助应用程序，是浏览器可以启动的程序通过 <object> 标签或者 <embed> 标签添加 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

<embed height="50" width="100" src="horse.mp3">使用embed标签嵌入网页的音频

<object height="50" width="100" data="horse.mp3"></object>同上 需要浏览器有播放音频的能力

对于音频和视频用<video>或<audio>这样浏览器内置的标签效果更好，但如果不支持这个标签也可以回退用<embed>

# <template>

<template>的内容是不会被渲染的，可以被js引用并渲染，适用于一些对象信息要被重复显示

# HTML DOM

是一种规范，使得js等编程语言可以读取修改html

# 方法

返回目标节点

  • getElementById() 返回带有指定 ID 的节点。
  • getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
  • getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 节点：
  • 创建节点
    • createAttribute() 创建属性节点。
    • createElement() 创建元素节点。
    • createTextNode() 创建文本节点。
  • 增删节点
    • appendChild() 把新的子节点添加到指定节点。
    • insertBefore() 在指定的子节点前面插入新的子节点。
    • replaceChild() 替换子节点。
    • removeChild() 删除子节点。
  • 获取节点
    • getAttributeNode（） 得到指定属性值得节点

属性：

  • getAttribute() 返回指定的属性值。
  • setAttribute() 把指定属性设置或修改为指定的值。

# 属性

指上面拿到的节点的属性，能够获取或设置的值

  • innerHTML：返回完整的HTML值|it1的内容：
  • nodeValue：文本节点的文本值，属性节点的属性值
  • nodeType：节点的类型，1元素、2属性、3文本、8注释、9文档

其他的一些样式

  • style：设置元素的样式对象。document.getElementById("p2").style.color="blue";

# 事件

事件也是节点的一个属性

鼠标事件，一次完整的点击为onmousedown->onmouseup->onclick：

  • onmouseout、onmouseleave: 鼠标移动到元素（前者冒泡，后者不冒泡）
  • onmouseover、onmouseout：鼠标移动离开元素（前者冒泡，后者不冒泡）
  • onmousedown：鼠标点下按钮
  • onmouseup：释放鼠标按钮
  • onclick：点击完成
  • oncontextmenu：鼠标右键点击时
  • ondblclick：鼠标左键双击
  • onmousemove：鼠标在目标对象上时触发，只要在对象上有移动会连续触发，可以实现追踪鼠标位置

文本操作：

  • onfocus：输入框获取焦点时
  • onblur：输入框失去焦点
  • onchange：用户改变输入字段内容
  • oninput 元素获取用户输入时触发
  • onreset 表单重置时触发
  • onselect 用户选取文本时触发 (<input> 和 <textarea>)
  • onsubmit 表单提交时触发

键盘：

  • onkeydown 某个键盘按键被按下。
  • onkeypress 某个键盘按键被按下并松开。
  • onkeyup 某个键盘按键被松开。

剪贴板：

  • oncopy 该事件在用户拷贝元素内容时触发
  • oncut 该事件在用户剪切元素内容时触发
  • onpaste 该事件在用户粘贴元素内容时触发

框架对象：

  • onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
  • onscroll 当文档被滚动时发生的事件。
  • onload：用户进入网页
  • onunload：用户离开页面

拖动对象：

多媒体对象：

打印对象：

动画对象：

监听事件：

element.addEventListener("event", function, useCapture);//event不要加on前缀，useCapture为可选

useCapture:

  • false,默认，冒泡传递，内部元素事件先触发，在触发外部元素
  • true，捕获传递，外部元素事件先触发，在触发内部元素事件

该方法添加的事件不会覆盖已有的事件，可以多次添加事件

element.removeEventListener("mousemove", myFunction);移除事件监听

# 节点导航

对于节点列表可以用数组下标访问：document.getElementsByTagName("p")[2];

parentNode、firstChild 以及 lastChild，或者childNodes返回节点列表，用数组访问

上次更新: 2025/02/21, 14:57:10
css
JavaScript

← JavaScript→

最近更新
01
搭建ai知识助手
02-23
02
边缘检测
02-15
03
css
02-15
更多文章>
Theme by Vdoing | Copyright © 2025-2025 松垮垮 | MIT License | 蜀ICP备2025120453号 | 川公网安备51011202000997号