HTML | DOM | 网页前端 | 常见HTML标签总结

文章目录

        • 1.前端开发简单分类
        • 2.前端开发环境配置
        • 3.HTML的简单介绍
        • 4.常用的HTML标签介绍

1.前端开发简单分类

前端开发，这里是一个广义的概念，不单指网页开发，它的常见分类

  • 网页开发：前端开发的主要领域，使用HTML、CSS 和 JavaScript等技术来创建运行在浏览器中的应用
  • 桌面应用开发：虽然桌面应用通常是由后端语言（如C++、Java或C#）开发的，但现在也可以使用前端技术来开发桌面应用（电脑上的应用）。例如，Electron框架允许开发者使用HTML、CSS和JavaScript来创建跨平台的桌面应用
  • 移动应用开发：开发手机应用，比如使用Java开发Android应用。

本篇博客分享网页开发的前端技术！网页开发，使用HTML、CSS和JavaScript这套技术来解决实际问题！而HTML负责网页的结构（页面元素和内容），CSS负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等），JavaScript负责网页的行为（交互效果）。

2.前端开发环境配置

下载vscode

官网中下载对应的安装包，安装即可。

插件下载

  • Auto Rename Tag：自动补全功能
  • view-in-browser：在vscode中打开页面。鼠标右键选择：View-in-Browser选项
  • Live Server：自动刷新页面。鼠标右键选择：Open with Live Server选项
3.HTML的简单介绍

HTML（HyperText Markup Language，超文本标记语言），所谓的超文本，不仅可以定义文本信息还可以定义图片、音频、视频、表格、链接等内容。而标记语句是由标签构成的语言！HTML页面通过浏览器的渲染展示出来。

通过基础的HTML标签界面，展示Hello world

<html><head><title>the first page</title></head><body>Hello world</body>
</html>

html 标签是整个 html 文件的根标签、head 标签中写页面的属性、body 标签中写的是页面上显示的内容、title 标签中写的是页面的标题

什么是DOM树

DOM（Document Object Model）树是一个用于表示HTML或XML文档结构的模型。 Document 文档：对应的一个HTML文件或XML文件就是一个文档，而HTML和XML之间的区别在于，HTML侧重于展示信息，展示数据；而XML更侧重于存储数据！Object：一切皆对象，对应的文档是一个对对象，一个标签本质也是对象！

DOM树将文档表示为一个节点树，每个节点对应文档中的一个部分，如标签、属性、文本等。比如上面的基础代码可以表示成DOM树结构：

Document
└── html├── head│   └── title│       └── "the first page"└── body└── "hello world

DOM树是动态的，可以使用JavaScript来修改DOM树，如添加、删除或修改节点，这将直接反映到浏览器显示的网页上。这是实现动态网页和Web应用程序的基础。

标签之间的简单关系

html和head，body这些是父子关系，而head和body标签是兄弟关系。

快速生成HTML的基础结构

在VSCode中我们安装插件可以通过快捷方式：！+ 回车键 生成HTML的基础结构代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
  • 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.

  • <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”(有些浏览器会根据此处的声明提示是否进行自动翻译).

  • <meta charset="UTF-8"> 描述页面的字符编码方式，告诉浏览器按照UTF-8的方式解码，当然编写代码的时候IDE设置的编码也要是UTF-8
    在这里插入图片描述

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">,viewport 表示用户在设备上可以看到的网页的区域，"width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放

4.常用的HTML标签介绍

段落标签：h1-h6

六个标签, 从 h1 - h6 数字越大，则字体越小；快捷键：ALT + Shift + 下箭头，快速复制粘贴

<body><h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>   
</body>

段落标签：p

在HTML代码中回车，浏览器不会解析成换行，需要加上p标签

<body>纸上得来终觉浅，绝知此事要躬行。<p>纸上得来终觉浅，</p><p>绝知此事要躬行。</p>
</body>

换行标签：br

br 是 break 的缩写. 表示换行

<body><p>纸上得来终觉浅，<br> 绝知此事要躬行。</p> 
</body>

格式化标签

在实际中，这种格式化的工作是让CSS来做的，但是HTML也提供一些，了解。

<body><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>

效果展示：strong 加粗 b 加粗 倾斜 倾斜 删除线 删除线 下划线 下划线

图片标签：img

  • img 标签必须带有 src 属性，表示图片的路径，当然路径的设置可以是相对路径也可以是绝对路径，对应绝对路径可以是磁盘路径或网络路径。

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

  • title: 提示文本. 鼠标放到图片上, 就会有提示.

  • width/height: 控制宽度高度.

  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<body><img src="./image/百度一下.jpg" alt="百度一下" title="百度一下">
