HTML知识点大合集-CSDN博客

本文链接：https://blog.csdn.net/qq_67931344/article/details/131176473

本文介绍了HTML的基础知识，包括HTML的用途、常用的开发工具如WebStorm和VSCode，以及代码实战学习，涵盖了标题、段落、字体效果、图片引用、多媒体、网页跳转、列表、表格和表单等核心概念。通过实例和代码示例帮助学习者巩固和提升HTML技能。

摘要由CSDN通过智能技术生成

如标题所示哈，最近无聊，花了几十分钟整理一下之前HTML学过的知识点，写下了这个大合集，能力有限可能还有所不足，不过用来巩固基础，学习是够用的。

HTML知识点合集

一.介绍
二.开发工具推荐
三.代码实战学习
四.代码知识点大合集（放在一起了）

一.介绍

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。HTML使用标签来描述网页中文本、图像、音频、视频等元素的结构和语义，以及它们在页面中的布局和样式。HTML文件由标记、元素、属性、文本和注释组成，浏览器会解析HTML文件并将其转换为网页显示。
我们的文件都有后缀，后缀为.html的就是网页了，也可以直接改文件后缀使之成为网页。
前端基础三巨头：HTML，CSS，javaScript。
可以这么理解，HTML完成了我们网页开发的骨架书写，但是它相当简单，新手相当容易掌握。
图片如下：

二.开发工具推荐

webstrom：我一开始用的哈，是JetBrains全家桶中的哈，很好用。
VSCode：我个人强推，因为后面我在开发项目时，前后端整合，一般要用到Vue框架，这个就比较方便了，而且功能也更加全面，有很多插件，还有ChatGPT中文版的插件哈（直接安装下载）

三.代码实战学习

为了快速掌握，我把知识点整合在一个页面了，相关效果的实现写了相关注释。
我推荐的学习方法是：先把代码复制粘贴后，看运行效果，然后对比着注释学习，知道效果是怎么实现的。其中图片我就没有提供了，自备哈。

3.1标题和分线

h标签中包裹着标题，h1是一级标题，h2是二级，依次类推，hr是分割线效果。

<h1>HTML知识点大合集</h1>
    <!-- 分线 -->
    分线如下：
    <hr>

3.2段落和字体效果

p:是段落的意思，段落与段落之间有默认间隔。

    <!-- 段落p，其中字体写法后者情景语义更重一些 -->
    <!-- br:换行效果 -->
    <p><h3>一.字体样式：</h3> <br>
        粗体：<b>加粗1</b>   <strong>加粗2</strong> <br>
        下划线：<u>下划线1</u>     <br>
        斜体： <i>斜体1</i>        <em>斜体2</em>                <br>
        删除线:<s>删除线1</s>        <del>删除线2</del>               <br>
    </p>

3.3图片的引用

注意要点：

图片引用，大小属性只设置一个，会默认将另一个属性按比例缩放
相对路径和绝对路径，绝对路径少用

 <p><h3>二.图片引用：  </h3> <br>
        <!-- 图片引用，大小属性只设置一个，会默认将另一个属性按比例缩放 -->
        <img src="图片1.jpg" title="鼠标悬停时显示内容" width="300" >   <br>
        <img src="图片的地址" alt="这是图片显示不出来时，显示的内容" >
    </p>
    <!-- 相对路径和绝对路径，绝对路径少用 -->
    <p>
        <h3>三.这是同目录下相对路径的两种表达方式：</h3><br>
        <img src="图片2.jpeg" title="鼠标悬停时显示内容" width="320" >   <br>
        <img src="./图片2.jpeg" title="鼠标悬停时显示内容" width="320" >   <br>
        <h3>这绝对路径的表达方式，盘符和网址：</h3><br>
        <img src="D:\前端学习\HTML和CSS练习项目\HTMl学习\图片3.jpeg" width="250" >
    </p>

3.4多媒体音频和网页跳转效果

要点：

target：跳转设置，一个为_seif:覆盖当前网页，一个为_blank:打开新的窗口
网页开发初期，未确定跳转目标用#

