Html如何自学？Html自学指南

Html语言是在Web开发中最基础的一种语言，可以说前端的所有交互几乎都要用到Html。它有点类似与XML，所有的标记都是成对出现的。下面的一个基本的Html构成的页面。

<html>  //整个页面都包括在html里，可以理解为一个总的容器
  <head> //规定了头部信息，不出现在页面里。用于一些文件的引用及各种生命
    <title>我是标题</title> //这里就规定了在浏览器导航栏里显示的标题了。
  </head>
  <body> //body里面显示的东西是用来直接展示在前台的，也就是用户眼睛可以看的地方
    <div>我是div</div> //这就是展示的具体类容。div类似与积木中的一个块，网页也是用一个一个块组合起来的。
  </body> 
</html>

可以看到，html的代码都是成对出现的，比如<html></html>。上面是html的一个基本的构造，您可以把上面的代码保存在txt文件里然后另外为比如1.html文件，然后点击它就可以看到效果了。

如何学些html

想要学习html首先我们要了解所有的标签及它们的作用。虽然不要求全部熟悉但一定要懂得它们是干什么的。比如上面的div标签就是html里使用最频繁的标签，你甚至可以使用它代替绝大部分的标签也是允许的。html标签众多，但最频繁使用与设计的有下面3种

常用标签

div span p  a img  //

列表标签

<ul>, <ol>, <li>, <table>, <tr>, <td>, <form>

输入及操作标签

<input> - 各种输入控件 type="text" 文本输入 type="password" 密码输入 type="checkbox" 复选框 type="radio" 单选按钮 type="submit" 提交按钮 type="button" 普通按钮 type="file" 文件上传 type="hidden" 隐藏字段
<button> - 可自定义的按钮
<textarea> - 多行文本输入

上面这几个就是最常用的几种标签，使用它们基本上就可以设计任何复杂的页面了，如果我们自学，建议把上面这些基础的标签熟练运用。

另外自学html就不的不提WEB三剑客 (html css javascript),他们有什么作用呢？

html 相当与做房子搭建地址及骨架，做好后相当于毛坯房。网页设计中，网页的规划及划分首先是从html开始的比如上面第一个代码框里的“我是div”就设计好了一个用于显示这几个字的框架

css 相当于房子做好后，我们给它进行装修，所以css也叫网页样式表，就是专门用来给网页制作样式的。比如上面的代码我们改一下

<div style="color:#000000 ">我是div</div>

style里的代码就属于css 规定了文字的颜色为黑色。当然我们还可以通过css规定这个div的长度，高度，及各种背景颜色及动画效果。

javascript 是赋予网页交互功能的一种语言，现在大量运用与web及小程序等等，甚至App开发也是需要用到它的。比如我们给上诉代码添加一个点击“我是div”弹出一个窗口的功能如下

<div style="color:#000000" onclick="alert('你点击了div！')">我是div</div>

onclick里的就属于javascript的代码，点击它后就可以弹出一个小窗口了。

上面的代码都是直接把代码写在div里，实际上css和js是可以做到代码分离的，或则直接保存为一个文件在引用。下面是实现代码

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>椭圆形 Div 点击弹窗</title>
    <style>
        /* CSS 实现椭圆形 */
        .ellipse-div {
            width: 200px;
            height: 100px;
            background-color: #4CAF50; /* 绿色背景 */
            border-radius: 50%; /* 关键：使 div 变成椭圆形 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
            cursor: pointer; /* 鼠标悬停时变成手型 */
            transition: transform 0.2s; /* 点击动画 */
        }
        
        /* 点击时的动画效果 */
        .ellipse-div:active {
            transform: scale(0.95); /* 点击时稍微缩小 */
        }    </style></head><body>
    <!-- HTML：椭圆形 div -->
    <div class="ellipse-div" onclick="showAlert()">我是div</div>

    <!-- JS：点击弹窗 -->
    <script>
        function showAlert() {
            alert("你点击了椭圆形 div！");
            
            // 也可以使用 confirm 或 prompt
            // Const name = prompt("请输入你的名字");
            // if (name) alert("你好，" + name);
        }
    </script></body></html>

您可以把上面的代码保存为1.html在运行看看效果,div里的class相当于给div取名字好让css及js找到它，比如 ellipse-div 就是这个div取好的名字。

好了，上面就是自学html的基本介绍，如果要升阶也还是围绕html css javascript来进行。提升建议如下

结合CSS学习，让网页更美观
学习JavaScript增加交互功能
参与开源项目或在线编程社区
定期复习和更新知识，HTML标准也在不断演进