@TOC
CSS 预处理器
- SASS：基于 Ruby
- LESS：基于 NodeJS，简单上手
HTML、CSS：看到设计稿就能做网页
JavaScript学些什么：变量、数据类型、控制流程、内置对象、DOM、BOM
node与npm：node会安装就行，npm会常用命令
vue和vue全家桶：熟练常用功能，会做项目即可
数据交互，最好懂一些后台。ajax，node搭建后台（koa，express，egg）
第一层，做出实训项目：博客系统，内容管理系统
第二层：了解原理
第三层：优化项目
第四层：扩展后端、扩展算法、扩展。。。
不要盲目的去学那些花里户哨的东西，先做出一个项目再说。
网页的最基本结构是HTML，CSS是用来美化网页，JS能让我们的我那个页动起来，产生很多交互行为，JS原生代码学起来比较复杂，因此我们要学习Jquery，一个封装JS的库，为实现前后端的分离，我们要学习当下最主流的框架VUE。
一、初识HTML
1、什么是HTML
Hyper Text Markup Language超文本标记语言
- 超文本包括：文字、图片、音频、视频、动画等
- 现在主要的是html5+css3
2、W3C
- World Wide Web Consortium 万维网联盟
- 标准包括
- 结构化标准语言（HTML，XML）
- 表现标准语言（CSS）
- 行为标准（DOM，ECMAScript）
二、网页基本标签
<!-- -->代表注释
<!DOCTYPE html>代表使用规范是html
<meta>描述性标签，它用来描述我们网站的一些信息，一般用来做SEO
<meta name=“keywords” content=“描述性的关键字，作为搜索关键字”>
<meta name=“description” content=“描述该网站是做什么的”>
<head>标签代表网页头部
<body>标签代表网页主体
1、标题标签
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
2、段落标签
<p></p>
3、换行标签
<br/>
4、水平线标签
<hr/>
5、字体样式标签
粗体：<strong>I love you</strong>
斜体：<em>I love you</em>
6、特殊符号
空格：
大于号：>
小于号：<
版权符号：©版权所有
特殊符号的快速记忆：&开头，;结尾
三、图像，超链接，网页布局
1、图像标签
../：表示上一级目录<img src="path" alt="text" title="text" width="x" height="y"/>src：表示图像地址alt：表示图像加载失败之后的替代文字【必填】title：表示鼠标悬停提示的文字width：表示图像宽度height：表示图像高度
2、超链接标签及其应用
<a href="path" target="目标窗口位置>点击跳转到链接的文本或图像</a>href：表示链接路径【必填】target：表示链接在哪个窗口打开,_blank表示在新标签中打开，_self表示在自己的网页中打开目标窗口位置：常用值——_self，_blank
2.1、文字链接
<a href="https://www.baidu.com>点击跳转到百度</a>
2.2、图像链接
<a href="https://www.baidu.com>
<img src="../resources/images/1.jpg" alt="跳转图片" title="点击跳转" width="300" height="300">
</a>
2.3、页面间链接
3、锚链接
- 需要一个锚标记
- 跳转到标记处
```html 顶部
此处省略若干行代码
### 4、从一个页面链接到另一个页面
`3.html`
```html
<a href="4.html#down>点击跳转</a>
4.html
<a name=”down“>跳转到该处</a>
5、功能性链接
5.1、邮件链接mailto
<a href=”mailto:2858802417@qq.com“>点击联系我</a>
5.2、QQ链接
百度搜索QQ推广官网
生成自己的推广
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="点击这里与我取得联系" title="点击这里与我取得联系"/></a>
6、行内元素和块元素
- 块元素
无论多少，该元素独占一行 - 行内元素
内容撑开宽度，左右都是行内元素的可以在一行四、列表，表格，媒体元素
1、列表
列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息1.1、无序列表
应用范围：导航、侧边栏……<ul> <li>Java</li> <li>Python</li> <li>C#语言</li> <li>运维</li> <li>前端</li> </ul>
1. 有序列表(order list)
应用范围：试卷、问答……
<ol>
<li>Java</li>
<li>Python</li>
<li>C#语言</li>
<li>运维</li>
<li>前端</li>
</ol>
2. 自定义列表
应用范围：公司网站底部……
<dl>
<dt>姓名数据库</dt>
<dd>Mark</dd>
<dd>Jery</dd>
<dd>Tom</dd>
<dd>Just</dd>
<dt>年龄数据库</dt>
<dd>18</dd>
<dd>25</dd>
<dd>21</dd>
<dd>19</dd>
</dl>
2、表格
优势：简单通用，结构稳定
基本结构：单元格，行，列，跨行，跨列tr：表示行td：表示列colspan=”行数“：跨列rowspan=”列数“：跨行
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
3、媒体元素
src：资源路径controls：控制条autoplay：自动播放
3.1、视频元素 video
<video src="../resource/video/video.mp4" controls autoplay></video>
3.2、音频元素 audio
<audio src="../resource/video/music.mp3" controls autoplay></audio>
五、页面结构
1、页面结构分析
2、内联框架iframe
<iframe src="path" name="mainFrame"></iframe>path：表示引用页面地址mainFrame：表示框架标识名
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://blog.zhuhukang.com" target="hello">点击跳转至我的博客</a>
