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

Web前端开发——HTML基础

article 2025/2/26 18:16:43

本系列博客声明，根据本人所学书籍和网上的一些资料共同磨合，写下web前端系列的博客

HTML基础

一、HTML基本概述[^1]
二、HTML大体认知
- 1.HTML基本结构
- 2.HTML 语法格式
三、THML常用标记[^2]
- 1.文本标记
- - （1）标题
  - （2）段落与换行
  - （3）文字修饰
  - （4）转义字符
- 2.列表标记
- - （1）有序列表
  - （2）无序列表
  - （3）嵌套列表
- 3.超链接标记
- - （1）文本链接
  - （2）书签链接
- 4.分割线标记
- 5.图片标记
- 6.多媒体标记
- - （1）滚动字幕
  - （2）嵌入音视频文件

一、HTML基本概述¹

HTML是超文本标记语言，用于构建网页结构，由Tim Berners-Lee在1990年创建。
HTML5为最新版本
通俗易懂一点，HTML就是用来做网页设计滴

二、HTML大体认知

1.HTML基本结构

首先，我们下载好vscode并且已经有了第一个.html文件后，我们可以打一个！然后回车，就出现了html的基本结构，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

<!--这里为上述代码的解释
<!DOCTYPE html>意思为正确声明HTML5文档类型
<html lang="en"></html>这句表明浏览器HTML文件开始
<head></head>表示头标记，在头标记里一般要写网页编码格式utf-8等
<title></title>中间写网页标题，这些一般写在头标记里面
<body></body>这中间写网页的主体内容，在这里我写了helloworld，运行展示如下图
-->

HTML文件基本结构演示

2.HTML 语法格式

双标记展示：
<标记名称...></标记名称>  
单标记展示：
<标记名称 />

三、THML常用标记²

1.文本标记

（1）标题

<h1>主标题</h1>
<h2>二级标题</h2>
<!-- 支持h1到h6，字号逐级递减 -->

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <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>

字体大小示例

（2）段落与换行

<p>这是一个段落。</p>
<p>第一行<br>强制换行</p>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个段落。</p>
    <p>第一行<br>强制换行</p>
</body>
</html>

段落与换行的演示

（3）文字修饰

<strong>加粗</strong> <em>斜体</em>
<u>下划线</u> <s>删除线</s>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>加粗</strong> <em>斜体</em>
	<u>下划线</u> <s>删除线</s>
</body>
</html>

文字修饰展示

（4）转义字符

这里在网上找到一张图，大家不需要背，用到时查询即可：
HTML标准教程

2.列表标记

（1）有序列表

<ol>
    <li>项目一</li>
    <li>项目二</li>
</ol>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>项目一</li>
        <li>项目二</li>
    </ol>
</body>
</html>

有序列表图

（2）无序列表

<ul>
	<li>苹果</li>
	<li>香蕉</li>
</ul>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

无序列表图片示例

（3）嵌套列表

<ul>
    <li>水果
	    <ul>
  		    <li>苹果</li>
		 </ul>
	 </li>
</ul>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>水果
            <ul>
                  <li>苹果</li>
             </ul>
         </li>
    </ul>
</body>
</html>

嵌套列表示例

3.超链接标记

（1）文本链接

<a href="https://example.com">访问示例网站</a>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://blog.csdn.net/2302_81032013/article/details/145795725?fromshare=blogdetail&sharetype=blogdetail&sharerId=145795725&sharerefer=PC&sharesource=2302_81032013&sharefrom=from_link">点击即可访问本人MySQL入门博客</a>
</body>
</html>

（2）书签链接

<a href="#section1">跳转到章节一</a>
<!-- 目标位置 -->
<h2 id="section1">章节一</h2>

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#section1">跳转到章节一</a>
    <!-- 目标位置 -->
    <h2 id="section1">章节一</h2>
</body>

</html>

4.分割线标记

<hr>
<!-- 用于内容分隔 -->

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    分割线在下面哦
    <hr>
    分割线在上面哦
	<!-- 用于内容分隔 -->
</body>

</html>

分割线

5.图片标记

<img src="image.jpg" alt="图片描述" width="200">
这里大家可以自己找图片复制图片路径即可~

6.多媒体标记

（1）滚动字幕

这里我想说的是在HTML中，marquue的语法已经过时，所以就不再演示，之后在CSS中展示给大家

（2）嵌入音视频文件

<audio controls>
	<source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls width="400">
	<source src="video.mp4" type="video/mp4">
</video>
这里大家找相应的文件名称放入哦，这里就不做演示啦！