前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
当然这是百度百科的介绍，实际上前端的技术栈远比想象的要复杂的多，并且更新迭代速度极快，前几年也许会jquery即可找到工作，但近年来各个行业内卷严重，导致前端需要拥有的技术已经不仅仅是前端三剑客了，但归根结底前端的基础却从未变过。再多的UI组件库也都是基于css，再多的框架也都是基于js的，因此学好前端三剑客是学会前端的基础。如果把前端的学习之路比喻成修炼武功，那么计算机网络，算法便是内功，css，html，js就是九阴真经，学会之后再接触任何的框架也都会突飞猛进，一点就通，但若是基础没打牢，那么后面的学习便会进步迟缓。
无论您是前端小白，还是久经沙场的大佬，请您记住：真正的大师永远保持一颗学徒的心。我们在这条路上风雨无阻，砥砺前行
目录
HTML基础
HTML简介
HTML、CSS、Js三者关系
接下来先从网页的组成成分来进行讲解：
如我们所常识的网页就是有文字、图片、音频、视频、链接等组成的。在网页的背后是由我们程序员所书写的代码，经浏览器（解析和渲染）形成了我们所看见的图片文字等。那么我们所书写的代码就是HTML是可以被浏览器所识别的语言，它与java，c不同的是，HTML是超文本标记语言，是一种描述语言，而java等是由汇编语言演变而来的高级语言。通常来说java等用于后端，HTML用于前端是网页的骨架结构。
如图所示谷歌首页的代码对应于右侧的代码，通常由css+html+JavaScript构成的，这也是Web标准写法，实现各种网页效果，那么三者的区别在哪里呢？
html是结构、css是表现、js是行为。如果把三者比喻成动画片，那么html就是铅笔稿，Css就是在铅笔稿之上加入的颜色，JS就是最后添加的动作，三者结合便可以呈现一部完美的作品了。
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟）是国际最著名的标准化组织。
浏览器解析
如上我们所看到的，浏览器作为将代码解析给我们的媒介，它的组成是什么样子呢？
大多数的网页就由以下的几部分组成，这里面相对来说比较重要与我们前端比较相关的是title和网站图标的设置。还有就是URL（统一资源定位器）
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。也可认为由4部分组成：协议、主机、端口、路径。 当然这部分建议大家看计算机网络这本书，对于网址，IP地址，域名解析等有更深的理解。前端的工作与计算机网络也是密不可分的。
除此之外每个浏览器都有自己的内核，渲染引擎(浏览器内核)︰浏览器中专门对代码进行解析渲染的部分浏览器出品的公司不同，内在的渲染引擎也是不同的:
网页骨架结构
如下图，在我们使用VScode或其他编程软件时会经常输入以下命令，那么我们是否想过以下命令的含义呢？ 实际上这些命令便是一个网页的基础结构，同时是用来告诉浏览器我们使用的是html语言，浏览器便能进行解析了。
粗略来看把骨架结构当做一个人的话，那么html标签就是人的全部结构，head就是头部，body就是其余的躯体部分。
那么接下来便将html骨架进行一一拆解，这样我们便可以做到知其然知其所以然。
首先是 <!DOCTYPE html> 这句话是告诉浏览器我们 使用的文档语言是HTML5版本。必须要书写到文档的第一行。
第二行是 <html lang="en"> </html> 与最后一行构成的双标签结构，在此区间内的所有内容便是网页的内容，lang=“en” 表示的是网页所使用的语言，en代表English ，如果想改成中文便是lang=“ZH-CN”。
第三行是 <meta charset="UTF-8"> 这里的UTF-8是万国码，总结起来就是现在各国大家都用这一套码来解释代码，不然每个国家代码都不一样就像语言也一样不通，具体的历史可以自己查查百度，学过java的应该知道这就是Unicode码。c语言里的acs||码类似于其子集，数量没有万国码多。
第四行是 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 是解决浏览器兼容问题的。
第五行是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是解决兼容移动端，缩放等问题的代码
第六行 就是我们之前所说的title 在双标签内加入文字即可在浏览器的标题内显示
除此之外，我们一般还要link一些需要的文件如 网站图标 网站描述 CSS样式 字体图标等。
description和keyword 是网站描述和页面关键词通常对于网站的SEO优化有所帮助，因此有专门的业务人员提供文字，但我们需要将这些link到网页中
其次就是我们在做网页过程中需要用到的一些比如说 网站图标 ico 通常在和index在根目录下，iconfont是网站需要用到的字体图标，因此需要引入文件。除此之外就是所需要的CSS样式文件了，如通用样式，index样式等 ，如果需要用到组件库如bootstrap等还需要引入 对应的文件。
这些部分是需要写到head部分的，如果需要添加style内部样式等也可以在此区域内引入。
剩下的也就是我们索要书写得主要的部分就在 body 标签内书写，包括引入javascrip等。
HTML代码汇总
这里的代码就不将html和html5进行区分了，直接汇总学习就可以了，canvas部分作者没有学习，有兴趣的可以自行学习，根据本人的理解，html和html5的区别在于后者相对来说是比较新的版本增加了一些语义化标签如：footer，header，asider，section，nav，article，p，h1等，语义化即见名知意，另外还增加了媒体相关标签，如video等。
1、文字标题标签
| 标签 | 说明 |
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
标题标签基本大家都非常常用，也是比较基础的标签，主要用来作为新闻标题，各种小标题等用处，值得注意的是此标签是块级元素，并且自带margin属性，在html5中其aliign属性已不能使用，平时除标题外也可以将其作为logo的载体等。
| 标签 | 说明 |
| p | 段落标签 |
| span | 文本标签 |
| div | 盒子 |
p标签用于段落，span标签用于普通文本，实际上二者都会用于文本，二者的区别在于p标签是块级元素独占一行，且有默认margin。span是行内元素。div是典型的块级元素。
| 标签 | 说明 |
| br | 换行 |
| hr | 水平线 |
如图所示，span标签为行内元素，因此排列是紧挨着不会换行，使用了<br>后进行了换行，使用了<hr>画出一条水平线并换行。
| 标签 | 说明 | 标签 | 说明 |
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
另外还有不太常用的下标字 sub 和上标字 sup等
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。一般 i 通常包裹字体图标使用，
2、媒体链接
众所周知在网页中加入连接是a标签了，实际上a在各种导航、轮播图等各种需要跳转的地方均有用到、这个标签相对来说也比较简单只需要记住三个属性即可。值得注意的是a标签使用后会产生下划线的状态，因此常需要用css等样式进行取消下划线，
另一个比较重要的是 CSS中的链接选择器 即a:visited、a:hover、a：link、a:active.
| 属性 | 说明 |
| href | 链接地址（可以是本地地址或网络地址）# 为空地址，也会跳转到顶部 |
| target |
_self 覆盖原网页 _blank 跳转到新网页 |
| rel | 标签的 rel 属性用于指定当前文档与被链接文档的关系。 |
img标签是用来加载图片的标签和a标签一样可以需要提供本地地址或网络地址，主要属性如下：
| 属性 | 说明 |
| src | 链接地址 |
| alt | 图片中的 alt 属性是在图片不能正常显示时出现的文本提示。 |
| title | 图片中的 title 属性是在鼠标在移动到元素上的文本提示。 |
| width | 图片的宽度 |
| height | 图片的高度 |
audio标签是在页面中插入音频，目前只支持mp3，wav，ogg三种格式，与video标签相同必须要加入 control属性才能播放。
| 属性 | 说明 |
| src | 音频的路径 |
| control | 显示播放的控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
video标签是在页面中插入视频，功能基本与音频相似，但自动播放在谷歌浏览器中需要配合 muted实现静音播放。
3.Form表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 通常以<form>双标签包裹，form的一个重要的属性就是 action，表示的是将要提交的表单向何处发送表单数据，
input类
在表单中有很多可以添加的属性，例如输入字段是禁用，只读，最大输入长度，最短输入长度等，但平时只需要记住一些基础的，其他的用到再去查找即可。这里关于input有个小技巧，当鼠标点击焦点时，边框会变成黑色非常丑，可以在css中使用outline:none将点击后的边框的黑色取消
另外可以在标签外包裹 label标签 作用是在 label 元素内点击文本，就会触发此控件。
| 类型 style | 说明 | 常规属性 |
| text | 文本框 | placehoder 框中预设文字 |
| password | 密码框 | placehoder 框中预设文字 |
| radio | 单选框 | name值需要设置一样 类似于编组 |
| checkbox | 复选框 | name值需要设置一样 |
| search | 搜索框 | value 框中预设文字 |
| date | 日历 | 无 |
| file | 上传文件 | mutiple 多文件上传 |
| submit | 提交按钮 | 无 |
| reset | 重置按钮 | 无 |
| button | 普通按钮 | 无 |
最低0.47元/天 解锁文章
7898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
