一.HTML中meta标签：
1.<meta charset="utf-8" />
<title></title>
2.<!--搜索优化引擎-->
<meta name="author" content="朱自清"/>
<meta name="description" content="盼望着盼望着春天来了" />
<meta name="keywords" content="盼望， 东风" />
3.<!--刷新网页-->
<meta http-equiv="refresh" content="4,http://www.baidu.com"/>
4.<!--禁止缓存-->
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0"/>
二.HTML标签
1.常用标签：<!--1.标题标签h1-h6 ：自动加粗加黑 自动换行 h1-h6逐渐变小 align：left左(默认)，center:中，right：右 -->
<!--2.分割线标签hr：居中(默认) px:像素-->
<!--3.段落标签p br:换行  :空格-->
<!--4.预文本标签pre :按照指定格式输出，灵活性比较大，不建议使用-->
2.小标签：<!--下划线小标签-->
<u>北京尚学堂</u>
<!--斜体小标签-->
<i>北京尚学堂</i>
<!--加粗加黑小标签-->
<b>北京尚学堂</b>
<!--中划线小标签-->
<del>北京尚学堂</del>
<!--上标标签-->
2<sup>4</sup>
<!--下标标签-->
log<sub>2</sub>8
<!--字体变小-->
<small>北京尚学堂</small>
<!--字体变大-->
<big>北京尚学堂</big>
<!--字体标签-->
<font color="red " size="20px">北京尚学堂</font>
<!--span 在style中使用-->
<span>北京尚学堂</span>
<hr />
<!--列表标签：1.有序标签ol 2.无序标签ul 3。自定义标签dl-->
<ol type="1">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ol>
<ul type="circle">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
<dd>javaME</dd>
</dl>
<!--跑马灯标签-->
<marquee direction="right" scrollamount="10">北京尚学堂</marquee>
3.超链接标签：<!--超链接标签功能：1.实现页面跳转 ：跳转本地 跳转网络地址
2.实现锚点功能：返回底部，返回顶部
target="_blank":打开方法 _blank：另起一样 _relf:本身
<a href="02body中常用的小标签.html" target="_blank">小标签</a>
<a href="http://www.bjsxt.com" >北京尚学堂</a>
4.图片标签：<!--相对路径-->
<img src="img/1.jpg" />
<!--绝对路径:保存下来在桌面上可以显示，在此处不显示-->
<img src="F:\四.网络编程和设计\代码\01HTML\img\2.jpg" />
<!--网络路径-->
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" />
img: 不会自动换行
src:插入路径
title:图片标题
border：边框
align:位置，但是必须有参照物
alt:图片没有正确插入
width/height:宽/高 只写一个的话会等比例放大缩小 写两个按写的大小
5.表格标签：table>tr*3>th*3+tab 快速三行三列
table: 具有自适应能力
默认隐藏，需要加border显示
border="1px" width="300px" height="300px"
align="center" 在表格中设置，整个都是相对表格而言
cellpadding="20px":内容和单元格距离
cellspacing="20px":单元格与单元格距离
tr:行 height
td:普通列 width
th:标题列 width 自动居中，加粗
colspan="2":列合并
rowspan="2"：行合并
bgcolor:背景颜色，最靠近哪个显示哪个
6.表单标签：https://www.baidu.com/s：键1=值1&键2=值2
form表单： action：提交地址
method：提交方法
get： 1.请求参数依赖于地址之后 2.请求参数有长度限制 3.提交数据不安全
post：1.请求参数不依赖地址之后 2.请求参数没有长度限制 3.提交数据安全
<!--1.普通文本框-->
<input type="text" name="" value="123"/><br />
<!--2.密码框-->
<input type="password" name="" value="123"/><br />
<!--3.单选框：必须有相同的name属性才能实现单选 checked="checked":默认选择 -->
男：<input type="radio" name="sex" checked="checked"/>
女：<input type="radio" name="sex"/><br />
<!--4.多选框 value:真正传入到地址的值 checked="checked":默认选择 -->
抽烟：<input type="checkbox" value="1" checked="checked"/>
喝酒：<input type="checkbox" value="2"/>
烫头：<input type="checkbox" value="3"/><br />
<!--5.多行文本框-->
个人介绍：<textarea rows="10" cols="15" value="">我在北京尚学堂</textarea><br /><br /><br /><br />
<!--11.文件选择框-->
文件选择：<input type="file" value="file"/><br />
<!--6.下拉框-->
<select>
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">杭州</option>
<option value="4">深圳</option>
</select>
<!--7.隐藏框 :不显示，但是可以传内容-->
<input type="hidden" value="123"/><br />
<!--8.提交按钮：提交表单数据-->
<input type="submit" value="提交"/><br />
<!--9.普通按钮：不能提交表单数据，和js中的事件一起使用，绑定事件-->
<input type="button" value="提交"/><br />
<!--10.重置/清除按钮：清除写的数据，但原有的数据不会清除-->
<input type="reset" value="清除"/>
<!--邮箱标签：遵循邮箱格式-->
<p>
邮箱：<input type="email" />
</p>
<!--数字标签：只能写数字 字母e可以-->
<p>
数字：<input type="number" />
</p>
<!--滑动器：控制声音等大小-->
<p>
滑动器：<input type="range" />
</p>
<!--日期：选择日期-->
<p>
日期：<input type="date" />
H5表单增强属性：placeholder="手机号/邮箱"：显示字
autofocus="autofocus"：自动获取焦点
max：最大值
min：最小值
minlength最小长度
maxlength：最大长度
7.框架标签：1.<!--框架标签 一个网页嵌套另一个网页：宽 高 名 默认地址-->
<iframe width="1000px" height="500px" name="ifr" src="http://www.baidu.com"></iframe>
2.<!--框架标签：把网页划分成几个部分 上中下 中：左右 使用的不多没有iframe流量-->
<frameset rows="150px,*,100px">
<!--顶部部分-->
<frame src="demo/top.html" noresize="noresize"/>
<!--中间部分-->
<frameset cols="10%,*,10%">
<!--左边部分-->
<frame src="demo/left.html" />
<!--中间部分-->
<frame src="demo/center.html" name="cen"/>
<!--右边部分-->
<frame src="demo/right.html"/>
</frameset>
<!--尾部部分-->
<frame src="demo/bottom.html"/>
</frameset>
8.div标签：用于把页面分成几部分<!--头部分-->
<div class="top"></div>
<!--导航部分-->
<div class="tipe"></div>
<!--中间部分-->
<div class="center">
<div class="login"></div>
</div>
<!--底部部分-->
<div class="bottom"></div>
9.视频音频标签：1.<!--音频标签：需要有controls才能显示播放-->
<audio>
<source src="img/1.mp3" controls="controls"></source>
<source src="img/1.ogg" controls="controls"></source>
该网页不支持媒体标签
</audio>
2.<!--视频标签:需要有controls才能播放-->
<video>
<source src="img/movie.mp4" controls="controls" width="200px" height="200px"></source>
<source src="img/movie.ogg" controls="controls"></source>
<source src="img/movie.webm" controls="controls"></source>
该网页不支持媒体标签
</video>
3.<!--媒体标签：既支持音频又支持视频-->
<embed src="img/1.mp3"></embed>
<embed src="img/movie.mp4"></embed>
11.<!--1.figure标签：开始处边框和内容有间隔， 和自定义标签的dd很类似-->
<figure>
回电话
<figcaption>IT程序员</figcaption>
</figure>
12.<!--2.details标签：展示文章细节 默认标题为详细信息 通过summary可以改变标题 ， 和select选择标签很类似
mark:着重突出的内容
-->
<details>
<summary>请选择</summary>
<p>北京</p>
<p><mark>上海</mark></p>
<p>南京</p>
</details>
13.<!--3.刻度标签
max:最大值
min:最小值
value：当前值
low：自己定义的最小值
high：自己定义的最大值
<meter max="100" min="0" value="90" low="20" high="80"></meter>
14.<!--4.进度标签:用于文件上传-->
<progress max="100" value="50"></progress>
15.画布标签
<canvas id="mycat">
<script>
var cat=document.getElementById("mycat");
var t=cat.getContext("2d");
t.fillStyle="#FF0000";
t.fillRect(0,0,100,100);
</script>
</canvas>
来源：https://blog.csdn.net/yangbiaosb/article/details/99657477