1、前端开发最核心技术
（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是前后端交互的技术，主要实现在前端。
（2）SEO
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
3、HTML基本结构
4、HTML的基本标签
(1)HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续课程讲解的标签都是在<body>标签内部的各种标签。
5、段落与文字
(一)、段落标签
(1)、段落与文字标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br > | break | 换行 |
| <hr > | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
块标签和行标签:
块标签
1.独占一行
2.可以设置宽高
3.如果不设置宽高 宽度=父盒子宽度
行标签:
1.在其父盒子宽度足够的情况下 在一行排列
2.不可以设置宽高
3.宽高由内容撑开
4.行标签不能包括块标签
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup > | superscripted（上标） | 上标 |
| <sub > | subscripted（下标） | 下标 |
(二)、自闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
例：<body></body>
(2)、自闭合标签
例：<br />、<hr/ >
<meta charset="utf-8">
(三)选择器
（1）ID选择器 #ID
（2）类选择器 .class
（3）标签选择器 标签名 例 div
（4）通配符选择器 *
（5）可以代表所有元素 给所有元素设置公共样式 通常用来代码初始化
（6）群组选择器 选择器，选择器，选择器{}
（7）组合选择器 选择器选择器
（8）子代选择器 父类选择器 > 子代选择器
（9）选择第一个选择器 的直属子标签
（10）父代选择器 父类选择器 子孙选择器{}
选择器的优先级:ID>class>标签
在前端代码规范中 ID 不能设置样式
样式编译规则
优先级 ！import>行间样式>ID>class>标签
由上到下编译 在后面写的样式 会 覆盖前面的样式
谁最精准 谁生效
(四)样式的编写方式
1. 行间样式
在标签内部使用 使用style 属性
2. 内部样式
可以写在标签里面的任何地方
在前端代码规范中一般写在标签里面 的下面
3. 外联样式
新建一个 .css文件
然后通过<link>标签引入 .css
<link rel="stylesheet" href="">
在href 属性里面 设置 .css文件的路径
在前端代码规范中一般写在标签里面 的下面
通常情况 .css文件中写的是哪个页面的样式 命名时名字与该html文件的命名相同
例如 index.css index.html
style:
（1）在标签内部写（行间样式） 叫属性
（2）单独使用双箭头写出叫标签
（3）功能 声明 此为css代码 需要用css编译规则
（4）文件里面不用写style 因为.css 文件 本来就执行 css编译规则
样式使用：
一般情况不使用行间样式简化html界面
当代码少于100行时 可以使用 内部样式
当代码大于100行时 使用外联样式
(五)命名规则
（1）由字母 数字 下划线组成
（2）不能使用中文（不管是文件夹 还是 文件）
（3）必须字母开头不能使用数字或者下划线开头
（4）见名知义
（5）多个英文单词组成的名字
（6）地中海命名 .text_box 中间用下划线链接
（7）驼峰命名 .textTop 后一个单词的首字母大写
（8）对于项目来说：
所有图片都必须在image/img/images文件夹下
一个项目的首页的相关文件必须用 index来命名 index.html index.css index.js
(六)标签
1、块标签
1. div 可以嵌套各种标签
2. p 一般用来承载文字不能嵌套块标签
3. ol 有序列表 默认每一行前面有编号
4. ul 无序列表 默认每一行前面有小点
5. li 必须搭配ol/ul标签使用 不能单独使用
6. h1~h6 一般用来承载网站或者栏目名字
h1 一般用来写网站名字或者logo 一个页面只存在一个h1
一般来说网站的名字和logo都是有链接的 所以 h1里面应包含一个a
2、行标签
（1）span 用来承载文字
（2）img 用来写图片
（3）a 链接
（4）外部链接[](https://links.jianshu.com/go?to=.%2F)
（5）打电话[](https://links.jianshu.com/go?to=tel%3A10086)
（6）锚点链接
给目标盒子（要跳转的位置） 设置ID
（7）target新页面打开方式
（8）target=“_blank”可以在新页面打开
3、 特殊标签
（1）hr 下划线
（2）br 换行
（3）link 链接
（4）q 加双引号
