HTML基础汇总篇

心心心
192 阅读21分钟

前言

html基础知识持续记录中...

HTML简介

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页title</title>
</head>
<body>
    Hello！
</body>
</html>
  • DOCTYPE 作用
    • 全拼document type 是一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义（DTD）来解析文档
    • <!DOCTYE> 一般指定了之后会以“标准模式”进行文档解析，否则就以“兼容模式”进行解析。
      • 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。
      • 而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站能正常访问。
  • html骨架标签总结
标签名定义说明
<html></html>HTML标签页面中最大的标签，我们成为 根标签
<head></head> 文档的头部注意在head标签中我们必须要设置的标签是title
<titile></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body> 文档的主体元素包含文档的所有内容，页面内容 基本都是放到body里面的
  • <title>标签 ，网页的标题
  • <meta>标签，描述性标签，用来描述网页的信息，一般用来做SEO（搜索引擎优化）
  • 字符集 charset="UTF-8"
    • 计算机需要对字符编码，utf-8是目前最常用的字符集编码方式，基本包含全世界所有国家需要用到的字符

语义化标签

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰

优点

  • 用正确的标签做正确的事情
  • HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO(搜索引擎优化的缩写)
    • 通过SEO优化，网站可以更容易被搜索引擎索引和理解，提高在搜索结果中的排名，从而增加网站流量和曝光度
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

相关参考：rainylog.com/post/ife-no…

script 标签中属性 async 和 defer 的区别，es6新增module属性

  • script 会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML
  • async script：解析 HTML 的过程中会进行脚本的异步下载，下载成功后立马执行，因此有可能会阻断 HTML 的解析。多个脚本的执行顺序无法保证。
  • defer script：也是异步下载脚步，加载完成后，如果此时 HTML 还没有解析完，浏览器不会暂停解析去执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

相关参考：图解 script 标签中的 async 和 defer 属性

  • 浏览器加载es6模块，需要用script标签，但要加入type="module"属性（加上后浏览器便知道这是个es6模块）
    • 浏览器对于带有type="module"的script，都是异步加载，等同于defer属性，也会按照顺序依次执行

SGML、HTML、XML 和 XHTML的区别

  • SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
  • HTML 是超文本标记语言，主要是用于规定怎样显示网页。
  • XML 是可扩展标记语言，是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
  • XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等

前端SEO

  • 合理的 title、description、keywords：搜索对这三项的权重逐个减小，title 强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
  • 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
  • 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取
  • 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
  • 少用 iframe：搜索引擎不会抓取 iframe 中的内容
  • 非装饰性图片必须加 alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

HTML5 有哪些新特性、移除了哪些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像、位置、存储、多任务等功能的增加。

新增的：

  • 绘图 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 、sessionStorage
  • 语义化更好的内容元素，如：header、article、nav、section、footer等
  • 表单控件 calendar、date、time、email、url、search 等
  • 新的技术 webworker、websocket
  • 新的文档属性 document.visibilityState

移除的：

  • 纯表现的元素：basefont、big、center、s、tt、u
  • 对可用性产生负面影响的元素：frame、frameset、noframes

Canvas 和 SVG 有什么区别

  • Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况
  • SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真

对浏览器内核的理解

主要分为两部分：渲染引擎和JS引擎。

  • 渲染引擎：其职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 HTML、 XML 文档及图片，它也可以借助一些浏览器扩展插件显示其他类型数据，如：使用PDF阅读器插件可以显示 PDF 格式。
  • JS引擎：解析和执行 JavaScript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明显，后来JS引擎越来越独立，内核就倾向于只指渲染引擎了。

文档的预解析

文档的预解析是浏览器在解析 HTML 文档之前的一个阶段，它用于提前分析文档的结构和元素，以便在后续的解析过程中进行优化和加速。🔍⚡️

预解析的过程包括以下几个主要步骤：

  1. 去除无效字符：浏览器会去除文档中的无效字符，如多余的空格和换行符。
  2. 创建文档对象模型（DOM）：浏览器会根据 HTML 文档的标记构建一棵 DOM 树，表示文档的结构和元素之间的关系。
  3. 预加载资源：浏览器会发现文档中的外部资源（如 CSS 和 JavaScript 文件），并开始预加载这些资源，以提升后续渲染的效率。
  4. 解析 HTML 标记：浏览器会解析 HTML 文档的标记，识别出各个元素和其属性，并建立对应的 DOM 节点。
  5. 构建渲染树：浏览器根据解析得到的 DOM 树和 CSS 样式信息构建渲染树，用于后续的页面布局和绘制过程。

通过进行预解析，浏览器可以在加载和渲染页面时更有效地处理文档结构，以提高页面的加载速度和用户体验。🚀🌐

浏览器的渲染原理

