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

前端web入门-HTML-day01

news 文章来源：https://blog.csdn.net/weixin_73295475/article/details/130716042 2025/4/19 23:42:06

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

HTML初体验

HTML 定义

标签语法 

总结：

HTML 基本骨架 

基础知识：

总结： 

标签的关系

父子关系（嵌套关系）

兄弟关系（并列关系） 

代码格式

注释

标题标签 

段落标签 

换行与水平线标签 

文本格式化标签

图像标签 

基本使用

属性

路径 

相对路径

绝对路径

超链接

多媒体标签 

音频标签

视频标签

HTML初体验

HTML 定义

HTML 超文本标记语言——HyperText Markup Language。
• 超文本是什么？      链接
• 标记是什么？         标记也叫标签，带尖括号的文本

标签形式如下：其中<hl> </hl> <p>等蓝色字体的就是标签 

标签语法 

1.标签成对出现，中间包裹内容
2.<>里面放英文字母（标签名）
3.结束标签比开始标签多 /

我们以加粗文字的标签strong为例

加标签前： 

文字内容

在网页显示为： 

加标签后 ：

<strong>文字内容</strong>

在网页显示为：  

拓展：
 双标签：成对出现的标签
 单标签：只有开始标签，没有结束标签

单标签示例：

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

 以<hr>为例：

<strong>文字内容</strong>
<hr>

在网页显示为：                            

总结：

1. 保存 HTML 标签的文件扩展名是什么？
                       .html
2. HTML 标签名要放到什么括号里面？
                    尖括号<>
3. 结束标签比开始标签多什么？
                         /
4. 标签包裹的内容放在什么位置？
      开始标签和结束标签之间

HTML 基本骨架 

基础知识：

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如CSS
body：网页主体，用来存放给用户看的信息，例如图片、文字

title：网页标题

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

 输入！后点击回车即可自动生成如下骨架：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

我们可以试着在骨架中输入相关数据，如下所示：

在body之间输入：学习前端第一天

在title之间输入：网页标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title>
</head>
<body>学习前端第一天
</body>
</html>

在网页中显示为：          

此时网页标题变为：                                          

总结： 

1. VS Code 生成 HTML 骨架的符号是什么？
           ! （英文）配合 Enter 或 Tab
2. HTML 骨架标签包含哪些？

        html        整个网页
        head       网页头部
        title         网页标题
        body       网页主体 

标签的关系

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

父子关系（嵌套关系）

 
兄弟关系（并列关系） 

 

代码格式

父子关系：子级标签换行且缩进（Tab键）
兄弟关系：兄弟标签换行要对齐  

 

注释

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

标题标签 

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

标签名：h1 ~ h6（双标签）
显示特点：
• 文字加粗
• 字号逐渐减小
• 独占一行（换行）

• h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
• h2 ~ h6 没有使用次数的限制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

网页显示为：                                                              

段落标签 

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

标签名：p（双标签）
显示特点：
• 独占一行
• 段落之间存在间隙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>今天是学习前端第一天，尽管我平时很忙，我也会抽出时间来学习它</p><p>马上要期末考试啦，好紧张，肿么办</p>
</body>
</html>

 网页显示如下图所示：p之间的内容独占一行，且每段之间存在间隙

换行与水平线标签 

换行：<br>（单标签）

水平线：<hr>（单标签）

（浏览器不识别代码中的 Enter 键换行）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>小周不摆烂小周想摆烂<br>小周不能摆烂<br><br>小周偶尔摆烂<hr>
</body>
</html>

如下图所示，如果不加<br>，网页中的文本内容并不会自动换行，每加一个<br>，文本内容就自动换行一次 

文本格式化标签

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

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

图像标签 

基本使用

作用：在网页中插入图片。

<img src="图片的 URL">

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./图片1.jpg"><img src="./图片2.jpg" >
</body>
</html>

 网页显示为：

属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 路径错误，网速慢等问题可能导致图片加载不出来，这个时候就用alt替换文本 --><img src="./图片.jpg" alt="这是一只猫"><!-- 鼠标停留在照片上面时会显示title后的文字，width和height可以改变图片大小 --><img src="./图片2.jpg" title="这也是一只猫" width="100" height="200">
</body>
</html>

网页输出为：                                      

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

路径 

相对路径

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在当前文件夹中提取图片 --><img src="./图片2.jpg" width="300"><!-- 在当前文件夹的另一个文件夹中提取图片 --><img src="./图片/图片2.jpg" width="300"><!-- 在当前文件夹的上一级文件夹中提取图片 --><img src="../图片2.jpg" width="300">
</body>
</html>

绝对路径

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

