前言
学习需要持之以恒，学习前端概念和敲代码需要实践为主
写代码写多了就会了
HTML
基本标签
注释
<!-- -->
注释标签不会出现在浏览器中，是为了让我们自己和同事间看代码更清楚
（我比较讨厌的两种人：1. 叫我写注释的人 2. 给我看的代码没有注释的人）
使用：
<!-- 注释文本，该文本不出现在浏览器中 -->
声明
<!DOCTYPE>
!DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
文档
<html></html>
告知浏览器，在此标签内部的为一个html文档
文档头部
<head></head>
标签用于定义文档头部。 中的元素可以引用脚本、指示浏览器在哪里找到样式表等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
文档标题
<title>文档标题</title>
文档主体
<body></body>
标签包含各种元素，如文本、表格、图片、表单等
使用：
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<!-- 这就是前端,恭喜你们入门了！ -->
</body>
</html>
文本标签
<br /> 断行
<p></p> 段落
<b></b> 加粗
<strong</strong> 加粗
<font></font> 设置字体、颜色、大小等
<s></s> 删除线样式
<em></em>斜体
<i></i>斜体
<a></a>超链接
<h1></h1> 可定义标题
<h6><h6>可定义标题
使用：
| 标签 | 使用方法 | 作用 | 效果 |
|---|---|---|---|
| br | 你好！ 我很好！ | 让文本强制换行 | 你好！ 我很好！ |
| p | 段落一 段落二 | 段落标签 | 段落一段落二 |
| b | 加粗 | 加粗标签 | 加粗 |
| strong | 加粗 | ||
| font | <fontcolor="#FF0000"size="12">设置字体 | 设置字体、颜色、大小等 | 设置字体 |
| s | 删除线样式 | 删除线 | |
| em | 斜体 | 斜体标签 | 斜体 |
| i | 斜体 | ||
| a | 超链接 | 超链接、锚点标签 | 超链接 |
| h1 | 最大标题 | 可定义标题 | # 最大标题 |
| h6 | 最小标题 | 最小标题 |
常用标签
<div></div> 块级标签
可以把文档分割为独立的、不同的部分，且每个块级元素都是独立的一行
也可以使用 class 或 id 应用额外的样式
注意：id是唯一的，class类名是可以重复使用的
使用：
<!DOCTYPE html>
<html>
<head>
<title>web</title>
</head>
<body>
<div id='root'>这是第一个块级元素</div>
<div class='class'>这是第二个块级元素</div>
<div class='class'>这是第三个块级元素</div>
<div class='class'>
<p>这是第四个带有p标签的块级元素</p>
</div>
</body>
</html>
表单
<input> 输入框
<form></form> 表单
<button></button> 按钮
<img /> 插入图片标签
<span></span> 行内元素
可以配合div进行格式多样化
基本使用：
<div>
<span> 我是第一行！</span>
<span>俺也一样！</span>
</div>
向网页中引入一幅图像。
<img src="图片地址" alt="未加载时显示的文字" />
定义一个按钮
<button type="button">Click</button>
<form action="需要传输的地址">
文本1:<br />
<input type="text" name="text1" value="内容1" />
<br />
文本2:<br />
<input type="text" name="text2" value="内容2" />
<br />
<input type="submit" value="Submit" />
</form>
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等
<input type="text" name="fname" />
列表
<ol><li></li></ol> 有序列表
<ul><li></li></ul> 有序列表
有序号的列表
<ol>
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
无序号的列表
<ul>
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
基本使用：
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
ES6新增标签
<header></header> 头部区域
<section></section> 主题区域
<aside></aside> 侧边区域
<footer></footer> 底部区域
<nav> </nav> 导航
<progress></progress> 进度条
<small></small> 小号字体
基本使用：
<header>
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</nav>
</header>
<div>
<section>主题区域</section>
<aside>侧边栏</aside>
</div>
<footer>底部区</footer>
<figure></figure> 媒介内容
<figcaption></figcaption> 标题
<figure>
<figcaption>标题</figcaption>
<p>内容</p>
<small>小号内容</small>
</figure>
<progress id="jindu" max="100" value="0"></progress>
更多 ... ...
更多的ES6及之后新增的标签可以去查阅资料，如: w3school 、 菜鸟教程 等
PS
希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->有兴趣一起摸鱼的点击这里
