前端技术学习路线图-初阶-HTML

最新推荐文章于 2024-05-10 03:45:32 发布

倔强网友

最新推荐文章于 2024-05-10 03:45:32 发布

阅读量340

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_37328953/article/details/130494923

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

元素

根元素

<html></html>：说明该文件是用超文本标记语言来描述的，它们是超文本标记语言文件的开始标记和结尾标记。

<body></body>：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

元数据

<head></head>：这个标记符分别表示头部信息的开始，头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。

以下表格列出了HTML head元素：

标签	描述
	定义了文档的信息。
	定义了文档的标题。
	定义了页面链接标签的默认链接地址。
	定义了一个文档和外部资源之间的关系。
	定义了HTML文档中的元数据。

内容分区

<header></deader>：头部标签

<nav></nav>：导航标签

<article></article>：内容标签

<section></section>：定义文档某个区域

<aside></aside>：侧边栏标签

<footer></footer>：尾部标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIpY4GhH-1683204033024)(img/前端技术学习路线图-初阶-前端基础-内容分区.jpg)]

内容

标题标签

标题：单词head的缩写，意为头部、标题，一共有6个等级，定义方法如下：

<h1></h1>：定义一级标题
<h2></h2>：定义二级标题
<h3></h3>：定义三级标题
<h4></h4>：定义四级标题
<h5></h5>：定义五级标题
<h6></h6>：定义六级标题

标签语义：作为标题使用，并且根据重要性递减。

特点：

加了标题的文字会变粗，字号也会依次变大。
一个标题独占一行。

段落标签和换行标签

<p></p>：单词paragraph的缩写，意味段落。

标签语义：可以把HTML文档分割为若干段落。

特点：

文本在一个段落中会根据浏览去窗口大小自动换行。
段落和段落保有空隙。
双标签p，设置网页中文字段落，段落里面只能嵌套文字和图片等内容。

<br />：单词break的缩写，意为打断、换行。

标签语义：强制换行。

特点：

<br />是个单标签。
<br />标签只是简单地开始新的一行。

水平线标签

<hr />：可以设置一个水平线。

文本格式化标签

<strong></strong>：加粗字体

<b></b>：加粗字体

<em></em>：倾斜字体

<i></i>：倾斜字体

<del></del>：给字体添加删除线

<s></s>：给字体添加删除线

<ins></ins>：给字体添加下划线

<u></u>：给字体添加下划线

div和span标签

<div></div>：div是division的缩写，表示分割、分区。

<span></span>：span意为跨度、跨距。

特点：

<div>标签用来布局，但是一行只能放一个<div>。
<span>标签用来布局，一行上可以多个<span>。

图片和多媒体

图像标签

<img src="img.jpg" />

单词image的缩写，意为图像。

Src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

属性：简单理解就是属于这个图像标签的特性。

<img src="" alt="" title="" width="" height="" border=""/>

Alt：替换文本，图像不能显示时，用文字代替，有利于网站的SEO优化。

Title：提示文本，鼠标放到图像上，显示的文字。

Width：给图像设定宽度。

Height：给图像设定高度。

Border：给图像设定边框。

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
实际开发中，如果需要给图片设置宽高，建议只设置一个宽或者高，这样图片就会等比例缩放，如果两个都设置了可能会导致图片拉伸变形。

视频标签

<video src="images/video.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>

属性值	描述
scr	查找视频的路径。
autoplay	自动播放属性，高版本浏览器一般都是禁止自动播放的。
muted	静音播放，用来解决高版本浏览器不支持自动播放的问题。
controls	播放控件，不同的浏览器可能得到样式不一致，后期用控制。
loop	循环播放，可以实现一直循环播放视频。

注意事项和视频标签一样，插入的音频格式建议使用mp3几乎所有浏览器都支持。

<video src="images/video.mp4" autoplay muted controls loop></video>

属性的取值和属性一致，我们可以直接简写属性即可。
可以在视频标签之间添加提示文本，当浏览器不支持video标签的时候会提醒用户，浏览器不支持。
video标签我们一般建议引入的视频格式为mp4格式，因为mp4格式几乎所有浏览器都支持。

音频标签

<audio src="./images/music.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

属性值	描述
scr	查找音频的路径。
autoplay	自动播放属性，高版本浏览器一般都是禁止自动播放的。
controls	播放控件，不同的浏览器可能得到样式不一致，后期用js控制。
loop	循环播放，可以实现一致循环播放视频。

