第一章 前端介绍
第1节 什么是前端
前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。
前端与后台是相对的前端是展示给用户并且和用户进行交互的客户端有app或者浏览器后台又称为服务器端进行数据处理，存储，业务逻辑等.
第2节 前端的开发流程
第3节 页面的组成结构
结构
HTML用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为
JavaScript用于响应用户操作
第4节 页面的描述
结构
表现
行为
第二章 HTML标签(结构)
第1节 HTML简介
HyperText Markup Language
hyper [ˈhaɪpə(r)] 超过 亢奋的；高度紧张的
Markup 标记 涨价
超文本标记语言
Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
第2节 网页的基本结构
doctype：文档类型
: 版本的声明,当前是html5版本
html标签: 网页的根标签,所有其它的标签都被html包含
head头部标签: 网页的配置信息
:字符集(编码的设置)
为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开
Description用来告诉搜索引擎你的网站主要内容
第3节 body标签
主体标签: 所有的显示效果的标签和内容都被body包含
第4节 HTML标签基本结构
开始标签，结束标签
自闭和标签
第5节 标签的语法
标签由英文尖括号<和>括起来，如就是一个标签
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
，那么
必须放在HTML标签不区分大小写
和是一样的，但建议小写，因为大部分程序员都以小写为准
第6节 语义化，让你的网页更好的被搜索引擎理解
标签的用途:我们学习网页制作时，常常会听到一个词，"语义化"。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
第7节 常用标签
标题 h1~h6
标题一
标题二
标题三
标题四
标题五
标题六
段落 p
这是一个段落
强调/加强语气 strong 或 em
em:强调->默认是斜体 strong：更强烈的强调 ->粗体
强调
强烈的强调
换行 br
分隔线 hr
联系地址 address
北京市,沙河区,北科添加一行代码 code
一行代码
添加一段代码 pre
多行代码
给文本增加样式的标签 span
文本
短引用文本 q
quote [kwəʊt]引文 引用
短引用文本
长引用 blockquote
block大块的
常引用
无序列表 ul + li
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
有序列表 ol + li
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
布局标签 div
表格标签 table
链接 a
图片 img
表单标签 form 输入框 input
文本域 textarea
下拉列表 select + option
提交/重置按钮/lable标签
第8节 转义字符
第三章 CSS (表现)
第1节 CSS简介
1.1 CSS全称为“层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
1.2 CSS的代码语法
选择器｛属性：值;属性:值….. ｝
第2节 CSS基本知识
内联式CSS样式:直接写在html标签中
嵌入式CSS样式:写在当前文件中
外部式CSS样式:写一个单独的文件中
第3节 CSS的选择器
什么是选择器?
每一条css样式声明（定义）由两部分组成
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
选择器的分类?
1、标签选择器 p{}
2、类选择器 .claa{}
3、ID选择器 (全局唯一) #id{}
4、子选择器 > （表示第一代子元素） #id>p{} 如果没有>直接是空格的话就是后代所有的元素 #id p{}
5、通用选择器 * *{}
6、伪类选择器 :hover p:hover{}
7、分组选择器 h1,h2,p h1,h2,p{}
第4节 CSS的继承、层叠和特殊性
继承性
ppppp
权值
1、标签的权值为1
2、类选择符的权值为10
3、ID选择符的权值最高为100
如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)
三年级时，我还是一个胆小如鼠的小女孩。
层叠
当作用在同一个标签上的样式权值相同时,那么后面的样式会生效
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
重要性 !important
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决
三年级时，我还是一个胆小如鼠的小女孩。
第5节 CSS样式格式化排版
文字—字体:
font-family: "microsoft yahei";
font-family: "微软雅黑";
文字—字号颜色:
font-size: 12px;
color: #FF0000;
文字—粗体:
font-weight: bold;
文字—斜体:
font-style: italic;
文字-下划线
text-decoration: underline;
文字-删除线
text-decoration: line-through;
段落-缩进
text-indent: 2em;
段落-行间距(行高)
line-height: 1.5em;
段落-中文字间距、字母间距
1、letter-spacing:50px; 中文或者是英文字母之间的间距
2、word-spacing:50px; 英文单词之间的间距
段落-对齐
text-align: center;为内联元素中的文本或者图片设置居中
第6节 元素分类
块状元素
、
~、、、
、、 、
- 、
- 、