大家好，我是尚拙谨言，欢迎来到本专栏。本专栏主要是为web开发学习服务的，一共分为3个部分：前端介绍、数据库、Django，均为python web开发的学习笔记，希望能帮助到大家，也以此作为我个人的学习记录。
作为一名NLP算法工程师，也同时推荐大家关注我的另一个专栏：大道至简
该专栏目前收录了机器学习、自然语言处理相关的文章，持续更新中，欢迎大家关注！
目录
一、需要具备的基本能力
二、HTML标签
1. HTML文件格式声明：、
2. 头声明标签：
3. 网页编码格式：
4. 网页标题：
</p>
<p id="5.%20%3Cbody%3E-toc">5. 正文体标签：<body></p>
<p id="6.%20%E6%A0%87%E9%A2%98-toc">6. 正文标题：<h1>~<h6></p>
<p id="%C2%A07.%20%3Cdiv%3E%E3%80%81%3Cspan%3E-toc">7. 块级标签与行内标签：和<span></p>
<p id="8.%20%E8%B6%85%E9%93%BE%E6%8E%A5%C2%A0-toc">8. 超链接：<a></p>
<p id="9.%20%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5-toc">9. 图片链接：<img></p>
<p id="10.%20%E6%AE%B5%E8%90%BD-toc">10. 段落：<p></p>
<p id="%E4%B8%89%E3%80%81%E9%98%B6%E6%AE%B5%E5%B0%8F%E7%BB%93-toc">三、阶段小结</p>
<hr id="hr-toc" />
<p></p>
<h1 id="%E4%B8%80%E3%80%81%E9%9C%80%E8%A6%81%E5%85%B7%E5%A4%87%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%83%BD%E5%8A%9B">一、需要具备的基本能力</h1>
<p>跟着我一起学习本专栏的小伙伴， 希望您具备的先验基础主要有以下几点：</p>
<p>（1）对Python语法结构有一定的基础，如果是小白，强烈建议您先学一下Python；</p>
<p>（2）有一定的SQL语句语法基础，哪怕不熟练也没事，只要不是上来抓瞎的那种就行，如果是完全不懂，强烈建议先稍微过一下基本的SQL语法，很简单的，例如select from where join之类的；</p>
<p>（3）在Linux或者其它类Unix系统中（包括MacOS）掌握一些基本的shell操作指令；</p>
<p>（4）一颗永不言弃以及持续学习的心。</p>
<p>补充一句，如果以上除了第4条之外其它均为小白的也没关系，你可以边学本专栏的知识，边补充其它知识，因为本专栏的文章不会一次性更完的。学习没有捷径，但是有方法，遇到不会的地方，先死记硬背，而后再疯狂补课，先记忆后理解真不失为一种很好的投机取巧的方法，还记得那一句“I love you”吗？</p>
<h1 id="%E4%BA%8C%E3%80%81HTML%E6%A0%87%E7%AD%BE">二、HTML标签</h1>
<p>首先说明一点，HTML并不是正儿八经的编程语言，也可以说，它不在计算机编程语言的范畴里，它只是一些具有特定格式的符号标签，这些符号标签相互配合，如果一些文本、媒体等内容被这些符号标签以不同方式渲染后，就会产生不同的渲染效果，当然最重要最特殊的是，这些标签是能够被我们的浏览器识别的标签，这就是HTML标签。所以本质上讲，我们学HTML实质上是去记住它的常见的一些符号标签的写法以及用法，仅此而已。接下来我就介绍一个常见的HTML符号标签。</p>
<p>首先，打开pycharm，随便新建一个空项目，在空项目中，新建一个HTML文件。这里说明一下，编写HTML文件是可以在任意文本编辑器中编辑的，我这里用的是pycharm，是为了后续Django开发更加方便。</p>
<p class="img-center"><img alt="" height="647" src="https://img-blog.csdnimg.cn/76c6ed639214405d8eecd51cfaa9e616.png" width="849" /></p>
<p> 在pycharm中新建的HTML文件有如下默认内容：</p>
<p class="img-center"><img alt="" height="332" src="https://img-blog.csdnimg.cn/296c8b467b3f4553b216834d3c3da206.png" width="477" /></p>
<p>现在我就先以上述文件中的标签介绍起~</p>
<h3 id="1.%20%3C!DOCTYPE%20html%3E%E3%80%81%3Chtml%20lang%3D%22en%22%3E">1. HTML文件格式声明：<!DOCTYPE html >、<html lang="en"></h3>
<p><!DOCTYPE html>是头文件声明，在html5中是固定写法，不要动也不用管，它的含义是声明该文件是一个HTML文件。</p>
<p><html lang="en">规定了网页的语言，这里的“en”说明你写的html将会是一个英文页面，当然，你在页面中写了中文也不会有事，其实这个标签可以不用写。参考：https://www.cnblogs.com/sunny3158/p/16023930.html</p>
<h3 id="2.%20%3Chead%3E">2. 头声明标签：<head></h3>
<p><head>标签规定了一些网页的基本属性，包括网页的编码格式、正文内容中一些或全部标签的样式（用到css，JavaScript）等，可以理解为python中我们import的地方，也可以理解为全局变量或者类中的初始化设置。</p>
<p>有个细节需要注意，<head>标签是和</head>成对出现的，类比于{}、[]、" "等，左闭和右闭。大多数html标签都有这种写法，当然也有一些标签不需要右闭，它们称为自闭标签，这个在后面会讲到。如果你记不住哪些需要右闭哪些不需要，那么你就全写右闭就好了。</p>
<h3 id="3.%20%3Cmeta%20charset%3D%22UTF-8%22%3E">3. 网页编码格式：<meta charset="UTF-8"></h3>
<p><meta charset="UTF-8">规定了网页编码格式，"UTF-8"为主流，建议不去更改</p>
<h3 id="4.%20%3Ctitle%3E">4. 网页标题：<title></h3>
<p><title>是网页的标题，这个标题体现在标签页，例如在HTML文件中写上：</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的主题
测试
在pycharm中有个很好用的插件，直接点击任意浏览器的图标，就可以看到网页效果了：
运行后可看到网页在浏览器上标签上显示的title
5. 正文体标签：<body>
标签中就是我们真正要写的网页内容，它会直接将标签中的内容在浏览器中展示。
6. 正文标题：<h1>~<h6>
这里的标题和上述网页标题不同，这里是正文内容的标题，用过word或者Markdown的小伙伴都知道，标题分为一级标题、二级标题、三级标题等，在HTML中，标题用标签来展示，一共预设了6级标题，它们的展示效果如下：
我的主题
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
7. 块级标签与行内标签：<div>和<span>
和都是将内容成块出现在页面的，区别在于：标签中的内容将会使内容在页面中占一整行，而标签包裹住的内容不会占用一整行，而是根据内容的多少决定占用多少空间。因此，又被称为【块级标签】，又被称为【行内标签】或者【内联标签】。
我的主题
这是一行div内容这是另一行div内容
我的主题
这是一行span内容这是另一行span内容
8. 超链接：<a>
还记得你浏览网页时点击的页面中那一个个能带你进入另一个网页的按钮吗？没错，它们其实就是利用HTML中的超链接标签实现的。
超链接的标签格式为：
点击跳转
`href`后接入的是你要跳转的目标网址。比如这里我要实现点击【点击跳转】后能够从我的页面跳转到百度首页。
注意！如果你要跳转的网址完全是外部网站的任意网址，那么href后的网址一定要从根地址开始写，即“http://xxx”或者“https://xxx”，否则浏览器会默认从你HTML文件所在本地位置作为根目录，后拼接上href后的网址，如果拼接起来的网址找不到，就会报错：
点击跳转
如果你确实要跳转到本地项目（自己的网站）中的其它网址，那么你可以像下面这么写：
点击跳转
或
点击跳转
这样浏览器会默认从你的本地IP+当前HTML所在目录作为根网址后拼接上你写的新要跳转的网址。这样一来，如果你的本地网站项目中有好几个不同的页面，你就可以通过某个网址跳转到自己网站的另一个网址了。
有的时候我们想要让跳转的网址在新窗口中打开而不是在当前页打开，那么你只需在标签中加入`target=_blank`即可：
点击跳转
超链接的一些样式：
默认情况下，链接将会由以下三种样式显示在浏览器中：
未点击时，字体为蓝色且带下划线；
点击时，字体为红色且带下划线；
点击后，字体为紫色且带下划线；
如果需要自定义一些链接样式，那么就要用到CSS样式了，链接的修饰基本的有以下几种：
（1）文本修饰（`text-decoration`用于控制文本下划线）
我的主题
这是一行span内容这是另一行span内容点击跳转
这是一行span内容这是另一行span内容点击跳转