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>

表格标签

基本使用：table 标签: 表示整个表格、tr: 表示表格的一行、td: 表示一个单元格、th: 表示表头单元格. 会居中加粗、thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)、tbody: 表格得到主体区域

  • align 是表格相对于周围元素的对齐方式. align=“center”，整个表格居中
  • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框
  • cellpadding: 内容距离边框的距离, 默认 1 像素
  • cellspacing: 单元格之间的距离. 默认为 2 像素
  • width / height: 设置尺寸
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>18</td></tr></table>
</body>

合并单元格

  • 跨行合并: rowspan=“n”
  • 跨列合并: colspan=“n”
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td rowspan="2">男</td><td>18</td></tr><tr><td>李四</td><td>18</td></tr></table>
</body>

列表标签

  • 无序列表[重要] ul li

  • 有序列表[用的不多] ol li

  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题

  • 快捷方式：ul>li*n[tab]同理ol>li*n[tab]

<body><ul><li>这是无序列表1</li><li>这是无序列表2</li><li>这是无序列表2</li></ul> <ol type="a"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li></ol><dl><dt>这是自定义列表</dt><dd>这是自定义列表1</dd><dd>这是自定义列表2</dd><dd>这是自定义列表3</dd></dl></body>

表单标签

在HTML中，表单是由<form>标签创建的，它用于收集用户输入的数据。表单域: 包含表单元素的区域（重点是from）；表单控件: 输入框, 提交按钮等（重点是input）

<form>标签：

<body><!--action：跳转的路径，method：请求的方法  --><form action="跳转的路径" method="post"><!-- form标签中的内容 --></form>
</body>

<input>标签：各种输入控件, 单行文本框, 按钮, 单选框, 复选框

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等
  • name: 给 input 起了个名字. 尤其是对于单选按钮
  • value: input 中的默认值
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度
<body><form action="跳转的路径" method="post"><input type="text"> 文本框<br><input type="password"> 密码框<br><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex" >女 单选框<br><input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏 复选框<br><input type="button" value="我是个按钮" onclick="alert('hello')"><br>       </form></body>
  • 提交按钮
<form action="test.html" method="get"><input type="text" id="name" name="username"><input type="submit" value="提交">
</form>
  • 清空按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>
  • 文件按钮
<body><form action="跳转的路径" method="post"><input type="file"> </form>
</body>

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验（下面：点击男也能选中）；for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应

<body><form action="跳转的路径" method="post"><label for="male">男</label><input type="radio" name="sex" id="male"></form>
</body>

select 标签

option 中定义 selected=“selected” 表示默认选中

<form action="跳转的路径" method="post"><select><option>--请选择年份--</option><option selected="selected">1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option></select>
</form>

textarea 标签

<textarea rows="3" cols="50"></textarea>

rows 和 cols 也都不会直接使用, 都是用 css 来修改

无语义标签: div 和 span

div 标签, division 的缩写, 含义是 分割；span 标签, 含义是跨度，就是两个盒子. 用于网页布局，div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子.

<body><div><span>再见 </span><span>晚安 </span>       </div><div><span>再见 </span><span>晚安 </span>       </div>
</body>

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

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

相关文章

网络安全威胁，如何解决缓冲区溢出攻击

网络安全威胁，如何解决缓冲区溢出攻击

目录 一、什么是网络安全 二、什么是缓冲区 三、缓冲区溢出 四、缓冲区溢出攻击的类型 一、什么是网络安全 网络安全&#xff08;Network Security&#xff09;指的是保护计算机网络及其相关设备、系统和数据免受未经授权访问、破坏、篡改、窃取或滥用的威胁和攻击。随着网…
阅读更多...
单片机学习笔记---LCD1602

单片机学习笔记---LCD1602

LCD1602介绍 LCD1602&#xff08;Liquid Crystal Display&#xff09;液晶显示屏是一种字符型液晶显示模块&#xff0c;可以显示ASCII码的标准字符和其它的一些内置特殊字符&#xff08;比如日文的片假名&#xff09;&#xff0c;还可以有8个自定义字符 显示容量&#xff1a;…
阅读更多...
linux系统zabbix工具监控web页面

linux系统zabbix工具监控web页面

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

Excel TEXT函数格式化日期

一. 基本语法 ⏹Excel 的 TEXT 函数用于将数值或日期格式化为指定的文本格式 TEXT(value, format_text)二. 拼接路径案例 # 将当前单元格日期格式化 "ls -ld /data/jmw/01/"&TEXT(A2,"YYYYMMDD")&""# 此处的日期, 是名称管理器里面定…
阅读更多...
深入解析鸿蒙系统的页面路由（Router）机制

深入解析鸿蒙系统的页面路由（Router）机制

鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中&#xff0c;页面路由&#xff08;Router&#xff09;机制是连接应用各页面的关键组成部分。本文将深入探讨鸿蒙系统的页面路由&#xff0c;揭示其工作原理、特点以及在应用开发中的实际应用。 1. 实现…
阅读更多...
【每日一题】06 排序链表

【每日一题】06 排序链表

