一：什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展示给用户浏览的网页。前端技术一般分为前端设计和前端开发，
前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HYML和CSS以及JavaScript
广义前端：所有用户可以直接看见并交互的界面
狭义前端：浏览器上运行的用户交互界面
二：前端开发技术概览
1：HTML
超文本标记语言 （HyperText Markup Language），主要负责完成页面的结构，文件后缀名为：.html .htm
2：CSS
级联样式表 （Cascading Style Sheets），主要负责页面的风格设计，样式、美观，文件后缀名为：.css
3：JavaScript
浏览器脚本语言，可以编写运行在浏览器上的程序。主要负责编写页面特效、调用浏览器的API（BOM），
操作改变页面内容（DOM），从后端获取数据（Ajax），渲页页面等。文件后缀名为：.js
三：前端三剑客详解
1：HTML
①：标记语言：标记语言为非编程语言，不具备编程语言具备的程序逻辑。如果遇到复杂重复的操作
只能全部手写（Ctrl + C ====》Ctrl + V）
②：HTML是前端页面的主体，由标签、指令、与转义字符（实体）等组成。
标签：由<>包裹，以字母开头可以结合合法字符，可以被浏览器解析的标记。标签又分为系统标签和自定义标签。
例：<zero>自定义标签</zero>
<div>系统标签</div>
指令：被<>包裹，以！开头的可以被浏览器解析的标记。转义字符链接
例：<!doctype> <!-- -->
<!注释>
实体：被&和；包裹的特殊字母组合或者#开头的十进制数。
例：<
 
2：CSS
①：标记语言：标记语言为非编程语言，不具备编程语言具备的程序逻辑。
②：CSS是前端页面的样式，由选择器、作用域与样式块组成。
选择器：由标签、类、id单独或组合出现
作用域：一组大括号{}包含的区域
样式块：满足CSS链接语法的众多样式
例：
3：JavaScript
①：编程语言：实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑。
②：js是前端页面的脚本，由BOM、DOM与ES组成。
BOM：js操作浏览器
DOM：js操作页面文档
ES：js语法 （ECMAScript）
例：
四：模板
1：模板解读
doctype：指定文档类型，规定html标签语法
html：文档根标签，标注着文档（页面）的开始与结束
head：文档头标签，可以引用脚本、指定样式表、书写代码逻辑块、提供元信息
body：文档主体标签，包含文档所有文本与超文本内容
title：文档tag标签，设置文档tag的标题内容
例：
2：其它模板常用标签
①：meta （元标签）
字符编码
<meta charset="utf-8">
SEO 网站搜索引擎优化
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
②：link （链接标签）
外联样式表
<link rel="stylesheet" type="text/css" href="style.css" />
文档tag图标
<link rel="shortcut icon" type="image/x-icon" href="图标地址" />
③：style （样式标签）
内联样式表
<style> </style>
④：script （脚本标签）
<script type="text/javascript"></script>
例：
3：html的常用标签
①：无语义标签
<div> </div> 最常用的标签
<span> </span> 最常用的纯文本标签
②：常用语义标签
<hn> </hn> 标题，h1标签较经常出现，作为页面最大title形式出现，且一个页面一般只出现一次。
<p> </p> 段落
<pre> </pre> 原文本
<br /> 换行
<hr /> 分割线
③：文本标签
<i> </i> 斜体字
<em> </em> 以斜体方式强调
<b> </b> 粗体字
<strong> </strong> 以加粗方式强调
<ins> </ins> 插入的文本，样式具有下划线
<del> </del> 删除的文本，样式具有中划线
<sub> </sub> 下标字
<sup> </sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文拼音，h5版本新增
④：其他标签
<section> </section> 块
<small> </small> 小号字体（右标）
例：
效果图：
4：标签的分类（标签都需要闭合）
①：单|双标签
单标签：闭合操作在本身的尾部，并且可以省略，但是自定义标签需要自我标注闭合，
单标签一般具有特殊功能，单标签主功能。
如：<br> ， <hr>
双标签：闭合操作有对应的结束标签完成，也可以省略，但是强烈不建议省略，双标签
一般具有文本（普通文本与超文本），双标签主内容。
如：<div> </div> ， <span> </span>
②：行|块标签
行标签：又名内联标签，不具备自身宽高，通常同行显示
块标签：又名块级标签，具备自身宽高，通常换行显示
自定义标签均属于内联标签
例： 效果图：
③：单一|组合标签
单一标签：单独出现，表示具体的功能或展示具体的效果
组合标签：组合标签必须组合出现，协同下才能显示产生相应的内容与效果
组合标签 如：
<ruby>
拼音<rt>pinyin</rt>
</ruby>
原文地址：https://www.cnblogs.com/duanxiangyang/p/9674395.html