初识HTML（二）VsCode编辑器，常用标签

文章目录

VS Code编辑器
元素的概念
HTML标题
HTML段落
HTML超链接
HTML图片插入
常用字体样式标签
标签嵌套
列表

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 标签被称为空元素。空元素是在开始标签中关闭的。

  就是没有关闭标签的空元素（  标签定义换行）。

在开始标签中添加斜杠，比如  ，是关闭空元素的正确方法。

即使 在所有浏览器中都是有效的，但使用   其实是更长远的保障。

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