Web前端开发——HTML基础
本系列博客声明，根据本人所学书籍和网上的一些资料共同磨合，写下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基本概述1
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，运行展示如下图
-->
2.HTML 语法格式
双标记展示：
<标记名称...></标记名称>
单标记展示：
<标记名称 />
三、THML常用标记2
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）转义字符
这里在网上找到一张图，大家不需要背，用到时查询即可：
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>
这里大家找相应的文件名称放入哦，这里就不做演示啦！
本篇采用VScode来书写代码，下载和环境大家可以看其它博客自行解决~
这里给出其它博客的链接，大家可以参考~
其它博主的博客链接，点击即可 ↩︎这里采用 用法+代码+演示效果带领大家熟悉 ↩︎