学习 HTML，其实真的不难

文章目录

1、初识HTML
- 1.1、简介
- 1.2、第一个网页
2、网页的基本标签
- 2.1、标题标签 < h1 > - < h6 >
- 2.2、段落标签 < p >
- 2.3、换行标签 < br >
- 2.4、水平线标签 < hr >
- 2.5、字体样式标签 < strong > & < em >
- 2.6、特殊符号
- 2.7、运行结果
3、图像标签
4、链接标签
- 4.1、网页间链接
- 4.2、锚链接
- 4.3、功能性链接
5、列表标签
- 5.1、有序列表 < ol >
- 5.2、无序列表 < ul >
- 5.3、自定义列表 < dl >
- 5.4、结果展示
6、表格标签
7、视频标签
8、音频标签
9、iframe 内联框架
10、表单
- 10.1、初识表单
- 10.2、表单元素
- - 10.2.1、文本框 & 单选框
  - 10.2.2、多选框 & 按钮
  - 10.2.3、列表框 & 文本域 & 文件域
  - 10.2.4、其他元素（部分）
  - 10.2.5、结果展示
- 10.3、初级表单验证
- 10.4、补充

1、初识HTML

1.1、简介

HTML 全称就是 Hyper Text Markup Language（超文本标记语言）。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等，目前最新版是 HTML 5。

1.2、第一个网页

打开 IDEA（本教程使用 IDEA 作为 HTML 文件编写工具），点击新建->HTML 文件，输入“1、我的第一个网页”

可以看到初始代码如下，点击右上角的几个小图标，可以以特定的浏览器形式打开

也可以从setting->tool->Web Browsers，选择自己想要的浏览器，本文将全程采用 Chrome 浏览器

接下来就正式开始 HTML 的学习，首先我们可以看到 HTML 语言都是由一个个标签组成的，每一个标签都是成对出现（不是绝对），例如 < head > < /head > ，第一个必须掌握的标签对，就是注释，IDEA快捷键 CTRL + /

<!-- 你想要注释的内容 -->
<!-- 第一行的 <!DOCTYPE html> 告诉浏览器我们使用的是什么规范，默认是 HTML -->

然后是 < head > 标签和 < body > 标签，分别代表网页的头部和网页的主体。

<head>   <!-- 头部内容 -->
</head><body><!-- 主体内容 -->
</body>

head 标签内部可以放 title 标签，代表网页的标题（假设这个网页的标题就叫“我的第一个网页”）

<head>   <!-- z玩意就和“百度”、“百度翻译”一样，是个大标题 --><title>我的第一个网页</title>
</head>

< meta > 标签，是一种描述性标签，描述本网站的一些信息，例如关键词（keywords）、网站信息（description）。要注意，< meta > 标签没有结束标签，而且必须位于 < head > 标签内部

<head><meta charset="UTF-8"><meta name="keywords" content="我的第一个网页,第一个,网页"><meta name="description" content="这是本人第一个网页，做的垃圾不要喷！"><title>我的第一个网页</title>
</head>

写完 < head > 标签，我们就在 < body > 标签中随便写点东西，还是万年不变的 Hello World！

<body>
Hello World！
</body>

然后我们点击右上角的小 Chrome 图标，看看最终长什么样子，可以看到一切都和我们预期的一样，你也可以按 F12 看看你写的源代码

那么第一个小网页就顺利制作完毕

2、网页的基本标签

2.1、标题标签 < h1 > - < h6 >

用来描述各种等级的标题 < h1 > 最大，< h6 > 最小。注意写到 < body > 标签内部哈

<body><h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6></body>

2.2、段落标签 < p >

实现段落功能，否则即使在代码中换行了，最终网页上也还是会显示成一行

<body><!-- 不使用段落标签，最后会显示成一行 -->
这是第一句话
这是第二句话
<!-- 使用 <p>，将会分行显示 -->
<p>这是第一句话</p>
<p>这是第二句话</p></body>

