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

news2024/12/28 4:38:11

文章目录

        • 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.coloradmin.cn/o/1451924.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

活用 Composition API 核心函数,打造卓越应用(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

C#根据权重抽取随机数

&#xff08;游戏中一个很常见的简单功能&#xff0c;比如抽卡抽奖抽道具&#xff0c;或者一个怪物有多种攻击动作&#xff0c;按不同的权重随机出个攻击动作等等……&#xff09; 假如有三种物品 A、B、C&#xff0c;对应的权重分别是A&#xff08;50&#xff09;&#xff0c…

yolov8源码解读Detect层

yolov8源码解读Detect层 Detect层解读网络各层解读及detect层后的处理 关于网络的backbone,head&#xff0c;以及detect层后处理&#xff0c;可以参考文章结尾博主的文章。 Detect层解读 先贴一下全部代码,下面一一解读。 class Detect(nn.Module):"""YOLOv8 …

【开源】JAVA+Vue.js实现大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…

如何选择一个适合自己的赛道

&#xff08;点击即可收听&#xff09; 最开始一定要先做好定位&#xff0c;也就是你做短视频的目的是什么&#xff1f;当然对大多数人来说&#xff0c;终极目的肯定是赚钱&#xff0c;但赚钱的速度是由定位决定的 如果你资金比较充裕&#xff0c;不急于赚钱&#xff0c;就可以…

配置oracle连接管理器(cman)

Oracle Connection Manager是一个软件组件&#xff0c;可以在oracle客户端上指定安装这个组件&#xff0c;Oracle连接管理器代理发送给数据库服务器的请求&#xff0c;在连接管理器中&#xff0c;我们可以通过配置各种规则来控制会话访问。 简而言之&#xff0c;不同于专用连接…

基于BP算法的SAR成像matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 BP算法的基本原理 4.2 BP算法的优点与局限性 5.完整工程文件 1.课题概述 基于BP算法的SAR成像。合成孔径雷达&#xff08;SAR&#xff09;是一种高分辨率的雷达系统&#xff0c;能够在各种天气和光…

DS:八大排序之直接插入排序、希尔排序和选择排序

创作不易&#xff0c;感谢三连支持&#xff01;&#xff01; 一、排序的概念及运用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起 来的操作。稳定性&…

Java图形化界面编程——五子棋游戏 笔记

2.8.5 五子棋 接下来&#xff0c;我们使用之前学习的绘图技术&#xff0c;做一个五子棋的游戏。 注意&#xff0c;这个代码只实现了五子棋的落子、删除棋子和动画等逻辑实现&#xff0c;并没有把五子棋的游戏逻辑编写完整&#xff0c;比较简单易上手。 图片素材 package…

.NET Core MongoDB数据仓储和工作单元模式实操

前言 上一章节我们主要讲解了MongoDB数据仓储和工作单元模式的封装&#xff0c;这一章节主要讲的是MongoDB用户管理相关操作实操。如&#xff1a;获取所有用户信息、获取用户分页数据、通过用户ID获取对应用户信息、添加用户信息、事务添加用户信息、用户信息修改、用户信息删除…

每日OJ题_算法_递归③力扣206. 反转链表

目录 力扣206. 反转链表 解析代码 力扣206. 反转链表 206. 反转链表 LCR 024. 反转链表 难度 简单 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,…

Leetcode3010. 将数组分成最小总代价的子数组 I

Every day a Leetcode 题目来源&#xff1a;3010. 将数组分成最小总代价的子数组 I 题目描述&#xff1a; 给你一个长度为 n 的整数数组 nums 。 一个数组的代价是它的第一个元素。比方说&#xff0c;[1,2,3] 的代价是 1 &#xff0c;[3,4,1] 的代价是 3 。 你需要将 num…

HTML5+CSS3小实例:彩色拨动开关

实例:彩色拨动开关 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><…

双输入宽带混合 Doherty-Outphasing功率放大器设计(2021.02 MTT)-从理论到ADS版图

基于双输入的宽带混合 Doherty-Outphasing功率放大器设计(2021.02 MTT)-从理论到ADS版图 原文: Wideband Two-Way Hybrid Doherty Outphasing Power Amplifier 发表于FEBRUARY 2021&#xff0c;在微波顶刊IEEE T MTT上面&#xff0c;使用的GAN CGH40010F 全部工程下载&#…

Covalent Network(CQT)与卡尔加里大学建立合作,共同推动区块链技术创新

Covalent Network&#xff08;CQT&#xff09;作为领先的 Web3 数据索引器和提供者&#xff0c;宣布已经与卡尔加里大学达成了具备开创性意义的合作&#xff0c;此次合作标志着推动区块链数据研究和可访问性的重要里程碑。卡尔加里大学是首个以验证者的身份加入 Covalent Netwo…

linux-firewalld防火墙端口转发

目的:通过统一地址实现对外同一地址暴露 1.系统配置文件开启 ipv4 端口转发 echo "net.ipv4.ip_forward 1" >> /etc/sysctl.confsysctl -p 2.查看防火墙配置端口转发之前的状态 firewall-cmd --statefirewall-cmd --list-all 3.开启 IP 伪装 firewall-cm…

TIM(Timer)定时中断 P1

难点&#xff1a;定时器级联、主从模式 一、简介&#xff1a; 1.TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 补充&#xff1a; { 定时器本质上是一个计数器&#xff0c;可以工作在定时或计数模式&…

视频生成模型作为世界模拟器

我们探索了在视频数据上大规模训练生成模型。具体来说&#xff0c;我们联合训练文本条件扩散模型&#xff0c;处理不同持续时间、分辨率和宽高比的视频和图像。我们利用一种在时空补丁上操作视频和图像潜码的transformer架构。我们最大的模型&#xff0c;Sora&#xff0c;能够生…

SQL中的各种连接的区别总结

前言 今天主要的内容是要讲解SQL中关于Join、Inner Join、Left Join、Right Join、Full Join、On、 Where区别和用法&#xff0c;不用我说其实前面的这些基本SQL语法各位攻城狮基本上都用过。但是往往我们可能用的比较多的也就是左右连接和内连接了&#xff0c;而且对于许多初学…

C++中的volatile:穿越编译器的屏障

C中的volatile&#xff1a;穿越编译器的屏障 在C编程中&#xff0c;我们经常会遇到需要与硬件交互或多线程环境下访问共享数据的情况。为了确保程序的正确性和可预测性&#xff0c;C提供了关键字volatile来修饰变量。本文将深入解析C中的volatile关键字&#xff0c;介绍其作用、…