@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>