一.介绍

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>