前端web入门-HTML-day01

news2024/11/28 2:32:13

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

目录

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>

网页显示为： 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/537811.html

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

相关文章

20年磨一剑，数慧时空推出智能遥感云平台DIEY及自然资源多模态大模型“长城”

20年磨一剑，数慧时空推出智能遥感云平台DIEY及自然资源多模态大模型“长城”

5月17日&#xff0c;主题为“时空智能 从感知到决策”的第十二届全球地理信息开发者大会&#xff08;WGDC2023&#xff09;在北京昆泰酒店举行。大会聚集了千余位产业专家、行业用户、创新企业等业界精英&#xff0c;共话时空智能时代下的技术发展与应用创新。中国科学院院士、…
阅读更多...
初始计算机操作系统——进程与线程，多线程以及Thread类的创建和属性

初始计算机操作系统——进程与线程，多线程以及Thread类的创建和属性

目录 通过前半篇文章需要了解 1.进程&#xff08;process/task&#xff09;&#xff1a;运行起来的可执行文件。 为啥要有进程&#xff1f; 如何解决这个问题&#xff1f; &#xff08;1&#xff09;进程池&#xff1a; &#xff08;2&#xff09;使用线程&#xff1a; 为啥线…
阅读更多...
国考省考行测：判断推理，类比推理1，概念关系，包含关系，交叉关系，并列关系，全同关系

国考省考行测：判断推理，类比推理1，概念关系，包含关系，交叉关系，并列关系，全同关系

国考省考行测&#xff1a;判断推理&#xff0c;类比推理1&#xff0c;概念关系&#xff0c;包含关系&#xff0c;交叉关系&#xff0c;并列关系&#xff0c;全同关系 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#x…
阅读更多...
chatgpt赋能Python-libreoffice_python扩展

chatgpt赋能Python-libreoffice_python扩展

LibreOffice Python扩展: 提升办公效率的利器 如果你一直在寻找一种提高办公效率的方法&#xff0c;那么你肯定会喜欢LibreOffice Python扩展。作为LibreOffice的一个特性&#xff0c;它可以让你使用Python编写宏程序自动化你的日常办公任务。 什么是LibreOffice Python扩展&…
阅读更多...
力扣sql中等篇练习(二十一)

力扣sql中等篇练习(二十一)

力扣sql中等篇练习(二十一) 1 最大数量高于平均水平的订单 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # Write your MySQL query statement below WITH t1 as (SELECT order_id,avg(quantity) AquantityFROM OrdersDeta…
阅读更多...
chatgpt赋能Python-numpy数据预处理

chatgpt赋能Python-numpy数据预处理

Numpy数据预处理综述 介绍 Numpy是Python中最流行的数学库之一&#xff0c;可以用于高效的处理大型数据。Numpy提供了各种强大的数据结构和函数&#xff0c;使得数据分析和处理变得更加容易和直观。本文将介绍numpy中的一些数据预处理技术&#xff0c;包括数据清洗、缩放、归…
阅读更多...
chatgpt赋能Python-mingw编译python

chatgpt赋能Python-mingw编译python

Mingw编译Python&#xff1a;一种常用的解决方案 在Python开发中&#xff0c;为了获得更好的性能&#xff0c;我们通常会选择编译Python源代码。而在Windows平台上&#xff0c; Mingw编译器是一种常用的解决方案。本文将介绍Mingw编译Python的过程&#xff0c;并探讨其优缺点。…
阅读更多...
chatgpt赋能Python-numpy创建

chatgpt赋能Python-numpy创建

Numpy&#xff1a;Python中的数学计算利器 作为Python中进行数学计算和科学计算最重要的库之一&#xff0c;Numpy已经成为了Python编程中的标配。Numpy以其出色的数组处理能力和矩阵运算效果&#xff0c;让Python用户的数学计算和科学计算变得更加简单高效。在本篇文章中&…
阅读更多...
【半监督学习】Match系列.4

【半监督学习】Match系列.4

介绍几篇关于半监督学习的论文&#xff1a;CLS&#xff08;arXiv2022&#xff09;&#xff0c;Ada-CM&#xff08;CVPR2022&#xff09;&#xff0c;SemiMatch&#xff08;CVPR2022&#xff09;. CLS: Cross Labeling Supervision for Semi-Supervised Learning, arXiv2022 解…
阅读更多...
mysql增量备份

mysql增量备份

目录 一、修改配置文件&#xff0c;开启增量备份功能 &#xff08;1&#xff09;查看是否已经开启了 &#xff08;2&#xff09;修改配置文件开启 &#xff08;3&#xff09;增量记录文件 二、还原增量备份 &#xff08;1&#xff09;修改了数据 &#xff08;2&#xff…
阅读更多...
使用thrift进行RPC通信(附c程序示例)

使用thrift进行RPC通信(附c程序示例)