<p>
        <h3>四.多媒体:</h3><br>
        音频：<audio src="音频路径" controls loop ></audio>   <br><br> <br><br>
        视频：<video src="视频路径" controls loop></video>    <br> <br><br>
        超链接：<a href="https://www.baidu.com/" >这是百度超链接</a> <br>
        <!-- 网页开发初期，使用# -->
       <a href="#" >网页开发初期不知道去向</a> <br>
       <!-- target：跳转设置，一个为_seif:覆盖当前网页，一个为_blank:打开新的窗口-->
       网页跳转覆盖：<a href="https://www.baidu.com/" target="_self">百度</a> <br>
       网页跳转打开新页面：<a href="https://www.baidu.com/" target="_blank">百度</a> <br>
    </p>

3.5列表

列表要点：

有序列表ol
无序列表ul
自定义列表dl
列表项li

<!-- 列表：无序列表ul，有序列表ol -->
      <!-- li为列表项 -->
    <h3>五.无序列表：</h3><br>
    <ul>
        <li>小明</li>
        <li>小化</li>
        <li>小华</li>
    </ul>

    有序列表：<br>
    <ol>
        <li>小明</li>
        <li>小化</li>
        <li>小华</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>
            自定义列表:
        </dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

3.6表格（重点）

要点：

border：表格边框
caption：表名，放在表格上方中间
表行：tr
表的表头单元格：th
表的通用单元格：td
跨行rowspan,跨列colspan

    <h3>六、表格</h3>
    <!-- 表格：分为三个部分跨行rowspan,跨列colspan-->
     <!-- 表行：tr   th：表头单元格  td：表的单元格 -->
    <table border="1" width="600" >
        <!-- 表名 -->
        <caption>学生成绩表格</caption>
        <!-- 表头存放 -->
        <thead>
        <tr>
        <th>姓名</th>
         <th>成绩</th>
         <th>评价</th>
        </tr>
        </thead>
        <!-- 表的主体内容 -->
        <tbody>
            <tr>
             <td>陈俊杰</td> 
             <td rowspan="2">100</td>  
             <td>小哥哥真帅</td>
            </tr>
             
            <tr>
                <td>貂蝉</td>
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
        <!-- 表的底部内容 -->
        <tfoot>
            <tr>
                <td>总结：</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

3.7表单(重点)

要点一些多了：

action：表单提交的去向，目标网址
method：提交方式，一般有post和get
input里面的type来确定类型
label标签用于两者之间的关系对应，有两种写法
checked:表示默认选中
单选框：两者要用同一个name
重置按钮和提交按钮

<h3>七.表单</h3>
    <!-- action：表单提交的去向，目标网址。  method：提交方式，一般有post和get -->
    <form action="#" method="post">
     <!-- label标签用于两者之间的关系对应，有两种写法 -->
     <label>姓名：<input type="text" placeholder="请输入姓名"></label> <br><br>
     <label>密码:<input type="password" placeholder="请输入密码"></label><br><br>
     性别： <!-- 单选框，默认选项男 -->
     <!-- 第一种方法,简单的 -->
     <label>男<input type="radio" name="sex" checked></label>
     <!-- 第二种方法，通过id，for来绑定关系 -->
     <label for="girl">女</label><input type="radio" name="sex" id="girl"> <br><br>
     来自城市：
     <!-- 下拉框 -->
     <select>
        <option>北京</option>
        <option>南京</option>
        <option>上海</option>
        <option>深圳</option>
     </select>
     <br><br>
    兴趣爱好： 
    <!-- 复选框 -->
    <input type="checkbox" checked>跑步
    <input type="checkbox" >乒乓球
    <input type="checkbox" >看书
    <input type="checkbox" >写博客
    <br><br>
    自我介绍：<br>
    <textarea placeholder="开始自我介绍"></textarea>
    <br><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
    </form>

四.代码知识点大合集（放在一起了）

