前端 什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。
前端开发技术栈 HTML超文本标记语言
负责完成页面的结构
文件后缀：.html .htm
"超文本"指的是页面内可以包含图片、链接、程序等非文字元素
CSS级联样式表
负责页面的风格设计，样式、美观
文件后缀：.css
JavaScript浏览器脚本语言，可以编写运行在浏览器上的程序
负责编写页面特效、调用浏览器的API（BOM）、操作改变页面内容（DOM），从后端获取数据（Ajax），渲染页面等
文件后缀：.js
前端三剑客 HTML 标记语言 标记语言为非变成语言，不具备变成语言具备的程序逻辑，遇到重复操作只能全部手写
组成 html为前端页面的主体，由标签、指令、转义字符（实体）组成 标签 标签：由<>包裹，以字母开头可以结合合法字符可以被浏览器解析的标记（纯字母或字母与数字组合） <zero>html</zero> <a1>html</a1> <a_1>html</a_1> 指令 指令：被<>包裹，以！开头的可以被浏览器解析的标记 <!DOCTYPE html> <!--html注释--> 转义字符 被&与； 包裹的特殊字母组合或#开头的十进制数  ； <； CSS CSS为前端页面的样式，由选择器、作用域与样式块组成
选择器 选择器：由标签/类/id单独或组合出现 <style> /*选择器 zero*/ zero{ color : red; } </style> 作用域 {}内部区域 <style> /*作用域{}*/ zero{ color : red; } </style> 样式块 满足css链接语法的各种样式 <style> /*样式块color：red;*/ zero{ color : red; } </style> JS实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑
BOM:js操作浏览器 DOM:js操作页面文档 ES:js语法（ECAMScript） <script type="text/javascript"> // js注释：可以省略; 但不建议 alter("我真帅"); </script> 页面 模板 <!DOCTYPE html> <html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>页面</title> </head> <body> </body> </html> 模板解读DOCTYPE：指定文档类型，规定html标签语法
html：文档根标签，标注着文档（页面）的开始与结束
head：文档头标签，可以引用脚本文件、指定演示表、书写代码逻辑块、提供元信息
body：文档主体标签，包含文档所有文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
其他核心模板标签 meta（元标签） 字符编码 <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> SEO <meta content="name,key,aa,搜索关键词"/> <meta content="网站相关内容"> 移动适配 <meta content="width=device-width,initial-scale=1,user-scalable=no"> link(链接标签) 外联样式表 <link type="text/css" href="http://www.likecs.com/style.css"> 文档tag图标 <link type="image/x-icon" href="http://www.baidu.com/favicon.ico"> style(脚本标签) <script type="text/javascript"></script> HTML常用标签 无语义标签 <div></div> <span></span> 常用语义标签 <hn>标题</hn> <p>段落</p> <pre>原文本</pre> <h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> <!-- br换行 hr分割线 --> <br>好<br>的<br> <hr>呵<hr>呵<hr> 文本标签 <!-- i：很常用的标签，一般不作为斜体文本使用，作为字体图片使用，原因写法简单 --> <i>斜体，</i> <em>以斜体方式强调</em> <b>加粗</b> <strong>以加粗的方式强调</strong> <!-- p：段落标签具有具体区域，成段出现，段落之间存在段落间距 --> <p>段落标签</p> <p>段落标签</p> <p> 123 4242 4232</p> <!-- 原样文本标签：会保留所有字符，原样显示 --> <pre>大萨达 请问 1232 4 4 </pre> <!-- 样式具有下划线 --> <ins>插入的文本</ins> <!-- 样式具有中划线 --> <del>删除的文本</del><br> <!-- 应用 --> ¥ 998 <del>1999</del><br> <!-- 上角标和下角标 --> <!-- 10的平方 --> <span>10<sup>2</sup></span><br> <!-- 水分子 --> <span>H<sub>2</sub>O</span><br> <!-- 右标：小号字体 --> <span>你很帅<small>真的是帅</small></span><br> <!-- 拼音 --> <ruby> 牛逼<rt>niǔ bī</rt> </ruby> 其他标签 <section></section> 块 <small></small> 小号字体 标签分类 单双标签 <!-- 1.单双标签 --> <!-- 标签都需要闭合 --> <!-- 单标签：闭合操作在本身的尾部，并且可以省略（自定义标签要自我标注闭合）==》 但标签一般具有特殊功能，但标签主功能 --> <!-- 双标签：闭合操作有对应的结束标签完成，也可以省略（强烈不建议）==》双标签一般具有文本（普通文本与超文本），双标签主内容 --> <br> <div>123<!-- </div> --> <div>456</div> <!-- </div> --> 行块标签 <!-- 2.行块标签 --> <!-- 行：内联，不具备自身宽高，通常同行显示 --> <!-- 块：块级，具备自身宽高，通常换行显示 --> <!-- 自定义标签均属于内联标签 --> <!-- span{我是span$}*2+div{我是div$}*2 --> <span>我是span1</span> <a href=#> hello </a> <div>我是div1</div> <p> p标签</p> 组合标签 <!-- 3.组合标签 --> <!-- 组合标签必须组合出现，协同下才能显示产生相应的内容与效果 --> <ruby> 你真棒<rt > <h2>J</h2> <h2>8</h2> </rt> </ruby>