前端技术中最基础的技术就是HTML技术。首先我们来看看HTML基础体系知识图：
然后我们来讲讲体系图的相关内容：
1.HTML
1.1.定义：超文本标记语言。
1.2.作用：描述网页。
1.3.相关概念
1.3.1.URL
1.3.1.1.概念：统一资源定位器。
1.3.1.2.格式：http://www.w3school.com.cn:8080/html/index.jsp
1.3.1.3.解析
1.3.1.3.1.scheme：定义因特网服务的协议，对应http(常见的类型：http,https,ftp,file)。
1.3.1.3.2.host：定义域名，对应www.w3school.com.cn。
1.3.1.3.3.port：端口部分，对应8080(http默认端口号为80)。
1.3.1.3.4.path：定义服务器上的路径，对应/html。
1.3.1.3.5.filename：定义文档/资源的名称，对应index.jsp
1.3.1.4.编码规则
1.3.1.4.1.URL只能使用ASCII字符集。
1.3.1.4.2.URL中ASCII字符集之外的字符会转换为ASCII格式。
1.3.2.HTML版本
1.3.2.1.XHTML：可扩展超文本标记语言（HTML的XML版本，功能上与HTML基本一致，写法上更严格、严谨）。
1.3.2.2.HTML4：HTML的第四次修改（由HTML之父定稿）。
1.3.2.3.HTML5：HTML的第五次修改（由各IE生产商定稿）。
2.HTML格式
2.1.格式总览
<html>
<head>
</head>
<body>
</body>
</html>
2.2.head解析
2.2.1.作用：定义网页的基本信息、内/外部资源等公共信息。
2.2.2.基本信息标签
2.2.2.1.title
2.2.2.1.1.常用格式：<title>Title of the document
2.2.2.1.2.作用：定义文档的标题。
2.2.2.2.base
2.2.2.2.1.常用格式：
2.2.2.2.2.作用：定义所有链接规定默认地址或默认目标。
2.2.2.3.meta
2.2.2.3.1.常用格式
2.2.2.3.1.1.name类型：
2.2.2.3.1.2.http-equiv类型：
2.2.2.3.2.作用：定义关于网页的元数据信息
2.2.3.内/外部资源标签
2.2.3.1.link
2.2.3.1.1.常用格式：
2.2.3.1.2.作用：定义文档与外部资源之间的关系（几乎全部用于引用ccs资源）。
2.2.3.2.script
2.2.3.2.1.常用格式：<script type=“text/javascript” src=“servlet/JsServlet.js”>
2.2.3.2.2.作用：定义客户端脚本。
2.2.3.3.style
2.2.3.3.1.常用格式：<style type=“text/css”> body {background-color:yellow} p {color:blue}
2.2.3.3.2.作用：定义HTML文档样式信息。
2.3.body解析
2.3.1.布局
2.3.1.1.frameset
2.3.1.1.1.常用格式：<frameset rows=“50%,50%” cols=“50%,50%”>
2.3.1.1.2.作用：定义一个框架集。
2.3.1.1.3.子标签
2.3.1.1.3.1.frame：frameset的子格式，是非活动帧（每个帧是相互独立的网页）。
2.3.1.1.3.2.iframe：frameset的子格式，是活动帧（与网页是父子关系，是一个整体）。
2.3.1.2.div
2.3.1.2.1.常用格式：<div id=“Main” class=“Main”>
2.3.1.1.2.作用：设定字、画、表格等的摆放位置。
2.3.1.1.3.属性理解
2.3.1.1.3.1.context：内容，相当于盒子中放的物品。
2.3.1.1.3.2.padding：填充，相当于盒子中的缓冲物。
2.3.1.1.3.3.border：边框，相当于盒子的边框。
2.3.1.1.3.4.margin：边界，相关于盒子与盒子间的间隔。
2.3.2.资源类型
2.3.2.1.文本
2.3.2.2.多媒体
2.3.2.3.表格
3.文本
3.1.静态标签
3.1.1.h1
3.1.1.1.常用格式：<h1>This is a heading
3.1.1.2.作用：以加黑加粗形式显示文档标题。
 3.1.2.p