简记： 生成DOM树 --> 生成CSS规则树 --> 构建渲染树 --> 布局 --> 绘制

浏览器的渲染原理可以被简化为以下几个主要步骤：

  1. 解析 HTML：浏览器从服务器获取 HTML 文件后，会通过解析器将 HTML 代码解析成一个称为文档对象模型（DOM）的树状结构。DOM 表示了文档的结构和元素之间的关系。
  2. 解析 CSS：浏览器会解析 CSS 文件，构建一个称为层叠样式表（CSSOM）的树状结构。CSSOM 包含了每个元素的样式信息，包括颜色、尺寸、位置等。
  3. 构建渲染树：浏览器将 DOM 树和 CSSOM 树组合在一起，构建一个称为渲染树（Render Tree）的树状结构。渲染树只包含需要显示的元素和其样式信息，隐藏的元素不包含在渲染树中。
  4. 布局（回流）：浏览器根据渲染树计算出每个元素在屏幕中的位置和大小，这个过程称为布局或回流（Layout or Reflow）。浏览器需要考虑盒模型、浮动、定位、文本流等因素来确定元素的最终布局。
  5. 绘制：浏览器将渲染树中的每个元素转换成屏幕上的实际像素，这个过程称为绘制（Painting）。绘制使用图形库将元素绘制成可见的矩形、文本、边框等。
  6. 合成与显示：浏览器将绘制的结果合成为一帧，并将帧发送到显示设备进行显示。这个过程通常由操作系统和图形处理器完成。

整个渲染过程是一个连续的流程，不同的步骤可能会交叉执行或并行执行，以提高渲染的效率。浏览器还会对渲染过程进行优化，例如使用异步加载、缓存、页面预渲染等技术来提升用户体验和页面加载速度。🎨💻

回流和重绘

  • 回流：当页面中的元素发生了尺寸、位置、布局等改变时，浏览器需要重新计算元素的几何属性和页面的布局，然后重新渲染受到影响的部分。这个过程是相对昂贵的，因为它涉及到重新计算和重新布局整个页面或部分页面，会消耗较多的时间和计算资源。
  • 重绘：当页面中的元素的外观发生改变但不影响其布局时，如颜色、背景等属性的改变，浏览器只需要重新绘制受到影响的部分，而不需要重新计算元素的几何属性或页面的布局。相对于回流，重绘的开销较小，因为它只需要对受影响的元素进行重新绘制。

注意： 回流确实会导致重绘，但是重绘并不一定会引发回流。

当元素的几何属性发生变化时（例如宽度、高度、位置），浏览器会触发回流，然后将受影响的元素进行重排布，最终再进行重绘，以显示出更新后的元素。

然而，重绘可能发生在没有触发回流的情况下。当仅仅改变了元素的外观样式，如颜色、背景色等，并没有引发对元素布局的改变时，浏览器只会进行重绘，而不会重新计算元素的几何属性。

所以你可以认为回流包含了重绘的过程，但重绘不一定伴随着回流。请记住，回流是相对较昂贵的操作，因为它需要触发布局的重新计算，而重绘在性能上开销相对较小。

如何减少回流？

  • 使用 transform 代替 top

  • 使用 CSS 动画代替 JavaScript 动画：浏览器可以优化 CSS 动画以减少回流的次数，而使用 JavaScript 动画会导致频繁的回流。

  • 不要使用 table 布局，可能很小的一个改动会造成整个 table 的重新布局

  • 避免频繁访问布局信息：频繁地读取布局信息（如 offsetTop、offsetLeft、offsetWidth、offsetHeight、clientWidth、clientHeight、getComputedStyle 等）会导致浏览器触发回流，尽量减少对布局属性的访问。

  • 不要一条一条的修改样式，可以预先定义好 class，然后修改 DOM 的 className

  • 使用 absolute 或 fixed 使元素脱离文档流

  • 使用 CSS3 的 Flexbox 布局：Flexbox 布局可以减少元素的依赖关系，从而减少回流的次数

cookie

当你访问一个网站时，服务器会将一些小型的文本文件存储在你的计算机或设备上，这些文件被称为cookie。客户端的cookie是由服务器通过HTTP响应报文中的Set-Cookie头部字段发送给浏览器的，并存储在浏览器的cookie文件夹中。

客户端的cookie主要有以下几个特点和用途：

  1. 数据存储：cookie可以存储少量的数据，通常是以键值对的形式保存的。这些数据可以包含用户的个人偏好、会话信息、购物车内容等。每个cookie都有一个名称和相应的值。
  2. 网站认证：通过在cookie中存储用户的身份认证令牌或会话标识，网站可以识别用户并维持用户的登录状态。这样，在用户访问网站的不同页面时，服务器可以验证cookie中的身份信息，无需用户每次都重新输入用户名和密码。
  3. 状态管理：cookie可以用于跟踪用户在网站上的活动和状态。例如，在购物网站上，可以使用cookie来存储用户选择的商品和购物车内容，以便在用户浏览其他页面时保持购物状态。
  4. 跨站请求：在每次HTTP请求中，浏览器会自动将与当前域相关的cookie信息附加到请求头部，并发送给服务器，以便服务器能够根据相应的cookie做出响应。

