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语言程序设计（第四版）—习题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…
阅读更多...
25天物理探索旅程 - 第四天：光的奇妙旅程揭秘

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

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

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度&#xff0c;及页面响应时间&#xff0c;还有响应代码&#xff1b; web Scenario&#xff1a; web场景&#xff08;站点&#xff09;web page &#xff1a;web页面&#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;用于消除对模型表…
阅读更多...
云计算基础-存储基础

云计算基础-存储基础

存储概念 什么是存储&#xff1a; 存储就是根据不同的应用程序环境&#xff0c;通过采取合理、安全、有效的方式将数据保存到某些介质上&#xff0c;并能保证有效的访问&#xff0c;存储的本质是记录信息的载体。 存储的特性&#xff1a; 数据临时或长期驻留的物理介质需要保…
阅读更多...
【深度学习每日小知识】全景分割

【深度学习每日小知识】全景分割

全景分割 全景分割是一项计算机视觉任务&#xff0c;涉及将图像或视频分割成不同的对象及其各自的部分&#xff0c;并用相应的类别标记每个像素。与传统的语义分割相比&#xff0c;它是一种更全面的图像分割方法&#xff0c;传统的语义分割仅将图像划分为类别&#xff0c;而不…
阅读更多...
【旧文更新】【优秀毕设】人脸识别打卡/签到/考勤管理系统（OpenCV+最简基本库开发、可移植树莓派 扩展网络图像推流控制 验证码及Excel邮件发送等功能）

【旧文更新】【优秀毕设】人脸识别打卡/签到/考勤管理系统（OpenCV+最简基本库开发、可移植树莓派 扩展网络图像推流控制 验证码及Excel邮件发送等功能）

【旧文更新】【优秀毕设】人脸识别打卡/签到/考勤管理系统&#xff08;OpenCV最简基本库开发、可移植树莓派 扩展网络图像推流控制 验证码及Excel邮件发送等功能&#xff09; 文章目录 关于旧文新发毕设结构主页面验证码识别效果管理页面人脸信息采集管理实时数据更新签到结果…
阅读更多...
IIC--集成电路总线

IIC--集成电路总线

目录 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; 2、上拉电阻阻值怎么确定 3、IIC分类 4、IIC协议 二、单片机使用IIC读写数据 1、 IIC发送一个字节数据&#xff1a; 2、IIC读取一个字节数据&#xff1a; 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; (…
阅读更多...
Windows 环境下 Redis 的安装和基本使用

Windows 环境下 Redis 的安装和基本使用

Windows 环境下 Redis 的安装和基本使用 Windows 环境下 Redis 的安装和基本使用Redis 简介基本数据结构Redis 的下载、解压、添加环境变量运行GUI&#xff1a;RedisInsight参考链接 Windows 环境下 Redis 的安装和基本使用 Redis 简介 Redis 是完全开源的&#xff0c;遵守 B…
阅读更多...
OpenCV-41 使用掩膜的直方图

OpenCV-41 使用掩膜的直方图

一、掩膜 掩膜即为与原图大小一致的黑底白框图。 如何生成掩膜&#xff1f; 先生成一个全黑的和原始图片大小一样大的图片。mask np.zeros(img.shape, np.uint8)将想要的区域通过索引方式设置为255.mask[100:200, 200:300] 示例代码如下&#xff1a; import cv2 import ma…
阅读更多...
紫微斗数双星组合：天机太阴在寅申

紫微斗数双星组合：天机太阴在寅申

文章目录 前言内容总结 前言 紫微斗数双星组合&#xff1a;天机太阴在寅申 内容 紫微斗数双星组合&#xff1a;天机太阴在寅申 性格分析 天机星与太阴星同坐寅申二宫守命的男性&#xff0c;多浪漫&#xff0c;易与女性接近&#xff0c;温柔体贴&#xff0c;懂得女人的心理。…
阅读更多...
IO流---缓冲流，转换流，打印流，序列化流

IO流---缓冲流，转换流，打印流，序列化流

缓冲流 缓冲流&#xff08;Buffered Stream&#xff09;也被称为高效流&#xff0c;它是对基本的字节字符流进行增强的一种流。通过缓冲流&#xff0c;可以提高数据的读写能力。 在创建缓冲流对象时&#xff0c;会创建一个内置的默认大小的缓冲区数组。通过对缓冲区的读写&…
阅读更多...
2024.2.10 HCIA - Big Data笔记

2024.2.10 HCIA - Big Data笔记

1. 大数据发展趋势与鲲鹏大数据大数据时代大数据的应用领域企业所面临的挑战和机遇华为鲲鹏解决方案2. HDFS分布式文件系统和ZooKeeperHDFS分布式文件系统HDFS概述HDFS相关概念HDFS体系架构HDFS关键特性HDFS数据读写流程ZooKeeper分布式协调服务ZooKeeper概述ZooKeeper体系结构…
阅读更多...
[职场] 会计学专业学什么 #其他#知识分享#职场发展

[职场] 会计学专业学什么 #其他#知识分享#职场发展

会计学专业学什么 会计学专业属于工商管理学科下的一个二级学科&#xff0c;本专业培养具备财务、管理、经济、法律等方面的知识和能力&#xff0c;具有分析和解决财务、金融问题的基本能力&#xff0c;能在企、事业单位及政府部门从事会计实务以及教学、科研方面工作的工商管…
阅读更多...
【摸鱼日常】使用Docker部署RPG网页小游戏

【摸鱼日常】使用Docker部署RPG网页小游戏

一、本次实践介绍 1. 本次实践简介 本次实践部署环境为个人测试环境&#xff0c;快速使用docker部署RPG网页小游戏。 rootWellDone:/home/goodjob# uname -a Linux WellDone 6.5.0-14-generic #14~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Nov 20 18:15:30 UTC 2 x86_64 x86_…
阅读更多...
Linux：docker搭建redis集群（3主3从扩容缩容 哈希槽分配）

Linux：docker搭建redis集群（3主3从扩容缩容 哈希槽分配）

操作系统&#xff1a;centos7 docker-ce版本&#xff1a;24.0.7 1.准备redis镜像 我这里使用redis 6.0.8 镜像进行操作&#xff0c;如果你也需要镜像&#xff0c;在网络正常情况下直接使用 docker pull redis:6.0.8 即可进行下载&#xff0c;如果你没配置国内加速器&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023