前言 为了实现不同语言的程序跨进程、跨主机通信&#xff0c;一般可以采用mq或rpc框架来实现。 对于异步通知的场景可以使用mq&#xff0c;如zeroMQ。 但对于某些实时性较强且同步的应用场景&#xff0c;使用成熟的rpc框架来实现也是一种比较更好的选择。 开源的rpc框架有很…
阅读更多...
MySQL---游标，异常处理，循环构建表

MySQL---游标，异常处理，循环构建表

1. 游标 游标(cursor)是用来存储查询结果集的数据类型 , 在存储过程和函数中可以使用光标对结果集进行 循环的处理。光标的使用包括光标的声明、OPEN、FETCH 和 CLOSE. -- 声明语法 declare cursor_name cursor for select_statement -- 打开语法 open cursor_name -- 取值语…
阅读更多...
由浅入深Netty基础知识NIO三大组件原理实战

由浅入深Netty基础知识NIO三大组件原理实战

目录 1 三大组件1.1 Channel & Buffer1.2 Selector1.3 多线程版设计1.4 多线程版缺点1.5 线程池版设计1.6 线程池版缺点1.7 selector 版设计 2 ByteBuffer2.1 ByteBuffer 正确使用姿势2.2 ByteBuffer 结构2.3 调试工具类2.4 ByteBuffer 常见方法2.4.1 分配空间2.4.2 向 buf…
阅读更多...
chatgpt赋能Python-numpy查找

chatgpt赋能Python-numpy查找

Numpy查找 - 了解numpy中的查找功能 什么是Numpy&#xff1f; Numpy是Python语言中的一种开源的数学计算库&#xff0c;允许开发者轻松高效地进行数学运算。它提供了一整套矩阵运算方式&#xff0c;支持各种各样的数学函数和数据类型&#xff0c;并且可以与其他Python库良好地…
阅读更多...
chatgpt赋能Python-macbook怎么用python

chatgpt赋能Python-macbook怎么用python

使用MacBook进行Python编程的完全指南 如果您是一名Python编程工程师&#xff0c;那么您需要一台性能良好的电脑来进行编程工作。今天&#xff0c;我们将探讨如何使用MacBook来编写Python代码&#xff0c;以及如何使您的Mac运行最佳状态。 安装Python 在开始使用Python之前&…
阅读更多...
还在老一套？STM32使用新KEIL5的IDE，全新开发模式RTE介绍及使用

还在老一套？STM32使用新KEIL5的IDE，全新开发模式RTE介绍及使用

Keil新版本出来了&#xff0c;推出了一种全新开发模式RTE框架( Run-Time Environment)&#xff0c;更好用了。然而网上的教程资料竟还都是把Keil5当成Keil4来用&#xff0c;直接不使用这个功能。当前正点原子或野火的教程提供的例程虽有提到Keil5&#xff0c;但也是基本上当Kei…
阅读更多...
Qt Quick系列(1)—开发界面以及相关文件介绍

Qt Quick系列(1)—开发界面以及相关文件介绍

作者&#xff1a;CCAccept 专栏&#xff1a;Qt Quick 文章目录 开发界面相关文件介绍.pro文件.pri文件&#xff08;这个一般要稍微大一点的Qt项目才会用到&#xff09;main.cppmain.qml 开发界面 如何具体的写代码实现Qt Quick的UI界面&#xff0c;首先我们需要新建一个空的…
阅读更多...
Java面向对象程序设计实验报告（实验三 继承的练习）

Java面向对象程序设计实验报告（实验三 继承的练习）

✨作者&#xff1a;命运之光 ✨ 专栏&#xff1a;Java面向对象程序设计实验报告 ​ 目录 ✨一、需求设计 ✨二、概要设计 ✨三、详细设计 ✨四、调试结果 ✨五、测试结果 ✨附录&#xff1a;源程序代码&#xff08;带注释&#xff09; demo3类 Person类 Student类 …
阅读更多...
[架构之路-201]-《软考-系统分析师》- 关键技术 - 结构化分析方法与面向对象分析（分析与设计的区别）

[架构之路-201]-《软考-系统分析师》- 关键技术 - 结构化分析方法与面向对象分析（分析与设计的区别）

目录 前言&#xff1a; 一、分析与设计的区别 二、结构化分析方法 2.1 实体关系图&#xff1a;E - R 图 &#xff08;名词&#xff09; 2.2. 数据流图&#xff08;数据的流动&#xff09; (1) 顶层图。 (2) 逐层分解。 2.3. 状态转换图&#xff08;动作&#xff09; …
阅读更多...
电压比较器

电压比较器

电压比较器&#xff1a; 应用一&#xff1a;过压&#xff0c;低压检测&#xff08;over and undervoltage detectors&#xff09; 如果Vin<Vs&#xff0c;则VoutVpullup。 如果Vin>Vs&#xff0c;则Vout0V。 应用二&#xff1a;窗口比较器&#xff08;window comparat…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023