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

零基础学习HTML5

news 2025/7/7 5:13:16

1. 使用软件

vscode + 谷歌浏览器
vscode下载地址：https://code.visualstudio.com/
谷歌可以使用360软件管家安装

2. 安装插件

在vscode中安装插件：open in browser，点击Extensions后搜索对应插件名然后点击安装Install
在这里插入图片描述
安装完成后可在html文件中右键多了两个选择：
在这里插入图片描述
或者安装live server插件，然后右键选择Open with live Server他就会帮助我们启动浏览器，然后使用win + ➡的方式切屏，就可以看到实时的效果展示。

3. 标签语法

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

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

标签结构

  • 标签要成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /
  • 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>

4. HTML骨架

  • html：整个网页
  • head：网页头部，用来存放给浏览器看的信息，例如 CSS
    • title：网页标题
  • body：网页主体，用来存放给用户看的信息，例如图片、文字
<html><head><title>网页标题</title></head><body>网页主体</body>
</html>

提示

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

5. 标签的关系

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

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

    <html><body></body>
</html>

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

    <head></head>
<body></body>

6. 注释

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

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

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

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

7. 标题标签

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

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

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次（这是一种规范写法但并不强制），用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

8. 段落标签

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

<p>段落</p>

显示特点：

  • 独占一行
  • 段落之间存在间隙

9. 换行和水平线

  • 换行：br
  • 水平线：hr
<br>
<hr>

10. 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
在这里插入图片描述

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

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

图像属性

在这里插入图片描述

属性语法

  • 属性名=“属性值”
  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
    在这里插入图片描述

12. 路径

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

路径分类：

  • 相对路径：从当前文件位置出发查找目标文件
  • 绝对路径：从盘符出发查找目标文件
    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发

相对路径

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

特殊符号：

  • / 表示进入某个文件夹里面 → 文件夹名/
  • **. ** 表示当前文件所在文件夹 → ./
  • … 表示当前文件的上一级文件夹 → …/

绝对路径

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

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

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

13. 超链接标签

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

<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>

14. 音频

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

常用属性
在这里插入图片描述

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

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

15. 视频

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

常用属性
在这里插入图片描述

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

16. 综合案例一-个人简介

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

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果
在这里插入图片描述

<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>

17. 综合案例二-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>

相关文章：

零基础学习HTML5

1. 使用软件 vscode 谷歌浏览器 vscode下载地址&#xff1a;https://code.visualstudio.com/ 谷歌可以使用360软件管家安装 2. 安装插件 在vscode中安装插件&#xff1a;open in browser&#xff0c;点击Extensions后搜索对应插件名然后点击安装Install 安装完成后可在htm…...

编程日记 2023/10/20 13:10:40

Jenkins 部署 Maven项目很慢怎么办？

Jenkins 部署 Maven项目很慢怎么办&#xff1f; 答案是&#xff1a;使用阿里云的Maven仓库 <mirror><id>aliyunmaven</id><mirrorOf>*</mirrorOf><name>阿里云公共仓库</name><url>https://maven.aliyun.com/repository/pub…...

编程日记 2023/10/20 13:09:38

关于刷题时使用数组的小注意事项

&#x1f4af; 博客内容&#xff1a;关于刷题时使用数组的小技巧 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#…...

编程日记 2023/10/20 13:08:37

【MySQL】面试题

引言 &#xff1a;MySQL面试题及答案 【最新版】 目录 1、NOW&#xff08;&#xff09;和CURRENT_DATE&#xff08;&#xff09;有什么区别&#xff1f;2、CHAR和VARCHAR的区别&#xff1f;3、主键索引与唯一索引的区别4、MySQL中有哪些不同的表格&#xff1f;5、SQL的生命周期…...

编程日记 2023/10/20 13:05:34

Pytorch训练深度强化学习时CPU内存占用一直在快速增加

最近在用MATD3算法解决多机器人任务&#xff0c;但是在训练过程中&#xff0c;CPU内存一直在增加&#xff08;注意&#xff0c;不是GPU显存&#xff09;。我很头疼&#xff0c;以为是算法代码出了问题&#xff0c;导致了内存泄漏&#xff0c;折腾了1天也没解决。后来用memory_p…...

编程日记 2023/10/20 13:04:31

git第一次推送出现推送被拒绝

前言 git 第一次推送出现以下错误 ! [rejected] master -> master (fetch first) error: failed to push some refs to ‘https://gitee.com/fengshangyunwang/iot-front-end.git’ hint: Updates were rejected because the remote contains work that you do hint: not …...

编程日记 2023/10/20 13:02:29

CRC16计算FC(博途SCL语言)

CRC8的计算FC,相关链接请查看下面文章链接： 博途SCL CRC8 计算FC(计算法)_博途怎么计算crc_RXXW_Dor的博客-CSDN博客关于CRC8的计算网上有很多资料和C代码，这里不在叙述,这里主要记录西门子的博途SCL完成CRC8的计算过程， CRC校验算法，说白了，就是把需要校验的数据与多项式…...

编程日记 2023/10/20 13:01:28

setsockopt()函数的用法

setsockopt() 函数是一个用于设置套接字选项的函数&#xff0c;通常在网络编程中使用。它用于配置套接字的各种参数和选项&#xff0c;以满足特定的需求。setsockopt() 函数的作用是设置指定套接字选项的值。 setsockopt() 函数的一般用法&#xff1a; int setsockopt(int soc…...

编程日记 2023/10/20 13:00:27

【AOP系列】6.缓存处理

