HTML语言，又称超文本标记语言，英语为HyperText Markup Language，是一种用来构建网页内容的描述语言，就像我们用文字来写出一部小说，网页，就是由这种语言描述而成的。而我们常常听到的另一种说法，是HTML5或者H5，这个数字5则代表了一种标准，就像是版本号中的1.0一样。平常我们说的HTML或者简称H5，都是指符合最新标准的HTML语言，H5是目前应用最广泛、最广为人知的开发网页的语言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div>Hello World!</div>
</body>
</html>像这段代码，就是最简单的所能构成网页的H5，第一句为浏览器声明html的版本，随后在html标签对中的内容，就是组成网页的部分。在head标签对中，包含了标题title和一些引入的文件、编码格式等等的东西。在body标签对中，是网页中的元素。通过这些最简单的语句，将文件类型保存为html之后，就能在浏览器中打开，并且呈现出有内容的网页了。所以我们一般将HTML理解为描述网页的语言。
DOM (Document Object Model) 译为文档对象模型，是 HTML文档的编程接口。这个概念对于初学者而言还是挺晦涩难懂的，我觉得可以将一个网页理解为一课节点树，而一个个标签就是一个个节点，一个个挂载在节点树上的DOM节点，就是组成网页的一个个元素。
原生的网页开发有一个十分明显的特点就是对DOM进行操作。例如下面这一段代码，我希望改变“Hello World”这个元素的内容，就可以通过id获取到这个元素，然后直接对元素进行操作。这也是与三大前端框架最大的不同点之一。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="hello">Hello World!</div>
</body>
<script>
var hello = document.getElementById("hello");
hello.innerHTML = "hello";
</script>
</html>以上就是HTML和DOM的简介，在了解了网页的基本组成之后，我们就可以正式进行网页的开发设计了。标签分为空标签和闭合标签，空标签的元素内容为空，如<br>、<hr>、 <img>、 <input>等等，更推荐可写成闭包的形式<br/>、<hr/>、 <img/>、 <input/>。闭合标签则是由开放标签和闭合标签组成，他们最大的特点是允许嵌套和承载内容。接下来我想介绍一些在原生的网页开发中最常用的标签，通过这些标签，我们能够更加灵活地实现我们的开发设计。
1、换行标签和分割线：br的作用是强制换行，hr是产生一条分割线，在实际的开发中，通常都不怎么使用。
<br>或<br/>
<hr>或<hr/>2、链接标签：a。最简单的网页跳转方式，就是通过a标签实现的，a标签还有许多自带的属性，通过修改这些属性，可以得到更丰富的功能。常用的有href和target，href是指定跳转的url，target是指定跳转的方式，默认为直接将此页跳转，_blank则是在一个新的窗口中打开。
<a href="https://mu-mu.cn/blog/"></a>
<a href="https://mu-mu.cn/blog/" target="_blank"></a>3、图像标签：img。img标签使用起来十分简单，只有两个关键属性，src是引用图像的地址，alt是图像的替代文本，如果图像加载失败，则显示alt中的内容。
<img src="" alt=""/>4、输入标签：input。input是一个神奇的标签，虽说原本只是一个普普通通的输入标签，但是通过它的type属性，它可以千变万化！
<input type="password">//密码输入框
<input type="button">//按钮
<input type="checkbox">//选择框
<input type="color">//颜色选择器
<input type="date">//日期选择器
<input type="file">//文件选择器
.
.
.5、列表标签：ul，序列标签：ol。可以实现简单的列表功能。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>6、表格标签：table。通过表头th、行tr、单元格td来构建表格。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>7、块级元素：div、span，这些元素默认是以块的形式存在的，会占据浏览器的一行。可以通过浏览器的开发者工具很明显地看出来，开发者工具也是前端设计的一个重要工具。
8、画布元素：Canvas。可以在浏览器中呈现一块画布，在画布上能够实现非常多的功能，比如画图功能，再比如简单的页面小游戏，都可以通过画布来实现，但是具体实现过程比较复杂，再加上我懂的也不多，所以还是自己去学习吧。
9、媒体元素：媒体元素包含视频和音频，有许多种实现方式可以选择。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>10、文本标签：文本标签种类繁多，有标题h1-h6、加粗b、斜体i等等等等，而且样式固定，不灵活，所以一般在正式开发中，我们都是通过CSS来实现，而不是通过这些标签。
这些只是所有HTML5元素中的冰山一角，不过很多元素都是普通元素+CSS样式构成的，所以与其死记这些不灵活的标签，不如只记住一些最基本最常用的标签，然后自己通过CSS样式改写成多种多样的元素。
总结一下，一个网页就像一颗节点树，由许许多多的节点组成，而HTML5就是描述网页的语言，H5中的一个个标签就是构成网页的一个个元素。具体的内容还有非常非常多，我自己也不是什么都懂，再加上三言两语说不完，有兴趣的话还是自己去查资料了解吧！
另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog