2256 字
11 分钟
HTML学习笔记
2026-05-24
学习笔记
学习笔记
/
HTML

前言#

在neocities注册了个免费二级域名mazllin.neocities.org，为了对其进行简单布局，于是打算简单学学HTML，CSS，JS语言

在b站找了个3小时前端入门，这是第一篇学习笔记。后面可能会分篇，或者进行二编。到时候再看吧awa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <h1>标题标签：h标签</h1>
    <h1>
        一级标签
    </h1>
    <h2>二级标签</h2>
    <h3>...</h3>
    <h6>最多6级标签</h6>
    <p>段落标签：p标签</p>
    <p>字体加速：<b>b标签</b></p>
    <p>字体加粗：<strong>strong标签</strong></p>
    <p>斜体标签：<i>i标签</i></p>
    <p>下划线标签：<u>u标签</u></p>
    <p>删除线标签：<s>s标签</s></p>


    <ul>
        <li>无序列表标签</li>
        <li>使用 <b>ul</b> 和 <b>li</b> 组合标签</li>
        <li>vscode中shift + alt + ↓可以快捷复制，类似于vs中的ctrl + d</li>


    </ul>


    <ol>
        <li>有序列表</li>
        <li>使用<b>ol</b>与<b>li</b>搭配使用</li>
        <li>自动赋值序号</li>
    </ol>


    <h1>表格标签对</h1>
    <table>
        <tr>
            <th>table header</th>
            <th>在tr标签对里，使用th标签对</th>
            <th>作为开头</th>


        </tr>
        <tr>
            <td>
                表格标签
            </td>
            <td>在table标签对中</td>
        </tr>
        <tr>
            <td>tr为行数，需要多少行就在table里加多少tr</td>
            <td>tr全称table row</td>
        </tr>
        <tr>
            <td>td为列数，在每对tr标签中添加td标签</td>
            <td>td全称table data</td>
        </tr>


    </table>


    <h1>表格标签对</h1>
    <p>在table标签中添加broder可以添加边框</p>
    <table border="1">
        <tr>
            <th>table header</th>
            <th>在tr标签对里，使用th标签对</th>
            <th>作为开头</th>


        </tr>
        <tr>
            <td>
                表格标签
            </td>
            <td>在table标签对中</td>
        </tr>
        <tr>
            <td>tr为行数，需要多少行就在table里加多少tr</td>
            <td>tr全称table row</td>
        </tr>
        <tr>
            <td>td为列数，在每对tr标签中添加td标签</td>
            <td>td全称table data</td>
        </tr>


    </table>


</body>
</html>

具体效果是这样的#

学习笔记1

思考#

这部分的核心就是标签对的使用

首先是头部#

使用

<head>


</head>

标签对框起来

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>练习</title>
</head>

这部分用来表示这个html文件的基本信息。输入!+Enter可以快捷填入

其次是主体部分#

使用

<body>


</body>

格式标签#

<!--这是注释内容-->


<h1></h1>               <!--标题标签对，h1-6，最多6个-->
<p></p>                 <!--段落标签对-->
<ul>                    <!--ul为无序列表的标签对-->
    <li></li>           <!--li为列表的具体内容-->
</ul>
<ol>
    <li></li>           <!--相对的，ol为有序列表标签对-->
</ol>


<table>                 <!--table为表格标签对，其中的内容将会被制表-->
    <tr>                <!--tr为每一行，其中使用td来设置每一列的内容-->
        <td></td>       <!--td中为具体内容-->




    </tr>
</table>

这里的table制表感觉很像一个二维数组：

string[][] arr = {  {  "td" }
                    {  "td" }
                    {  "td" }
                    {  "td" }
                 };//最外层的大括号为tr，内层的大括号为td

用于调整字体的标签对#

<b></b>             <!--b标签对，用于字体加粗-->
<strong></strong>   <!--strong标签对，也用于字体加粗-->
<i></i>             <!--i标签对，用于字体斜体-->
<u></u>             <!--u标签对，用于字体下划线-->
<s></s>             <!--s标签对，用于字体划掉-->

好像这些效果用md文档也能实现

b字体加粗

i斜体

下划线没法实现

s划掉

awa

>>>P2#

本来是分篇的，后来感觉没必要，干脆把3篇HTML的学习笔记放到一起好了

序#

本章很简短，就是介绍了HTML的部分标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>基本语法</h1>
    <p>开始标签 属性名="属性值"</p>


    <h1>每个HTML可以有不同的属性</h1>
    <p id="describe" class="section">这是一个段落标签</p>
    <h2>a标签</h2>
    <a href="https://mazlin.top" target="_blank">这是一个超链接标签</a>
    <p>href中填url，也就是跳转的链接</p>
    <p>target中填跳转的方式，self就是当前窗口，blank就是新建窗口</p>
    <h1>img标签</h1>
    <p>img标签自带一个src和alt标签</p>
    <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.9Kzg8B0Z3M5oH9zlHMl9CAHaEK?cb=thfvnextfalcon&rs=1&pid=ImgDetMain&o=7&rm=3" alt="">
    <p>src中填相对路径/绝对路径/url</p>
    <p>alt标签用于图片加载失败时的文字显示<br>
    例如：</p>
    <img src="aaa.jpg" alt="图片加载失败">




    <h1>附：</h1>
    <p>换行标签br,划线标签hr</p>
    <p>br标签可以<br>
    换行<br>
    <hr>hr标签可以画分割线</p>