2.3、换行标签 < br >

功能如其名字，有点类似于 < p >，不同的是即使使用 < br > 标签进行换行，这仍然是一个段落。需要注意这是一个单标签，而且一般为了书写规范，我们会写成< br/ >

<body>这是一行
<br/>然后老子要换行<!-- 下面这种写法也行，塞哪都行，随你开心 -->
<!-- 这是一行<br/> -->
<!-- 然后老子要换行 --></body>

2.4、水平线标签 < hr >

就是加一条水平线，然后完事了。这也是一个单标签，所以习惯上会写成 < hr/ >

<body><!-- 添加一条平平无奇的水平线 -->
<hr/></body>

2.5、字体样式标签 < strong > & < em >

< strong > 顾名思义，强壮，就是字体加粗，< em >代表斜体，这俩都有闭合标签

<body><strong>我是粗体</strong>
<em>我是斜体</em></body>

2.6、特殊符号

利用 & + 特殊 + ；实现特殊符号，例如空格就是 &nbsp；，大于号就是 &gt；，还有好多就不一一列举说明了

<body><!-- 直接敲空格，敲死都没用 -->
头       尾
<!-- 使用特殊符号进行空格输出 -->
<br/>头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尾
<br/>大于号：&gt;</body>

2.7、运行结果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页的基本标签</title>
</head>
<body><h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6><!-- 不使用段落标签，最后会显示成一行 -->
这是第一句话
这是第二句话
<!-- 使用 <p>，将会分行显示 -->
<p>这是第一句话</p>
<p>这是第二句话</p>这是一行
<br/>然后老子要换行<hr/><strong>我是粗体</strong>
<em>我是斜体</em><!-- 直接敲空格，敲死都没用 -->
头       尾
<!-- 使用特殊符号进行空格输出 -->
头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尾
大于号：&gt;</body>
</html>

网页界面显示：

3、图像标签

在 HTML 中使用 < img > 标签插入图片，具体的参数有下面几个：

src：图像地址，分为相对路径和绝对路径，一般推荐使用相对路径
alt：图像的替代文字（图像未加载出来时显示的文字）
title：鼠标悬停提示的文字
width：图像宽度
heigh：图像高度

注：src 和 alt 是必填项，其他看具体情况设置

<body><!-- ../代表返回上一级目录，常用 -->
<img src="../recourse/image/1.png" alt="图片无法显示" title="1.png" width="200" height="270"/></body>

4、链接标签

链接标签是非常重要的，使用非常广泛。分为网页间链接、锚链接和

4.1、网页间链接

即网页的跳转，通过 < a > 标签实现，常用参数如下：

href：链接路径
target：链接在哪个窗口打开，默认在当前窗口打开

<body><a href="1、我的第一个网页.html" >点击我跳转到页面 1</a></body>

不仅可以点击文字实现跳转，还可以通过点击图片进行跳转。例如下面通过上面的黑色图片实现跳转

<body><a href="1、我的第一个网页.html" ><img src="../recourse/image/1.png" alt="图片无法显示" title="黑色图片" width="200" height="270"/>
</a></body>

现在我要在新的窗口中打开这个超链接，就需要设置 target 属性

_blank：在新标签打开
_self：默认的模式，在当前网页打开
_top 和 _parent：不常用

<body><!-- 现在我就可以实现点击图片，在新网页中打开 “1、我的第一个网页.html” -->
<a href="1、我的第一个网页.html" target="_blank"><img src="../recourse/image/1.png" alt="图片无法显示" tltle="黑色图片" width="200" height="270"/>
</a></body>

4.2、锚链接

就是跳转到指定的标记，同样使用 < a > 标签

<body><!-- 使用 name 作为标记 -->
<a name="top" >顶部</a>
<br/>
<!-- 使用 #，代表回到标签位置 -->
<a href="#top" >回到顶部</a></body>