3.1.2.1.常用格式：<p>This is a paragraph
3.1.2.2.作用：定义文本段落。
3.1.2.3.文本格式
3.1.2.3.1.<b>、<strong>：定义粗体文字。
3.1.2.3.2.<em>：定义着重文字。
3.1.2.3.3.<i>：定义斜体文字。
3.1.2.3.4.<sub>：定义下标字。
3.1.2.3.5.<sup>：定义上标字。
3.1.2.3.6.<ins>：定义插入字。
3.1.2.3.7.<del>：定义删除字，类似于WORD的修订格式。
3.1.2.3.8.<q>：定义引用，即加双引号。
3.1.2.3.9.<u>：定义下划线。
3.1.2.3.10.<big>：定义大号字。
3.1.2.3.11.<small>：定义小号字。
3.1.2.3.12.<hr>：创建一条水平线。
3.1.2.3.13.<ol>、<ul>：创建一个有数字的列表/创建一个有圆点的列表。
3.1.2.3.14.<li>：定义列表项，要与<ol>、<ul>联合使用。
3.1.2.3.15.<br>：定义换行。
3.1.2.3.16.<span>：用于组合文档中的行内元素。
3.2.动态标签
 3.2.1.a
3.2.1.1.常用格式:<a href=“http://www.w3school.com.cn”>W3School
3.2.1.2.作用：定义超链接，用于从一张页面链接到另一张页面。
3.2.1.3.常用属性解析
3.2.1.3.1.href：规定链接指向页面的URL。
3.2.1.3.2.target：规定在何处打开链接文档。
3.2.1.3.2.1.__blank：在一个新打开、未命名的窗口中载入目标文档。
3.2.1.3.2.2.__self：当href为空时，使超链接指向默认URL（由base标签定义）。
3.2.1.3.2.3.__parent：使文档载入父窗口或者包含来超链接引用的框架的框架集。
3.2.1.3.2.4.__top：使文档载入包含这个超链接的窗口。
3.2.1.3.3.type：规定被链接文档的MIME类型。
 3.2.2.input
3.2.2.1.常用格式：
3.2.2.2.作用：搜集用户信息。
3.2.2.3.常用属性解析
3.2.2.3.1.type：规定input元素的类型。
3.2.2.3.1.1.text：默认。定义单行输入字段。
3.2.2.3.1.2.number：定义带有spinner控件的数字字段。
3.2.2.3.1.3.email：定义用于e-mail地址的文本字段。
3.2.2.3.1.4.tel：定义用于电话号码的文本字段。
3.2.2.3.1.5.password：定义密码字段。
3.2.2.3.1.6.date：定义日期字段。
3.2.2.3.1.7.time：定义日期字段的明、分、秒。
3.2.2.3.1.8.radio：定义单选按钮。
3.2.2.3.1.9.checkbox：定义复选框。
3.2.2.3.1.10.file：定义输入字段和"浏览"按钮，供文件上传。
3.2.2.3.1.11.image：将图像定义为提交按钮。src，alt属性是必需的。
3.2.2.3.1.12.hidden：定义隐藏输入字段。
3.2.2.3.1.13.button：定义可点击的按钮。
3.2.2.3.1.14.submit：定义提交按钮。
3.2.2.3.2.max：规定输入字段的最大值。
3.2.2.3.3.maxlength：规定输入字段的最大长度。
3.2.2.3.4.min：规定输入字段的最小值。
3.2.2.3.5.readonly：规定字段的值无法修改。
3.2.2.3.6.required：规定字段的值是必需的。
3.2.3.select
3.2.3.1.常用格式：<select id=“select_thinktype” name=“select_thinktype”>
3.2.3.2.作用：定义下拉列表。
3.2.3.3.子标签
3.2.3.3.1.格式：<option>湖北</option>
3.2.3.3.2.作用：定义列表中的可选项。
3.2.3.4.常用属性解析
3.2.3.4.1.disabled：规定禁用该下拉列表。
3.2.3.4.2.required：规定文本区域是必填的。
 3.2.4.textarea
