2025年HTML学习简要版

大家好，我是讯享网，很高兴认识大家。

快捷键集合

alt+ shift+上下，上下移动整行代码

1.什么是HTML

HyperText Markup Language的缩写（超文本标记语言）
WWWC：World Wide Web Consortium（万物网联盟）
W3C标准包括
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

2.创建自己的第一个HTML文件

打开IDEA信件一个HTML文件
需要注意的点：
在这里插入图片描述
讯享网

3.网页基本信息

<!-- HTML注释方法、也是XML注释方法 DOCTYPE——告诉浏览器我们要使用什么规范DOCTYPE html，就是说使用html规范 --> <!DOCTYPE html> <html lang="en"> <!-- "ctrl+/"是快捷注释 --> <!--head代表网页头部标签--> <head> <!--meta描述网站的一些信息，一般用来做SEO --> <meta charset="UTF-8"> <meta name="keywords" content="我自己的网页"> <meta name="description" content="测试一下自己的第一个网站"> <title>我的第一个网页</title> </head> <!--head代表网页主题标签--> <body> Hello world！ </body> </html>

讯享网

4.网页基本标签

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <!--段落标签（在heml文件中写的换行和空格都不会显示出来、所以需要段落标签,快捷键：p+Table）--> <p>两只老虎 两只老虎</p> <p>跑得快 跑得快 </p> <!--水平线标签（可以<hr>或者<hr/>）--> <hr> <!--换行标签_单闭合标签(跟段落标签不一样，换行标签显示出来的会比较紧凑)--> 两只老虎 两只老虎<br/> 跑得快 跑得快<br/> <!--字体样式标签（粗体、斜体）--> <h1>字体样式标签<h1/> 粗体：<strong>i love you <strong/> 斜体： <em>i love you <em/> <!--特殊符号--> 空格——&nbsp加的多空格就多<br/> 空&nbsp;&nbsp;&nbsp;&nbsp;格 <br/> &gt;大于号 <br/> &lt;小于号 <br/> &copy;版权符号 <!--特殊符号记忆方式 & ; --> </body> </html>

5.图像标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--输入img+Table直接就快捷出来了--> <!--image学习 src代表图片地址：(必填) 图片地址：1.相对地址 2.绝对地址 alt代表如果资源找错了就会返回的东西(必填) title表示悬停鼠标的时候会出现的文字 width表示图片的宽度 height表示图片的高度 如果忘记代码了可以直接空格就会得到很多的选项 --> <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </body> </html>

6.链接标签

1.跳转页面标签
2.锚标签
3.功能性标签

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作为标记--> <a name="top">顶部</a> <!--1.a标签 herf：必填，表示要跳转到哪个页面 也可以设置图片链接标签 target:表示窗口在哪里打开 1._blank表示在新标签页中打开 2._self表示在当前窗口打开新页面 --> <a href="Demo01.html">点击我跳转到页面一 </a> <br> <br> <br> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> <p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p><p> <a href="https://www.baidu.com" target="_blank">百度页面 <img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100"> </a> </p> <!--2.锚链接（定位某个位置）（#+标记名字） 步骤： 1.需要一个锚标记 2.跳转到锚标记 浏览器地址栏中后缀加入#+锚链接名称就可以直接定位到具体的位置 相应的就是添加完标记位之后， <a href="某个文件名.html#标记位名字">跳转</a> 就可以实现跳转到某个文件的某个位置 --> <!--3.功能性链接 邮件链接：href="mailto: " 推广：百度搜索推广获取推广链接然后复制进来 --> <a href="mailto:">邮件链接</a> <a target="_blank" href="http://wpa..com/msgrd?v=3&uin=110&site=&menu=yes"><img border="0" src="http://wpa..com/pa?p=2:110:53" alt="加我有惊喜" title="加我领取小电影"/></a> <a href="#top">回到顶部</a> <a name="down">底部</a> </body> </html>

7.列表标签

无序列表
有序列表
定义列表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--有序列表--> <ol> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C++</li> </ol> <hr> <!--无序列表--> <ul> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C++</li> </ul> <hr> <!--自定义列表 dl:标签 dt:列表名称 dd:列表内容 --> <dl> <dt>学科</dt> <dd>java</dd> <dd>Python</dd> <dd>运维</dd> <dd>前端</dd> <dd>C++</dd> <dt>位置</dt> <dd>长沙</dd> <dd>西安</dd> <dd>广西</dd> <dd>广东</dd> </dl> </body> </html>

8.表格标签

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!--表格标签 table：表格 tr：行 td：列 <table border="1px">：表格边宽1px <td colspan="4">：独占4列 <td rowspan="2">2.1</td>：独占两行 --> <table border="1px"> <tr> <td colspan="4">1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> </body> </html>

9.媒体元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素</title> </head> <body> <!--音频和视频 video:视频标签 controls：必填，视频进度控制条，音频也必须要加 autoplay:视频自动播放，音频自动播放 --> <video src="../resource/video/视频1.mp4" controls autoplay>我的视频</video> <audio src="../resource/audio/夜曲.mp3"controls autoplay>我的音乐 </audio> </body> </html>

