前端
⼀、什么是前端
前端即⽹站前台部分，运⾏在PC端，移动端等浏览器上展现给⽤户浏览的⽹⻚。随着互联⽹技术的发 展，HTML5，CSS3，前端框架的应⽤，跨平台响应式⽹⻚设计能够适应各种屏幕分辨率，完美的动 效设计，给⽤户带来极⾼的⽤户体验。 前端技术⼀般分为前端设计和前端开发，前端设计⼀般可以理解为⽹站的视觉设计，前端开发则是⽹ 站的前台代码实现，包括基本的HTML和CSS以及JavaScript ⼴义前端：所有⽤户可以直接看⻅并交互的界⾯ 侠义前端：浏览器上运⾏的⽤户交互界⾯
⼆、前端开发技术栈
HTML
超⽂本标记语⾔ Hyper Text Markup Language 负责完成⻚⾯的结构 ⽂件后缀：.html .htm v_hint：“超⽂本”就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素
CSS
级联样式表 Cascading Style Sheet 负责⻚⾯的⻛格设计，样式、美观 ⽂件后缀：.css
浏览器脚本语⾔，可以编写运⾏在浏览器上的程序 负责编写⻚⾯特效、调⽤浏览器的API(BOM)、操作改变⻚⾯内容(DOM)，从后端获取数据 (Ajax)，渲染⻚⾯等 ⽂件后缀：.js
HTML基础知识
一. 基础模板
二.模板解读
DOCTYPE：指定⽂档类型，规定html标签语法 html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束 head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息 body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容 title：⽂档tag标题标签，设置⽂档tag的标题内容
三、其他核心模板标签
1、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"
/>
2、link（链接标签）
外联样式表
<link rel="stylesheet" type="text/css" href="style.css" />
⽂档tag图标
<link rel="shortcut icon" type="image/x-icon"
href="http://www.baidu.com/favicon.ico" />
3、style（样式标签）
内联样式表
<style></style>
4、script（脚步标签）
<script type="text/javascript"></script>
1、无语义标签
<div>最常用的标签</div>
<span>常用的文本标签</span>
2、常用的语义标签
<h1>标题</h1>
...........
<h6>标题</h6>
标题标签一共有6个分别是<h1/>~<h6/>
<p>段落</p>
<pre>原⽂本</pre>
<br/> 换⾏
<hr/> 分割线
3、文本标签
<i>斜体字</i>
<em>斜体字，表示强调</em>
<b>粗体字</b>
<strong>粗体字，表示强调(语⽓更强)</strong>
<del>删除的⽂本</del>
<ins>插⼊的⽂本</ins>
<sub>下标字</sub>
<sup>上标字</sup>
<ruby>
拼⾳<rt>pinyin</rt>
</ruby> 中⽂注⾳，h5新增
4、其他标签
<section></section> 块
<small></small> ⼩号字体
标签分类
1、单|双标签
单标签：单标签在⾃身标签标识结束（自身的结束标志可以省略如<hr>
2、⾏|块标签
⾏标签：⼜名内联标签，内联标签⾃身不具备宽⾼，通常同⾏显示 块标签：⼜名块级标签，块标签拥有⾃身宽⾼，通常独⾃占据⼀⾏
3、单⼀|组合标签
单⼀标签：单独出现，表示具体的功能或展示具体的内容 组合标签：配合使⽤，才能产⽣相应的内容与效果