也可以跳转到指定网页的指定标记位置处

<body><!-- 回到 1、我的第一个网页.html 网页的 down 标记处 -->
<a href="1、我的第一个网页.html#down" >回到顶部</a></body>

4.3、功能性链接

邮件链接
QQ 链接

<body><!-- 这里只展示邮件链接，通过 mailto 实现 -->
<a href="mailto：1234567890@qq.com">点击联系我</a></body>

5、列表标签

有序列表 < ol >
无序列表 < ul >
自定义列表 < dl >

5.1、有序列表 < ol >

标签中的内容都是有顺序的，会从 1 开始排序，列表内容用标签 < li > 引用

<body><!-- 有序列表 -->
<ol><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ol></body>

5.2、无序列表 < ul >

标签中的内容没有顺序，都是数字由 · 代替，标签内容还是由 < li > 引用

<body><!-- 无序列表 -->
<ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ul></body>

5.3、自定义列表 < dl >

这个标签可以自定义列表的名字，通过 < dt > 标签实现，内容使用 < dd > 标签

<body><!-- 自定义列表 -->
<dl><dt>这是一个自定义标签</dt><dd>第一个</dd><dd>第二个</dd><dd>第三个</dd><dt>这又是一个自定义标签</dt><dd>第四个</dd><dd>第五个</dd>
</dl></body>

5.4、结果展示

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head><body><!-- 有序列表 -->
<ol><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ol><!-- 无序列表 -->
<ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ul><!-- 自定义列表 -->
<dl><dt>这是一个自定义标签</dt><dd>第一个</dd><dd>第二个</dd><dd>第三个</dd><dt>这又是一个自定义标签</dt><dd>第四个</dd><dd>第五个</dd>
</dl></body>
</html>

网页界面：

6、表格标签

HTML 使用 < table > 标签制作表格，行用 < tr > 表示，列用 < td > 表示，也可以设置表格的样式，以及跨行跨列操作

<!-- 利用 <table> 标签制作表格，可以自定义表格的样式，例如添加边框，设置颜色等 -->
<table bgcolor="#ffe4c4" border="1"><!-- <tr> 代表行（table row）--><tr><!-- 设置 colspan 属性实现跨列操作 --><td colspan="4">1-1</td></tr><tr><!-- 设置 rowspan 属性实现跨行操作 --><td rowspan="2">2-1</td><!-- <td> 代表列（table data）--><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>

表格展示

7、视频标签

< video > 标签用来设置视频，具体参数详见下方代码

<body><!-- src 代表视频路径，必填项
controls 设置视频可见
autoplay 设置视频自动播放
width 和 height 设置播放视频的窗口大小 -->
<video src="../recourse/video/视频测试.mp4" controls width="400" height="300"></video></body>

8、音频标签

音频通过 < audio > 实现，具体设置方法和 < video > 类似，可以一起记忆

<body><!-- src 代表视频路径，必填项
controls 设置视频可见
autoplay 设置音频自动播放 -->
<audio src="../recourse/video/音频测试.mp3" controls ></audio></body>

9、iframe 内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），相当于在一个网站里面嵌套一个网站，使用 < iframe > 标签的具体规则如下

<body><!-- 常用属性如下
src 规定在 iframe 中显示的文档的 URL
name 规定 iframe 的名称
frameborder 规定是否显示框架周围的边框
width 规定 iframe 的宽度
height 规定 iframe 的高度-->
<iframe src="https://www.baidu.com/" frameborder="0" width="400" height="300"></iframe></body>

可以以配合 < a > 标签显示指定网页，如下面的例子就是点击 “点击它” ，就会在当前网页中显示 “1、我的第一个网页.html”，的内容

<body><iframe src="" name="hello" frameborder="0" width="400" height="300"></iframe>
<a href="1、我的第一个网页.html" target="hello">点击它</a></body>

10、表单

10.1、初识表单

