本着提升技术水平，打牢基础知识的中心思想。前端内部开始小课堂啦（本人凭借身高优势，人群中多看了我一眼，稳稳拿到第一课）。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。
好了，不闲扯，接下来进入我们的正题。
我们要讲什么
HTML+CSS 简介
HTML（超文本标记语言 — HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。它使用标记来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 中的标签不区分大小写。
举例来说， 我的内容是一些段落（<p>）还是一个有序列表（<ul>）？我的网页上有插入图片（<img>）吗？有数据表格（<table>）吗？
CSS（层叠样式表 — Cascading Style Sheets），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了 HTML 元素在屏幕上应该如何渲染。
举例来说，我的文字是黑色还是红色的？在屏幕的何处展示内容？用什么背景图像和颜色来装饰？
网站运行原理（发展历程）
- HTML 创建结构，我们想在互联网发布我们的信息，我们通过文字、图片、音视频。
- CSS 美化界面，页面太丑了，都是文字，我们想要排版一下。
- JS 逻辑控制，我们想要校验表单，做个轮播图什么的。
- 静态服务部署（文件服务器），通过上面的内容，我们可以有一个漂亮的页面了，接下来我们需要发布到网上，让其他人可以访问。
- IP 可以理解为唯一标识（身份证），通过 IP 可以很快找到我们的服务器。
- 通过上面的内容，其他人可以通过网络来访问我们的页面，但是 IP 是一串数字，太难记了。我们需要一个好记的域名。
- 动态服务，网站壮大之后，我们需要区分用户（登录，评论），这个时候我们要引入服务端（node/java/php）
到这里就差不多了。当然还有新的问题，新的问题也会有新的解决方案。
HTML 常用标签
<!DOCTYPE> 定义文档类型。
<a> | 标签定义超链接。页面互联的基础设施，用于从一张页面链接到另一张页面。 | √ |
<div> | 无敌块结构 | √ |
<span> | 无敌行内结构 | √ |
<form> | 表单 | √ |
<input> | 表单控件 | √ |
<img> | 图像 | √ |
<meta> | 定义关于 HTML 文档的元信息。 | √ |
<p> | 定义段落 | √ |
<table> | 表格 | √ |
<center> | 居中 | × |
<font> | 字体样式 | × |
<header> | 表现HTML的标题数据 | HTML5-语义 |
<footer> | 页面的页脚部分 | HTML5-语义 |
<nav> | 页面中的导航元素 | HTML5-语义 |
<article> | 正文内容 | HTML5-语义 |
<section> | 表示页面中的一个独立内容区块，里面有自己的结构，比如章节、页眉、页脚、内容部分 | HTML5-语义 |
<aside> | 表现页面侧边栏内容。 | HTML5-语义 |
<canvas> | 画布能力 | HTML5-功能 |
HTML5 标签
这个东西也出来好久了。相信大家也都开始使用了。核心就是增加了更多的语义化标签，废弃了一些纯粹显示效果的标记
网页 SEO
SEO 优化是搜索引擎优化（Search Engine Optimization）。这个问题，面试经常被问到有没有。其实有个简单的办法，壕，毕竟人家搜索引擎公司也是要挣钱嘛。
- 在首页加入 meta 标签提供一些元数据（
title、description、keywords） - 注意合理使用语义化标签（
h1） - 合理的使用属性（
img的alt） - 禁止外链（
no follow） - 合理的 robots.txt、sitemap、百度链接提交