【前端必备】1.HTML零基础入门教程（详细)

HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言。

代码探秘者

2519人浏览 · 2025-04-27 10:05:13

代码探秘者 · 2025-04-27 10:05:13 发布

608564A16E7D652E882914E830EE4050(1)

📚博客主页：代码探秘者

✨专栏：

《JavaSe基础》

其他更新ing…

❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️

🙏作者水平有限，欢迎各位大佬指点，相互学习进步！

1 什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

在这里插入图片描述

2 入门实例

2.1 分析图

在这里插入图片描述

2.2 入门代码

<!--1.文件类型说明-->
<!DOCTYPE html>
<!--2.使用语言的地区  en是美国和英国 en-Us-->
<html lang="en">
<!--3.html头-->
<head>
<!--  4.charset字符集  -->
    <meta charset="UTF-8">
<!--  5.文件标题  -->
    <title>入门Html</title>
</head>
<!--6.主体部分-body-->
<body>
    <!--7.内容-->
    这是测试！
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

注意：

HTML文件不需要编译，Ctrl+s保存，直接由浏览器进行解析执行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 标签与元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述

3 各部分详解

3.1 标题 h

		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
		<h4>这是标题 4</h4>

在这里插入图片描述

3.2 段落 p

HTML 段落是通过标签

来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落</title>
</head>
<body>

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

</body>
</html>

在这里插入图片描述

3.3 超链接 a

HTML 链接是通过标签来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>

<a href="https://blog.csdn.net/2301_79090563?type=blog">这是超链接，点击跳转我的CSDN博客</a>

</body>
</html>

点击跳转：

在这里插入图片描述

3.4 图像 img

HTML 图像是通过标签来定义的。注意：图像的名称和尺寸是以属性的形式提供的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!-- 图像-->
<img src="1.png" width="300px" border="1" alt="找不到显示这个"/><hr>
<img src="imgs/2.png" width="200px" height="100px" alt="找不到显示这个"/>
</body>
</html>

在这里插入图片描述

3.5 表格 table

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table width="500" border="6" align="center">
        <h1 align="center">表格标签使用</h1>
<!--       1.表头-->
        <tr>
            <th>名字</th>
            <th>住址</th>
            <th>爱好</th>
        </tr>
<!--        2.内容第一行-->
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

3.6 字体 front

<font color="blue" face="微软雅黑" size="3">字体标签</font>

注意:属性顺序不能改

3.7 无序列表 ul/li

<!--1.无序列表-->
<!--默认type=“disc” 实心圆心-->
<!--type="circle"  空心圆-->
<!--type="square"  正方形-->
<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

在这里插入图片描述

3.8 有序列表 ol/li

在这里插入图片描述

<ol type="1" start="3">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>
<ol type="a" start="a">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

在这里插入图片描述

3.9 定义列表 dl/dt/dd

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

3.10 实体

< 等同于 <
> 等同于 >
© 等同于 ©

3.11 样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

3.12 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

4. 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，

可以在标签中加入：

noresize="noresize"

为不支持框架的浏览器添加标签。

重要提示：不能将标签与标签同时使用！

不过，假如你添加包含一段文本的标签，就必须将这段文字嵌套于标签内。

4.1 案例分析

案例1-垂直框架：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

案例2：水平框架

<html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

5 表格跨行跨列(合并行列)

案例：

在这里插入图片描述
1.未合并前，先搭建框架：

2.合并流程：
在这里插入图片描述

3.代码：

    <table border="1px" bordercolor="#E87EFA"
            align="center" cellspacing="0"
            width="400px">
        <tr>
            <th colspan="3" align="center";>h1</th>
<!--            <th>h2</th>-->
<!--            <th>h3</th>-->
        </tr>
        <tr>
            <td rowspan="2">1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
<!--            <td>2.1</td>-->
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td rowspan="2">3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
<!--            <td>4.1</td>-->
            <td>4.2<img src="imgs/2.png" width="50px"/></td>
            <td>4.3</td>
        </tr>
    </table>

4.合并效果（然后填文字就行）
在这里插入图片描述

6 表单

6.1 form