表单在网页中主要负责数据采集功能，例如看到的登录框，密码框，复选框都属于表单的一种，在 HTML 中使用 < form > 标签作为整体的框架，里面填写需要的内容。form 有两个必填的属性：

method：规定如何发送表单数据，有 get 和 post 两种值
action：表示向何处发送表单数据

<body><form method="get" action="1、我的第一个网页.html"><!-- input type="text" 代表一个文本框，顺便取个名字,养成好习惯 --><p>名字：<input type="text" name="userName"></p><!-- input type="password" 代表一个密码框 --><p>密码：<input type="password" namw="password"></p><P><!-- 提交和重置按钮 --><input type="submit"><input type="reset"></P></form>
</body>

显示结果

注意事项：

使用 get 方式提交的话，可以在 URL 中看到提交的信息，所以不安全，但是高效
使用 post 方式提交的话，是看不到信息的，较为安全，而且 post 可以提交大文件。

10.2、表单元素

表单中可以附带许多东西，下面将介绍文本框（text）、密码框（password）、单选框（radio）、

10.2.1、文本框 & 单选框

文本框：text
单选框：radio

<body><form method="get" action="1、我的第一个网页.html"><h4>姓名</h4><p><!-- 文本框：返回名字是 userName，初始值为 Hello World，最大输入字符数为 20，文本框长度是 30  --><input type="text" name="userName" value="Hello World" maxlength="20" size="30"></p><h4>性别</h4><p><!-- 单选框：必须要设置 value 和 name 属性，其中 name 是为了分组，让同一名称的单选框同时只能被选中一个 --><input type="radio" value="boy" name="sex">男<input type="radio" value="boy" name="sex">女</p></form>
</body>

10.2.2、多选框 & 按钮

多选框：checkbox
按钮
- button：普通按钮
- imag：图片按钮
- submet：提交按钮
- reset：重置按钮

<body><form method="get" action="1、我的第一个网页.html"><h4>选择你最喜欢的编程语言</h4><p><!-- 多选框：设置规则同单选框，同样需要进行分组 --><input type="checkbox" value="c++" name="course">c++<input type="checkbox" value="C" name="course">C<input type="checkbox" value="Java" name="course">Java<input type="checkbox" value="Python" name="course">Python<input type="checkbox" value="VB" name="course">VB</p><h4>按钮</h4><p><!-- 按钮：通过设置 value 的值在按钮上显示字--><input type="button" name="btn1" value="点击变长"><!-- 提交和重置按钮（特殊的 type） --><input type="submit"><input type="reset"></p></form>
</body>

10.2.3、列表框 & 文本域 & 文件域

列表框：select
文本域：textarea
文件域：file

<body><form method="get" action="1、我的第一个网页.html"><h4>列表框</h4><P><!-- 注：这里不再使用 input，而是使用 select--><select name="列表名称"><option value="c++">c++</option><option value="C">C</option><!-- 通过 selected 设置默认显示的是哪个值 --><option value="Java" selected>Java</option><option value="Python">Python</option><option value="VB">VB</option></select></P><h4>文本域</h4><p><!-- 使用 textarea 设置文本域--><textarea name="textarea" cols="30" rows="10">啥也没有</textarea></p><h4>文件域</h4><p><!-- file --><input type="file" name="files"></p></form>
</body>

10.2.4、其他元素（部分）

邮件验证：email
URL 验证：url
数字验证：number
滑块：range
搜索框：search

<body><form method="get" action="1、我的第一个网页.html"><h4>邮件</h4><p><input type="email" name="email"></p><h4>URL</h4><p><input type="url" name="url"></p><h4>数字</h4><p><!-- 可以设置数字的最大最小值，并且通过 step 设置步长 --><input type="number" name="num" min="0" max="999" step="10"></p><h4>滑块</h4><p><!-- range 标签，可以设置上下限和 步长（step） --><input type="range" name="range" min="0" max="100" step="1"></p><h4>搜索框</h4><p><input type="search" name="search"></p></form>
</body>