总结，大杂烩，哈哈！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML所有知识点合集</title>
</head>
<body>
    <h1>HTML知识点大合集</h1>
    <!-- 分线 -->
    分线如下：
    <hr>
    <!-- 段落p，其中字体写法后者情景语义更重一些 -->
    <!-- br:换行 -->
    <p><h3>一.字体样式：</h3> <br>
        粗体：<b>加粗1</b>   <strong>加粗2</strong> <br>
        下划线：<u>下划线1</u>     <br>
        斜体： <i>斜体1</i>        <em>斜体2</em>                <br>
        删除线:<s>删除线1</s>        <del>删除线2</del>               <br>
    </p>
    <!-- 之间有默认的间隙，大小可以在css中调整 -->
    <p><h3>二.图片引用：  </h3> <br>
        <!-- 图片引用，大小属性只设置一个，会默认将另一个属性按比例缩放 -->
        <img src="图片1.jpg" title="鼠标悬停时显示内容" width="300" >   <br>
        <img src="图片的地址" alt="这是图片显示不出来时，显示的内容" >
    </p>
    <!-- 相对路径和绝对路径，绝对路径少用 -->
    <p>
        <h3>三.这是同目录下相对路径的两种表达方式：</h3><br>
        <img src="图片2.jpeg" title="鼠标悬停时显示内容" width="320" >   <br>
        <img src="./图片2.jpeg" title="鼠标悬停时显示内容" width="320" >   <br>
        <h3>这绝对路径的表达方式，盘符和网址：</h3><br>
        <img src="D:\前端学习\HTML和CSS练习项目\HTMl学习\图片3.jpeg" width="250" >
    </p>

    <p>
        <h3>四.多媒体:</h3><br>
        音频：<audio src="音频路径" controls loop ></audio>   <br><br> <br><br>
        视频：<video src="视频路径" controls loop></video>    <br> <br><br>
        超链接：<a href="https://www.baidu.com/" >这是百度超链接</a> <br>
        <!-- 网页开发初期，使用# -->
       <a href="#" >网页开发初期不知道去向</a> <br>
       <!-- target：跳转设置，一个为_seif:覆盖当前网页，一个为_blank:打开新的窗口-->
       网页跳转覆盖：<a href="https://www.baidu.com/" target="_self">百度</a> <br>
       网页跳转打开新页面：<a href="https://www.baidu.com/" target="_blank">百度</a> <br>
    </p>
    <!-- 列表：无序列表ul，有序列表ol -->
      <!-- li为列表项 -->
    <h3>五.无序列表：</h3><br>
    <ul>
        <li>小明</li>
        <li>小化</li>
        <li>小华</li>
    </ul>

    有序列表：<br>
    <ol>
        <li>小明</li>
        <li>小化</li>
        <li>小华</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>
            自定义列表:
        </dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

    <h3>六、表格</h3>
    <!-- 表格：分为三个部分跨行rowspan,跨列colspan-->
     <!-- 表行：tr   th：表头单元格  td：表的单元格 -->
    <table border="1" width="600" >
        <!-- 表名 -->
        <caption>学生成绩表格</caption>
        <!-- 表头存放 -->
        <thead>
        <tr>
        <th>姓名</th>
         <th>成绩</th>
         <th>评价</th>
        </tr>
        </thead>
        <!-- 表的主体内容 -->
        <tbody>
            <tr>
             <td>陈俊杰</td> 
             <td rowspan="2">100</td>  
             <td>小哥哥真帅</td>
            </tr>
             
            <tr>
                <td>貂蝉</td>
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
        <!-- 表的底部内容 -->
        <tfoot>
            <tr>
                <td>总结：</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

       <h3>七.表单</h3>
    <!-- action：表单提交的去向，目标网址。  method：提交方式，一般有post和get -->
    <form action="#" method="post">
     <!-- label标签用于两者之间的关系对应，有两种写法 -->
     <label>姓名：<input type="text" placeholder="请输入姓名"></label> <br><br>
     <label>密码:<input type="password" placeholder="请输入密码"></label><br><br>
     性别： <!-- 单选框，默认选项男 -->
     <!-- 第一种方法,简单的 -->
     <label>男<input type="radio" name="sex" checked></label>
     <!-- 第二种方法，通过id，for来绑定关系 -->
     <label for="girl">女</label><input type="radio" name="sex" id="girl"> <br><br>
     来自城市：
     <!-- 下拉框 -->
     <select>
        <option>北京</option>
        <option>南京</option>
        <option>上海</option>
        <option>深圳</option>
     </select>
     <br><br>
    兴趣爱好： 
    <!-- 复选框 -->
    <input type="checkbox" checked>跑步
    <input type="checkbox" >乒乓球
    <input type="checkbox" >看书
    <input type="checkbox" >写博客
    <br><br>
    自我介绍：<br>
    <textarea placeholder="开始自我介绍"></textarea>
    <br><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
    </form>

</body>
</html>