Windows 电脑从盘符出发
Mac 电脑从根目录（/）出发

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 将图片保存在电脑网盘的某一处后，直接复制图片的地址即可 --><img src="C:\Users\周星辰\Pictures\大学专用图片\图片2.jpg" width="300"><!-- 无需保存图片，在网上找到图片后直接复制图片的网址即可 --><img src="https://picb.zhimg.com/v2-550e60cd7c0380d0a7cb61bbe4eefe68_r.jpg?source=1940ef5c" width="300">
</body>
</html>

超链接

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

<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
拓展：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://www.baidu.com/">跳转到百度</a><a href="./图片1.jpg" ">跳转到本地照片</a><!-- 用target打开新窗口显示 --><a href="./图片1.jpg" target="_blank">跳转到本地照片</a>
</body>
</html>

网页显示为： 

          

多媒体标签 

音频标签

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词 --><audio src="C:\Users\周星辰\Music\笛子绿洲 - 美丽的神话【竹笛】.mp3" controls></audio>
</body>
</html>

 

视频标签

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在浏览器中想要自动播放视频，必须要有muted属性 --><video src="E:\视频剪辑\4月21日 (2)(1).mp4" controls width="400" muted autoplay></video>
</body>
</html>

网页显示为： 

 

相关文章：

前端web入门-HTML-day01

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 HTML初体验 HTML 定义 标签语法 总结&#xff1a; HTML 基本骨架 基础知识&#xff1a; 总结&#…...

编程日记 2023/5/18 0:05:58

创建一个Go项目

创建一个Go项目 1.创建项目 package mainfunc main() {println("你好啊&#xff0c;简单点了&#xff01;") }如果是本地的话可以采用go run 项目名的方式。 可以采用go run --work 项目名的方式&#xff0c;此时可以展示日志信息。 如果是只编译的话 go build 项…...

编程日记 2023/5/18 0:00:57

从 Spring 的创建到 Bean 对象的存储、读取

目录 创建 Spring 项目&#xff1a; 1.创建一个 Maven 项目&#xff1a; 2.添加 Spring 框架支持&#xff1a; 3.配置资源文件&#xff1a; 4.添加启动类&#xff1a; Bean 对象的使用&#xff1a; 1.存储 Bean 对象&#xff1a; 1.1 创建 Bean&#xff1a; 1.2 存储 B…...

编程日记 2023/5/29 16:29:48

【一文吃透归并排序】基本归并·原地归并·自然归并 C++

目录 1 引入情境基本归并排序实现 C 2 原地归并排序2-1 死板的解法2-2 原地工作区2-3 链表归并排序 3 自底向上归并排序4 两路自然归并排序4-1 形式化描述4-2 代码实现 1 引入情境 归并思想&#xff1a;假设有两队小孩&#xff0c;都是从矮到高排序&#xff0c;现在通过一扇门后…...

编程日记 2023/5/17 23:50:55

读《Spring Boot 3核心技术与最佳实践》有感

我是谁&#xff1f; &#x1f468;‍&#x1f393;作者&#xff1a;bug菌 ✏️博客&#xff1a;CSDN、掘金、infoQ、51CTO等 &#x1f389;简介&#xff1a;CSDN/阿里云/华为云/51CTO博客专家&#xff0c;C站历届博客之星Top50&#xff0c;掘金/InfoQ/51CTO等社区优质创作者&am…...

编程日记 2023/5/17 23:45:54

板子短路了？

有段时间没更新了&#xff0c;主要是最近有点忙&#xff0c;当然也因为有点“懒”。 做这行业的都知道&#xff0c;下半年都是比较忙的&#xff0c;相信大家也是&#xff01; 相信做硬件的小伙伴们&#xff0c;遇到过短路的板子已经不计其数了。 短路带来的危害&#xff1a;…...

编程日记 2023/5/17 23:40:53

一行代码绘制高分SCI限制立方图

一、概述 Restricted cubic splines (RCS)是一种基于样条函数的非参数化模型&#xff0c;它可以可靠地拟合非线性关系&#xff0c;可以自适应地调整分割结点。在统计学和机器学习领域&#xff0c;RCS通常用来对连续型自变量进行建模&#xff0c;并在解释自变量与响应变量的关系…...

编程日记 2023/5/17 23:35:52

spring 容器结构/机制debug分析--Spring 学习的核心内容和几个重要概念--IOC 的开发模式--综合解图

目录 Spring Spring 学习的核心内容 解读上图: Spring 几个重要概念 ● 传统的开发模式 解读上图 ● IOC 的开发模式 解读上图 代码示例—入门 xml代码 注意事项和细节 1、说明 2、解释一下类加载路径 3、debug 看看 spring 容器结构/机制 综合解图 Spring Spr…...

编程日记 2023/5/17 23:30:51

excel实战小测第四