</body>

超链接标签：a

  • href: 必须具备, 表示点击后会跳转到哪个页面
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
<body><a href="https://www.baidu.com/"></a>
</body>

在这里插入图片描述

<body><a href="https://www.baidu.com/">百度一下</a>
</body>

超链接跳转的几种方式：

  • 外部链接: href 引用其他网站的地址

  • 内部链接: 网站内部页面之间的链接. 写相对路径即可

<body><a href="./html02.html">跳转</a>
</body>
  • 空链接: 使用 # 在 href 中占位
<body><a href="#">空链接</a>
</body>
  • 下载链接: href 对应的路径是一个文件 (可以使用 zip 文件)
<body><a href="test.zip">下载文件</a>
</body>
  • 网页元素链接: 可以给图片等任何元素添加链接
<body><a href="https://www.baidu.com/" target="_blank"><img src="./image/百度一下.jpg" alt="图片加载失败" title="百度首页" ></a>   
</body>
  • 锚点链接: 可以快速定位到页面中的某个位置

<body><a href="#one">第一集</a><a href="#two">第二集</a><p id="one">第一集剧情 <br>第一集剧情 <br>...</p><p id="two">第二集剧情 <br>第二集剧情 <br>...</p>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/685598.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV中的边缘检测技术及实现

OpenCV中的边缘检测技术及实现

介绍: 边缘检测是计算机视觉中非常重要的技术之一。它用于有效地识别图像中的边缘和轮廓&#xff0c;对于图像分析和目标检测任务至关重要。OpenCV提供了多种边缘检测技术的实现&#xff0c;本博客将介绍其中的两种常用方法&#xff1a;Canny边缘检测和Sobel边缘检测。 理论介…
阅读更多...
【C语言】（25）文件包含include

【C语言】（25）文件包含include

#include是C语言中的预处理指令之一&#xff0c;用于在当前文件中包含另一个文件的内容。用于模块化和代码重用的基本机制。合理使用#include可以使代码结构更加清晰&#xff0c;易于管理和维护。 #include主要用于包含标准库头文件或自定义头文件。 两种形式的#include #in…
阅读更多...
C语言程序设计（第四版）—习题7程序设计题

C语言程序设计（第四版）—习题7程序设计题

目录 1.选择法排序。 2.求一批整数中出现最多的数字。 3.判断上三角矩阵。 4.求矩阵各行元素之和。 5.求鞍点。 6.统计大写辅音字母。 7.字符串替换。 8.字符串转换成十进制整数。 1.选择法排序。 输入一个正整数n&#xff08;1&#xff1c;n≤10&#xff09;&#xf…
阅读更多...
简易绘图软件（水一期）

简易绘图软件（水一期）

哈哈&#xff01; 1、编写代码&#xff1a; 代码&#xff1a; main: #include <graphics.h> #include <music.h> #include <heker.h> #pragma comment( linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"" )using…
阅读更多...
在数组中插入元素

在数组中插入元素

问题&#xff1a;假设有一个数组{1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5}&#xff0c;如果我们要在3之后插入一个数&#xff08;520&#xff09;&#xff0c;这该怎么办呢&#xff1f; 思路&#xff1a;要想在以元素3之后插入一个元素&#xff0c;我们先要做…
阅读更多...
25天物理探索旅程 - 第四天：光的奇妙旅程揭秘

25天物理探索旅程 - 第四天：光的奇妙旅程揭秘

第四天&#xff0c;我们的科普探险队将踏上一段非凡的旅程&#xff0c;目标是揭开光——这位宇宙间最具魔法特质的信使的秘密面纱。今天&#xff0c;我们将以一种轻松愉快、幽默风趣的方式探讨光的本质&#xff0c;像看一场生动有趣的魔术表演般&#xff0c;领略光那波粒二象性…
阅读更多...
react中如何做到中断diff过程和恢复

react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心&#xff0c;简要说明如下&#xff1a; // 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress ! null && !shouldYiel…
阅读更多...
linux系统zabbix工具监控web页面

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度&#xff0c;及页面响应时间&#xff0c;还有响应代码&#xff1b; web Scenario&#xff1a; web场景&#xff08;站点&#xff09;web page &#xff1a;web页面&#xff0c;一个场景有多…
阅读更多...
二分算法01

二分算法01

二分算法01 1. H指数II2. 使结果不超过阈值的最小除数3. 完成旅途的最少时间 1. H指数II 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数&#xff0c;citations 已经按照 升序排列 。计算并返回该研究者的 h 指数。 h 指数的…
阅读更多...
目标服务器存在CDN

目标服务器存在CDN

