本文及之后的文章都是不定期记录自己学习前端的过程，新人上线如有不当之处，欢迎指点！！
一，所需软件：
Visual Studio Code（免费的代码编辑器，也可以使用别的只要能编辑写代码就可以）、
Typora(markdown编辑器，可以储存代码写自己的笔记)、
Chrome浏览器（写出的代码可以很好的兼容，是首推）
Snipaste（截图工具）
目前下载了这四个软件，别的刚开始也不需要
二，前端是干什么的，需要学习什么？
前端简单来说就是写页面的。平时浏览器中浏览的网页，目光所及的东西都是前端编写的代码搞出来的，里面的内容数据之类的就是后端给的。所以网页的本质就是html代码编写出来的，编写的代码通过浏览器的转化后，就能看到页面呈现出来的效果。
前端需要学习掌握的内容：HTML、CSS、JS
- HTML（Hyper Text Markup Language）:超文本标记语言，负责页面结构编写
- CSS:层叠样式表，用来给HTML标签添加样式语言美化网页
- JS（JavaScript）：主要向HTML页面添加交互行为
简单总结：HTML负责结构、CSS 负责样式、JS负责动态行为
三，开始HTML的学习
1，首先进入编辑器vscode中，进行汉化
最左边点击扩展按钮（之后下载插件的地方），搜索Chinese插件进行下载就可以转化为中文了
2，html页面的初始代码
在电脑桌面新建一个文件夹，之后点击鼠标右键，通过vscode打开，点击新建文件用.html为后缀
新建html文件后，在内容区输入英文状态下的感叹号，回车选中第一个
会出现html的初始代码，以下是对初始代码的解析。html初始代码是每个页面都有的
（<head></head>标签对表示网页的配置）
3，标签：双标签、单标签
在初始代码中可以看到html的一些标签，<head></head>，<meta>、<title></title>等
html是超文本标记语言，这些标签就是超文本标记，每个标签都有独有的功能
标签都是用"<>"括起来的
标签分为双标签和单标签
双标签就是成对出现的，例如初始代码中的<head></head>就是一对双标签，有开始有结束的标签，结束的标签前面会加一条斜线来区分
单标签就是只有一个标签开始，没有结束标签，例如<meta>
4，基本标签
（1）文章标题标签：h1、h2、h3、h4、h5、h6
（表示的一级标题至六级标题，标题一共只有6级）
标题的特点，文字加粗，字体变大，都是独占一行的
（2）段落标签：p
(p标签用来分段显示，独占一行，不能嵌套h系列的标签和其他的p标签在内)
（3） br：换行标签（单标签）
（在html中，多个空格和换行，都只会被折叠成一个空格，想要换行就需要标签来实现）
（4）hr标签：分割线（单标签）
（5）文本格式标签：
加粗：
倾斜:
删除线：
下划线：
下载插件，可以在浏览器中看到写的代码转化的内容，点击右键选择后就会跳转进浏览器中Chrome浏览器最好设置为默认浏览器
（6）转义字符
前面的&与字母还有后方的；符号都是一体的，缺一不可 （以下转义字符展示不全）
空格：
版权符号：
大于小于号：
举例的是暂时碰见最多的，其余未展示出来的，可以自行百度，后期慢慢积累
练习一下：每个标签都多练练，熟能生巧
（7）列表标签
列表分为无序列表、有序列表、定义列表
无序列表
有序列表
定义列表
（8）图片标签：<img>
文件的路径来源分为相对路径和绝对路径，相对路径就是保存在本地的图片复制在当前文档中,通过"./"或者"../"来寻找；绝对路径就是直接输入网址
img标签的属性简介：
图片出现错误，后会显示alt中的文本
（9）超链接：<a>
链接的输入，可以是网址也可以是本地的文件
如若删除此属性，便会默认在当前页面打开，覆盖原来的页面打开新的页面
（10）锚点
锚点，一个页面内代码较长翻动查找很麻烦，但是在一些标签位置设置一个id属性，就可以快速的到页面的指定位置，例如可以适当给h系列标签添加 id 属性
（id属性是唯一的，一个页面只能有一个相同的id，id后面的名称可以随意设置，只要不重复就可）
设置好锚点之后，需要添加一个a标签来进行定位，需要在写网址的地方添加 #和 id的名字，页面就会自动滚动至锚点所在的位置 ，效果就像是设置了目录一样，点击跳转至指定位置
这样设置之后就可以进行跳转了
如果页面之间也想进行跳转，也可以通过a标签设置，把需要跳转的页面都放在一个文件夹中，再把ab标签中的链接改为页面链接就可
练习，页面跳转
新建一个文件夹，里面新建需要跳转的页面，把a标签一一对应
其他两个页面同上
（11） 表格标签：table、tr、td、caption、th
table表格，table表示的是表格的整体
table row是表格行，也就是<tr>标签；table data是表格数据，也就是<td>
下图中有五行，所以 tr 就是五个，一行有四个小格，所以一个tr下有4个td，代码如下：
caption标签是表格的标题，如果有标题的话放在table和tr中间即可
th标签是行内标题，th可以替代td
thead标签可以定义表头也就是包裹表头的代码，tbody包裹表格的内容，tfoot标签定义表尾，也就是汇总行，如果没有表头或者汇总行，可以不用此标签
table的属性：border边框、单元格合并：rowspan(合并行)、colspan（合并列）
为了让表格有边框，通常table都是有border属性存在，一般border=1即可
表格综合练习：
（12）表单:<form>
表单是用来收集信息，例如注册、登录、发评论等
表单都以form标签开始
<input>标签是一个单标签，里面的type属性值更改就会呈现不同的内容
type属性：
1，单行文本框：text
属性：placeholder，表示提示文本，以浅色文字显示在文本框中
disabled属性表示这个标签被锁住，用户不能点击
2，密码框：password
3，单选按钮：radio
单选按钮要有value属性值，向服务器提交的就是value值
单选按钮加上了checked属性，表示默认被选中
<label>标签:用来将文字和单选按钮进行绑定，可以让用户点击文字的时候也可以选中
4，复选框：checkbox
name,value,checked属性同单选按钮
5，普通按钮：button；提交按钮：submit；重置按钮：reset
图片提交按钮有两种：
type属性设置image或者button间插入图片
6，更多type属性值
下拉菜单标签：select
<select>标签表示下拉菜单，<option>是它内部的选项
添加selected属性，可以设置下拉菜单的默认选项
datalist控件，可以为输入框提供一些备选项，当用户输入的内容与备选文字相同时，将会智能感应显示出来，同下拉菜单有异曲同工之妙
多行文本框：textarea
属性 rows 和 cols ，用于定义多行文本框的行数和列数
练习：此类收集信息注册的页面，可以结合表格标签来完成
这期间安装的一些插件截图：
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
