学习 HTML，其实真的不难

最新推荐文章于 2023-09-18 22:01:51 发布

畅谈、

最新推荐文章于 2023-09-18 22:01:51 发布

阅读量1.2k

点赞数 7

分类专栏：前端 HTML5 文章标签： html 前端 intellij-idea

本文链接：https://blog.csdn.net/qq_52174675/article/details/122251226

版权

前端同时被 2 个专栏收录

17 篇文章 10 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

1、初识HTML

1.1、简介

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

1.2、第一个网页

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cz34bob3-1640917929523)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214160742937.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1b6ozvnN-1640917929524)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214161600602.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEi8fM2T-1640917929524)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214161325621.png)]$

接下来就正式开始 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 看看你写的源代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ETNsEHn-1640917929524)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214165319289.png)]$
那么第一个小网页就顺利制作完毕

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>

网页界面显示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBmgmoBD-1640917929525)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214174749580.png)]$

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>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKdrTHob-1640917929525)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211214235221728.png)]$

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>

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CEKL00Xj-1640917929526)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211215181126240.png)]$

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>

输入错误信息格式：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tTplpQrB-1640917929526)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211215184200303.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxibKn4O-1640917929527)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20211215184330628.png)]$

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>

网页界面：

[外链图片转存中...(img-SfKxJ0oN-1640917929527)]

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

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

畅谈、

关注

7
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习 HTML，其实真的不难

HTML，前端必学三件套（HTML、CSS、JavaScript）之一，负责书写网页的要素。也许现在的你可能只是听过，但是不要紧，从 0 到 0.8（咱也不能保证你能掌握），看这一篇文章就够了！
复制链接

扫一扫