【第一章】HTML简述
前言
在这个专栏当中，我将为大家介绍前端开发的相关知识，当然为了大家方便理解，我们在这几篇博客当中的讲解都是基于下面这个网站：
上面这个网站详细介绍了HTML+CSS+JavaScript这三种流行的前端开发技术，那么博客就本人学习到的内容作分享与理解，如有缺漏请自行登录上述网站查找。
预备工作
HTML语言是超文本标记语言。其中"超文本"的意思是除了支持文本，还有声音，图片，视频，表格，链接等等。而它们通过标记来展现，标记由标签组成。
下面引用一段专业的讲解：
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊"元素.
HTML 元素通过"标签"（tag）将文本从文档中引出，标签由在"<"和">"中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。然而，习惯上与实践上都推荐将标签名全部小写。
HTML页面运行在浏览器上面，写完代码后我们需要在浏览器里面运行。当然，开发工具我们选择VScode，而浏览器我使用微软提供的edge软件。除此之外，idea和sublime软件也可以进行开发，但是那两个在企业里面不经常作为开发网页的应用，所以说这里不再进行展示。
但是对于开发环境的选择其实不重要，因为语法是通用的，所以说这个无需担心。为了方便展示就使用VScode进行说明。
安装时，我们进入下面网址选择自己对应的OS进行安装即可
进入后打开一个已经建立好的文件夹📂，并在对应位置安装好插件（如下图所示）
大家一开始进去可能是英文的，英文不好的安装（简体中文）插件即可，看着对应位置就没问题。
下面是一些插件说明：
这个可以保持标签的头尾形式一致，便于开发，不用再前后跑着找了。
这个可以在浏览器中查看我们写好的页面的状态
这个插件可以让我们写好的实时反映在浏览器页面上，右键内容点击下面这个就可以启动了~
这相当于是在本地开放了一个服务器，用来实时观察页面的。
第一个HTML页面
VScode具有自动生成代码的功能，得益于agent的发展，这大大提升了我们的开发效率。
HTML文件也具有基本的结构，结构如下：
HTML
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>上面的标签都是"双标签"类型，有始有终；对应的，还有单标签类型的标签，在后面会提及该内容。下面介绍标签的含义：
'html'的标签是网页的根标签
'head'是用来编写页面相关的属性的
'title'就是页面的标题
'body'，顾名思义，就是页面的内容展示，这是最初始的标签
每一个标签相当于一个节点。
我们还可以把它看成一颗DOM树：
- 所有的标签都是HTML子标签
- head和body是兄弟标签
- head和title是父子标签
每一个标签相当于一个对象，拿到这些对象以后我们就可以对这些对象进行增删查改。
对于迅速生成代码框架，我们输入'!'以后按下Tab或者回车↩︎即可，方便我们快速搭建框架：
对于上面内容的含义，有如下解释：
!DOCTYPE html：指定当前HTML版本，此时版本号为5
html lang="en"：lang是语言类型，此时'en'代表"English"，就是英文的意思
meta charset="UTF-8"：解码规则，UTF-8是当今全世界通用的文字编码格式，也包含中文，其余编码格式不一定包含！
meta name="viewport" content="width=device-width, initial-scale=1.0"对于移动端适配的规则
HTML的常用标签
下面为大家介绍常用标签：
- 注释标签("!-- --"):快捷键'Ctrl+/' 这个注释 "!-- --"
- 标题标签("h1,h2,h3,h4,h5,h6"):h1-h6由大到小进行包含的标题，即数字越大，对应的字体越小，越细
- 段落标签("p")：自动创建自然段,在标签里面敲下回车会被解析为空格
- 换行标签("br")：实现换行功能，类似于C语言中'\n'的作用，是英文单词"break"的缩写
这几个标签在前端开发当中非常常见，需要记住。
另外，还有格式化标签，这里主要介绍四种：加粗，倾斜，删除线，下划线。
- 加粗标签("strong"或"b"):把当前所指定的内容加粗
- 倾斜标签("em""或"i"):让当前的文本倾斜
- 删除标签("del"或"s"):在内容的中间画一个横线
- 下划线标签("ins"或"u"):在内容的下面画一个下划线
上面的标签前后达成的效果一样，但是前者会对文本做一个强调，这是与后面的唯一区别。强调是看不出来的，只有机器知道！这一点要注意！
开始学HTML时，大家可能都会遇到img标签和a标签，下面是这两个标签的简介：
img标签：
顾名思义，img就是单词"image"的意思，这使得可以在网页里面插入一个图片，然后我们可以通过这个标签在文本中进行对于图片的操作。基本上我们搭配src进行使用，里面写的是图片路径，路径分为两种格式：
- 相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: .../image/1.jpg- 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
下面是标准格式：
HTML
<img src="rose.png" alt="">这是一般对于src的引用格式
此时要把rose.png这个图片放在html同级的目录当中。
对于img标签，还有其他属性：
- alt: 替换文本.，当文本不能正确显示的时候, 会显示一个替换的文字，图片正确显示则不会替换
- title: 提示文本，鼠标放到图片上, 就会有提示.类似于悬停的效果，悬停后展示图片内容，后面也有类似的标签
- width/height: 控制宽度高度， 高度和宽度一般改一个就行, 另外一个会等比例缩放， 否则就会图片失衡，导致非常夸张的显示
- border: 边框, 参数是宽度的像素，但是一般使用 CSS 来设定，但是VScode对这个单独的标签解析可能会出现问题，但是实际上代码是没有问题的
上面写到的属性之间可以都附加在下面的标签当中，当然还有注意事项：
注意:
HTML
<img src="rose.jpg">
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">
- 属性可以有多个, 不能写到标签之前
- 属性之间用空格分割, 可以是多个空格, 也可以是换行.
- 属性之间不分先后顺序
- 属性使用 "键值对" 的格式来表示
那么对于a标签来说，我们通常认为它是超链接标签。它分为几种链接形式：
链接的几种形式:
- 外部链接: href 引用其他网站的地址
HTML
<a href="http://www.baidu.com">百度</a>内部链接: 网站内部页面之间的链接. 写相对路径即可。
在一个目录中, 先创建一个 1.html, 再创建一个 2.html。
HTML
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接: 使用 # 在 href 中占位。
HTML
<a href="#">空链接</a>下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
HTML
<a href="test.zip">下载文件</a>网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
HTML
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>锚点链接: 可以快速定位到页面中的某个位置。
HTML
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>
禁止 a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">这些就是a标签的一些链接使用方式，另外，还有target使用方式：
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
本篇文章从HTML讲起，讲述了配置环境和HTML语言的简述。另外还有一些常用标签的介绍。
上面就是本章的主要内容，对于前端知识，如果仅仅阅读博客可能无法很好地理解本篇博客所讲解的知识，建议大家下去多加练习！