一、简介
1、前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
前端开发最核心的3个技术
（1）HTML是什么？
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
（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是前后端交互的技术，主要实现在前端。
（2）SEO
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。
二、基础内容
1.HTML基本结构：
举例：
其中：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
保存后运行，即可在浏览器中打开如下界面：
2.HTML的常用标签：
2.1基本标签
2.2有序列表
ol:ordered list
li:list item
默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改
- type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I)
- start属性：设置起始值，值必须是数字
2.3无序列表
ul:unodered list
li:list item
默认情况下使用实心圆表作为符号标记，可以通过属性进行修改
- type属性：设置列表的符号标记、取值：disc实心圆（默认）、circle空心圆、square正方形、none不显示项目符号
2.4定义列表
dl:definition list
dt:definition title
dd:definition description
2.5水平线标签
hr:horizontal
常用属性：
- color:颜色
两种书写方法：
①颜色名称：如red、green、blue、white、black、pink、orange等
②16进制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每种颜色的取值范值0-255，转换为16进制00-FF
eg: #FF0000 红色 #00FF00绿色 #0000FF蓝色 #FFFFFF白色、#CCCCCC #FF7300
- size:粗细，数值
- width宽度
两种写法：
像素：绝对值（固定值）
百分比：相对值，相对于水平线标签所在父容器宽度的百分比
- align对齐
- 取值：center居中 left right
2.6图像标签
img:image
常见的图片格式：.jpg .png .gif .bmp
常见的属性：
- src:source指定图片的路径（来源），必选叁数,如果图片与html源代码在同一个文件夹中，可以直接在src中写图片名称即可,习惯上，我们会将多个图片与html代码文档分别放在同一个文件夹project中的不同目录下，此时需要在src中指定图片的路径为相对路径
.\ 表示当前目录
..\ 表示上级目录
- alt:当图片无法显示时显示的提示信息
- title:当鼠标放到图片上时显示的提示信息
- width和height:设置图片的宽度和高度
3.其他标签
为了更好的语义化
示例：
4.头部标签
- meta定义网页的摘要信息，如字符编码、关键字、描述、作者等
- title定义网页的标题
- style定义内部CSS样式
- link引用外部CSS样式
- script:定义或引用脚本
- base定义基础路径
默认以当前页面文件所在的位置为相对路径的参照
示例：
5.标签嵌套
一个标签中嵌套另外，如以下标签的嵌套是正确的：
一个标签标签不能乱嵌套，如以下标签的嵌套是错误的：
示例：
浏览器渲染后显示的页面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
示例：
如何打开：
- 在页面中右键单击–>检查/审查元素/查看元素
- 按F12
常用工具：
Elements:从浏览器的角度来看页面，浏览器渲染页面时的结构
console:控制台，显示各种警告和错误信息
network:查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间