页面结构分析

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>

11.iframe内联框架

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架</title> </head> <body> <!--内联框架 1.从blibli上面分享就可以得到嵌入代码 2.src:引用页面地址path 3.name：mainFrame，框架标识名，相当于网页的名字标记，用于跳转链接跳转网页的寻找标记 --> <iframe src="https://www.bilibili.com/" name="hello" frameborder="100" width="1500" height="800">内嵌地址</iframe> <a href="Demo01.html" target="hello">点击跳转</a> <!--<iframe src="//player.bilibili.com/player.html?aid=251279794&bvid=BV1hv411u7UA&cid=429898709&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>--> </body> </html>

12.初始表单post和get提交

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--action表示表单提交的位置，可以是网站，也可以是请求处理地址 form有两种method：post、get两种提交表单的方式 get方式：提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件 post方式：比较安全，可以传输大文件，查看提交的各种信息可以在网页的Network，Headers中查看 input文本输入框的type默认为text，密码类型就是password --> <form action="Demo01.html" method="get"> <p>账户名：<input type="text" name="username"></p> <p>密码框：<input type="password" name="pwd"></p> <p>&nbsp;<input type="submit" name="提交">&nbsp;<input type="reset" name="重置"> </p> </form> </body> </html>

13.文本框和单选框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--action表示表单提交的位置，可以是网站，也可以是请求处理地址 form有两种method：post、get两种提交表单的方式： 1.get方式：提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件 2.post方式：比较安全，可以传输大文件，查看提交的各种信息可以在网页的Network，Headers中查看、 文本框类型： 1.input文本输入框的type默认为text 2.密码类型就是password 3.单选框为radio 初始化文本框： value：默认初始文本内容 maxlength：最大输入字符长度 size：文本框大小 单选框标签：： type为radio、必须有value，必须有name分组 --> <form action="Demo01.html" method="get"> <p>账户名：<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p> <p>密码框：<input type="password" name="pwd"></p> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <p>&nbsp;<input type="submit" name="提交">&nbsp;<input type="reset" name="重置"></p> </form> </body> </html>

14.按钮和多选框

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--action表示表单提交的位置，可以是网站，也可以是请求处理地址 form有两种method：post、get两种提交表单的方式： 1.get方式：提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件 2.post方式：比较安全，可以传输大文件，查看提交的各种信息可以在网页的Network，Headers中查看、 文本框类型： 1.input文本输入框的type默认为text 2.密码类型就是password 3.单选框为radio： type为radio、必须有value，必须有name分组 4.多选框为checkbox： type为checkbox、必须有value，必须有name分组 5.按钮为button: 6.图片按钮为image： 7.提交按钮为input 8.重置按钮为reset 初始化文本框： value：默认初始文本内容 maxlength：最大输入字符长度 size：文本框大小 --> <form action="Demo01.html" method="get"> <!--文本框--> <p>账户名：<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p> <p>密码框：<input type="password" name="pwd"></p> <!-- 单选框--> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!-- 多选框--> <p><input type="checkbox" value="睡觉" name="爱好">睡觉</p> <p><input type="checkbox" value="抽烟" name="爱好">抽烟</p> <p><input type="checkbox" value="喝酒" name="爱好">喝酒</p> <p><input type="checkbox" value="烫头" name="爱好">烫头</p> <!-- 按钮--> <p>按钮：<input type="button" value="点击变长" name="分组1"></p> <p>按钮：<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p> <!--表单提交、重置按钮--> <p>&nbsp;<input type="submit" name="提交">&nbsp;<input type="reset" name="重置"> </p> </form> </body> </html>

15.列表框文本域和文件域

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--action表示表单提交的位置，可以是网站，也可以是请求处理地址 form有两种method：post、get两种提交表单的方式： 1.get方式：提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件 2.post方式：比较安全，可以传输大文件，查看提交的各种信息可以在网页的Network，Headers中查看、 input 文本框类型： 1.input文本输入框的type默认为text 2.密码类型就是password 3.单选框为radio： type为radio、必须有value，必须有name分组 4.多选框为checkbox： type为checkbox、必须有value，必须有name分组 5.按钮为button: 6.图片按钮为image： 7.提交按钮为input 8.重置按钮为reset 下拉框select： 1.选项标签：option：option中添加selected表示默认的选项 文本域： cols表示行，rows代表列 文件域：input 初始化文本框： value：默认初始文本内容 maxlength：最大输入字符长度 size：文本框大小 --> <form action="Demo01.html" method="get"> <!--文本框--> <p>账户名：<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p> <p>密码框：<input type="password" name="pwd"></p> <!-- 单选框--> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!-- 多选框--> <p><input type="checkbox" value="睡觉" name="爱好">睡觉</p> <p><input type="checkbox" value="抽烟" name="爱好">抽烟</p> <p><input type="checkbox" value="喝酒" name="爱好">喝酒</p> <p><input type="checkbox" value="烫头" name="爱好">烫头</p> <!-- 按钮--> <p>按钮：<input type="button" value="点击变长" name="分组1"></p> <p>按钮：<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p> <!-- 下拉框--> <p>国家： <select name="表单名称" id=""> <option value="中国">中国</option> <option value="美国">美国</option> <option value="瑞士">瑞士</option> <option value="澳大利亚">澳大利亚</option> </select> </p> <!-- 文本域--> 文本框输入内容： <p><textarea name="文本框内容" id="1" cols="30" rows="10"></textarea></p> <!-- 文件域--> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <!--表单提交、重置按钮--> <p>&nbsp;<input type="submit" name="提交">&nbsp;<input type="reset" name="重置"> </p> </form> </body> </html>