注意事项和视频标签一样，插入的音频格式建议使用mp3几乎所有浏览器都支持。

超链接

外部链接

<a href="https://www.baidu.com/"target="_blank">百度</a>

标签用于定义超链接，作用是从一个页面链接到另一个页面。

Href：用于指定链接目标的URL地址，(必须属性)当标签应用href属性时，它就具有了超链接的功能。

如果要跳转到在线的网址，地址中必须要有http://协议。

target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开的方式。

内部链接

<a href="***.html" target="_blank">***</a>

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。

空链接

<a href="#" target="_blank">***</a>

空连接：如果没有明确链接目标时，使用空链接。

下载链接

<a href="img.zip" >下载文件</a>

下载链接：地址链接的是文件，.exe或.zip等压缩包形式。

网页元素链接

<a href="https://www.baidu.com/" target="_blank"><img src="img.jpg"/></a>

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

锚链接

<a href="#个人生活">个人生活</a><br>
<h4 id="个人生活">个人生活</h4>

锚点链接：点击链接，可以快速定位到页面的某个位置。

在链接文本的href属性中，设置属性值为#名字，如个人生活；

找到目标位置标签，里面添加一个id属性=刚才的名字，如<h4 id="个人生活">个人生活</h4>。

假链接

<a href="javascript:;" >假链接</a>

假链接：只需要超链接a的手型样式，不需要任何跳转功能，就用javascript:;。

内嵌内容

iframe

iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

属性	值	描述
class	classname	规定元素的类名（classname）。
id	id	规定元素的特定id。
style	style_definition	规定元素的行内样式（inline style）。
title	text	规定元素的额外信息（可在工具提示中显示）。
frameborder	1，0	规定是否显示周围的边框。
height	pixels	规定的高度，作为一个普通元素的高度，建议在使用css设置。
width	pixels	规定的宽度，作为一个普通元素的宽度，建议在使用css设置。
name	name	规定的名称，window.frames[name]时专用的属性。
scrolling	yes，no，auto	规定是否在中显示滚动条。
src	URL	规定在中显示的文档的URL，可以是页面地址，也可以是图片的地址。
srcdoc	HTML_code	规定页面中的 HTML 内容显示在中。
sandbox	allow-forms，allow-same-origin，allow-scripts，allow-top-navigation	对的内容定义一系列额外的限制。

优点：

页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用。
可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息。
重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度。
iframe可以解决第三方内容加载缓慢的问题。

缺点：

会产生很多页面，不容易管理。
iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页。
iframe兼容性较差。
iframe有一定的安全风险。
iframe会阻塞主页面的Onload事件。

iframe和老版本的frame的区别：

frame不能脱离frameSet单独使用，iframe可以。
frame不能放在body中, iframe可以。
嵌套在frameSet中的iframe必需放在body中。
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
iframe 可以在表格中使用, frame 则不行.
HTML5支持iframe, 不支持frame
frame几乎废弃, iframe老当益壮。
frame和iframe实现功能基本相同, 不过iframe更灵活. frame是整个页面的框架, iframe是内嵌的网页元素。

iframe.contentWindow, 获取iframe的window对象

iframe.contentDocument, 获取iframe的document对象

这两个API只是DOM节点提供的方式(即getELement系列对象)

let iframe = document.getElementById("iframe1");
let iwindow = iframe.contentWindow;
let idoc = iwindow.document;
       console.log("window",iwindow);//获取iframe的window对象
       console.log("document",idoc);  //获取iframe的document
       console.log("html",idoc.documentElement);//获取iframe的html
       console.log("head",idoc.head);  //获取head
       console.log("body",idoc.body);  //获取body

另外更简单的方式是，结合Name属性，通过window提供的frames获取。

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

同理，在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取。

window.parent，获取上一级的window对象，如果还是iframe则是该iframe的window对象。
window.top，获取最顶级容器的window对象，即，就是你打开页面的文档。
window.self，返回自身window的引用。可以理解 window===window.self。

object

HTML <object> 元素（或者称作HTML嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