3.2.4.1.常用格式：<textarea rows=“20” cols=“50”>
3.2.4.2.作用：定义一个多行的文本输入区域。
3.2.4.3.常用属性解析
3.2.4.3.1.rows：规定文本区内可见的行数。
3.2.4.3.2.cols：规定文本区内可见的列数。
3.2.4.3.3.disabled：规定禁用此文本区。
3.2.4.3.4.readonly：规则无法修改文本
3.2.4.3.3.required：规定文本区域是必填的。
4.多媒体
4.1.图片
4.1.1.img
4.1.1.1.常用格式：<img src="/i/eg_planets.jpg" usemap="#planetmap" alt=“Planets” />
4.1.1.2.作用：定义图像。
4.1.1.3.常用属性解析
4.1.1.3.1.src：指定图像存储的位置。
4.1.1.3.2.alt：指定图像加载失败时的替换文本。
4.1.1.3.3.usemap：将图像中的某一区域映射到另一个文档。
4.1.2.map
4.1.2.1.常用格式：<map name=“planetmap” id=“planetmap”>
4.1.2.2.作用：定义图像映射列表。
4.1.2.3.常用子标签
4.1.2.3.1.area
4.1.2.3.1.1.常用格式：<area shape=“circle” coords=“180,139,14” href =“venus.html” alt=“Venus” />
4.1.2.3.1.2.作用：定义图像映射的区域、文档。
4.2.音频
4.2.1.audio
4.2.1.1.常用格式：<audio controls=“controls”>
4.2.1.2.作用：定义音频信息。
4.2.1.3.常用属性解析
4.2.1.3.1.src：定义要播放的音频URL
4.2.1.3.2.controls：如果出现该属性，则用户可以控制音频播放。
4.2.1.3.3.autoplay：如果出现该属性，则音频就绪后马上播放。
4.2.1.4.常用子标签
4.2.1.4.1.source
4.2.1.4.1.1.常用格式：<source src=“horse.ogg” type=“audio/ogg”>
4.2.1.4.1.2.作用：定义多个音频资源供浏览器选择。
4.2.1.4.1.3.常用属性解析
4.2.1.4.1.3.1.src：定义媒体文件的URL。
4.2.1.4.1.3.2.type：定义媒体文件的MIME类型。
4.2.2.embed
4.2.2.1.常用格式：<embed src=“helloworld.swf” />
4.2.2.2.作用：定义嵌入内容。
4.2.2.3.常用属性解析
4.2.2.3.1.src：定义嵌入内容的URL。
4.2.2.3.2.type：定义嵌入内容的类型。
4.2.3.object
4.2.3.1.常用格式：<object id=“audio_test”>
4.2.3.2.作用：定义嵌入内容。
4.2.3.3.常用子标签
4.2.3.3.1.param
4.2.3.3.1.1.常用格式：<param name=“src” value=“bird.wav” />
4.2.3.3.1.2.作用：定义object使用参数。
4.2.3.3.1.3.常用属性解析
4.2.3.3.1.3.1.name：定义参数的名称。
4.2.3.3.1.3.2.value：定义参数的值。
4.3.视频
4.3.1.video
4.3.1.1.常用格式：<video src=“movie.ogg” controls=“controls”/>
4.3.1.2.作用：定义视频。
4.3.1.3.常用属性解析
4.3.1.3.1.src：定义要播放的视频URL。
4.3.1.3.2.controls：如果出现该属性，则用户可以控制视频的播放。
4.3.1.3.3.autoplay：如果出现该属性，则视频就绪后马上播放。
4.3.2.embed/object：参考4.2.2、4.2.3.小节
5.表格
5.1.form
5.1.1.常用格式：<form action=“M001” method=“post”>
5.1.2.作用：定义用户输入表单。
5.1.3.常用属性解析
5.1.3.1.action：定义提交表单时向何处发送表单数据。
5.1.3.2.method：定义发送form-data的HTTP方法。
5.2.table
5.2.1.常用格式：<table id=“table_test”>
5.2.2.作用：定义HTML表格，用于展示数据。
5.2.3.常用子标签
5.2.3.1.tr
5.2.3.1.1.常用格式：<tr></tr>
5.2.3.1.2.作用：定义表格中的行。
5.2.3.2.th
5.2.3.2.1.常用格式：<th colspan=“2” rowspan=“2”></th>
5.2.3.2.2.作用：定义表头单元格（内部文本呈现为居中的粗体文本）。
5.2.3.2.3.常用属性解析
5.2.3.2.3.1.colspan：定义单元格可以横跨的列数。
5.2.3.2.3.2.rowspan：定义单元格可以横跨的行数。
5.2.3.3.td
5.2.3.3.1.常用格式：<td colspan=“2” rowspan=“2”></td>
5.2.3.3.2.作用：定义标准单元格（内部文本左对齐）。
5.2.3.3.3.常用属性解析：参见5.2.3.2.3。
6.全局属性
6.1.id：规定标签的唯一id。
6.2.class：规定标签的一个或多个类名（引用样式表中的类）。
6.3.style：规定标签的行内ccs样式。
6.4.title：规定标签的额外提示信息。
6.5.dir：规则标签中内容的文本方向。
7.事件
7.1.窗口事件
7.1.1.概念：由窗口触发该事件，适用于标签。
7.1.2.常用事件
;7.1.2.1.onblur：当窗口失去焦点时运行脚本。
7.1.2.2.onfocus：当窗口获得焦点时运行脚本。
7.1.2.3.onhaschange：当文档改变时运行脚本。
7.1.2.4.onload：当文档加载时运行脚本。
7.1.2.5.onbeforeprint：在文档打印之前运行脚本。
7.1.2.6.onafterprint：在打印文档之后运行脚本。
7.2.表单事件
7.2.1.概念：在HTML表单中触发。
7.2.2.常用事件
7.2.2.1.onblur：当元素失去焦点时运行脚本。
7.2.2.2.onchange：当元素改变时运行脚本。
7.2.2.3.onfocus：当元素获得焦点时运行脚本。
7.2.2.4.onselect：当选取元素时运行脚本。
7.2.2.5.onsubmit：当提交表单时运行脚本。
7.3.键盘事件
7.3.1.概念：通过键盘按钮触发。
7.3.2.常用事件
7.3.2.1.onkeydown：当按下按键时运行脚本。
7.3.2.2.onkeypress：当按下并输出一个字符时被触发。
7.3.2.3.onkeyup：当松开按键时运行脚本。
7.4.鼠标事件
7.4.1.概念：通过鼠标触发事件。
7.4.2.常用事件
7.4.2.1.onclick：当单击鼠标时运行脚本。
7.4.2.2.ondblclick：当双击鼠标时运行脚本。
7.4.2.3.onmousedown：当按下鼠标按钮时运行脚本。
7.4.2.4.onmousemove：当鼠标指针移动时运行脚本。
7.4.2.5.onmouseout：当鼠标指针移出元素时运行脚本。
7.4.2.6.onmouseover：当鼠标指针移至元素之上时运行脚本。
7.4.2.7.onmouseup：当松开鼠标按钮时运行脚本。
7.4.2.8.onmousewheel：当转动鼠标滚轮时运行脚本。
7.5.多媒体事件
7.5.1.概念：通过多媒体标签触发事件。
7.5.2.常用事件
7.5.2.1.onended：当媒介已抵达结尾时运行脚本。
7.5.2.2.onerror：当在元素加载期间发生错误时运行脚本。
7.5.2.3.onplay：当媒介数据将要开始播放时运行脚本。
7.5.2.4.onplaying：当媒介数据已开始播放时运行脚本。