当前位置： 首页 > news >正文

HTML 核心技术点基础详细解析以及综合小案例

news 2026/1/22 21:40:39

核心技术点

  • 网页组成

  • 排版标签

  • 多媒体标签及属性

  • 综合案例一 - 个人简介

  • 综合案例二 - Vue 简介

02-标签语法

HTML 超文本标记语言——HyperText Markup Language。

  • 超文本：链接

  • 标记：标签，带尖括号的文本

标签结构

  • 标签要成对出现，中间包裹内容

  • <>里面放英文字母（标签名）

  • 结束标签比开始标签多 /

  • 标签分类：双标签和单标签

<strong>需要加粗的文字<strong>
<br>
<hr>

03-HTML骨架

  • html：整个网页

  • head：网页头部，用来存放给浏览器看的信息，例如 CSS

    • title：网页标题

  • body：网页主体，用来存放给用户看的信息，例如图片、文字

<html><head><title>网页标题</title></head><body>网页主体</body>
</html>

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

04-标签的关系

作用：明确标签的书写位置，让代码格式更整齐

  • 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

  • 兄弟关系（并列关系）：兄弟标签换行要对齐

05-注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

06-标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗

  • 字号逐渐减小

  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

  2. h2 ~ h6 没有使用次数的限制

07-段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点：

  • 独占一行

  • 段落之间存在间隙

08-换行和水平线

  • 换行：br

  • 水平线：hr

<br>
<hr>

09-文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

提示：strong、em、ins、del 标签自带强调含义（语义）。

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

src用于指定图像的位置和名称，是 <img> 的必须属性。

图像属性

属性语法

  • 属性名="属性值"

  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

11-路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

  • 相对路径：从当前文件位置出发查找目标文件

  • 绝对路径：从盘符出发查找目标文件

    • Windows 电脑从盘符出发

    • Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

  • / 表示进入某个文件夹里面 → 文件夹名/

  • . 表示当前文件所在文件夹 → ./

  • .. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="C:\images\mao.jpg">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /

  2. 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

12-超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>
​
<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
​
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

13-音频

<audio src="音频的 URL"></audio>

常用属性

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

14-视频

<video src="视频的 URL"></video>

常用属性

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

15-综合案例一-个人简介

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

 

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。
​
</p>
<img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">
<h2>学习经历</h2>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>
<h2>主要成就</h2>
<p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p>
<p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h2>社会任职</h2>
<p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
 

16-综合案例二-Vue简介
 

 

<h1>Vue.js</h1>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
<video src="../media/vue.mp4" controls></video>














相关文章：
















HTML 核心技术点基础详细解析以及综合小案例




核心技术点 网页组成  排版标签  多媒体标签及属性  综合案例一 - 个人简介    综合案例二 - Vue 简介     
02-标签语法 
HTML 超文本标记语言——HyperText Markup Language。 超文本&#xff1a;链接  标记&#xff1a;标签&#xff0c;带尖括号的文本    
标签结构 标签要成…...






编程日记
2023/10/14 10:30:18



















BAT学习——批处理脚本（也称为BAT文件）常用语法元素与命令




批处理脚本&#xff08;也称为BAT文件&#xff09;使用Windows的批处理语言编写&#xff0c;它具有一些常用的语法元素和命令。以下是一些BAT编程的常用语法元素和命令&#xff1a; 命令行命令&#xff1a; 批处理脚本通常包含一系列Windows命令&#xff0c;例如echo&#xff0…...






编程日记
2023/10/14 10:29:17



















AMD AFMF不但能用在游戏，也适用于视频




近期AMD发布了AMD Software Adrenalin Edition预览版驱动程序&#xff0c;增加了对平滑移动帧&#xff08;AMD Fluid Motion Frames&#xff0c;AFMF&#xff09;功能的支持&#xff0c;也就是AMD的“帧生成”技术&#xff0c;与DLSS 3类似&#xff0c;作为FidelityFX Super Re…...






编程日记
2023/10/14 10:28:16



















CSS 常用样式浮动属性




一、概述 
CSS 中&#xff0c;浮动属性的作用是让元素向左或向右浮动&#xff0c;使其他元素围绕它排布&#xff0c;常用的浮动属性有以下几种&#xff1a; float: left; 使元素向左浮动&#xff0c;其他元素从右侧包围它。  float: right; 使元素向右浮动&#xff0c;其他元素…...