属性	描述
data	一个合法的 URL 作为资源的地址，，需要为 data 和 type 中至少一个设置值。
form	对象元素关联的 form 元素（属于的 form）。取值必须是同一文档下的一个元素的 ID。
height	资源显示的高度，单位是 CSS 像素，作为一个普通元素的高度，建议在使用css设置。
width	资源显示的宽度，单位是 CSS 像素，作为一个普通元素的宽度，建议在使用css设置。
name	浏览上下文名称（HTML5），或者控件名称（HTML 4）。
type	data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。
usemap	指向一个元素的 hash-name；格式为‘#’加 map 元素 name 元素的值。

脚本

script

HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

<script src="" crossorigin="anonymous"></script>

属性	描述
async	对于普通脚本，如果存在 `async` 属性，那么普通脚本会被并行请求，并尽快解析和执行。
crossorigin	那些没有通过标准CORS (en-US)检查的正常`script` 元素传递最少的信息到 `window.onerror`。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。
defer	这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 `DOMContentLoaded` 事件前执行。有 `defer` 属性的脚本会阻止 `DOMContentLoaded` 事件，直到脚本被加载并且解析完成。如果缺少 `src` 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。`defer` 属性对模块脚本没有作用 —— 他们默认 defer。
integrity	包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。
nomodule	这个布尔属性被设置来标明这个脚本在支持 ES2015 modules 的浏览器中不执行。 — 实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。
src	这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。
type	该属性定义 script 元素包含或`src`引用的脚本语言。
text	和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到 DOM 之后，此属性被解析为可执行代码。

canvas

<canvas> 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

属性	描述
height	该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。
width	该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

表格

表格标签的作用

表格主要用于显示数据、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

<table>
    <tr>
        <td></td>
    </tr>
</table>

表格的基本语法

<table></table>是用于定义表格的标签。
<tr></tr>是用于定义表格中的行，必须嵌套在
标签中。
<td></td>是用于定义表格中的单元格，必须嵌套在标签中。
字母td指表格中的数据，即单元格的内容。

表头单元格标签

<table>
    <tr>
        <th></th>
    </tr>
</table>

<th></th>标签表示HTML表格的表头部分，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

表格属性

<table align="center" border="1" cellpadding="0" cellspacing="0" width="300" height="100"></table>

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或" "	规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认为1像素。
cellspacing	像素值	规定单元格之间的空白，默认为0像素。
width	像素值或百分比	规定表格的宽度。
height	像素值或百分比	规定表格的高度。
rules	all	取值为all，就可以实现细线表格样式，后期用css实现

表格结构标签

<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

<thead></thead>：用于定义表格的头部。内部必须拥有标签。一般位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在
标签中。
因为浏览器解析table表格的时候是一行一行的解析的，建议将tfoot放在tbody之前，以便浏览器可以在所有数据行接收完成之前显示表尾。
caption表格标题，实际开发中不使用。

合并单元格

<td colspan="2"></td>
<td rowspan="2"></td>

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

合并单元格三部曲：

先确定是跨行还是跨列合并。
找到目标单元格，写上合并方式=合并的单元格数量，如。
删除多余的单元格。

表单

在HTML中，一个完整的表单通常由表单域、表单控件(也成为表单元素)和提示信息3个部分组成

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集与传递。

<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称" ></form>

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

input输入表单元素

<input>标签用于收集用户信息。

在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式。

<input type="属性值">

标签为单标签。

type属性设置不同的属性值用来指定不同的控件类型。

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送给服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

文件域file有提交文件的功能，但是该控件目前只能上传一个文件，H5可以设置multiple属性实现上传多个文件的功能。

除type属性外，标签还有其他很多属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符最大长度
placeholder	由用户自定义	H5新增的占位符，只有提示作用，不能获取值
reset	reset	表单初始化，表单提交信息后，清空刚才输入的内容

name和value是每个表单元素都有的属性值，主要给后台人员使用。

name表单元素的名字，要求单选按钮和复选框要有相同的name值。

checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。

maxlength是用户可以在表单元素输入的最大字符，一般较少使用。

placeholder：如果表单设置了value的默认值，那么占位符placeholder无效。

label标签

<label>标签为input元素定义标签。

<label>标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或选择对应的表单元素上，用来增加用户体验。

<label for="text">用户名：</label>
<input type="text" id="text">

核心：标签的for属性应当与相关元素的id属性相同。

select下拉表单元素

<select>标签控件定义下拉列表。