需要注意的是，客户端的cookie有一些限制和安全性问题：

  • 容量限制：每个域名下的cookie数量和总大小都是有限制的，通常限制为几百个到几千个字节。超过限制时，旧的cookie会被丢弃。
  • 安全性问题：cookie是存储在用户设备上的文本文件，因此存在被恶意程序或攻击者窃取或篡改的风险。为了增强安全性，可以通过设置Secure标志（仅通过HTTPS传输）和HttpOnly标志（限制通过JavaScript访问）来保护cookie。

总而言之，客户端的cookie是一种简单而实用的机制，用于在浏览器和服务器之间传递和存储少量的用户数据，并实现网站认证、状态管理等功能。

sessionStorage、localStorage和cookie的区别

sessionStorage、localStorage和cookie是用于在客户端存储数据的三种不同机制。它们在以下几个方面有所区别：

  1. 数据存储位置:

    • sessionStorage: 数据存储在特定于会话（session）的临时存储区域中。当用户关闭浏览器标签页或窗口时，存储的数据将被删除。
    • localStorage: 数据存储在客户端的本地存储区域中。即使用户关闭浏览器标签页或窗口，数据仍然保留在本地，下次访问网站时仍然可用。
    • cookie: 数据存储在浏览器的 cookie 中，与每个请求一起发送到服务器。可以设置 cookie 的过期时间，如果未设置过期时间，默认为会话结束后删除。

  2. 存储容量限制:

    • sessionStorage和localStorage: 通常具有较大的存储容量限制（一般至少为5MB），可以存储较大量的数据。
    • cookie: 存储容量较小，通常限制为4KB左右。

  3. 数据访问权限:

    • sessionStorage和localStorage: 存储在这两个机制中的数据只能被访问它们所属的页面或同一域内的其他页面访问。
    • cookie: 可以设置cookie的作用域，允许其他子域或跨域访问。

  4. 数据传输：

    • sessionStorage和localStorage: 数据不会随着每个HTTP请求自动发送到服务器。
    • cookie: 每次HTTP请求都会自动发送相应的cookie到服务器。

  5. 安全性：

    • sessionStorage和localStorage: 由于数据存储在客户端，它们在安全性方面稍微优于cookie，但仍然可能受到一些安全威胁，如XSS（跨站脚本）攻击。
    • cookie: 由于cookie在每个请求中都会被发送到服务器，存在被窃取的风险。

总而言之，sessionStorage和localStorage提供了在客户端存储数据的更强大和灵活的机制，而cookie主要用于在客户端和服务器之间传递数据。具体使用哪种机制应根据需要和安全性要求来选择。

iframe的优缺点

优点：

  1. 页面嵌入：通过使用 <iframe>，可以将另一个网页嵌入到当前页面中。这对于展示来自其他网站的内容（如地图、社交媒体小部件、视频播放器等）非常有用。
  2. 独立性：由于 <iframe> 内容具有独立的文档结构，CSS 样式和脚本代码，因此可以避免与当前页面的冲突。这使得开发人员可以在不影响宿主页面的情况下自由地开发和定制嵌入的内容。
  3. 即时加载：<iframe> 可以同时加载不同源的内容，并在后台异步加载。这意味着页面加载时可以立即显示其他内容，而不必等待 <iframe> 中的内容加载完成。

缺点：

  1. 安全性：由于 <iframe> 允许加载来自不同源的内容，存在安全风险。恶意网站可以利用 <iframe> 将恶意代码注入到宿主页面中，从而进行各种攻击（如点击劫持、跨站脚本攻击等）。因此，需要谨慎使用 <iframe> 并采取安全措施，如确保仅加载可信的内容。
  2. SEO 不友好：搜索引擎优化（SEO）是指使网站在搜索引擎结果中获得更高排名的优化技术。网站内容在 <iframe> 中嵌入时，搜索引擎可能无法正确解析和索引内部内容，从而影响搜索结果的可见性。
  3. 宽高限制：<iframe> 元素需要指定固定的宽度和高度。如果内容的尺寸发生变化，可能会导致 <iframe> 大小不匹配，造成显示问题。
  4. 用户体验：当 <iframe> 中的内容在移动设备上显示时，可能出现缩放、滚动等问题，影响用户体验。

综上所述，虽然 <iframe> 具有灵活性和功能丰富的特点，但需要在安全性、SEO 和用户体验方面谨慎使用。将其用于合适的场景可以提供丰富的嵌入内容和功能。

# DOMContentLoaded 事件和 Load 事件的区别

DOMContentLoaded 事件和 load 事件是两个不同的事件，它们在页面加载过程中的不同阶段触发。

  • DOMContentLoaded 事件：当初始的 HTML 文档被完全加载和解析时触发。也就是说，当 DOM 树构建完成但不需要等待外部资源（如图片、样式表等）加载完毕时就会触发该事件。这表示页面的结构已经可用，可以进行 DOM 操作和访问页面的元素。
  • load 事件：当整个页面及其所有相关资源（如图片、样式表、脚本等）都加载完成后触发。这表示页面的所有内容（包括外部资源）已经准备就绪，可以进行全面的操作和交互。

因此，DOMContentLoaded 事件触发的时机要早于 load 事件，因为它不需要等待外部资源的加载。如果只需要在页面结构可用时执行某些操作，可以使用 DOMContentLoaded 事件。如果需要等待页面的所有资源准备就绪后再执行操作，可以使用 load 事件。

标签

排版标签总结

标签名定义说明
<hx></hx>标题标签作为标题使用，并且依据重要性递减(1——6)
<p></p> 段落标签可以把 HTML 文档分割为若干段落
<hr />水平线标签没啥可说的，就是一条线
<br />换行标签
<div></div>div标签用来布局的，但是现在一行只能放一个div
<span></span>span标签用来布局的，一行上可以放好多个span

文本格式标签

}_M)2H4}C(S$LUA7VQ95ZZA.png 区别：

b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。

图像标签img

<img src="图像URL" /> 属性

  • alt：图像不能展示时的替换文本
  • src：图像的路径
  • title：鼠标悬停时显示的内容
  • width：设置图像宽度

链接标签a

<a href="跳转目标" target="目标窗口的弹出方式"></a> href属性

  • href="javascript:void(0)"：禁止跳转
  • href="#"表示链接暂时为一个空链接

target属性

属性值说明
_top在整个窗口中打开
_parent在父窗口打开
_self默认，在当前框架下打开
_blank在新窗口打开
_framename在指定框架下打开

特殊字符

image.png

表格table

块级元素

<table>
    <caption>我是表格标题</caption>
    <colgroup>
        <col width="50%">
        <col width="50%">
    </colgroup>
    <thead>
        <tr>
            <th>序号</th>
            <th>名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>name</td>
        </tr>
    </tbody>
</table>
  • caption
    • caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
    • caption 标签必须紧随 table 标签之后。 image.png

<tr>标签： align属性：设置表格中每行的单元格内容水平对齐方式 ；

<td>标签：align属性：设置表格中每个单元格中的内容对齐方式

<th>标签：单元格标签，必须写在<tr>标签内，一般表格的第一行会使用<th>标签，使用<th>标签，单元格中的内容会加粗居中显示

合并单元格

  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数"

列表元素

  • 无序列表： ul,li
  • 有序列表： ol,li
  • 自定义列表：dl,dt,dd

表单元素

form

form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

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

可以在form标签上加onsubmit事件，阻止表单提交

参考：juejin.cn/post/684490…

input

    <input type="属性值" value="你好">
  • input 输入的意思
  • <input />标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型

image.png

  • type：类型
  • value：值
  • name：表单名字，用于区别不同的表单元素
  • checked：选中状态

H5新增的属性

  • required
  • placeholder
  • multiple
  • autofocus
  • autocomplete

HTML5新增表单标签主要针对input的type属性值，具体属性值描述如下：

number|tel|email|date|search|url|range|week|time">

  1. email

email属性指的是邮箱地址，可以自动校验

<input type="email">

  1. date、month、week、time、datetime

日期选择：date：选取年月日。month：选取年月。week：选择周和年。time：选取时间。datetime：选取时间、年月日。

<input type="date | month | week | time | datetime">

  1. url

url属性可使输入框内输入http地址，可自动校验。

<input type="url">

  1. range

range是用作滑块标签属性，必须输入一定范围内的数值。

<input type="range">

  1. number

number属性使表单只能输入数字，表单通过min、max属性可以设置最小最大值。

<input type="number" min="0" max="3">

  1. tel

tel限制输入框内的值为正确的电话号码格式

<input type="tel">

  1. search

search用作搜索框，应用非常广泛，与text的区别是有值的时候会有清空按钮。

<input type="search">

label

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。 如何绑定元素呢？

  1. 第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择

  1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面

textarea

通过textarea控件可以轻松地创建多行文本输入框

select下拉列表

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
  1. <select> 中至少包含一对 option
  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

参考资源

[前端基础] HTML5 篇

前端面试系列--HTML & CSS 篇

【前端学习笔记—HTML5新增标签和表单控件属性】

avatar
文章
阅读
粉丝