编程日记
2023/10/14 10:26:15



















Linux引导故障排除：从问题到解决方案的详细指南




1 BIOS初始化 
通电->对硬件检测->初始化硬件时钟 
2 磁盘引导及其修复 
2.1 磁盘引导故障 
磁盘主引导记录&#xff08;MBR&#xff09;是在0磁道1扇区位置&#xff0c;446字节。 MBR作用&#xff1a;记录grub2引导文件的位置      
2.2 修复 
步骤&#xff1a;1、光盘进…...






编程日记
2023/10/14 10:25:14



















【vim 学习系列文章 6 -- vim 如何从上次退出的位置打开文件】




文章目录 1.1 vim 如何从上次退出的位置打开文件1.2 autogroup 命令学习1.2.1 augroup 基本语法 1.3 vim call 命令详细介绍 1.1 vim 如何从上次退出的位置打开文件 
假设我打开了文件 test.c&#xff0c;然后我向下滚动到第 50 行&#xff0c;然后我做了一些修改并关闭了文件。…...






编程日记
2023/10/14 10:24:12



















怎样学习C#上位机编程？




怎样学习C#上位机编程&#xff1f; 
00001. 掌握C#编程和.NET框架基础。 
00002. 学WinForm应用开发&#xff0c;了解控件使用和事件编程。 
00003. 熟悉基本数据结构和算法&#xff0c;如链表、栈、队列。 
00004. 理解串口通信协议和方法&#xff0c;用于与硬件交互。 
00005…...






编程日记
2023/10/14 10:23:10



















【算法-动态规划】两个字符串的删除操作-力扣 583




&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。  推荐:kuan 的首页,持续学…...






编程日记
2023/10/14 10:22:09



















【06】基础知识：typescript中的泛型




一、泛型的定义 
在软件开发中&#xff0c;我们不仅要创建一致的定义良好的API&#xff0c;同时也要考虑可重用性。 
组件不仅能支持当前数据类型&#xff0c;同时也能支持未来的数据类型&#xff0c;这在创建大型系统时提供了十分灵活的功能。 
在像 C# 和 Java 这样的语言中&…...






编程日记
2023/10/14 10:21:07



















flutter 绘制原理探究




文章目录 Widget1、简介2、源码分析Element1、简介2、源码分析RenderObjectWidget 渲染过程总结思考Flutter 的核心设计思想便是“一切皆 Widget”，Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，是 Flutter 开发框架中最基本的概念。 在 Flutter…...






编程日记
2023/10/14 10:20:04



















[Java]SPI扩展功能




一、什么是SPI 
Java SPI&#xff08;Service Provider Interface&#xff09;是Java官方提供的一种服务发现机制。 它允许在运行时动态地加载实现特定接口的类&#xff0c;而不需要在代码中显式地指定该类&#xff0c;从而实现解耦和灵活性。 
二、实现原理 
基于 Java 类加载…...






编程日记
2023/10/14 10:19:02



















机器人命令表设计




演算命令 
CLEAR 将数据 1 上被指定的编号以后的变数的内容&#xff0c;以及数据 2 上仅被指定的个数都清除至 0。 INC 在被指定的变数内容上加上 1。 DEC 在被指定的变数内容上减掉 1。 SET 在数据 1 上设定数据 2。 ADD 将数据 1 和数据 2 相加&#xff0c;得出的结果保存在数…...






编程日记
2023/10/14 10:18:01



















STM32--WDG看门狗




文章目录 WDG简介IWDGIWDG的超时计算WWDGWWDG超时和窗口值设定独立看门狗工程WWDG工程 WDG简介 
WDG看门狗&#xff08;Watchdog Timer&#xff09;是一种常见的硬件设备&#xff0c;在STM32F10系列中&#xff0c;有两种看门狗&#xff0c;分别是独立看门狗和窗口看门狗&#x…...






编程日记
2023/10/14 10:16:59



















（※）力扣刷题-字符串-实现 strStr()（KMP算法）




28 实现 strStr() 
实现 strStr() 函数。 给定一个 haystack 字符串和一个 needle 字符串&#xff0c;在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存在&#xff0c;则返回 -1。 示例 1: 输入: haystack  “hello”, needle  “ll” 输出: 2 示例…...