<select >
    <option selected="selected">请选择</option>
    <option >安徽</option>
    <option >广东</option>
    <option >浙江</option>
     <option >福建</option>
</select>

<select>中至少包含一对<option>。

在中定义selected="selected"时，当前项即为默认选中项。

textarea文本域元素

使用场景：当用户输入的内容较多的情况下，使用标签。

在表单元素中，标签是用于定义多行文本输入的控件。

<textarea cols="30" rows="10">今日反馈</textarea>

通过标签可以轻松地创建多行文本输入框。

cols=“每行中的字符数”，rows=“显示的行数”。

属性

常用属性

属性	值	描述
class	classname	规定元素的类名（classname）。
id	id	规定元素的特定id。
style	style_definition	规定元素的行内样式（inline style）。
title	text	规定元素的额外信息（可在工具提示中显示）。

全局属性

属性	描述
accesskey	提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。
autocapitalize	控制用户的文本输入是否和如何自动大写。
contenteditable	一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件（widget）以允许编辑。
data-*	一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本 (一般指 JavaScript) 与 HTML 之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 `HTMLElement` 接口来访问。 `HTMLElement.dataset` 属性可以访问它们。
dir	一个指示元素中文本方向的枚举属性。
draggable	一种枚举属性，指示是否可以使用 Drag and Drop API (en-US) 拖动元素。
dropzone	枚举属性，指示可以使用 Drag and Drop API (en-US) 在元素上删除哪些类型的内容。
hidden	布尔属性表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容
inputmode	向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于元素，但在`contenteditable`模式下可用于任何元素。
is	允许您指定标准 HTML 元素应该像已注册的自定义内置元素一样。
itemid	项的唯一全局标识符。
itemprop	用于向项添加属性。每个 HTML 元素都可以指定一个 itemprop 属性，其中一个 itemprop 由一个名称和值对组成。
itemref	只有不是具有`itemscope`属性的元素的后代，它的属性才可以与使用`itemref`项目相关联。它提供了元素 ID 列表（而不是`itemids`）以及文档中其他位置的其他属性。
itemscope	`itemscope`（通常）与`itemtype`一起使用，以指定包含在关于特定项目代码块中的 HTML。 `itemscope`创建 Item 并定义与之关联的`itemtype`的范围。 `itemtype`是描述项及其属性上下文的词汇表（例如schema.org）的有效 URL。
itemtype	指定将用于在数据结构中定义`itemprops`（项属性）的词汇表的 URL。 `itemscope`用于设置数据结构中按`itemtype`设置的词汇表的生效范围。
lang	帮助定义元素的语言：不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成)，格式在 Tags for Identifying Languages (BCP47) 中定义。xml:lang 优先于它。
part	元素的部件名称的空格分隔列表。Part 名称允许 CSS 通过`::part()` 伪元素选择和设置阴影关联树中的特定元素。
slot	将 shadow DOM 阴影关联树中的一个沟槽分配给一个元素：具有slot属性的元素被分配给由元素创建的沟槽，其 name 属性的值与 slot 属性的值匹配。
spellcheck	枚举属性定义是否可以检查元素是否存在拼写错误。
tabindex	整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。
translate	枚举属性，用于指定在页面本地化时是否转换元素的属性值及其`Text` 节点子节点的值，或者是否保持它们不变。

事件

窗口事件

load事件

load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

该事件不可取消，也不会冒泡。

所有以 load 命名的事件都不会传递到 Window 上，即使 bubbles 初始化为 true。要在 window 上捕获 load 事件，相关的 load 事件必须直接绑定到 window 上。

当主文档加载完成时，load 事件将在 window 上触发，但其有两个被修改的属性：target 为 document，以及 path 为 undefined。这是由遗留的一致性问题导致的。

在如 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

addEventListener('load', (event) => {});

onload = (event) => { };

DOMContentLoaded事件

DOM完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。

监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件。

document.addEventListener('DOMContentLoaded', function () {
	// 执行的操作
})

scroll事件

滚动条在滚动的时候持续触发的事件。

监听整个页面滚动：

给 window 或 document 添加 scroll 事件。

window.addEventListener('scroll', function () {
    // 执行的操作
})

监听某个元素的内部滚动直接给某个元素加即可。