</body>
</html>

具体效果是这样的：

学习笔记2

思考#

本章没啥思考的，也就是简单学习了href，src，alt标签的使用，以及换行标签br,分割标签hr

其他#

我是先改完页脚的备案号再开始学这部分的，结果我发现这章的内容有很多都能用上！

&copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>


        Powered by
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a><br>


        <!--👇这部分就是新加的-->
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://beian.miit.gov.cn/">苏ICP备2026032287号-1</a> &
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://icp.gov.moe/?keyword=20262136">萌ICP备20262136号</a>

你看这个a标签，br标签和标签属性，完全就是本章的内容。

早知道先学完再改了www

>>>P3#

序#

看着内容不多，区块和表单就一起结束掉吧，接下来就是CSS的内容了

区块好像还是CSS的前置知识点

区块#

概念：#

根据元素表现形式，可以分为块元素和行内元素。

块级元素#

块级元素通常用于组织和布局页面，一般有以下标签：

<div>
<h1>
<ul>
<ol>
<li>
<table>
<form>    <!--表单标签-->

块元素通常由新的一行开始，并占据整行元素。块元素可以包含其他的块级元素和行内元素

行内元素#

行内标签只占据其内容所需的宽度，且不会占据一整行

一般包含：

<span>
<a>
<strong>
<em>
<img>
<br>
<input>         <!--用于表单-->

实操#

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>


    <div class="content">
        <h1>文章标题</h1>
        <p>文章段落</p>
        <p>使用div.xxx可以快速写出带有xxxclass属性的div标签<br>
        使用div#xxx可以快速写出带有xxxid属性的div标签</p>


    </div>


    <span>span标签可以理解成没有功能的a标签或者img标签，方便后续的CSS或者JS的操作</span>


</body>
</html>

效果是这样的： 学习笔记3

思考#

div标签没有实际作用，通常用于创建块级容器。有点像先划分领地（？

span标签的作用听着像用来制作跳转功能的？不太清楚，后面也许就知道了

“span标签用于内联样式化文本，给文本的一部分应用样式或者标记”原话是这么说的

表单#

表单的内容还怪多的嘞，不过大多都是有关input属性

实操#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="表单学习" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


        <h1>form文本框</h1>
    <form action="">


        <input type="text">


        <p>type属性有许多种</p>


        <h2>placeholder标签</h2>
        <input type="text" placeholder="请输入文本">
        <p>该标签用于文本框中显示的内容</p>


        <h2>value标签</h2>
        <input type="text" value="文本">
        <p>该标签用于预填入文本</p>


        <h2>label标签</h2>
        <p>一般用于文本框前的文字</p>
        <label for="">文本框：</label>
        <input type="text">


        <h1>tpye:raio标签</h1>
        <p>radio标签是选择标签，例如：</p>
        <input type="radio">男
        <input type="radio">女
        <input type="radio">其他
        <p>有时，我们只要单选，而不希望多选，便可以给三个input都加上同一个name</p>
        <input type="radio" name="a">男
        <input type="radio" name="a">女
        <input type="radio" name="a">其他


        <h1>label:for属性</h1>
        <p>使用for属性，可以与input中的id进行绑定<br>
        这样鼠标点击label时，光标也会跳转到对应的input里</p>


        <h1>input:password标签</h1>
        <p>密码不能是明文，所以有个password标签</p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="输入密码">


        <h1>input：checkbox标签</h1>
        <p>这个属性用于多选</p>
        <label>爱好：</label>
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">篮球


        <h1>input：submit属性</h1>
        <p>该属性用于提交按钮，与form标签的action属性关联<br>
        还可以设置一个value改变名字</p>
        <input type="submit" value="交卷">




        <p>form：action属性用于填写一个url，该值为服务器所给的api</p>
    </form>


</body>
</html>

实际效果是酱紫的：

甚至要两张图片www

思考#

表单主要是讲input的属性的

主要有type属性，其有

  • placeholder值，用于显示文本；
  • value值，用于预填入字符，或者说默认值
  • radio值（图片里少打一个字母www）用于做选择；
  • checkbox值，用于多选；
  • submit值，用于提交按钮；

还有label标签，用于与input标签联动。其for值可以与input的id属性绑定。

form本身有个action属性，可以与input：submit互动。其需要填入一个服务器提供的api

结语#

是的，html的内容就这么结束了，接下来就该是CSS的内容了

可以把html写进简历了（

HTML学习笔记
https://mazlin.top/posts/html学习笔记/html学习笔记1/
作者
maz
发布于
2026-05-24
许可协议
CC BY-NC-SA 4.0
CSS学习笔记
2026上半年小结
© 2026 maz. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari
苏ICP备2026032287号-1 & 萌ICP备20262136号