问题描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 求解 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* sortList(struct ListNode* head) {struct…
阅读更多...
什么是 Flet？

什么是 Flet？

什么是 Flet&#xff1f; Flet 是一个框架&#xff0c;允许使用您喜欢的语言构建交互式多用户 Web、桌面和移动应用程序&#xff0c;而无需前端开发经验。 您可以使用基于 Google 的 Flutter 的 Flet 控件为程序构建 UI。Flet 不只是“包装”Flutter 小部件&#xff0c;而是…
阅读更多...
【数学建模】【2024年】【第40届】【MCM/ICM】【A题 七鳃鳗性别比与资源可用性】【解题思路】

【数学建模】【2024年】【第40届】【MCM/ICM】【A题 七鳃鳗性别比与资源可用性】【解题思路】

我们通过将近半天的搜索数据&#xff0c;查到了美国五大湖中优势物种的食物网数据&#xff0c;以Eric伊利湖为例&#xff0c;共包含34各优势物种&#xff0c;相互之间的关系如下图所示&#xff1a; 一、题目 &#xff08;一&#xff09; 赛题原文 2024 MCM Problem A: Reso…
阅读更多...
【设计模式】springboot3项目整合模板方法深入理解设计模式之模板方法（Template Method）

【设计模式】springboot3项目整合模板方法深入理解设计模式之模板方法（Template Method）

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…
阅读更多...
K8S集群实践之十：虚拟机部署阶段性总结

K8S集群实践之十：虚拟机部署阶段性总结

目录 1. 说明&#xff1a; 2. 安装准备 2.1 每个节点设置双网卡&#xff0c;一卡做网桥&#xff08;外部访问&#xff09;&#xff0c;一卡做NAT&#xff08;集群内网访问&#xff09; 2.2 准备一个可用的代理服务器 3. 由于虚拟机崩溃&#xff08;停电&#xff0c;宿主机…
阅读更多...
探索Gorm - Golang流行的数据库ORM框架

探索Gorm - Golang流行的数据库ORM框架

&#x1f3f7;️个人主页&#xff1a;鼠鼠我捏&#xff0c;要死了捏的主页 &#x1f3f7;️系列专栏&#xff1a;Golang全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…
阅读更多...
每日五道java面试题之java基础篇（九）

每日五道java面试题之java基础篇（九）

目录&#xff1a; 第一题 你们项⽬如何排查JVM问题第二题 ⼀个对象从加载到JVM&#xff0c;再到被GC清除&#xff0c;都经历了什么过程&#xff1f;第三题 怎么确定⼀个对象到底是不是垃圾&#xff1f;第四题 JVM有哪些垃圾回收算法&#xff1f;第五题 什么是STW&#xff1f; 第…
阅读更多...
Spring Resource

Spring Resource

java.net.URL 类可用于访问带有各种URL前缀的资源&#xff0c;但是对于访问一些资源还是不够方便。比如不能从类路径或者相对于ServletContext来获取资源。而Spring 的Resource接口&#xff0c;则可以通过类路径等方式来访问资源。 1 Resource接口 图 Resource接口及方法 getI…
阅读更多...
数据结构与算法：双向链表

数据结构与算法：双向链表

朋友们大家好啊&#xff0c;在上节完成单链表的讲解后&#xff0c;我们本篇文章来对带头循环双向链表进行讲解 双向链表 双向链表、头节点和循环的介绍构建双向链表节点的构建初始化双向循环链表&#xff08;空链表&#xff09;销毁双向链表 链表的打印双向链表头尾的插与删尾插…
阅读更多...
009集——磁盘详解——电脑数据如何存储在磁盘

009集——磁盘详解——电脑数据如何存储在磁盘

很多人也知道数据能够保存是由于设备中有一个叫做「硬盘」的组件存在&#xff0c;但也有很多人不知道硬盘是怎样储存这些数据的。这里给大家讲讲其中的原理。 首先我们要明白的是&#xff0c;计算机中只有0和1&#xff0c;那么我们存入硬盘的数据&#xff0c;实际上也就是一堆0…
阅读更多...
Linux常见指令（一）

Linux常见指令（一）

一、基本指令 1.1ls指令 语法 &#xff1a; ls [ 选项 ][ 目录或文件 ] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 .…
阅读更多...
【Java程序员面试专栏 分布式中间件】Redis 核心面试指引

【Java程序员面试专栏 分布式中间件】Redis 核心面试指引

关于Redis部分的核心知识进行一网打尽，包括Redis的基本概念，基本架构，工作流程，存储机制等，通过一篇文章串联面试重点，并且帮助加强日常基础知识的理解，全局思维导图如下所示 基础概念 明确redis的特性、应用场景和数据结构 什么是Redis，Redis有哪些应用场景 Redi…
阅读更多...
CSP-动态规划-最长公共子序列（LCS）

CSP-动态规划-最长公共子序列（LCS）

一、动态规划 动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;主要用于求解可以被分解为相似子问题的复杂问题&#xff0c;特别是在优化问题上表现出色&#xff0c;如最短路径、最大子数组和、编辑距离等。动态规划的核心思想是将原问题分解为较小的子…
阅读更多...
Python第十七章（继承）

Python第十七章（继承）

继承&#xff1a;子类继承父类的所有方法和属性 一。单继承&#xff1a;一个子类继承一个父类 注释&#xff1a;B是子类&#xff0c;继承了A的函数方法&#xff0c;当调用B时候&#xff0c;会同时使用A中的全部方法&#xff0c;object类是顶级类或者基类&#xff0c;其他子类叫…
阅读更多...
机器学习入门--门控循环单元(GRU)原理与实践

机器学习入门--门控循环单元(GRU)原理与实践

GRU模型 随着深度学习领域的快速发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;已成为自然语言处理&#xff08;NLP&#xff09;等领域中常用的模型之一。但是&#xff0c;在RNN中&#xff0c;如果时间步数较大&#xff0c;会导致梯度消失或爆炸的问题&#xff0c;…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023