window.addEventListener('scroll', function () {
    // 必须写到里面
    const n = document.documentElement.scrollTop
    // 得到是什么数据   数字型 不带单位
    // console.log(n)
})

scrollLeft和scrollTop （属性）

获取被卷去的大小。
获取元素内容往左、往上滚出去看不到的距离。
这两个值是可读写的。

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素。

scrollTo()

Element 的 scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

scrollTo(x-coord, y-coord)
scrollTo(options)

参数：

x-coord：是你想要显示在左上角的元素沿水平轴的像素。
y-coord：是你想要显示在左上角的元素沿垂直轴的像素。
options：包含以下参数的对象：
1. top：指定沿 Y 轴滚动窗口或元素的像素数。
2. left：指定沿 X 轴滚动窗口或元素的像素数。
3. behavior：smooth 表示平滑滚动并产生过渡效果、instant 表示滚动会直接跳转到目标位置，没有过渡效果。auto 或缺省值表示浏览器会自动选择滚动时的过渡效果。

resize事件

文档视图调整大小时会触发 resize 事件。

检测屏幕的宽度：

window.addEventListener('resize', function () {
    console.log(document.documentElement.clientWidth)
})

获取宽高：

获取元素的可见部分宽高（不包含边框，margin，滚动条等）。
clientWidth和clientHeight。

Window.open()

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

strUrl === 要在新打开的窗口中加载的 URL。

strWindowName === 新窗口的名称。

strWindowFeatures === 一个可选参数，列出新窗口的特征 (大小，位置，滚动条等) 作为一个DOMString。

参数与返回值：

WindowObjectReference：打开的新窗口对象的引用。如果调用失败，返回值会是 null。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。
strUrl：新窗口需要载入的 url 地址。strUrl可以是 web 上的 html 页面也可以是图片文件或者其他任何浏览器支持的文件格式。
strWindowName：新窗口的名称。该字符串可以用来作为超链接或表单元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。
strWindowFeatures：可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性 (窗口功能和工具栏) 。字符串中不能包含任何空白字符，特性之间用逗号分隔开。

windows.create()

创建一个新的窗口。

当你创建一个窗口时，你可以：

加载一个或多个新的标签到该窗口中。
将一个现有窗口的。标签移动到新的窗口中。
设置窗口的大小和位置。
创建一个面板样式的窗口，它没有浏览器的默认样式（地址栏，工具栏等）。
设置窗口的多种属性，像是获得焦点或是为隐私窗口。

这是一个异步的方法返回一个 Promise。

let creating = browser.windows.create(
  createData            // optional object
)

参数：

