以下是各种前端直接应用的代码：
##########################################################################
1. 页面：
<!-- DOCTYPE不区分大小写 规定文档类型 html代表的事该文件采用的h5 -->
<!-- 标签 有<>包裹，由字母开头 可以结合合法字符，能被浏览器解析的标记 -->
<!-- 为什么使用标签，标签具有作用于 （名称空间 控制范围），可以赋予功能 -->
<!DOCTYPE html>
<!-- <!> = >指令-->
<html lang="zh" style="color: orange">
<!-- 标签 字母开头+合法字符（数字|-）标签具有作用域
有头必有尾 -->
<!-- html中只包含head和body两个 -->
<!-- 一个页面文件就是一个html，有且仅有一个html根标签（页面根） -->
<head>
<!-- 页面文件头|样式表|脚本|页面描述|（后勤工作） -->
<!-- 也可以出现样式|脚本 -->
<meta charset="UTF-8">
<!-- meta 设置文件编码格式 -->
<title>Document</title>
<!-- title页面标签的标题 -->
</head>
<!-- 通过使用标签改变字体颜色 -->
<body style="color: red">
egon
<!-- 空格的转译符号 -->
<你好>
<!-- <>解析中文 转译字符 包裹特殊字符 -->
liuxx
<Zero >
<!-- 可以解析英文 -->
yanghuhu
</body>
</html>
基本标签的简单分类：
最基本：
div => 搭页面构架
span => 搭文本构架
换行显示：
h1-h6 => 标题，h1 有且仅有一个，通常作为页面的总标题
p => 段落
同行显示：
文本类标签：
i，em = 斜体
b，strong
=> 加粗
del(删除模式显示) | ins(插入) | sup(上角标) | sub(下角标)
组合：
table > tr > th+td
form > input
功能：
img 图片 |
a 超链接 | hr 分割线 | br 换行
2.基本标签
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>基本标签</title>
</head>
<body>
<!--无意义标签-->
<!--div：最常用的标签，没有之一（搭建页面架构）-->
<div></div>
<!-- span：文本最常用的标签（构建文本架构；可以直接包裹文本，也可以直接包裹文本类（内联类型的）标签）-->
<span></span>
<!--h1 一般一个页面会出现一次 作为该页面的总标题 h1~h6标题-->
<h1>{一级标题}</h1>
<!--h2{二级标签}+h6{六级标签}-->
<h2>二级标签</h2>
普通文本
<h6>六级标签</h6>
<!--段落标签 ：p-->
<p>段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落</p>
<!--原生标签 ：pre-->
<pre>
呵 <asd> & ; < asd>
呵
</pre>
<!--分割线
hr-->
<hr/>
<!-- 换行
br-->
<br/>
<br/>
<br/>
<!--文本类标签 -->
<!--斜体
-->
<i>斜体</i>
<!--斜体强调
-->
<em>斜体强调</em>
<!--加粗
-->
<b>加粗</b>
<strong>加粗强调</strong>
<!--小的文本类型标签是同行显示 级别标签是换行显示 -->
<ruby>
拼音<rt>pinyin</rt>
</ruby>
<!--ruby 和 rt 需要配合使用的 -->
<ins></ins>插入文本
<!--span 作为文本架构 删除样式的文本再由文本类标签 del嵌套 -->
<span>$1000<del>$2300</del></span>
<span>文本<sup>上角标</sup></span>
<span>文本<sub>下角标</sub></span>
<!--连接标签
-->
<!--href：标签的全局属性，超链接 规定协议
无需展示给用户看-->
<!--不规定协议直接原网页路径拼接 -->
<a
href="https://www.baidu.com"target="_blank">前往百度</a>
<!--https 和http都可以访问https更安全
-->
<!-- _blank再原网页上展开新网页 -->
<!-- img图片标签 src：图片地址，可以加载网络|本地|动态|图片。。
alt：资源加载失败后的文本提示
title：全局显示的（说明）鼠标悬浮产生的文本提示（任意标签都具有该全局属性）-->
<img
src="http://pic-cdn.35pic.com/58pic/18/24/26/64Y58PICxnf_1024.jpg"
alt="科技" title="新科技">
<!--表格
-->
<!--连接标签
-->
<table>
<tr>
<th>
标题
</th>
<th>
标题2
</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- 级别：
table > tr > th+td -->
<!-- 获取用户输入 -->
<form>
<input
type="text">
<input
type="password">
</form>
</body>
</html>
3. 标签的分类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--系统标签|自定义标签：系统没有满足标签语法的所有标签-->
<zero title="xxx"
style="color: red">zero</zero>
<!--、行块标签（display） -->
<!-- 行：同行显示 块：换行显示 -->
<p>测试1</p>
<p>测试2</p>
<!-- 行：同行显示
-->
<span>测试3</span>
<span>测试4</span>
<!-- 但结构|组合结构 -->
<div>单结构</div>
<!-- 被form包裹的input内容可以提交给后台，单独使用的则只能用于前端 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 单双标签
-->
<!-- 双： 首尾分离 -->
<!-- 主要内容可以包含文本，也可以包含子标签（具有作用域） -->
<div>单结构</div>
<span></span>
<!-- 单：首尾连体
-->
<!-- 主要功能 ：不需要子内容，标签就可以代表所有功能语句-->
<hr/>
<br/>
<!-- input的内容 value：默认值 可以修改；placeholder：占位符-->
<input type="text"
value="abcdfg" placeholder="请输入">
</body>
</html>