我们可以在浏览器里打开任意一个网站页面，它就是一个HTML，当然你所见到的网页都离不开HTML，作为专业的前端工程师，HTML是必学的技能之一，那么我先来认识一下它。HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
注意事项:
因为HTML是一种标记语言，主要用于描述网页内容，告诉浏览器跟据我们的标记符的类型，显示相应的内容。HTML就像是我们的饭碗一样，如果吃饭这个只少也要算个标配吧！当然，对于我们的网站，HTML就是整个网站的骨架，如果不用HTML，我们很难想像网站长什么样子。所以这些基础知识我们必需撑握。
HTML使用的地方非常的广泛，基于浏览器端所有能看到的网站都用到它。
静态网页，html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
注意：不要将动态网页和页面内容是否有动画效果混为一谈，比如网页中幻灯片效果，文字滚动效果，如果内容本身没有变化，那么也属于静态网页。
1、强化了Web网页表现能力。除了可以绘制图形外，还可以直接在网页中播放视频和音频（HTML4中需要flash插件，才能播放视频和音频，关键是flash容易崩溃，而且漏洞很多）；
2、支持（客户端 PC）本地数据库等Web应用的能力；
3、HTML5容错性更很高（例如：标签未正常的关闭、属性的引号问题等），HTML5是向上兼容的，这保证使用HTML5也可以在低版本浏览器中正常显示。
4、HTML5是近十年来Web标准发展而生的产物。 和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台。
5、HTML5对移动端兼容性非常好，所以手机网站开发必备。
可以用来写HTML编辑器有很多，甚至可以使用记事本来编辑，那作为专业的WEB前端工程师应该选用哪一款呢？我们首来看一下常见的编辑器:
HTML标记标签也称为HTML标签(HTML tag)，由开始标签和结束标签组成，用于表现结构化的内容，将内容构造成为一个完整的网页。
<元素名>内容< /元素名>
例如：<h1>文本内容</h1> <b></b>
通常情况下，在我们的HTML中，标签分为两大类：
1） 双标签 双标签是指由开始标签和结束标签组成，例如：<b>内容</b>
2） 单标签 单标签是指没有结束标签的标签，由一个标签构成即为开始也是结束，例如：<hr /> <br />
定义：属性主要用于设置标签的更多细节信息，比如字体标签<font>，如果需要设置字体大小，我们就需要使用size属性。
基本语法：
<标签名 属性名="属性值" 属性名="属性值" ....>
<!-- 设置字体的标签 -->
<font size="7">大不大</font>
<!DOCTYPE html> <html> <head></head> <body></body> </html>
<!-- 文档声明：位于文档的首行，告知浏览器文档使用哪种 HTML 或 XHTML 规范。让浏览器通过正确的方式解析我们的网页，使网页能正常显示。 -->
lang:表示规则元素内容语言（了解）
属性的值：
en:表示英文
zh:表示简体中文
<!DOCTYPE html> <!-- html标签：告诉页面这是一个HTML文档--> <html lang="en"> <!-- head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。--> <head> <!--meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词等。 声明文件的编码是UTF-8的编码，告诉浏览器，你用什么编码去解析这个文件 UTF-8 : 国际通用码 GBK/GB2312 : 中文编码 这里的编码必需要和文件的编码完全一致--> <meta charset="UTF-8" /> <!-- viewport：表示视区 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 兼容IE浏览器 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供给搜索引擎的关键字信息 --> <meta name="keywords" content="Java、web前端" /> <meta name="description" content="源代码" /> <!--title : 网页的标题，会显示在标题栏--> <title>你看得见我嘛？</title> </head> <!-- body标签:就是一个身体 一般来说:body里面的内容要显示出来--> <body> 我是源码 </body> </html>
常见的编码格式有：
文件编码是指HTML文件保存到硬盘中的编码格式，一般在保存的时候设置，常见的开发工具都可在编辑的时候设置。
块标签与行内标签的区别：
<a> 标签可定义超连接。有两种用法：
基本语法：<a 属性="属性值">~标签内容~</a>
注意事项：
可选的属性：
| target | _blank _self _parent _top framename |
在何处打开目标 URL | TF |
| type | MIME 编码类型 | 规定目标 URL 的 MIME 类型 | STF |
| 属性 | 值 | 描述 | DTD |
| charset | 字符集名称 | 规定目标 URL 的字符编码 | STF |
| coords | 坐标 | 规定连接的坐标 | STF |
| href | URL | 链接的目标 URL | STF |
| hreflang | ISO 语言代码 | 规定目标 URL 的基准语言 | STF |
| name | section_name | 规定锚的名称 | STF |
| rel | text | 规定当前文档与目标 URL 之间的关系 | STF |
| rev | text | 规定目标 URL 与当前文档之间的关系 | STF |
| shape | default rect circle polydefault rect circle polyv |
规定链接的形状 | STF |
示例：
<!-- href 属性 --> <a href="http:// www.itsource.cn">源码时代教育</a> <!-- name属性 --> <a href="#tag1" name="tag0">源码时代教育</a> <div style="height: 1000px;"></div> <a name="tag1">tag1</a> <a href="#tag0" name="tag2">tag2</a>
定义：以文件本身所在的目录为参照路径进行定位。
基本语法：<img src="图片的路径" alt="图片说明文字" />
属性：
| 属性 | 值 | 描述 |
| src | URL | 规定显示图像的 URL |
| alt | text | 规定图像的替代文本，当图片加载失败时显示 |
例：
<img src="./img/118.gif" alt="努力工作！"/>
可选的属性：
| 属性 | 值 | 描述 |
| height | pixels（%） | 定义图像的高度 |
| width | pixels（%） | 设置图像的宽度 |
| title | 无 | 图片的说明(一般鼠标放到上面会显示相应的文字) |
例：
<img src="img/gril.jpg" width="300" title="一个美丽的女孩" />
注意事项：
基本语法：<audio src="音乐文件路径url" controls="controls"> </audio>
属性解释：
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | muted | 规定视频输出应该被静音 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性 |
| src | url | 要播放的音频的 URL |
示例：
<audio src="img/beyond.mp3" controls="controls"> 您的浏览器不支持audio标签 </audio>
基本语法：<video src="视频文件路径" controls="controls">......</video>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | muted | 规定视频的音频输出应该被静音 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度 |
示例：
<video src="img/movie.ogg" controls="controls" poster="./img/aa.bmp" width="400"> 您的浏览器不支持video标签 </video>
定义：source标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
基本语法：
<source src="资源地址url" type="资源类型"> 示例: 1.选择合适的音频播放： <audio controls="controls"> <source src="img/beyond.mp3" type="audio/mp3"> <source src="img/1.mp4" type="audio/mp4"> 您的浏览器不支持audio标签 </audio>
示例(选择适合的视频):
<video controls="controls"> <source src="img/1.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持audio标签 </video>
注意事项:
src的值为资源地址，type的值为资源的类型。可以指定多个资源，浏览器将自动选择支持的资源进行播放。
常用类型：
用于视频：
video/ogg
video/mp4
video/webm
用于音频：
audio/ogg
audio/mpeg
HTML中的列表共有3种形式：无序列表、有序列表以及定义列表。
<!--基本语法:--> <ul > <li>文本内容</li> </ul>
结构说明:
注意事项:
（使用行内样式去掉li前面小圆点<ul style=”list-style:none”>***</ul>）
定义：通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
<!--基本语法：--> <ol> <li>小苹果</li> </ol>
结构说明:
注意事项:
<ol> <li> 是组合使用的，li代表列表里面的每一个列表项。
有序列表ol上的type属性有几个值：
定义: <dl> 标签定义了定义列表，常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。
<!--基本语法：--> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
结构说明:
注意事项:
1、重点
1.img标签和多媒体标签基本语法及使用
2.ul标签语法及使用
3.超连接
4.相对路径与绝对路径
2、难点
1.img标签的注意事项和必要属性
2.正确的使用列表标签的结构
3.相对路径
3、如何掌握？
1. 理解重点标签的基本结构及注意事项。
2. 有针对性的进行代码的书写。
3. 此技能靠使用升级，使用次数越多等级越高
4、排错技巧
1. 相关英文单词是否书写正确
2. 必选属性是否书写正确
3. 固定结构是否正确
4. 学会使用控制台找问题所在
1. img标签上title与alt属性有何不同?
2. 说说HTML5中新增了那几个常用的标签？
3. 什么是标签语义化?
原文：https://www.cnblogs.com/qcdxw/p/14117974.html