编程日记
2023/10/14 10:15:57



















Redis 集群  Redis 事务  Redis 流水线  Redis 发布订阅  Redis Lua脚本操作




Redis 集群 & Redis 事务 & Redis 流水线 & Redis 发布订阅 Redis 集群linux安装redis主从配置查看当前实例主从信息 Redis Sentinelsentinel Redis Cluster Redis 事务Redis 流水线Redis 发布订阅Redis Lua脚本操作 Redis 集群 
linux安装redis 
下载安装包&#…...






编程日记
2023/10/14 10:12:54



















【算法与数据结构】--常见数据结构--栈和队列




一、栈 
栈&#xff08;Stack&#xff09; 是一种基本的数据结构&#xff0c;具有后进先出&#xff08;LIFO&#xff09;的特性&#xff0c;类似于现实生活中的一叠盘子。栈用于存储一组元素&#xff0c;但只允许在栈顶进行插入&#xff08;入栈&#xff09;和删除&#xff08;…...






编程日记
2023/10/14 10:11:52



















Linux shell编程学习笔记11：关系运算




Linux Shell 脚本编程和其他编程语言一样&#xff0c;支持算数、关系、布尔、字符串、文件测试等多种运算。前面几节我们研究了  Linux shell编程 中的 字符串运算 和 算术运算&#xff0c;今天我们来研究 Linux shell编程中的的关系运算。 
一、关系运算符功能说明 
运算符说明…...






编程日记
2023/10/14 10:10:51



















JS标准库




学习一门编程语言不仅是掌握其语法。同等重要的是学习其标准库&#xff0c;从而熟练掌握语言本身提供的所有工具。 
1 定型数组 
js常规数组与C和Java等较低级语言的数组类型还是有很大区别。ES6新增了定型数组&#xff0c;与这些语言的低级数组非常接近。 
定型数组严格来说并…...






编程日记
2023/10/14 10:09:48



















Android 12.0 hal层添加自定义hal模块功能实现




1. 前言 
在12.0的系统rom定制化开发中，在 对hal模块进行开发时，需要通过添加自定义的hal模块来实现某些功能时，就需要添加hal模块的相关功能，接下来就来实现一个案例来供参考 接下来就来具体实现这个功能 
2.hal层添加自定义hal模块功能实现的核心类 
hardware\interfaces…...






编程日记
2023/10/14 10:08:48



















如何理解vue声明式渲染




Vue.js中的声明式渲染是一种用来描述用户界面的方式&#xff0c;它强调“声明”应该如何渲染页面&#xff0c;而不需要关心底层的DOM操作。这与传统的命令式渲染方式&#xff0c;即手动控制DOM元素的创建、更新和销毁&#xff0c;形成了鲜明的对比。 
理解Vue的声明式渲染的关键…...






编程日记
2023/10/14 10:07:46





















日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻




在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...






编程新知
2026/1/16 5:16:55



















Java 语言特性(面试系列1)




一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...






编程新知
2025/10/6 4:03:40



















FFmpeg 低延迟同屏方案




引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...






编程新知
2025/11/4 6:26:59



















五年级数学知识边界总结思考-下册




目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...






编程新知
2025/10/7 4:57:55



















【论文笔记】若干矿井粉尘检测算法概述




总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...






编程新知
2025/10/14 10:52:24



















BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践




6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...






编程新知
2026/1/15 6:36:32



















基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解




JAVASQL电子通讯录带系统托盘 
一、系统概述 
本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...






编程新知
2025/10/4 20:58:43



















人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式




今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...






编程新知
2026/1/22 18:55:04



















JavaScript 数据类型详解




JavaScript 数据类型详解 
JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 
1. undefined 
定…...






编程新知
2025/12/25 4:05:41



















【 java 虚拟机知识 第一篇 】




目录 1.内存模型 
1.1.JVM内存模型的介绍 
1.2.堆和栈的区别 
1.3.栈的存储细节 
1.4.堆的部分 
1.5.程序计数器的作用 
1.6.方法区的内容 
1.7.字符串池 
1.8.引用类型 
1.9.内存泄漏与内存溢出 
1.10.会出现内存溢出的结构 1.内存模型 
1.1.JVM内存模型的介绍 
内存模型主要分…...






编程新知
2026/1/15 5:02:42