createData：可选参数。
1. object。
2. url：可选参数。字符串或字符串数组。一个 URL 或都 URL 数组要在该窗口中打开成标签页的。完整的需要包括 scheme (像。http://www.google.com, not www.google.com). 相对路径将相对于该拓展中的当前页。默认为打开新标签页。
3. tabId：可选参数。
  - integer：如果设置了该值，将该 tab 从一个现有的窗口中移到新窗口中。
4. left：可选参数。
  - integer：窗口左边到屏幕左边缘的距离。如果没有设定，新窗口将按上一个焦点窗口定位水平位置。对于 panel 样式窗口，该值不起作用。
5. top：可选参数。窗口顶部到屏幕的顶部距离。如果没有设定，新窗口将按上一个焦点窗口定位垂直位置。对于 panel 样式窗口，该值不起作用。
6. width：可选参数。
  - integer：新窗口的宽度，包含框架。未设定则使用默认宽度。
7. height：可选参数。
  - integer：新窗口的高度，包含框架。未设定则使用默认高度。
8. focused：可选参数。
  - boolean：如果为true, 新窗口将获取焦点。否则新窗口当在后台打开并且当前焦点窗口继续保持焦点。默认为 true。
9. incognito：可选参数。
  - boolean：是否打开为一个隐私窗口。如果设定为隐私窗口并且引入了 tabId, 则 tabId 对应的标签必须是一个隐私标签— 即不能把一个不是隐私标签的标签页移动到隐私窗口中。
10. type：可选参数。一windows.CreateType (en-US) 值，表示创建窗口的类型。panel 或者popup 样式将打开一个没有默认浏览器样式的窗口 (地址栏，工具栏等）。
11. state：可选参数。一个 windows.WindowState 值，窗口的祲状态。最小化、最大化、全屏状态不能与left, top, width, or height属性一起使用。

返回值：

一个 Promise 其中传入一个包含新窗口细节的 windows.Window (en-US) 对象。这个windows.Window (en-US) 有自己的 tabs 属性集 ,而不像 windows.get() (en-US)返回的窗口对象和相似的 API, 如果传递了 populate 项其仅仅包含 tabs. 如果发生了错误 promise will be rejected with an error message。

表单事件

input事件

当一个<input>, <select>, 或 <textarea>元素的 value 被修改时，会触发 input 事件。

input 事件也适用于启用了 contenteditable 的元素，以及开启了 designMode 的任意元素。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5 规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 change 事件代替这些类型的元素。

每当元素的 value 改变，input 事件都会被触发。这与 change (en-US) 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

示例：

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}

change事件

当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

基于表单元素的类型和用户对元素的操作的不同，change 事件触发的时机也不同：

当 <input type="checkbox"> 元素被选中或取消选中时（通过点击或使用键盘）；
当 <input type="radio"> 元素被选中时（但不是取消选中时）；
当用户显式提交改变时（例如：通过鼠标点击了 <select> 中的一个下拉选项，通过 <input type="date"> 元素选择了一个日期，通过 <input type="file"> 元素上传了一个文件等）；
当标签的值被修改并且失去焦点后，但未提交时（例如：对<textarea>、 text、search、url、tel、email 或 password 类型的 `` 元素进行编辑后）。

addEventListener('change', (event) => {});

onchange = (event) => { };

键盘事件

Keydown事件

**keydown**事件触发于键盘按键按下的时候。

与keypress 事件不同的是，所有按键均会触发keydown事件，无论这些按键是否会产生字符值。

keydown 与 keyup 事件捕获了键盘按键的操作，而 keypress 反映了具体输入某个字符的值。比如，小写"a" 在keydown 和 keyup事件中输出的是大写 A 的 Unicode 编码 65，但是在keypress中输出的就是小写"a"的 Unicode 编码 97。大写 "A"在这些事件中输出的都是 Unicode 编码 65。

键盘事件只能由 <inputs>, <textarea> 以及任何具有 contentEditable 或 tabindex="-1"属性的组件触发。

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

keyup事件

keyup 事件在按键被松开时触发。

keydown 和 keyup 事件提供指出哪个键被按下的代码，而 keypress 指出哪些字符被输入。例如，小写字母“a”在 keydown 和 keyup 时会被报告为 65，但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。

eventTarget.addEventListener("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

鼠标事件

MouseEvent 接口指用户与指针设备（如鼠标）交互时发生的事件。使用此接口的常见事件包括：click、dblclick、mouseup、mousedown。

MouseEvent 派生自 UIEvent，UIEvent 派生自 Event。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容性，但是应该使用 MouseEvent() 构造函数创建一个 MouseEvent 对象。

click事件

当定点设备的按钮（通常是鼠标的主键）在一个元素上被按下和放开时，click 事件就会被触发。

如果在一个元素上按下按钮，而将指针移到元素外再释放按钮，则在包含这两个元素的最具体的父级元素上触发事件。

click 事件会在 mousedown 和 mouseup 事件依次触发后触发。

addEventListener('click', (event) => {});

onclick = (event) => { };

dblclick事件

在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时，将触发 dblclick 事件。

mouseup事件

当指针在元素中时， mouseup事件在指针设备（如鼠标或触摸板）按钮放开时触发。mouseup 事件与 mousedown 事件相反。

mousedown事件

mousedown 事件在指针设备按钮按下时触发。

mousemove事件

当指针设备 ( 通常指鼠标 ) 在元素上移动时，mousemove 事件被触发。

mouseenter事件

当一个定点设备（通常指鼠标）第一次移动到触发事件元素中的激活区域时，mouseenter 事件在该 Element 中触发。

addEventListener('mouseenter', (event) => {});

onmouseenter = (event) => { };

mouseleave事件

mouseleave 事件在定点设备（通常是鼠标）的指针移出某个元素时被触发。

mouseleave 和 mouseout 是相似的，但是两者的不同在于 mouseleave 不会冒泡而 mouseout 会冒泡。这意味着当指针离开元素及其所有后代时，会触发 mouseleave，而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，会触发 mouseout。

addEventListener('mouseleave', (event) => {});

onmouseleave = (event) => { };

mouseout事件

当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，mouseout 事件被触发。当指针从一个元素移入其子元素时，mouseout 也会被触发，因为子元素遮盖了父元素的可视区域。

多媒体事件

playing事件

playing 事件在播放准备开始时（之前被暂停或者由于数据缺乏被暂缓）被触发。

const video = document.querySelector('video');

video.addEventListener('playing', (event) => {
  console.log('Video is no longer paused');
});

const video = document.querySelector('video');

video.onplaying = (event) => {
  console.log('Video is no longer paused.');
};

waiting事件

waiting 事件在由于暂时缺乏数据而停止播放时被触发。

此事件不可取消，也不会冒泡。

addEventListener("waiting", (event) => {});

onwaiting = (event) => {};

seeking事件

seeking事件在查找操作开始时触发，这意味着查找属性已更改为true，并且媒体正在查找新位置。

此事件不可取消，也不会冒泡。

addEventListener("seeking", (event) => {});

onseeking = (event) => {};

seeked事件

当查找操作完成，当前播放位置发生变化，并且查找属性更改为false时，将触发seeked事件。

此事件不可取消，也不会冒泡。

addEventListener("seeked", (event) => {});

onseeked = (event) => {};

ended事件

ended 事件会在媒体回放或者媒体流因达到了媒体的未尾或者没有更多可用的数据而停止时被触发。

该事件会在回放或媒体文件播放结束时，在媒体元素（ <audio> 和 <vodio> ）上触发。

const video = document.querySelector('video');

video.addEventListener('ended', (event) => {
  console.log('Video stopped either because 1) it was over, ' +
      'or 2) no further data is available.');
});

const video = document.querySelector('video');

video.onended = (event) => {
  console.log('Video stopped either because 1) it was over, ' +
      'or 2) no further data is available.');
};

loadedmetadata事件

GlobalEventHandlers mixin 的 onloadedmetadata 属性是处理loadedmetadata事件的事件处理器。

loadedmetadata事件在元数据（metadata）被加载完成后触发。

element.onloadedmetadata = handlerFunction;
var handlerFunction = element.onloadedmetadata;

handlerFunction应当是null或是由JavaScript 函数声明的事件 handler。

loadeddata事件

loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。

若在移动/平板设备的浏览器设置中开启了流量节省（data-saver）模式，该事件则不会被触发。

const video = document.querySelector('video');

video.addEventListener('loadeddata', (event) => {
  console.log('Yay! readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for first time.');
});

const video = document.querySelector('video');

video.onloadeddata = (event) => {
  console.log('Yay! readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for first time.');
};

canplay事件

canplay 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。

const video = document.querySelector('video');

video.addEventListener('canplay', (event) => {
  console.log('Video can start, but not sure it will play through.');
});

const video = document.querySelector('video');

video.oncanplay = (event) => {
  console.log('Video can start, but not sure it will play through.');
};

canplaythrough事件

canplaythrough 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。

const video = document.querySelector('video');

video.addEventListener('canplaythrough', (event) => {
  console.log('I think I can play through the entire ' +
      'video without ever having to stop to buffer.');
});

const video = document.querySelector('video');

video.oncanplaythrough = (event) => {
  console.log('I think I can play through the entire ' +
      'video without ever having to stop to buffer.');
};

durationchange事件

durationchange 事件会在 duration 属性更新时被触发。

const video = document.querySelector('video');

video.addEventListener('durationchange', (event) => {
  console.log('Not sure why, but the duration of the video has changed.');
});

const video = document.querySelector('video');

video.ondurationchange = (event) => {
  console.log('Not sure why, but the duration of the video has changed.');
};

timeupdate事件

当currentTime更新时会触发timeupdate事件。

这个事件的触发频率由系统决定，但是会保证每秒触发 4-66 次（前提是每次事件处理不会超过 250ms）。鼓励用户代理根据系统的负载和处理事件的平均成本来改变事件的频率，保证 UI 更新不会影响视频的解码。

const video = document.querySelector('video');

video.addEventListener('timeupdate', (event) => {
  console.log('The currentTime attribute has been updated. Again.');
});

const video = document.querySelector('video');

video.ontimeupdate = (event) => {
  console.log('The currentTime attribute has been updated. Again.');
};

play事件

当 paused 属性由 true 转换为 false 时触发 play 事件，事件触发原因一般为 play() 方法调用，或者 autoplay 标签设置。

const video = document.querySelector('video');

video.addEventListener('play', (event) => {
  console.log('The Boolean paused property is now false. Either the ' +
  'play() method was called or the autoplay attribute was toggled.');
});

const video = document.querySelector('video');

video.onplay = (event) => {
  console.log('The Boolean paused property is now false. Either the ' +
  'play() method was called or the autoplay attribute was toggled.');
};

pause事件

当暂停媒体播放时 pause 事件触发，并且媒体进入暂停状态，最常见的是通过pause()方法来触发。当pause() 触发时pause状态只改变 1 次，并且媒体的pause变成 true。

const video = document.querySelector('video');

video.addEventListener('pause', (event) => {
  console.log('The Boolean paused property is now true. Either the ' +
  'pause() method was called or the autoplay attribute was toggled.');
});

const video = document.querySelector('video');

video.onpause = (event) => {
  console.log('The Boolean paused property is now true. Either the ' +
  'pause() method was called or the autoplay attribute was toggled.');
};

ratechange事件

当播放速率发生变化时，将触发 ratecchange 事件。

此事件不可取消，也不会冒泡。

addEventListener("ratechange", (event) => {});

onratechange = (event) => {};

volumechange事件

volumechange 事件在音量改变时

addEventListener("volumechange", (event) => {});

onvolumechange = (event) => {};

suspend事件

suspend 事件当媒体数据加载被挂起时触发。

addEventListener("suspend", (event) => {});

onsuspend = (event) => {};

emptied事件

当媒体变为空时，将触发 emptied 事件;例如，如果媒体已经加载(或部分加载)，并且调用load()方法重新加载它，则发送此事件。

此事件不可取消，也不会冒泡。

addEventListener("emptied", (event) => {});

onemptied = (event) => {};

stalled事件

当用户代理试图获取媒体数据，但数据意外地没有到来时，会触发 stopped 事件。

此事件不可取消，也不会冒泡。

addEventListener("stalled", (event) => {});

onstalled = (event) => {};

编码

URL编码

URL 编码将字符转换为可通过因特网传输的格式。

URL 只能使用 ASCII 字符集通过因特网进行发送。

由于 URL 通常包含 ASCII 集之外的字符，因此必须将 URL 转换为有效的 ASCII 格式。

URL 编码使用后跟十六进制数字的 “%” 替代不安全的 ASCII 字符。

URL 不能包含空格。URL 编码通常使用加号（+）或 %20 替代空格。

语言代码

HTML 语言代码参考手册

字符集

‘pause() method was called or the autoplay attribute was toggled.’);
};


