大佬教程收集整理的这篇文章主要介绍了HTML知识总结，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括：文字，图片，音频，视频，动画等
WOrld Wide Web Consortium(万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
<!--告诉浏览器，我们要是用什么规范 --><!DOCTYPE html><html lang="en"><!--head 网页头部--><head><!-- meta描述性标签，用来描述我们网站的一些信息--><!-- meta一般用来做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="跟狂神学Java"> <meta name="description" content="可以学习java"><!-- title网页标题--> <title>我的第一个网页</title></head><body>Hello，World！</body></html>
标题标签 <title> 标题</title>
段落标签 <p>一段话</p>
换行标签 一句话<br/>
水平线标签 <hr/>
字体样式标签 粗体 粗体 斜体 <s></s> <i></i>
注释和特殊符号 <!-- 注释-->
<!--特殊符号-->空 格：大于号>小于号<©版权符号
常见的图像格式
JPG
GIF
PNG
BMP
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
<!--img学习src:图片地址 相对地址（推荐使用），绝对地址 ../返回上一级目录 -->
alt 图片加载失败会显示的内容“”。
<!-- a标签href：必填，表示要跳转到那个页面target：表示窗口在那里打开_blank 在新标签中打开_self 在自己的网页中打开-->
超链接
页面间链接
从一个页面链接到另一个页面
锚链接
功能性链接
<body><!--使用name作为标记--><a name="top">顶部</a><!-- a标签href：必填，表示要跳转到那个页面target：表示窗口在那里打开_blank 在新标签中打开_self 在自己的网页中打开--><a href="https://www.baidu.com" target="_blank">点击调转到百度 <img src="../resources/image/1.jpg" alt="图片加载失败"></a><!--锚链接1.需要一个锚标记2.跳转到标记--><a href="#top">回到顶部</a><a name="down">底部</a><!--功能性连接邮件连接：mailtoQQ链接--><a href="mailto:1395950933@qq.com">点击联系我</a></body></html>
块元素：无论内容有多少，元素自己独占一行
例如：<p></p><hr/> <h1>
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
例如：<a><strong><em>
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类：
无序列表
有序列表
定义列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格学习</title></head><body><!--表格table行 tr rows列 td--><!--border表格的边框--><table border="1px"> <tr><!--colspan 跨列 --> <td colspan="4">1-1</td> </tr> <tr><!--rowspan跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr></table></body></html>
<title>视频和音频学习</title></head><body><!--音频和视频src：资源路径controls：控制调autoplay：自动播放--><video src="../resources/video/2.mp4" controls autoplay></video><audio src="../resources/audio/3.mp3" controls autoplay></audio></body></html>
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚步</h2>
</footer>
<!--导航 nav-->
<nav></nav>
</body>
</html>
<title>内联框架iframe</title> </head> <body> <!--iframe内联框架 src：地址 w-h：宽，高--> <iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe> <a href="https://www.baidu.com" target="change" >点击跳转</a> </body> </html>
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text" submit提交按钮 reset重置按钮 -->
<p>名字：<input type="text" name="username"/></p>
<p>密码：<input type="password" name="pwd"/></p>
<p><input type="submit">
<input type="reset"></p>
</form>
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text" name 输入框的名字
value 默认一个初始化值
maxlength 文本框最大输入字符
size 文本框长度
submit提交按钮 reset重置按钮
-->
<p>名字：<input type="text" name="username" value="帅" maxlength="8" size="10"/></p>
<p>密码：<input type="password" name="pwd"/></p>
<!--单选框按钮 name必须为一致，才能表示为同一组，才能只选择一个
input标签 类型是radio时，必须有value-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl"name="sex">女
</p>
<p><input type="submit">
<input type="reset"></p>
</form>
</body>
</html>
<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个
input标签 类型是radio时，必须有value
checked 默认选中-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox" -->
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="talk" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby" checked/>游戏
<input type="checkbox" value="eat" name="hobby"/>吃东西
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p><input type="button" name="btn1" value="按钮名字"/>
<input type="image" src="resources/image/1.jpg"/>
</p>
<p><input type="submit">
<input type="reset"></p>
<!--下拉框 列表框
<select>
name是下拉框的名字
option value 是下拉框可以选择的值
selected是默认为那个列
-->
<p>国家
<select name="列表名称" >
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="agt">阿根廷</option>
<option value="md">缅甸</option>
</select>
</p>
<!-- 文本域
cols="30" rows="10" 行，，，列
-->
<p>反馈：<textarea name="textarea" 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><input type="url" name="url"></p>
<!-- 数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p><input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑块-->
<p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>
<!-- 搜索框-->
<p><input type="search" name="search"></p>
只读：value="admin"（先给一个默认值） readonly
禁用：disabled
隐藏：hidden
单词：description 描述 content内容
<!-- 增强鼠标可用性-->
<p> <lable for="mark">点击</lable>
<input type="text" id="mark"/>
</p>
placeholder="请输入用户名"<!--提示属性--> required 非空判断 pattern 正则表达式
<!--告诉浏览器使用的规范--><!DOCTYPE html><html lang="en"><!--网页的头部--><head><!-- meta描述标签，描述网站信息--> <meta name="description" content="和狂神学java"> <meta charset="UTF-8"> <title>HTML小练习</title></head><body><a name="top">顶部</a><!--段落--><p> <b>你好，世界</b><br/> <em>i love you</em> ©赵东</p><!--水平线--><hr/><!--src=相对路径 alt=加载失败后显示文字 title=鼠标放在图片上显示的文字 width宽 height高--><img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="800" height="600"><!--锚链接 先使用a标签 定义名字做标记 再想返回标记的地方 a标签 #名字--><!-- a标签href：必填，表示要跳转到那个页面target：表示窗口在那里打开_blank 在新标签中打开_self 在自己的网页中打开--><a href="https://www.baidu.com" target="_blank">点击跳转百度</a><!--功能性连接邮件连接：mailtoQQ链接--><a href="mailto:1395950933@qq.com">点击联系我</a><!--有序列表应用范围：试卷，问答。。。--><ol> <ul>Java</ul> <ul>C++</ul> <ul>运维</ul> <ul>前端</ul></ol><!--无序列表应用范围：导航，侧边栏--><ul> <li>Java</li> <li>C++</li> <li>运维</li> <li>前端</li></ul><!--自定义列表dl:标签dt:列表名称dd:列表内容范围：公司网站--><dl> <dt>学科</dt> <dd>语文</dd> <dd>数学</dd> <dd>英语</dd> <dd>自然</dd></dl><!--表格table行 tr rows列 tdborder表格的边框--><table border="1px"> <tr><!-- colspan跨列 --> <td colspan="4">学习java </td