HTML 编辑器推荐
可以使用专业的编辑器来编辑 HTML，其界面以及代码可观读都很高，为大家推荐以下两种常用的编辑器：
VS Code：https://code.visualstudio.com/
Sublime Text：https://code.visualstudio.com/
根据官网提示安装后，我们将使用该VsCode对html进行编辑
VS Code编辑器
Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。
我们粘贴这段html代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<h1>Hello，World！</h1>
</body>
</html>
保存成一个后缀为.html的文件后，我们安装一个插件后就可以随时使用浏览器打开我们的html文件：
此时我们可以右击文件名，选择性浏览器开打html文件，也可以使用其给出的快捷键来使用浏览器打开html文件
我们已经准备好了编辑html的环境，该软件对html代码具有提示性，别忘了每次编辑完保存一下再使用浏览器打开。
元素的概念
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href=“index.html”> | 这是一个链接 | </a> |
| <br> | 换行(效果) |
HTML标签，也可以称为HTML元素
没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
即使<br>在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML标题
HTML标题可以通过h1…h6标签来定义，h系列每个标签都粗体，大号字体且具备上下换行的作用。我们需要确保标题标签 只用于标题，因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
HTML段落
在HTML里面是通过p标签来定义段落的，如我们写的文章都是一段一段的，每写完一段都会换行，且和上面内容保持一定距离，使用p标签就可以实现
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<h1>天净沙·秋思</h1>
<h2>作者：马致远 朝代：元译文对照</h2>
<p>枯藤老树昏鸦，</p>
<p>小桥流水人家，</p>
<p>古道西风瘦马。</p>
<p>夕阳西下，</p>
<p>断肠人在天涯。</p>
</body>
</html>
HTML超链接
语义：标记一个内容为超链接，全称anchor 锚，下面介绍a标签的常用属性值
1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="template/index.html">本地html文件路径</a>
2.4 target="_blank"代表在新页面中打开，target = "_self" 在当前页面打开
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<a href='http://www.baidu.com/' title='百度' target='_blank'>点我跳转百度</a>
</body>
</html>
假链接：根据href属性内填写特定内容
1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接
2、假链接存在的意义：
在网页开发前期，其他页面都还没有写出来，
那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href="javascript:" ：不会返回顶部
页面内锚点
1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签可以有一个叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
实例演示：跳转到顶部、跳转到指定id值所对应的标签位置
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<a href='#p1'>跳转到位置1</a> <a href='#p2'>跳转到位置2</a>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p id="p1">我是跳转点1</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p id="p2">我是跳转点2</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<p>pass</p>
<a href='#' title=''>点我回到页面顶部</a>
<a href="">点我刷新页面</a>
<a href="javascript:">假链接，无任何效果</a>
</body>
</html>
a标签也可以作为作为目录使用，
HTML图片插入
该标签单词是image的缩写。通过img标签，实现在页面插入图片的功能，通过src属性指定图片路径（可以是本地路径，也可以是网络路径），可以通过width属性配置图片大小。
<img src="./白虎志.jpg" width="50%" />
width=50%表示图片宽度为页面一半，并且也会影响图片的高度，图片高度可以使用height属性来设置。
如果图片未成功显示出来，我们就通过img标签的alt属性来定义提示信息。
<img src="./111.jpg" alt="图片正在玩命加载中！！" />
常用字体样式标签
下面提到的标签，通常用于对文字进行样式增加，不过待我们后续使用到了css完全可以替代这些标签来给文字添加样式。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>网页标题</title>
</head>
<body>
<!-- 字体大小为：20 颜色为：红色 -->
<font size='20' color="red">字体标签</font><br>
<i>倾斜</i><br />
<b>加粗</b><br />
<s>删除线</s><br />
<u>下划线</u><br />
<hr /> <!-- 水平线 -->
<em>倾斜</em><br />
<strong>加粗</strong><br />
<del>删除线</del><br />
<ins>下划线</ins />
</body>
</html>
可以发现，两种形式的标签呈现给我们相同的效果，但下面的语义更明确一些。
标签嵌套
大多数 HTML 标签可以嵌套（HTML 标签可以包含其他 HTML 标签）。
HTML 页面由相互嵌套的 HTML 标签构成。
列表
在HTML中存在3种列表：ul(无序列表)、ol(有序列表)、dl(自定义列表)。我们将对其逐个使用
ul无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>，每个<li>里面可以存放其它标签：段落、插入图片、超链接、以及其它列表等等…
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>列表练习</title>
</head>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
</body>
</html>
浏览器打开效果：
我们如果要去掉列表的圆点，需要对其的一个type属性进行操作（不赞成这种操作，建议待后续使用css代替）
type='none'：去掉圆点
type='dict'：默认圆点
type='circle'：空心圆点
type='square'：正方形
在我们平常所见的网页中，无序列表的作用很广泛，如csdn的导航栏。后续我们通过css可以让 <li> 横向排序
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>列表练习</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ol>
</body>
</html>
浏览器打开效果：
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>列表练习</title>
</head>
<body>
<dl>
<dt>列表标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>列表标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
浏览器打开效果：
如果本文对您有帮助，别忘一键3连，您的支持就是笔者最大的鼓励，感谢阅读！
技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请
点赞 收藏+关注子夜期待您的关注，谢谢支持！
下一章节传送门：https://blog.csdn.net/m0_46958731/article/details/114332171
4435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