16.搜索框滑块和简单验证

讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--action表示表单提交的位置，可以是网站，也可以是请求处理地址 form有两种method：post、get两种提交表单的方式： 1.get方式：提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件 2.post方式：比较安全，可以传输大文件，查看提交的各种信息可以在网页的Network，Headers中查看、 input 文本框类型： 1.input文本输入框的type默认为text 2.密码类型就是password 3.单选框为radio： type为radio、必须有value，必须有name分组 4.多选框为checkbox： type为checkbox、必须有value，必须有name分组 5.按钮为button: 6.图片按钮为image： 7.提交按钮为input 8.重置按钮为reset 下拉框select： 1.选项标签：option：option中添加selected表示默认的选项 文本域：textarea,cols表示行，rows代表列 文件域：input:file 邮件验证：input:email URL验证：input：url 数字验证：input：number step：数字步长（数字起伏范围），默认为1 滑块：input：range 搜索框：input：search 初始化文本框： value：默认初始文本内容 maxlength：最大输入字符长度 size：文本框大小 --> <form action="Demo01.html" method="get"> <!--文本框--> <p>账户名：<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p> <p>密码框：<input type="password" name="pwd"></p> <!-- 单选框--> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!-- 多选框--> <p><input type="checkbox" value="睡觉" name="爱好">睡觉</p> <p><input type="checkbox" value="抽烟" name="爱好">抽烟</p> <p><input type="checkbox" value="喝酒" name="爱好">喝酒</p> <p><input type="checkbox" value="烫头" name="爱好">烫头</p> <!-- 按钮--> <p>按钮：<input type="button" value="点击变长" name="分组1"></p> <p>按钮：<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p> <!-- 下拉框--> <p>国家： <select name="表单名称" id=""> <option value="中国">中国</option> <option value="美国">美国</option> <option value="瑞士">瑞士</option> <option value="澳大利亚">澳大利亚</option> </select> </p> <!-- 文本域--> 文本框输入内容： <p><textarea name="文本框内容" id="1" cols="30" rows="10"></textarea></p> <!-- 文件域--> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <!-- 邮件验证--> <p>邮箱：<input type="email"name="email"></p> <!-- URL验证--> <p>URL：<input type="url"name="url"></p> <!-- 数字验证--> <p>数字：<input type="number"name="number" max="100" min="0" step="10"></p> <!-- 滑块--> <p><input type="range" name="voice" max="100" min="0" step="10"></p> <!-- 搜索框--> <p><input type="search" name="search" max="100" min="0" step="10"></p> <!--表单提交、重置按钮--> <p>&nbsp;<input type="submit" name="提交">&nbsp;<input type="reset" name="重置"></p> </form> </body> </html>

17.表单的应用

只读

readonly

<form action="Demo01.html" method="get"> <!--文本框--> <p>账户名：<input type="text" name="username" value="我真的好帅" maxlength="8" size="30" readonly></p> </form>

禁用

disabled————选择框、提交表单的禁用

讯享网<form action="Demo01.html" method="get"> <p> <input type="radio" value="boy" name="sex" disabled/>男 <input type="radio" value="girl" name="sex"/>女 </p> </form>

<form action="Demo01.html" method="get"> <p>&nbsp;<input type="submit" name="提交"disabled>&nbsp;<input type="reset" name="重置"></p> </form>

隐藏

hidden

讯享网<form action="Demo01.html" method="get"> <p>密码框：<input type="password" name="pwd" hidden></p> </form>

增强鼠标可用性（点文字鼠标自动点击到文本框）

label

 <!-- 增强鼠标可用性--> <form action="Demo01.html" method="get"> <p> <label for="mark">你点我一下试试</label> <input type="text" id="mark"> </p> </form>

18.表单初级验证

表单验证是为了减少错误请求，减轻错误数据的麻烦，另外也是为了数据的安全性

文本框提示信息

讯享网 <form action="Demo01.html" method="get"> <p>账户名：<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名"></p> </form>

非空判断

 <form action="Demo01.html" method="get"> <p>账户名：<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p> </form>

正则表达式

讯享网<!-- 自定义邮箱--> <form action="Demo01.html" method="get"> <p><input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></p> <!--表单提交、重置按钮--> <p>&nbsp;<input type="submit" name="提交" >&nbsp;<input type="reset" name="重置"></p> </form>

19. 小知识简要版

1. const、let、var

1.let与const的区别
let声明的变量可以改变，值和类型都可以改变；
const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。
2.let与var的区别
var是函数作用域，let是块作用域。
在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let

总结：const不能动，let可以动，但是只能在块区域内动，var在整个函数都可以动