#### ratechange事件

当播放速率发生变化时，将触发 `ratecchange` 事件。

此事件不可取消，也不会冒泡。

```js
addEventListener("ratechange", (event) => {});

onratechange = (event) => {};

volumechange事件

volumechange 事件在音量改变时

addEventListener("volumechange", (event) => {});

onvolumechange = (event) => {};

suspend事件

suspend 事件当媒体数据加载被挂起时触发。

addEventListener("suspend", (event) => {});

onsuspend = (event) => {};

emptied事件

当媒体变为空时，将触发 emptied 事件;例如，如果媒体已经加载(或部分加载)，并且调用load()方法重新加载它，则发送此事件。

此事件不可取消，也不会冒泡。

addEventListener("emptied", (event) => {});

onemptied = (event) => {};

stalled事件

当用户代理试图获取媒体数据，但数据意外地没有到来时，会触发 stopped 事件。

此事件不可取消，也不会冒泡。

addEventListener("stalled", (event) => {});

onstalled = (event) => {};

编码

URL编码

URL 编码将字符转换为可通过因特网传输的格式。

URL 只能使用 ASCII 字符集通过因特网进行发送。

由于 URL 通常包含 ASCII 集之外的字符，因此必须将 URL 转换为有效的 ASCII 格式。

URL 编码使用后跟十六进制数字的 “%” 替代不安全的 ASCII 字符。

URL 不能包含空格。URL 编码通常使用加号（+）或 %20 替代空格。

语言代码

HTML 语言代码参考手册

字符集

常见的 HTML 字符集

倔强网友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端技术学习路线图-初阶-HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
复制链接

扫一扫

专栏目录