【项目背景】 本项目为某招聘网站部分招聘信息&#xff0c;要求对“数据分析师”岗位进行招聘需求分析&#xff0c;通过对城市、行业、学历要求、薪资待遇等不同方向进行相关性分析&#xff0c;加深对数据分析行业的了解。 结合企业真实招聘信息&#xff0c;可以帮助有意转向数…...

编程日记 2023/5/31 18:36:48

什么是SpringBoot自动配置

概述&#xff1a; 现在的Java面试基本都会问到你知道什么是Springboot的自动配置。为什么面试官要问这样的问题&#xff0c;主要是在于看你有没有对Springboot的原理有没有深入的了解&#xff0c;有没有看过Springboot的源码&#xff0c;这是区别普通程序员与高级程序员最好的…...

编程日记 2023/5/17 23:20:48

基于IC5000烧录器使用winIDEA烧写+调试程序（S32K324的软件烧写与调试）

目录 一、iSYSTEM简介二、如何使用iSYSTEM winIDEA烧写调试程序2.1 打开winIDEA&#xff1a;2.2 新建一个Workspace;2.3 硬件配置:2.4 选择CPU芯片型号&#xff1a;2.5 加载烧写文件&#xff1a;2.6 开始烧录程序&#xff1a;2.7 程序调试Debug&#xff1a;2.7.1 运行程序&…...

编程日记 2023/5/17 23:15:47

新手开始学【网络安全】要怎么入门？

前言&#xff1a;网络安全如何从零开始学习&#xff0c;少走弯路&#xff1f; 目录&#xff1a; 一&#xff0c;怎么入门&#xff1f; 1、Web 安全相关概念&#xff08;2 周&#xff09;2、熟悉渗透相关工具&#xff08;3 周&#xff09;3、渗透实战操作&#xff08;5 周&…...

编程日记 2023/5/17 23:10:46

Linux指令 快捷键

热键 上一次我们说到了linux的基本指令&#xff0c;这次我们先说一下热键 TAB TAB键在linux中有什么作用呢&#xff1f;&#xff1f; 在Linux中&#xff0c;假设我们想要输入的指令忘记了&#xff0c;我们可以TAB两下&#xff0c;帮我们补全命令或者假如命令太多&#xff0…...

编程日记 2023/5/17 23:05:45

Testing and fault tolerence考试要点

文章目录 ATPGFault modelScanFunctional testMemory BISTLogic BISTboundary scanATEIddq testingFault tolerant designRisk analysis ATPG ATPG工作流程fault collapsing的原则 Fault model 有哪些fault model以及他们的工作原理 Scan Scan寄存器结构Scan Chain的连接方…...

编程日记 2023/5/17 23:00:44

记一次springboot项目漏洞挖掘

前言 前段时间的比赛将该cms作为了题目考察&#xff0c;这个cms的洞也被大佬们吃的差不多了&#xff0c;自己也就借此机会来浅浅测试下这个cms残余漏洞&#xff0c;并记录下这一整个流程&#xff0c;谨以此记给小白师傅们分享下思路&#xff0c;有错误的地方还望大佬们请以指正…...

编程日记 2023/5/17 22:55:43

R语言 | 数据框

目录 一、认识数据框 7.1 建立第一个数据框 7.2 验证与设定数据框的列名和行名 二、认识数据框的结构 三、获取数据框内容 3.1 一般获取 3.2 特殊字符$ 3.3 再看取得的数据 四、使用rbind()函数增加数据框的行数据 五、使用cbind()函数增加数据框的列数据 5.1 使用$符号…...

编程日记 2023/5/17 22:50:42

基于SpringBoot的招生管理系统的设计与实现

背景 本次设计任务是要设计一个招生管理系统&#xff0c;通过这个系统能够满足管理员和学生的招生公告管理功能。系统的主要功能包括首页、个人中心、学生管理、专业信息管理、专业报名管理、录取通知管理、系统管理等功能。 管理员可以根据系统给定的账号进行登录&#xff0…...

编程日记 2023/5/30 5:29:44

Oracle Profile详解

Profile的作用主要表现在三个方面 1、密码策略 2、对用户所能使用的资源进行管理 3、profile存放在数据字典里面&#xff0c;默认有一个名字为default的profile set linesize 160 set pagesize 30 select resource_name,resource_type,limit from dba_profiles where profile‘…...

编程日记 2023/5/17 22:40:40

r语言tidyverse教程：5 字符串处理stringr

文章目录 R语言系列&#xff1a; 编程基础&#x1f48e;循环语句&#x1f48e;向量、矩阵和数组&#x1f48e;列表、数据帧排序函数&#x1f48e;apply系列函数tidyverse&#xff1a;readr&#x1f48e;tibble&#x1f48e;tidyr&#x1f48e;dplyr&#x1f48e;stringr stri…...

编程日记 2023/5/17 22:35:39

知识变现海哥：知识变现的本质就是卖