CDN 即内容分发网络&#xff0c;主要解决因传输距离和不同运营商节点造成的网络速 度性能低下的问题。说得简单点&#xff0c;就是一组在不同运营商之间的对接节点上的高速缓存 服务器&#xff0c;把用户经常访问的静态数据资源(例如静态的html、css、js图片等文件)直 接缓存到…
阅读更多...
10-通用类型、特质和生命周期

10-通用类型、特质和生命周期

上一篇&#xff1a; 09-错误处理 每种编程语言都有有效处理概念重复的工具。在 Rust 中&#xff0c;泛型就是这样一种工具&#xff1a;具体类型或其他属性的抽象替身。我们可以表达泛型的行为或它们与其他泛型的关系&#xff0c;而不需要知道在编译和运行代码时它们的位置。 函…
阅读更多...
WordPress站点如何实现发布文章即主动推送到百度快速收录和普通收录？

WordPress站点如何实现发布文章即主动推送到百度快速收录和普通收录？

我们在WordPress后台成功发布文章之后&#xff0c;如果靠搜索引擎来抓取的话&#xff0c;可能会比较慢&#xff0c;所以十分有必要将我们成功发布的文章马上提交到百度、必应等搜索引擎中。下面boke112百科就跟大家说一说WordPress站点如何实现发布文章即主动推送到百度快速收录…
阅读更多...
前端开发：Vue框架与前端部署

前端开发：Vue框架与前端部署

Vue Vue是一套前端框架&#xff0c;免除原生)avaScript中的DOM操作&#xff0c;简化书写。是基于MVVM(Model–View-ViewModel)思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上。简单来说&#xff0c;就是数据变化的时候, 页面会自动刷新, 页面变化的时…
阅读更多...
人工智能学习与实训笔记（七）：神经网络之推荐系统处理

人工智能学习与实训笔记（七）：神经网络之推荐系统处理

九、模型压缩与知识蒸馏 出于对响应速度&#xff0c;存储大小和能耗的考虑&#xff0c;往往需要对大模型进行压缩。 模型压缩方法主要可以分为以下四类&#xff1a; 参数修剪和量化&#xff08;Parameter pruning and quantization&#xff09;&#xff1a;用于消除对模型表…
阅读更多...
Leetcode 72 编辑距离

Leetcode 72 编辑距离

题意理解&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 将word1转换为word2,可以进行三种操作&#xff1a;增、删、改&am…
阅读更多...
c语言之do-while循环

c语言之do-while循环

do while循环的语法是 do 语句 while 表达式 这里的语句是循环执行的语句 它是先无条件执行循环语句&#xff0c;再判断是否符合条件&#xff0c;符合条件继续执行。 比如要设计一个123n的程序&#xff0c;n要求用户手工输入。 代码如下 #include<stdio.h> int …
阅读更多...
【PTA|函数题|期末复习|PART 1】数据类型（二）函数（一）

【PTA|函数题|期末复习|PART 1】数据类型（二）函数（一）

6-1 求m到n之和 本题要求实现一个计算m~n&#xff08;m<n&#xff09;之间所有整数的和的简单函数。 函数接口定义&#xff1a; int sum( int m, int n );其中m和n是用户传入的参数&#xff0c;保证有m<n。函数返回的是m~n之间所有整数的和。 裁判测试程序样例&#…
阅读更多...
云计算基础-存储基础

云计算基础-存储基础

存储概念 什么是存储&#xff1a; 存储就是根据不同的应用程序环境&#xff0c;通过采取合理、安全、有效的方式将数据保存到某些介质上&#xff0c;并能保证有效的访问&#xff0c;存储的本质是记录信息的载体。 存储的特性&#xff1a; 数据临时或长期驻留的物理介质需要保…
阅读更多...
a 乘 b 模 p_题解

a 乘 b 模 p_题解

【题解提供者】吴立强 解法一 思路 【快速幂】算法改版题。 面对 a b m o d p a\times b\mod p abmodp 这个结构&#xff0c;直接求必然溢出 long long&#xff0c;任何基本结构都不好使。 模仿快速幂算法是先将 b b b 二进制分解&#xff08;假设 b b b 的二进制表示…
阅读更多...
SparkUI任务启动参数介绍（148个参数）

SparkUI任务启动参数介绍（148个参数）

SparkUI任务启动参数介绍&#xff08;148个参数&#xff09; 1 spark.app.id: Spark 应用程序的唯一标识符。 2 spark.app.initial.jar.urls: Spark 应用程序的初始 Jar 包的 URL。 3 spark.app.name: Spark 应用程序的名称。 4 spark.app.startTime: Spark 应用程序的启动时间…
阅读更多...
最新文章

Copyright @ 2022~2023