预备知识与后续知识及项目案例
[HTML入门与进阶以及HTML5][CSS]
[JS-上]
[JS-下]
[jQuery]
[Node.js + Gulp 知识点汇总]
[MongoDB + Express 入门及案例代码]
[Vue项目开发-仿蘑菇街电商APP]
一、简介
1、前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
前端开发最核心的3个技术
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
2、前端开发其他技术
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。
（1）Ajax
Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。
Ajax是前后端交互的技术，主要实现在前端。（不懂？！没关系，我们在Ajax教程中会讲解到）
（2）SEO
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。
二、基础内容
1.基础总结
1、从web1.0到web2.0，网页制作已经变为前端开发了。现在对于前端开发，你要学的不是什么“网页三剑客”，而是“HTML+CSS+JavaScript”；
2、前端技术核心元素的是HTML、CSS和JavaScript，但是我们还要学习一些Ajax、SEO知识；
3、前端技术只能开发静态网页，而进一步学习了后端技术，你能开发一个用户交互性更好、功能更加强大的网站；
4、后端技术有ASP.NET（或PHP）、SQL Server等；
5、学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
6、学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；
7、HTML标签即“HTML元素”；
8、HTML基本结构：
2.HTML的基本标签
(1)HTML标签
整个网页是从这里开始的，然后到结束。
(2)head标签
定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
表1 <head>内部标签
| 内部标签 |
说明 |
|---|---|
| 定义网页的标题 |
|
| 定义网页的基本信息（供搜索引擎） |
|
| 定义CSS样式 |
|
| 链接外部CSS文件或脚本文件 |
|
| 定义脚本语言 |
|
| 定义页面所有链接的基础定位（用得很少） |
的内部标签也非常重要，在前期大家只需要感性认知就可以。
(3)body标签
定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续课程讲解的标签都是在标签内部的各种标签。
3、段落与文字
(一)、段落标签
(1)、段落与文字标签
表1 段落与文字标签
| 标签 |
语义 |
说明 |
|---|---|---|
| # ~###### |
header |
标题 |
| paragraph |
段落 |
|
| break |
换行 |
|
|
|
horizontal rule |
水平线 |
| division |
分割（块元素） |
|
| span |
区域（行内元素） |
(2)、文本格式化标签
表2 文本格式化标签
| 标签 |
语义 |
说明 |
|---|---|---|
| strong（加强） |
加粗 |
|
| emphasized（强调） |
斜体 |
|
| cite（引用） |
斜体 |
|
| ^ ^ |
superscripted（上标） |
上标 |
| subscripted（下标） |
下标 |
(二)、网页特殊符号
(三)、自闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例：
(2)、自闭合标签
举例：
、
(四)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
- （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- （2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
- （1）可以与其他行内元素位于同一行；
- （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
(五)、练习题
(1)、下面是一个网页在浏览器上的效果，请制作一张一模一样的网页。
HTML段落与文字训练题
1
(6)标签的语意
标签语义对照表
| 标签名 |
英文全称 |
中文解释 |
|---|---|---|
| div |
division |
分割（块元素） |
| span |
span |
区域（行内元素） |
| p |
paragraph |
段落 |
| ol |
ordered list |
有序列表 |
| ul |
unordered list |
无序列表 |
| li |
list item |
列表项 |
| dl |
definition list |
定义列表 |
| dt |
definition term |
定义术语 |
| dd |
definition description |
定义描述 |
| h1~h6 |
header1 ~header6 |
标题1~标题6 |
| hr |
horizontal rule |
水平线 |
| a |
anchor |
锚点，超链接 |
| strong |
strong |
强调（粗体） |
| em |
emphasized |
强调（斜体） |
| sup |
superscripted |
上标 |
| sub |
subscripted |
下标 |
| br |
break |
换行 |
| fieldset |
fieldset |
域集 |
| legend |
legend |
图例 |
| caption |
caption |
（表格、图像等）标题 |
| thead |
table head |
表头 |
| tbody |
table body |
表身 |
| tfoot |
table foot |
表脚 |
| th |
table header |
表头单元格 |
| td |
td |
表身单元格 |
4、列表
3种列表的语义记忆：
表1 3种列表记忆
| 标签 |
语义 |
说明 |
|---|---|---|
| ol |
ordered list |
有序列表 |
| ul |
unordered list |
无序列表 |
| dl |
definition list |
定义列表 |
(一)、HTML3种列表
列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
1
表1 有序列表type属性
| type属性值 |
列表项的序号类型 |
|---|---|
| 1 |
数字1、2、3…… |
| a |
小写英文字母a、b、c…… |
| A |
大写英文字母A、B、C…… |
| i |
小写罗马数字i、ii、iii…… |
| I |
大写罗马数字I、II、III…… |
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法：
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
1
表1 无序列表type属性
| type属性值 |
列表项的序号类型 |
|---|---|
| disc |
默认值，实心圆“●” |
| circle |
空心圆“○” |
| square |
实心正方形“■” |
学习了CSS之后，无序列表列表项符号由list-style-type定义，到时候应该摒弃type属性。
(3)、定义列表
语法：
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
……
</dl>
1
说明：
即“definition list（定义列表）”，即“definition term（定义名词）”，而即“definition description（定义描述）”。
在该语法中，
标记和标记分别定义了定义列表的开始和结束，后面添加要解释的名词，而在后面则添加该名词的具体解释。
(二)、HTML学习中的误区
学习HTML的目的就是在你需要的地方用到符合语义的标签，把标签用“对”这才是HTML学习的目的。例如一段文字，应该使用p标签，而不是使用div标签或者其他标签。
网页语义结构良好，对于搜索引擎来说也是极为重要的一点。
(三)、练习题
1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。
要求：
- （1）大标题使用### 标签；
- （2）问卷调查题目使用#### 标签
- （3）前2个问题选项使用有序列表；
- （4）最后一个问题选项使用无序列表
2
5、表格
(一)、表格语义记忆
通过语义化记忆表格标签：
表1 表格基本标签
| 标签 |
语义 |
说明 |
|---|---|---|
| table |
table（表格） |
表格 |
| tr |
table row（表格行） |
行 |
| td |
table data cell（表格单元格） |
单元格 |
表2 表格结构标签
| 标签 |
语义 |
说明 |
|---|---|---|
| thead |
table head |
表头 |
| tbody |
table body |
表身 |
| tfoot |
table foot |
表脚 |
| th |
table header |
表头单元格 |
(二)、表格基本结构
、和| 是HTML表格最基本的3个标签，其他标题标签 |
| ----------------------------------------- |
、表头单元格可以没有，但是这3者必须要有。