知识变现的本质就是卖&#xff0c;而有人买的本质&#xff0c;就是你解决了某方面的需求。 好的成交&#xff0c;从来都是相互的&#xff0c; 只靠一边主动推销来维系是远远不够的。 绝对不是靠忽悠&#xff0c;而是靠实力。 先讲一个故事。 19世纪时&#xff0c;一个年轻的…...

编程日记 2023/5/31 18:37:47

jdbc和druid和mybatis之间的关系

第一种方式 jdbc整合了:加载数据库驱动,创建连接,写原生语句,执行,关闭这些东西. 第二种方式 mybatis对jdbc进行封装,他允许你通过配置的形式,配置数据库参数,并且允许你通过xml来写动态sql语句.if:test让你可以把sql变得灵活起来.并且还能将你的查询结果直接映射到你想要的…...

编程日记 2023/5/30 19:21:25

云原生Istio案例实战

目录 1 Istio监控功能1.1 prometheus和grafana1.2 访问prometheus1.3 访问grafana 2 项目案例&#xff1a;bookinfo2.1 理解什么是bookinfo2.2 sidecar自动注入到微服务2.3 启动bookinfo2.4 通过ingress方式访问2.5 通过istio的ingressgateway访问2.5.1 确定 Ingress 的 IP 和端…...

编程日记 2023/5/30 19:21:18

解读赛力斯年报：华为智选车的B面

作者 | Amy 编辑 | 德新 赛力斯&#xff0c;华为智选车的B面。 2021年&#xff0c;赛力斯SF5进入华为渠道销售&#xff0c;华为自此开启了智选车模式。到年末&#xff0c;双方更是推出AITO品牌。AITO凭借M5/M7等车型在2022年拿下了超过7.5万台的销量&#xff0c;成为增长最快的…...

编程日记 2023/5/30 19:21:14

互联网内卷严重？你咋不看看其他行业呢？无非是三十晚上无月亮，大家都一样

一千个人眼中有一千个哈姆雷特&#xff0c;互联网行业就像一座围城&#xff0c;城外的人想进来&#xff0c;城内的人要么卷要么躺要么润 ​ 真实的感受你可以现在约几个面试体验一下。内卷到什么程度&#xff1f; 产品和运营岗&#xff0c;业务经验不完全对口简历都过不了&am…...

编程日记 2023/5/30 19:21:11

CompletableFuture异步任务编排使用

CompletableFuture异步任务编排使用 runAsync 和 supplyAsyncallOf 和 anyOfjoin 和 getwhenComplete 和 whenCompleteAsync 和 exceptionallyhandle 和 handleAsync 串行编排runAsync().thenRunAsync()supplyAsync().thenAcceptAsync((res) ->{})supplyAsync().thenApplyAs…...

编程日记 2023/5/30 19:21:07

Scala的高级用法

文章目录 1. 默认参数值1.1 方法默认参数1.2 类默认参数 2. 特质 (Traits)2.1 子类型2.2 扩展特征&#xff0c;当做接口来使用 3.元组3.1 定义与取值3.2 元组用于模式匹配3.3 用于for循环 4 高阶函数4.1 常见的高阶函数map4.2 简化涨薪策略代码 5.嵌套方法6.多参数列表&#xf…...

编程日记 2023/5/30 15:40:01

【31.在排序数组中查找元素的第一个和最后一个位置】

给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 1&#xff1a…...

编程日记 2023/5/30 19:21:02

如何构建“Buy Me a Coffee”DeFi dApp

&#x1f978; 本教程来自官网&#xff1a;https://docs.alchemy.com/docs。对原文部分内容进行了修改。教程中所有实例经过本人实践&#xff0c;代码可见&#xff1a;https://github.com/ChuXiaoYi/web3Study 区块链技术令人惊叹&#xff0c;因为它使我们能够使用代码和软件编…...

编程日记 2023/5/30 19:21:00

Redis 实战篇：巧用 Bitmap 实现亿级海量数据统计

目录 二值状态统计判断用户登陆态SETBIT 命令GETBIT 命令第一步&#xff0c;执行以下指令&#xff0c;表示用户已登录。第二步&#xff0c;检查该用户是否登陆&#xff0c;返回值 1 表示已登录。第三步&#xff0c;登出&#xff0c;将 offset 对应的 value 设置成 0。 用户每个…...

编程日记 2023/5/30 19:20:57

3 天，入门 TAURI 并开发一个跨平台 ChatGPT 客户端

TAURI 是什么 TAURI 是一个使用 Rust 编写的程序框架&#xff0c;它允许我们使用 Web 技术和 Rust 语言构建跨端应用。它提供了大量特性&#xff0c;例如系统通知、网络请求、全局快捷键、本地文件处理等&#xff0c;它们都可以在前端通过 JavaScript 便捷的调用。 TAURI 应用…...

编程日记 2023/5/30 19:20:54