作为一名前端小白，我在此记录下学习前端的过程。总的来说，这个 html 学习了 2 天左右，这个文章写了1 天左右，下一步计划准备学习 css，每天都过的很充实，每天都在成长的路上飞快奔跑。虽然在前端浩瀚的大海里边学到了一点点，但与昨天的自己相比，是一大步。html在前端开发里面扮演基层的岗位，正是有了html，前端才有了骨架。再经过CSS的加工，才能成为我们熟悉的页面。接下来我们一起来学习前端第一步，下面就开始吧！
了解html是什么？
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML文档的后缀名
.html
.htm
以上两种后缀名没有区别，都可以使用。
在这里我们以开发工具vscode进行开发环境搭建。学习html是前端的第一步，接下来我们来看看前端的内容大概有哪些呢？
1.HTML 基础
1.1HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
HTML 段落是通过标签 <p> 来定义的。
HTML 链接是通过标签 <a> 来定义的。代码如下
HTML 图像是通过标签 <img> 来定义的.图像的名称和尺寸是以属性的形式提供的。
1.2
HTML 水平线
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
1.3 HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:
1.4 HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox）或是“F12”，其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
1.5 HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
1.6 HTML 输出- 使用提醒
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
代码如下：
效果如下：
2.HTML 文本内容
2.1HTML 文本格式化标签
如何实现缩写或首字母缩写。
使用 pre 标签对空行和空格进行控制。p标签做不到的空行和空格，pre可以做的很easy~
文本下划线与删除线
2.2 HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。可以这样理解，css让html有了色彩，变得更好看了！
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
2.3 HTML 样式实例 - 字体, 字体颜色 ，字体大小
2.4 HTML 样式实例 - 文本对齐方式
2.5 HTML 样式标签
2.6 图像标签（ <img>）和源属性（Src），Alt属性
2.7 设置图像的高度与宽度
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片 。
2.8 HTML 图像标签
2.9 HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<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>
2.10 HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td>
</tr>
</table>
2.11 HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
2.12 HTML 列表
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
3.HTML 表单和输入
3.1 如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
<form action="">
First name:<input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"></form>
<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
效果如下：
3.2 创建密码字段
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password"></form>
<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
效果如下：
3.3 单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
效果如下：
3.4 复选框
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car </form>
效果如下：
3.5 提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
效果如下：
4.HTML iframe
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:<iframe src="URL"></iframe>
该URL指向不同的网页。
4.1 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
4.2 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
4.3 使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
5.HTML 头部元素
5.1 <head> 元素
包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
5.2 <title> 元素:
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题
5.3 <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
5.4 <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5.5 <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.6 <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
5.7 <script> 元素
5.8 HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<script>
document.write("Hello World!");
</script>
5.9 <noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
<script>
document.write("Hello World!")
</script><noscript>抱歉，你的浏览器不支持 JavaScript!
</noscript>
以上就是HTML的大概内容啦，学海无涯，一起慢慢成长。
参考网站：
1.https://www.runoob.com/html/html-tutorial.html
2. http://www.ruanyifeng.com/blog/javascript/
3.https://github.com/FeNature/fe-masters
4.https://github.com/ljianshu/Blog