在Java中&#xff0c;我们可以使用Spring AOP&#xff08;面向切面编程&#xff09;和自定义注解来做缓存处理。以下是一个简单的示例&#xff1a; 首先&#xff0c;我们创建一个自定义注解&#xff0c;用于标记需要进行缓存处理的方法&#xff1a; import java.lang.annotat…...

编程日记 2023/10/20 12:59:26

云函数cron-parser解析时区问题

1、问题 云函数部署后cron-parser解析0点会变成8点 考虑可能是时区的问题 然后看文档发现果然有问题&#xff0c;云函数环境是utc0 2、解决 看了半天cron-parser文档发现 Using Date as an input can be problematic specially when using the tz option. The issue bein…...

编程日记 2023/10/20 12:58:24

Android11修改自动允许连接到建议的WLAN网络

客户的app需要连接指定的wifi，但是会提示下面的对话框（是否允许系统连接到建议的WLAN网络？）： 客户需求：不提示这个对话框自动允许。 根据字符串定位到frameworks\opt\net\wifi\service\java\com\android\server\wifi\WifiNetworkSuggestionsManager.java 中的privat…...

编程日记 2023/10/20 12:57:24

基于Qt HTTP应用程序项目案例

文章目录 主项目入口项目子头文件httpwindow.hhttpwindow.h源文件httpwindow.cppui文件效果演示主项目入口 main函数创建对象空间，确认窗口的大小和坐标。 #include <QApplication> #include <QDir> #include...

编程日记 2023/10/20 12:56:23

OpenGL —— 2.7、绘制多个自旋转的贴图正方体（附源码，glfw+glad）

源码效果 C源码 纹理图片 需下载stb_image.h这个解码图片的库&#xff0c;该库只有一个头文件。 具体代码&#xff1a; vertexShader.glsl #version 330 corelayout(location 0) in vec3 aPos; layout(location 1) in vec2 aUV;out vec2 outUV;uniform mat4 _modelMatrix; …...

编程日记 2023/10/20 12:55:22

linux之perf(8)annotate标注

Linux之perf(8)annotate标注 Author&#xff1a;Onceday Date&#xff1a;2023年10月12日 漫漫长路&#xff0c;才刚刚开始… 注&#xff1a;该文档内容采用了GPT4.0生成的回答&#xff0c;部分文本准确率可能存在问题。 参考文档: Tutorial - Perf Wiki (kernel.org)perf…...

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

【广州华锐互动】VR建筑安全培训体验为建筑行业人才培养提供有力支持

随着建筑行业的快速发展&#xff0c;建筑施工安全问题日益受到广泛关注。然而&#xff0c;传统的安全培训方式往往缺乏实践性和真实性&#xff0c;难以让员工真正掌握安全操作技能。近年来&#xff0c;虚拟现实(VR)技术的广泛应用为建筑施工安全培训提供了新的机遇。 虚拟现实技…...

编程日记 2023/10/20 12:53:20

【Javascript保姆级教程】运算符

文章目录 前言一、运算符是什么二、赋值运算符2.1 如何使用赋值运算符2.2 示例代码12.3 示例代码2 三、自增运算符3.1 运算符3.2 示例代码13.3 示例代码2 四、比较运算符4.1 常见的运算符4.2 如何使用4.3 示例代码14.4 示例代码2 五、逻辑运算符逻辑运算符列举 六、运算符优先级…...

编程日记 2023/10/20 12:52:18

图论与网络优化

2.概念与计算 2.1 图的定义 2.1.1 定义 图(graph) G G G 是一个有序的三元组&#xff0c;记作 G < V ( G ) , E ( G ) , ψ ( G ) > G<V(G),E(G),\psi (G)> G<V(G),E(G),ψ(G)>。 V ( G ) V(G) V(G) 是顶点集。 E ( G ) E(G) E(G) 是边集。 ψ ( G ) \…...

编程日记 2023/10/20 12:50:16

【论文复现】基于多模态深度学习方法的单细胞多组学数据聚类（【生物信息学】实验二：多组学数据融合：scMDC）

目录 一、实验介绍 1. 论文&#xff1a;基于多模态深度学习方法的单细胞多组学数据聚类 Abstract 2. Github链接 二、实验环境 0. 作者要求 1. 环境复现 实验一 实验二&#xff08;本实验&#xff09; 2. 库版本介绍 实验一 实验二 3. IDE 三、实验内容 1. 用法…...

编程日记 2023/10/20 12:49:15

mysql按指定字符截取

1、使用SUBSTRING函数进行截取 语法&#xff1a;str是要截取的字符串&#xff0c;pos是起始位置&#xff0c;len是要截取的长度 SUBSTRING(str, pos, len)例子 SELECT SUBSTRING(Hello, World!, 1, 5);返回"Hello"。其中&#xff0c;起始位置为1&#xff0c;截取的…...

编程日记 2023/10/20 12:48:13

搜索引擎-在URL地址栏输入信息，不跳转

在URL地址栏输入信息&#xff0c;不跳转 原因解决待续 原因 因为没有使用某个搜索引擎&#xff0c;无法定位到资源 解决 先打开百度或搜狗其他引擎&#xff0c;在输入内容&#xff0c;跳转成功 待续 ————————————————————— 以上就是今日博客的全部内容…...

编程日记 2023/10/20 12:46:11

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/7/6 5:24:35

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/6 8:41:46

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/7/5 20:06:26

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/7/6 19:34:45

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2025/7/6 1:12:55

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/6/16 14:09:54

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/7/6 18:03:30

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/7/6 20:17:05

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/7/6 9:39:35