Html+css（第一天）

最新推荐文章于 2025-08-15 21:07:05 发布

原创最新推荐文章于 2025-08-15 21:07:05 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

Java学习专栏收录该内容

21 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括五大浏览器（IE、Firefox、Chrome、Safari、Opera）和网页在不同浏览器间的显示差异。讲解了Web标准的构成，并详细阐述了HTML的基本骨架标签如html、head、body、title等。此外，还提到了VSCode作为前端开发工具的常用快捷键，以及HTML中的文本格式化、图片、音频、视频、链接等元素的使用。内容涵盖标签的父子、兄弟关系以及常见属性的解释，是初学者掌握HTML的入门教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础认识

1.五大浏览器有哪些？
IE浏览器
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
Safari浏览器
欧朋浏览器（Opera）

2.相同的网页在不同浏览器中显示效果会完全一致吗？
因为不同浏览器渲染引擎不同，解析的效果会存在差异

3.Web标准的构成
在这里插入图片描述 4.HTML的骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

5.VSCode软件作为前端的主流开发工具，其基本的快捷键
快速生成标签：shift+tab
保存文件：ctrl+s（写完就要保存一下）
快速查看网页效果：F5
快速生成结构标签：！+回车
快速复制一整行：ctrl+c

6.注释
注释的快捷键：ctrl+/

7.HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）

<head>
	<title></title>
</head>

兄弟关系（并列关系）

<head></head>
<title></title>

HTML标签

1.标签标签
场景：在新闻和文章的页面中，都离不开标签，用来突出显示文章主题

<!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>
    <!-- ctrl + D 选中前后两个标签,ALT+B快速在浏览器中展示,ctrl+s保存 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>二级标签</h3>
    <h4>二级标签</h4>
    <h5>二级标签</h5>
    <h6>二级标签</h6>
    
</body>
</html>

h1标签对网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.段落标签
场景：在新闻和文章的页面中，用于分段显示

<!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>
    <h1>这是段落标签</h1>
    <hr>
    <!-- 这是分割线标签 -->
    <p>阿卡贝拉</p>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

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

3.换行标签
场景：让文字强制换行显示

<!--自闭合标签只有一个-->
<br>

4.水平线标签
场景：分割不同主题内容的水平线

<!--单标签 在页面中显示一条水平线-->
<hr>

5.文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
在这里插入图片描述

<!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>
    <b>加粗</b>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>


</body>
</html>

6.图片标签
场景：在网页中显示图片

<!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>
    <!-- alt :替换文本,当图片不显示的时候显示的文字 -->
    <!-- width和height属性只需要给出一个值,另一个等比例缩放 --好处就是图片不变形 -->
    <img src="cat.gif" alt="这是一个小猫" title="这是title文字,鼠标悬停的时候显示" width="200"  >
</body>
</html>

图片常见的属性？
src：指定需要展示图片的路径
alt：替换文本，当图片加载失败时，才显示的文字
title：提示文本，当鼠标悬停时，才显示的文字
width：图片的宽度
height：图片的高度

7.音频标签
场景：在页面中插入音频

<!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>
    <!-- 音频控制,自动播放,循环 -->
    <!-- src:音频的路径 controls：显示播放的控件 autoplay：自动播放（部分浏览器不支持） loop：循环播放 -->
    <audio src="music.mp3" controls autoplay loop></audio>

</body>
</html>

注意：音频标签目前支持三种格式：MP3 ，Wav ，Ogg

8.视频标签
场景：在页面中插入视频

<!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>
    <!-- 谷歌浏览器可以让视频自动播放,但是必须是静音状态muted -->
    <!--controls：显示播放的控件 autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放 loop：循环播放）-->
    <!--视频标签目前支持三种格式：MP4,WebM，Ogg-->
    <video src="video.mp4" controls autoplay muted loop></video>
</body>
</html>

9.链接标签
场景：点击之后，从一个页面跳转到另一个页面

<!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>
    
    <!-- href:跳转地址 _blank是打开新的网页   -->
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>

    <br>

    <a href="./01-标题标签.html">点我,就是01-标题标签</a>

    <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接) -->

    <br>
    <a href="#">空链接,不知道跳转到哪里的时候就写#</a>


</body>
</html>