10.2.5、结果展示

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单元素</title>
</head>
<body><form method="get" action="1、我的第一个网页.html"><h4>文本框</h4><p><!-- 文本框：返回名字是 userName，初始值为 Hello World，最大输入字符数为 20，文本框长度是 30  --><input type="text" name="userName" value="Hello World" maxlength="20" size="30"></p><h4>单选框</h4><p><!-- 单选框：必须要设置 value 和 name 属性，其中 name 是为了分组，让同一名称的单选框同时只能被选中一个 --><input type="radio" value="boy" name="sex">男<input type="radio" value="boy" name="sex">女</p><h4>多选框</h4><p><!-- 多选框：设置规则同单选框，同样需要进行分组 --><input type="checkbox" value="c++" name="course">c++<input type="checkbox" value="C" name="course">C<input type="checkbox" value="Java" name="course">Java<input type="checkbox" value="Python" name="course">Python<input type="checkbox" value="VB" name="course">VB</p><h4>按钮</h4><p><!-- 按钮：通过设置 value 的值在按钮上显示字 --><input type="button" name="btn1" value="点击变长"><!-- 提交和重置按钮（特殊的 type） --><input type="submit"><input type="reset"></p><h4>列表框</h4><P><!-- 注：这里不再使用 input，而是使用 select--><select name="列表名称"><option value="c++">c++</option><option value="C">C</option><!-- 通过 selected 设置默认显示的是哪个值 --><option value="Java" selected>Java</option><option value="Python">Python</option><option value="VB">VB</option></select></P><h4>文本域</h4><p><!-- 使用 textarea 设置文本域--><textarea name="textarea" cols="30" rows="10">啥也没有</textarea></p><h4>文件域</h4><p><!-- file --><input type="file" name="files"></p><h4>邮件</h4><p><!-- 邮件验证功能较为 low --><input type="email" name="email"></p><h4>URL</h4><p><!-- 同上 --><input type="url" name="url"></p><h4>数字</h4><p><input type="number" name="num" min="0" max="999" step="10"></p><h4>滑块</h4><p><input type="range" name="range" min="0" max="100" step="1"></p><h4>搜索框</h4><p><input type="search" name="search"></p></form>
</body>
</html>

网页界面：

10.3、初级表单验证

placeholder：提示用户输入的信息（用在所有的输入框上）
required：提交的信息不能为空
pattern：正则表达式

<body><form method="get" action="1、我的第一个网页.html"><p><!-- 利用 placeholder 提示用户输入的信息,并且约束不能为空 --><input type="text" name="text" placeholder="请输入名称" required></p><p><!-- 利用 pattern 进行正则表达式的匹配 --><!-- https://www.jb51.net/article/76901.htm --><input type="text" name="text" placeholder="请输入数字" pattern="^[0-9]*$"></p></form>
</body>

输入错误信息格式：

10.4、补充

属性：

readonly：代表不能修改，只能使用默认值
disabled：禁用这个元素（颜色会变灰）
hidden：隐藏对应元素

标签：

< label >：增强鼠标的可用性

<body><form method="get" action="1、我的第一个网页.html"><p><label for="mark">点击跳转</label><input type="text" name="text1" id="mark"></p><p><input type="text" name="text2" value="100" readonly><br/><input type="text" name="text3" value="200" disabled><br/><input type="text" name="text4" value="300" hidden></p></form>
</body>

网页界面：

注：第三个 text 没有被显示出来，因为被隐藏了

那么看到这里的小伙伴，想必对 HTML 已经有了初步的了解，但是想要写好网页，最终还是得多练，实践出真知！
本文结构参考 b 站 up 主 遇见狂神说 的 HTML 课程（自己想结构费脑子），真的讲的的非常不错，大家都可以去看看。最后写的不足之处还望大家见谅！