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

零基础学习HTML5

news 文章来源：https://blog.csdn.net/m0_53951384/article/details/133879316 2025/5/16 15:05:18

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

10种新型网络安全威胁和攻击手法

2023年&#xff0c;网络威胁领域呈现出一些新的发展趋势&#xff0c;攻击类型趋于多样化&#xff0c;例如&#xff1a;从MOVEit攻击可以看出勒索攻击者开始抛弃基于加密的勒索软件&#xff0c;转向窃取数据进行勒索&#xff1b;同时&#xff0c;攻击者们还减少了对传统恶意软件…...

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

Elasticsearch：painless script 语法基础和实战

摘要&#xff1a;Elasticsearch&#xff0c;Java script的作用 script是Elasticsearch的拓展功能&#xff0c;通过定制的表达式实现已经预设好的API无法完成的个性化需求&#xff0c;比如完成以下操作 字段再加工/统计输出字段之间逻辑运算定义查询得分的计算公式定义特殊过…...

编程日记 2023/10/20 12:43:09

《数据结构、算法与应用C++语言描述》使用C++语言实现数组双端队列

《数据结构、算法与应用C语言描述》使用C语言实现数组双端队列 定义 队列的定义 队列&#xff08;queue&#xff09;是一个线性表&#xff0c;其插入和删除操作分别在表的不同端进行。插入元素的那一端称为队尾&#xff08;back或rear&#xff09;&#xff0c;删除元素的那一…...

编程日记 2023/10/20 12:41:07

TikTok Shop新结算政策：卖家选择权加强，电商市场蓄势待发

据悉&#xff0c;从2023年11月1日开始&#xff0c;TikTok Shop将根据卖家的店铺表现来应用3种不同类型的结算期&#xff0c;其中&#xff0c;标准结算期&#xff1a;资金交收期为8个日历日&#xff1b;快速结算期&#xff1a;资金交收期为3个日历日&#xff1b;延长结算期&…...

编程日记 2023/10/20 12:40:06

asp.net特色商品购物网站系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net特色商品购物网站系统 是一套完善的web设计管理系统&#xff0c;系统采用mvc模式&#xff08;BLLDALENTITY&#xff09;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 vs2010&#xff0c;数据库为sqlserver2008&a…...

编程日记 2023/10/20 12:39:05

解决一则诡异的javascript函数不执行的问题

有个vue 音乐播放器项目&#xff0c;由于之前腾讯的搜索接口没法用了&#xff0c;于是改成了别家的搜索接口。 但是由于返回数据结构不一样&#xff0c;代码重构的工作量还是挺大的&#xff1a;包括数据请求&#xff0c;数据处理&#xff0c;dom渲染&#xff0c;处理逻辑都进行…...

编程日记 2023/10/20 12:37:01

汽车安全的未来：毫米波雷达在碰撞避免系统中的角色

随着科技的飞速发展&#xff0c;汽车安全系统变得愈加智能化&#xff0c;而毫米波雷达技术正是这一领域的亮点之一。本文将深入探讨毫米波雷达在汽车碰撞避免系统中的关键角色&#xff0c;以及其对未来汽车安全的影响。 随着城市交通的拥堵和驾驶环境的变化&#xff0c;汽车安全…...

编程日记 2023/10/20 12:36:00

体感互动游戏研发虚拟场景3D漫游

体感互动游戏是一种结合虚拟现实&#xff08;VR&#xff09;或增强现实&#xff08;AR&#xff09;技术的游戏&#xff0c;允许玩家以身体动作和姿势来与游戏互动。这种类型的游戏通常需要特殊的硬件设备&#xff0c;例如体感控制器、摄像头或传感器&#xff0c;以捕捉玩家的动…...

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

微信小程序获取手机号（2023年10月 python版）[无需订阅]

技术栈&#xff1a; 1. 微信开发者工具中的调试基础库版本&#xff1a;3.1.2。 2. 后台&#xff1a;django。 步骤&#xff1a; 1. 首先在后台django项目的定时任务中增加一个下载access_token函数&#xff0c;并把得到的access_token保存在数据库中&#xff08;其实随便哪里…...

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

Linux下设置网关以及网络相关命令

一、临时设置网关 查看当前路由表&#xff1a;route -n设置网关&#xff1a;route add default gw <路由器的网关IP> 注意&#xff1a;系统重启时&#xff0c;这些更改将不生效 二、永久设置网关 列出可用网络连接&#xff1a;nmcli connection show设置网关&#x…...

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