HTML的全称是 Hyper Text Markup Language，翻译过来就是超文本标记语言，是目前网络上应用最为广泛的语言，它不是编程语言，而是一种标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
说白了它就是用来构建网页的，所以话不多说，先来创建一个HTML文件吧。
创建HTML总得使用一款工具吧，那么它来啦。这里推荐一款非常好用而且是国产的前端Web开发工具HBuilder，当然还有比它更加好用的Web开发工具：webstorm、VS code等。这里只是入门的简单示例，所以就不用这种专门开发大前端的工具了。毕竟它也是国产的开发工具嘛，有时候我们还是需要支持一下国产的开发工具滴。个人认为Hbuilder还是比较适合新手入门的。
下载地址：https://www.dcloud.io/hbuilderx.html
下载完成后解压打开，创建一个项目。
此种方式创建开发工具会自动创建一个默认的 index.html文件，打开index.html的内容是：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
上面就是HTML的整体骨架。这是HTML5的定义方式。所以肯定会与HTML4有区别，具体的区别还请自行去问度娘。现在基本都是以H5标准开发前端。
来认识一下上面的的标签：
①、<!DOCTYPE html>：必须在文档开头第一行，表示标记为文档类型。（必不可少）
②、<html>:HTML页面的根元素，告知浏览器其自身是一个HTML文档。（必不可少）
③、<head>:用于表述网页的元数据，及网页的基本信息。（必不可少）
④、<meta>：表示元数据，是描述文件类型和编码，搜索关键字和描述。它永远位于<head>元素内部。元数据它不会显示在页面上，但是对于机器是可读的。
<meta>标签有两种格式如下：
<meta name="keywords" content="html入门" charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
简单介绍其中的属性：
meta标签的详细使用可以参考这篇博客：meta标签的作用及整理 我认为的meta标签一方面是设置浏览器的一些功能，另一方面是方便搜索引擎的收录关键词。
⑤、<title>：表示网页的标题。例如:
⑥、<body>：表示显示在网页上的内容。（它是最重要也是最主要的部分）
HTML的基本整体骨架就介绍这么多了，接下来我们学习常用标签。
标签参考：https://www.runoob.com/tags/html-reference.html
HTML中的注释： <!--注释的内容-->
①、标题 h
HTML的标题通过<h1>—<h6>标签来定义，<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>标题h</title> </head> <body> <h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3> <h4>这是标题4</h4> <h5>这是标题5</h5> <h6>这是标题6</h6> </body> </html>
②、段落 p
HTML段落通过标签 <p> 来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>网页标题</title> </head> <body> <p>这一个是段落</p> <p>这一个是段落</p> <p>这一个是段落</p> <p>这一个是段落</p> </body> </html>
③、超链接 a
HTML超链接通过标签 <a> 来定义，用于从一个页面链接到另一个页面。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>网页标题</title> </head> <body> <a href = "http://www.baidu.com" title="百度">这是一个超链接</a><br/> <a href = "http://www.baidu.com"target="_blank">这是一个超链接，在另一个窗口打</a><br/> </body> </html>
a标签中的相关属性：
④、图片 img
HTML图片通过标签 <img> 来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>网页标题</title> </head> <body> <img src = https://www.baidu.com/img/bd_logo1.png /><br> <img src = https://www.baidu.com/img/bd_logo1.png align="right"/><br> <img src = https://www.baidu.com/img/bd_logo1.png title="百度图片" alt="百度图片"/><br> <a href="https://www.baidu.com"><img src = https://www.baidu.com/img/bd_logo1.png height="100px" width="100px"/></a> </body> </html>
img标签中的相关属性：
⑤、列表ol-li、ul-li、dl-dt-dd
HTML列表通过标签<ol>-<li>、<ul>-<li>、<dl>-<dt>-<dd>，分为有序和无序列表。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>网页标题</title> </head> <body> <!-- 定义列表 --> <dl> <dt>第一行</dt> <dd>描述第一行</dd> <dt>第二行</dt> <dd>描述第二行</dd> </dl> <!-- 无序列表 --> <ul> <li>ul第一行</li> <li>ul第二行</li> <li>ul第三行</li> <li>ul第四行</li> </ul> <!-- 无序列表 --> <ol> <li>ol第一行</li> <li>ol第二行</li> <li>ol第三行</li> <li>ol第四行</li> </ol> </body> </html>
⑥、选择框select-option
HTML的选择框通过标签<select>-<option>来定义。其中<option>是可以单独使用的，但是不和<select>配合使用那么这个标签无任何意义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> <select name="select" autofocus disabled size="5"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </body> </html>
select-option标签的相关属性：
⑦、容器 div、span
div和span是HTML中两个非常重要的标签，会在后面的编码中大量使用，尤其是div标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> <!-- 换行 --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <!-- 不换行 --> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </body> </html>
div和span区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。div和span一般都是用CSS来控制它们的样式。
⑧、表格 table
HTML表格通过<table>标签来定义。表格的行用<tr>表示；表格的表头用<th>表示，默认加粗，单元格居中；表格的列用<td>表示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"cellpadding="0" cellspacing="0"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>第一行数据</td> <td>第一行数据</td> <td>第一行数据</td> </tr> <tr> <td>第二行数据</td> <td>第二行数据</td> <td>第二行数据</td> </tr> </table> </body> </html>
table标签中的相关属性：
⑨、输入框 input
HTML输入框通过<input>标签来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 输入框：<input type="text" name="input" value="默认值"/><br/> 密码：<input type="password" name="password" value="123456"/><br/> 提交按钮：<input type="submit" name="submit" value="提交"/><br/> 单选框：<input type="radio" name="radio" /> <input type="radio" name="radio" /> <input type="radio" name="radio" /><br/> 复选框：<input type="checkbox" name="checkbox"/> <input type="checkbox" name="checkbox"/> <input type="checkbox" name="checkbox"/><br/> 重置按钮：<input type="reset" /><br/> 普通按钮：<input type="button" /><br/> 文件：<input type="file" name="file"/><br/> 图片：<input type="image" src="C:\Users\Administrator\Pictures\头像\0.jpg" name="image"/><br/> 日期时间：<input type="datetime" name="datetime"/><br/> </body> </html>
input标签中的相关属性：
input标签中的type属性详解：
⑩、表单 form
HTML表单通过<form>标签来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form method="post" action="login" name="form"> 输入框：<input type="text" name="input" value="默认值"/><br/> 密码：<input type="password" name="password" value="123456"/><br/> 提交按钮：<input type="submit" name="submit" value="提交"/><br/> </form> </body> </html>
form标签中的相关属性：
其中get和poet方式的区别在于：
?、文本域 textarea
HTML文本域通过<textarea>标签来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <textarea rows="10" cols="10" name="name">文本域</textarea> <textarea rows="10" cols="10" autofocus="autofocus">文本域</textarea> <textarea rows="10" cols="10" maxlength="100">文本域</textarea> <textarea rows="10" cols="15" placeholder="请输入一段文字"></textarea> <textarea rows="10" cols="10" readonly="readonly" required="required">文本域</textarea> </body> </html>
textarea标签中的相关属性：
?、HTML常用的字符实体
—— 空格 < —— < > —— > & —— & © —— ? 版权（copyright）
那么H5的入门就介绍怎么多了，正所谓学习是一个在于坚持，在于积累的过程，只要每天学习一点点，每天就会进步一点点，那么今天你学习了吗？
如果博客对你有一点点帮助的话，哪怕只有一点点，能否动一下靓仔靓女的手指点个赞。
原文：https://www.cnblogs.com/tanghaorong/p/12401991.html