HTML学习

balld

已于 2024-04-15 22:28:08 修改

阅读量583

点赞数 24

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

于 2024-03-20 09:44:06 首次发布

本文链接：https://blog.csdn.net/gyl_java/article/details/136844260

版权

前段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

HTML基础知识
HTML拓展知识
- DOM和BOM
- - DOM
  - BOM

HTML基础知识

认识

HTML（HyperText Markup Language）是用来创建网页的标记语言

结构

HTML文档由一系列标签（tag）组成，标签用来描述文档的结构和内容。

元素

标签包含在尖括号中，如<tagname>，可以有开始标签和结束标签，也可以是自闭合标签

基本结构

一个简单的HTML文档基本结构如下：

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
    </body>
</html>

常见标签

<h1> - <h6>：标题标签，表示不同级别的标题。
<p>：段落标签，用于定义段落。
<a>：链接标签，用于创建超链接。
<img>：图像标签，用于插入图片。
<ul>, <ol>, <li>：无序列表、有序列表和列表项
<div>：块级元素，用于组织页面结构。
<span>：行内元素，用于设置文本样式。
<br>：换行标签，用于强制换行。
<hr>：水平线标签，用于插入水平分隔线。

属性

标签可以包含属性，属性提供有关元素的额外信息。例如，<a href="https://www.example.com">链接文本中的href属性指定链接的URL

注释

在HTML中使用来添加注释，注释不会在页面中显示，但可以帮助开发者理解代码。

版本声明

<!DOCTYPE html>声明HTML版本，告诉浏览器使用哪个HTML版本解析文档。

HTML拓展知识

DOM和BOM

DOM

DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。
DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。
①.文档节点：在树的顶端是文档节点，它呈现整个页面。

②.元素节点：需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。

③.属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。

④.文本节点：当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。
在这里插入图片描述
常见的DOM节点主要有三种

①元素节点：如<html>，<a>，<body>等都是元素节点，即标签

②文本节点：向用户展示的内容，如<title>...</title>中的“文档标题”，<p>hello world</p> 中的内容

③属性节点：元素的属性，如<a>中的href属性

DOM树中的节点均可通过javascript进行访问，所有html节点均可被修改或删除，也可以创建新节点

	document.title     // 设置页面title
	document.getElementById(id)    // 根据id获取元素
	document.getElementsByTagName(name)    // 根据tag获取元素
	document.createElement(name)     // 创建元素
	parentNode.appendChild(node)     // 向子节点列表末尾添加一个节点
	parentNode.insertBefore()     // 把要插入的节点放到某个特定的位置
	parentNode.removeChild()    // 移除节点
	parentNode.cloneNode()     //  对节点进行复制，接受一个布尔值参数，true为深拷贝，false为浅拷贝
	element.innerHTML      // 设置/获取元素内容
	element.styles     // 设置/获取元素样式
	element.setAttribute()     // 设置元素属性值
	element.getAttribute()     // 获取元素属性值
	element.addEventListener()     // 添加事件绑定

DOM事件流

事件流所描述的就是从页面中接受事件的顺序
DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

①捕获阶段：一开始从文档的根节点流向目标对象；（从上往下）
②目标阶段：然后在目标对向上被触发；
③冒泡阶段：之后再回溯到文档的根节点。（从下往上）

在这里插入图片描述
①事件捕获：当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

②事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发 dom 事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

BOM

BOM 全称是 Browser Object Model，也就是浏览器对象模型。是JavaScript中用于表示和操作浏览器窗口及其相关组件的对象模型。
BOM提供了一组API（Application Programming Interface，应用程序编程接口），允许开发者通过JavaScript与浏览器进行交互。
BOM的核心对象是window对象，它代表了浏览器窗口，并提供了许多属性和方法来操作窗口、导航、处理事件等。

在Web开发中，BOM（Browser Object Model，浏览器对象模型）是指浏览器提供的一组对象，用于与浏览器窗口进行交互。HTML BOM（HTML Browser Object Model）是BOM的一部分，主要涉及与浏览器窗口和文档的交互。

HTML BOM包含了一些重要的对象，例如：
window 对象：代表浏览器窗口，它是 BOM 的顶层对象，包含了浏览器窗口的属性和方法。
document 对象：代表当前加载的文档（HTML 文档），可以通过它来访问和操作文档的内容。
location 对象：包含有关当前文档 URL 的信息，可以用来获取和设置浏览器的地址栏 URL。
navigator 对象：包含有关浏览器的信息，如浏览器类型、版本和操作系统等。
screen 对象：包含有关用户屏幕的信息，如屏幕宽度、高度和颜色深度等。

通过 HTML BOM，开发者可以利用这些对象来实现一些功能，例如：
控制浏览器窗口的大小和位置。
检测用户的浏览器和操作系统信息。
打开新的浏览器窗口或标签。
重定向页面到其他 URL。
检测用户的屏幕分辨率。