HTML简介
HTML实例
<！DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>小俊好好学前端</title>
</head>
<body>
<h1>标题一</h1>
</body>
<!DOCTYPE html> 声明为HTML5文档<html>元素是HTML页面的根元素<head> 元素表示页面头部，常用于定义页面的全局属性，如<meta charset='utf-8'>定义了网页编码格式为utf-8<title>元素定义了该文档标题<body>元素定义页面的主体部分，包含了页面的主体内容<h1>元素定义的标题
这就是一个简单的网页，页面内容都需要我们使用前端知识进行填充，最后构建出一个符合我们要求的网页。
文档元数据
<head>
<meta charset="UTF-8">
<meta name="keyword" content="HTML，CSS,XML,Javascript">
<meta name="author" content="lixiaojun">
<meta http-equiv="refresh" content="30">
<meta name="description" content="study html">
<title>文档元数据</title>
<script type="text/javascript">
</script>
<base href="https//www.baidu.com" target="_blank">
<link rel="stylesheet" href="url" type="text/css">
<style type="text/css">
div {
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<head>标签是头部元素的容器，可以省略；如果写上，里面必须包括<title>标签，可以包含脚本、样式等标签。<meta>标签提供了HTML文档的元数据，不会显示在客户端，但是会被浏览器解析，可以在开发者工具中查看。常用于网页的描述、关键词、作者等元数据。元数据可以被浏览器（如何显示内容或重新加载页面），搜索引擎或其他web调用。<title>标签定义文档的标题，在所有HTML中是必要的。定义了浏览器工具栏中的标题、书签收藏时候标题以及搜索引擎上的标题。<script>标签是脚本标签，HTML的脚本语言如写在头文件中，应该写在该标签中，常见的脚本语言JavaScript，也可以使用费scr指向外部的脚本文件。<base>标签指定在本HTML文件中，如果有未指定的链接，就默认使用该标签中的链接，其中的href为url地址，target表示链接之后是新建一个空白页面还是在本页面中展示。<link>标签定义HTML文档与外部资源的关系，常见的如上面展示的用法，链接外部样式表。<style>标签定义HTML文档的样式信息。
脚本标签
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="##">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 80, 100);
document.write('hello world')
</script>
<noscript>抱歉，你的浏览器不支持JavaScript</noscript>
</body>
<canvas>标签是HTML5中新标签，用于通过JavaScript进行绘图。可以从代码看到，先定义此标签。再在javascript中获取对应的对象，使用该对象中的函数进行绘图。fillStyle设置颜色。fillRect参数表示屏幕的横纵坐标和绘图的长宽。<script>标签用于定义客户端脚本，常用的就是JavaScript。可以通过src属性指向外部的javascript文件，type属性表示脚本类型，HTML5可以省略。<noscript>标签用于定义脚本内容未被执行进行代替的内容（用于无法识别JavaScript，但是可以识别noscript的浏览器）
文本标签
<body>
<sub>右上</sub>
<sup>左下</sup>
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<em>斜体</em>
<del>删除线</del>
<s>删除</s>
<u>下划线</u>
<ins>下换线插入</ins>
<q>引用</q>
<small>小号字标签</small>
</body>
<sub>标签用于文字右上<sup>标签用于文字左下<b>、<strong>标签用于文字加粗<i>、<em>标签用于文字倾斜<del>、<s>标签用于文字的删除样式<u>、<ins>标签用于文字下划线<q>标签用于引用（文字加引号）<small>标签用于文字小号字体
格式化标签
<body>
<h1>标题标签</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p>段落标签</p>
<br>
<hr>
</body>
<h1-h6>标签是标题标签，从h1至h6字体大小，加粗程度依次减小<p>标签是段落标签，使用之后下面将会换段落<br>标签是换行标签，在页面中用于换行<hr>标签是水平分割线标签
常用功能性标签
<body>
<div>我是一个盒子，块级元素</div>
<span>我是靠内容填充，内联元素</span>
<a href="javascript:;">我是一个链接</a>
<img src="##" alt="">
<button>我是一个按钮</button>
</body>
<div>标签是网页中很常见的标签，在页面中展示为一个盒子，在css中说法为块级元素，即自己独占整行<span>标签与上面的div相对，其大小由内容决定，在css中称为内联元素，不会独占整行<a>标签为链接标签，用于给页面中添加链接<img>标签为图像标签，用于给页面中插入图片<button>标签为按钮标签，用于给页面中插入按钮
列表标签
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<dl>自定义一个描述列表
<dt>定义描述列表的名字
<dd>描述内容</dd>
<dd></dd>
</dt>
</dl>
</body>
<ul>标签用于定义无序列表<li>标签用于列表中的具体内容<ol>标签用于定义有序列表<dl>标签用于定义描述性列表<dt>标签用于描述性列表中的列表名称<dd>标签用于描述性列表中的具体内容描述
表格标签
<table>
<caption>表格学习</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</tbody>
</table>
<table> 定义一个表的总标签<caption>定义该表格的标题<colgroup>用于对表格中的列进行组合，方便格式化<col>用于规定<colgroup>元素内部的每一列的列属性<thead>表示表头<tfoot>表示页脚<tbody>表示表格的主体<tr>表示行<th>表示在表头中的列<td>表示一般的列
其中常用的属性包括 rowspan（跨行）、colspan(跨列)、border-collapse（单双边框设置）
表单标签
<body>
<form action="" method="GET" name="">
<fieldset>控件组
<legend>控件组标题</legend>
<input type="button">
<input type="reset" value="">
<input type="image">
<input type="submit">
<input type="file" name="" id="">
<button type=""></button>
</fieldset>
<input type="text">
<input type="password" name="" id="">
<input type="radio" name="sex">男<input type="radio" name="sex">女
<input type="checkbox" name="" id="">、
<select>
<optgroup>
<option value="北京" ></option>
<option value="南京" ></option>
<option value="东京" selected></option>
</optgroup>
</select>
<output name="" for=""></output>
<progress value="" max=""></progress>
<meter value="2" min="10">2 out of 10</meter>
<textarea id="" name="" cols="" rows=""></textarea>
<label for="username"></label>
<input type="text" name="text" id="username">
</form>
</body>
<form> 将这个标签的包含的所有表单元素作为一个整体，包含在一起，进行提交<fieldset>定义一个空间组<legend>用于与<fieldset>标签合用，表示控件组标题<col>用于规定<colgroup>元素内部的每一列的列属性<input>标签是表单标签中最常见的标签，其中通过type元素进行控制具体的表单展现形式，例如，当type元素为text时，为文本输入框；当为password时，为密码文本输入框；当为radio时，为单选框；当为checkbox时为下拉框；当为restset时，为清空按钮；当为file时为文件上传按钮；当为image时为图片按钮；当为submit时为提交按钮；当为button时为普通按钮<button>表示按钮标签<select>为下拉框，与标签<optgroup>合用，表示一个选项组，里面的 <opotion>表示下拉框选项，其中加了selected的表示第一个展示的内容<output>用于存放计算结果，比如脚本的输出等<progress>表示下载进度<meter>用于定义度量衡，用于最大值和最小值<textarea>表示文本域，里面的cols和rows表示文本域框的行列<label>标签通常与其他标签合用，用于增加用户体验；里面的元素内容for包含的内容与合用的标签的id元素内容相同时生效，形成一种扩大点击的范围的效果
媒体标签
<embed src="文件地址" height="50" width="100">
<object data="文件地址" height="50" width="100"></object>
<audio controls='controls' height="100" width="100">
<source src="文件地址" type="audio/mp3">
</audio>
<video width="100" height="100" controls>
<source src="文件地址" type="video/mp4">
</video>
<embed>标签，这是H5标签，其中src值为文件地址，可以放入视频，也可以放入音频地址<object>标签，其中data值指向文件地址，即可放入视频地址，也可放入音频地址<audio>标签，是H5提供的专门的音频标签，其中的controls是控制是否显示控制栏<video>标签，是H5提供的专门的视频标签，同样其中的controls是控制是否显示控制栏source标签，用于对<audio>标签和<video>标签进行属性的进一步说明，但<audio>标签和<video>标签也可以在自身标签中设置相应，从而删除此标签
媒体元素在浏览器中播放，常常会遇到许多问题，例如兼容性，浏览器版本等，所以需要多加尝试，多些几种插入方式备用
