Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等
World Wide Web Consortium （万维网联盟）
W3C标准包括：
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
<!-- !DOCTYPE 告诉浏览器，要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head网页头部-->
<head>
<!-- meta 描述性标签，用来描述网站的一些信息
meta 一般用来做seo -->
<meta charset="UTF-8">
<!-- <meta name="keywords" content="html,基本标签">-->
<!-- <meta name="description" content="这里是我学习过程中的笔记呀~多复习！">-->
<!-- title 网页标题 -->
<title>Title</title>
</head>
<body>
<h1>Hello world！</h1>
</body>
</html>
页面结构分析：
<!--h1~h6-->
<h1></h1>
<p></p>
<br>
<hr>
粗体：<strong></strong>
斜体：<em></em>
空格：
大于号：>
小于号：<
版权符合：©
<!-- src填图像地址，
alt是图像的替代文字(即图像加载失败时显示的文字)，
titile是鼠标悬停时的提示文字，
width图像宽度， high图像高度 -->
<img src="" alt="" title=" width="" height="">
页面间链接
<!--
href：表示要跳转的网页地址
target：表示链接在哪个窗口打开，常用值：
_self:在自己的网页中打开
_blank:在新标签页打开
a标签内可嵌套其他标签，如img。
-->
<a href="path" target="">链接文本或图像</a>
锚链接
同一个页面内：
<!-- 设置一个锚标记 -->
<a name="top">我是顶部</a>
......
<!-- 跳转到锚标记处 -->
<a href="#top">点击我回到顶部</a>
不同页面间：
页面一：first.html
<!-- 设置一个锚标记 -->
<a name="down">底部</a>
.......
页面二：second.html
<!-- 跳转到锚标记处 -->
<a href="first.html#top">点击直达first.html底部</a>
功能性链接
<!-- 邮件链接：mailto -->
<a href="mailto:邮箱地址">点击联系我</a>
<!-- QQ链接-->
<!--百度搜索QQ推广，点进去，找到推广工具，选择想要的样式，会给出相应的语句，复制粘贴用即可-->
<!-- src：引用页面地址，name：框架标识名-->
<iframe src="" name="hello" frameborder="1"></iframe>
<!-- 还可与a标签配合使用。此处target填的是上面iframe中的name值-->
<a href="first.html" target="hello">点击跳转</a>
有序列表：
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>日语</li>
</ol>
无序列表：
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>日语</li>
</ul>
自定义列表：
<!-- dt：列表名称，dd：列表内容 -->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>C</dd>
<dd>C++</dd>
<dd>Python</dd>
</dl>
<!--border:表格边界，colspan:跨列，rowspan:跨行-->
<table border="1px">
<tr>
<td colspan="3" rowspan="1.5">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td rowspan="2">嘟嘟</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
效果图：
<!-- src:资源路径
controls：控制条
autoplay：自动播放 -->
<video src="../resourse/video/1.mp4" controls autoplay></video>
<audio src=" "controls></audio>
文本框、密码框、按钮、提交、重置
<!--
action：表单提交的位置，可以是网站，也可以是一个处理请求地址
method：表单提交方式：get（提交的信息会在地址栏显示）、post
-->
<form action="first.html" method="get">
<p>姓名：<input type="text" name="username"> </p>
<p>密码：<input type="password" name="pwd"> </p>
<!--按钮-->
<p>按钮：
<input type="button" name="btn1" value="按钮a">
<!-- 图片按钮的效果和提交一样(但带上图片的参数）-->
<input type="image" name="btn2" src="../resourse/img/111.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
单选、多选、下拉框：
<!--单选 ,value一定要填(否则无法读取值)，name值要相同否则不能单选-->
<p>性别：
<input type="radio" value="boy" name="sexs">男
<input type="radio" value="girl" name="sexs">女
</p>
<!--多选 ,value一定要填(否则无法读取值)-->
<p>性别：
<input type="checkbox" value="sleep" name="hobby">睡
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="book" name="hobby">看书
</p>
<!--下拉框,select默认选定-->
<p>国家：
<select name="国家">
<option value="japan">日本</option>
<option value="english">英国</option>
<option value="china" selected>中国</option>
<option value="usa">美国</option>
</select>
</p>
文本域、文件域
<!-- 文本域-->
<p>反馈：
<textarea name="textarea" cols="30" rows="10">请输入内容</textarea>
</p>
<!-- 文件域-->
<p>资料：
<input type="file" name="files">
</p>
滑块
<!--滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="find">
</p>
隐藏域、只读、禁用
隐藏域：hidden
只读：readonly
禁用：disabled
（默认内容：当取值是输入或选择时，写入value的值即为默认值）
常用方式：
placeholder：给出提示信息
<input type="text" name="username" placeholder="请输入你的姓名">
required：必填项
密码：<input type="password" name="pwd" required>
pattern：正则表达式判断
原文：https://www.cnblogs.com/duduwy/p/12640358.html