<!--action 表示成功登录提交到哪里    method表示提交方式-->
    <form action="9.ok.html" method="post">
        用户名:<input type="text" name="username"><br/>    
        密码:<input type="password" name="password"><br/>
        <input type="submit" value="登录"> <input type="reset" value="重新填写">
 	</form>`

在这里插入图片描述

method 默认是get
action就是提交到哪里

6.2 input

input 尽量在form里面
一定要带name值，不然提交不了
多选，或者同一属性的设置同一个name
真正提交的是你设置vlaue的值
默认选中checked
如果想提交，多选和单选记得设置value和name

<!--文本输入框-->
    用户名:<input type="text" name="username"><br/>
    密码:<input type="password" name="password"><br/>
<!--    多选-->
    多选
    <input type="checkbox" name="水果1" value="banana">香蕉
    <input type="checkbox" name="水果1 value="apple" checked>苹果
    <input type="checkbox" name="水果1">菠萝
    <br/>
<!--单选-->
    单选
    <input type="radio" name="爱好">乒乓球
    <input type="radio" name="爱好" checked>篮球
    <input type="radio" name="爱好">羽毛球
<!--隐藏表单元素-->
    <input type="hidden" name="add" value="32@qq.com">
<!--    正常提交和重置-->
    <br/>
    <input type="submit" value="登录"> <input type="reset" value="重新填写">
    <!--图片提交框-->
    <br/>
    <input type="image" name="submit" align="center" src="imgs/2.png">

在这里插入图片描述

6.3 select/option/textarea 标签

    爱好：<select name="爱好like">
        <option value="网球">网球</option>
        <option value="足球">足球</option>
        <option value="乒乓球">乒乓球</option>
        <option value="唱歌">唱歌</option>
    </select>
    <br/><br/><br/>
    备注：<textarea name="comment" rows="4" cols="25"></textarea>

在这里插入图片描述

6.4 表单综合案例与分析

案例

在这里插入图片描述
代码：

<form action="12.ok.html" method="post">
    姓名:<input type="text" name="username"><br/>
    密码:<input type="password" name="pwd1"><br/>
    确认密码:<input type="password" name="pwd2"><br/>
    性别：
    <input type="radio" name="sex" value="man" checked>男
    <input type="radio" name="sex" value="wom">女
    <input type="radio" name="sex" value="other">其他<br/>
    爱好:
    <input type="checkbox" name="hobby">听音乐
    <input type="checkbox" name="hobby">跑步
    <input type="checkbox" name="hobby">打羽毛球<br/>

    头像:<input type="file" name="mydile"><br/>
    出生日期:<input type="date"><br/>
    喜欢颜色:<input type="color"><br/>

    选择城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="dl">大连</option>
    </select><br/>
    <tr>
        <td>自我介绍：</td>
        <td><textarea name="comment" cols="20" rows="5"></textarea> <br/></td>
    <tr/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
</form>

表单格式化->表格

在这里插入图片描述
使用表格：

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

格式代码：

<h1 align="left">用户注册</h1>
<form action="12.表单综合案例.html" method="post">
    <table>
        <tr>
            <td>姓名:</td>
            <td><input type="text" name="username"><br/></td>
        </tr>

        <tr>
            <td>密码:</td>
            <td><input type="password" name="pwd1"><br/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="pwd2"><br/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" value="man" checked>男 <input type="radio" name="sex" value="wom">女</td>
            <td></td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td><input type="checkbox" name="hobby">音乐 <input type="checkbox" name="hobby">游泳 <input type="checkbox" name="hobby">跑步</td>
        </tr>
        <tr>
            <td>出生日期:<input type="date"></td>
        </tr>
        <tr>
            <td>喜欢颜色:<input type="color"></td>
        </tr>
        <tr>
            <td>选择城市：</td>
            <td><select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="dl">大连</option>
            </select></td>
        </tr>
        <tr>
            <td>头像:</td>
            <td><input type="file" name="mydile"></td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea name="comment" cols="20" rows="5"></textarea> <br/></td>
        <tr/>
        <tr>
            <td><input type="submit" value="提交"></td>
            <td><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>

注意

在这里插入图片描述

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda