一：1-4章
二：5-10
三：6-16
【web前端标准】
定义：制作网页的技术叫做web技术----专业的叫做web前端标准。它将是我们今后学习的一个核心，HTML+CSS/JS
【web前端标准的组成部分】
1）HTML----网页的结构、结构标准 负责我们网页的结构，非常重要
2）CSS----网页的样式、样式标准 负责我们网页的外观
3）JS-----javascript网页的行为 负责我们网页的动画，交互以及一些功能等等。
举例：人---html相当于我们人骨骼 css相当于我们人的衣服 js相当于我们人的吃、喝、睡
举例：做网站就相当于盖房子。html---相当于房子的钢筋、水泥、房梁、柱子。css相当于我们房子装修，js相当于我们人 在里面走动，打开个窗户。
【html书写格式】
***网页的扩展名---html、（简写版本htm）
电脑扩展名问题----工具--》文件夹选项----》查看---》把隐藏已知的扩展名勾去掉
<html>-----语言的开始（超文本语言）
<head>----头部
<title></title>----网页的名称、标题
</head>
<body></body>----主体内容、网页里面的所有东西都是放在它里面的
</html>
经验：多写： 第一遍照抄，第二遍看着笔记写 ， 第三遍：什么都不看把代码写下来但是保证没有任何问题。
网页三剑客：flash、ps dw 2005
【dw的使用】
1，双击打开，新建--ctrl+N，点击文件---新建、直接点击html
2，新建完之后先保存---ctrl+s
3，*表示正在编辑
4，预览网页的方法： a：找到文件双击，b：在dw上面有个地球、单机它。预览网页的快捷键F12
【html的发展历史有这样的4个阶段】
1，HTML1.0 --->1993年发布；
2，HTML2.0 --->1995年由 RFC组织发布；
3. HTML3.0 ---> W3C(官方的组织) 制定一系列规范。
4. HTML4.0.1 ---> XHTML1.0 ---> XHTML相当于HTML的严谨版。
5. HTML5.0 ---> 发展趋势 2008年起稿，2012年推广；
（html5---》IE9，IE10部分支持，正在完善，没有真正的普及）
html5 预计在2020年真正的使用。
charset=utf-8" ---国际码---相当于英语
charset="gb2312" -->国家码---相当于汉语
【行业常见词条】
1.internet ---> 互联网 2. WWW ---> 万维网（资料空间）World Wide Web 万维网
3. URL ---> 统一资源定位器（网络地址）
4. HTTP ---> 超文本传输协议
5. W3C ---> 万维网联盟（它是一个组织不是某一个公司）
6. 网站 ---> 多个页面的集合（首页，列表页，内容页 ）
7. 网页 ---> 网页文件就是后缀名以.html或者.htm结尾的文件。
8.浏览器；观看网页最终效果的平台
【改变编码格式】
1，快捷键ctrl+u--首选参数---新建文档---默认编码
【标签】
1，段落标签 <p></p>----双标签
2，对齐方式 align="left/right/center"--分别代表左、右、中
3，刷新网页F5
4,换行标签---<br />---单标签
5, ----空格标签，两个空格一个字
6，h1-----h6---》文档标题标签，由大到小
7，<font></font>---字体标签
1）大小--size 2）颜色--color 3）字体---face
颜色：数字0--9 英文a---f 16进制
8，横线标记<hr />-----单标签 默认居中对齐
size----大小，color---颜色 align--对齐方式 width---宽度
【网站】
前台：静态网页，怎么看都不会变---扩展名.html dw，html，css ，js，jqeury、ps
后台：php、asp---升级版.net、jsp
【DW的几个常用快捷键】
1，在设计视图直接回车-----<p></p>
2,按住shift在加回车-----<br />
3，ctrl+shift+空格--才是我们真正的空格
4，html里面注释<!--这里面是注释内容—>
【图片标签】
<img src="相对路径" />
width--宽 height--高 border--边框 alt--图片加载不出来显示的文字 title--图片的提示文字
快捷键 ctrl+alt+i---插入图片的快捷键
【搜索引擎】
meta就是“关于”(about)的意思
关键字（keywords）、作者（author）、描述(discription)
【路径】
1，相对路径---从文件自身寻找目标
1）同级目录----页面和图片在一个文件夹里面
2）下级目录
3）下下级目录
4）上级目录 ../
2，绝对路径---从windows的目录盘下寻找目标，带盘符D,不方便移动文件
【超级链接】
1，文字链接
1）空链接 假链接 用#
2）网址链接
3）本地链接
4）target=_blank------》弹出新窗口
*****javascript:;---空链接
2，图片链接和文字链接同理
3，热区链接
4，锚点链接
定义锚点，然后链接锚点
【列表】
1，无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
type：类型 disc(圆)、circle（圆圈）、square（方块）
2，有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
type：类型 1、A、a、I、i
3，定义列表
<dl>
<dt>项目名称</dt>
<dd>项目描述</dd>
</dl>
【表格】
table---》表格
tr---》行
td--》列（单元格）
width--宽，
height--高，
border---边框
cellpadding--边距（内容与边框的距离）
cellspacing---间距--指单元格之间的距离
***细线表格的步骤：先清零 cellspacing--为1 细线就是表格的背景 单元格是固定白色
对齐方式：水平对齐align="center"（left、center、right---分别代表左中右）
垂直对齐valign（top、middle、bottom---分别代表上中下）
插入表格的快捷键 ctrl+alt+T ctrl+alt+i---插入图片的快键键
Colspan：合并列
Rowspan：合并行
【表单】
登录、注册都是用表单来做的----后台是息息相关
id----相当于我们人的身份证--唯一性
了解：select * from student where id=“1”
method----》数据传递方式 post---隐藏传值 get---通过url传值
input--->文本域 type---类型（text文本类型）
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户
输入的信息。表单是 向WEB服务器提交数据的一种方法
type="text" 文本框
type="button" 按钮
type="radio" 单选按钮
type="checkbox" 复选框
type="password" 可以用来输入密码的文本框
type="file" 上传文件
type="submit"提交按钮
type="reset" 重置按钮
rows="10"--行数 cols="30"--列数
selected="selected"---城市默认值
form标签内部可以用fieldset标签给内容进行编组它可以产生一个边框；它的内部可以
再次嵌套一个legend标签这个标签可以给组起名字；
fieldset---->编一个组或组框 legend---->组名；
ctrl+f---查找
ctrl+h---替换
【css引出的问题】
什么标签能写宽和高，哪些标签能写大小和颜色
css能够让所有标签都具有相同样式
结构与表现分离、结构与样式分离
【css控制文字三属性】
1，在/head上面写<style type="text/css"> </style>
2，在<style type="text/css"> 里面 </style>里面写font{ color:#F00;}
标签{ 属性：属性值}
3，font-size:100px;---文字大小 注意有单位px
4，font-family:"隶书";--->文字的字体 注意汉字用双引号
5，text-align:center;---文本对齐（居中对齐）
6，div---->其实它就是我们html里面的一个标签而已、盒子、块
7，text-indent:2em；----首行缩进 em单位（1em就是一个字，2em就是代表2个字的意思）
8， line-height:20px;---行高
【PS切图】
1，只切我们代码做不到的东西（图片、背景、渐变等等）
2，切记：文字不要切。正方形的框框不要切（圆角的不规则的都要切）
3，细活
4，所有切片----就是我们刚才切的图片和没切的图片都会存下来
5，切图之前一定要确认图片是数字或者英文
6，所有用户切片就是你刚才切的那些图
【实体化三属性】
1，width---宽
2，height--高
3，background--背景色
【盒子标签】
1，div---大盒子、大容器。我们一般用来分区用
2，span---小盒子，小容器，放一些文字和图片用的
【显示模式】
1，div是一个块级元素--如果没有宽和高他就是通栏显示、就会占满整行
2，span是一个行内元素---根据内容显示大小，可以在一行显示
3，如何转换 display:block;---把行内元素转换为块级元素
4，display:inline;---把块级元素转换为行内元素
5，font-weight:bold---字体加粗
6，font-weight:500;---特殊加粗
【样式表的种类】
1,行内式样式表（内连式样式表）----在标签后面直接写样式style=“color：red”
优点：优先级高
缺点：代码多重复
2，嵌入式样式表（内嵌式样式表）-----在/head上面写样式
优点：代码可以重复利用
缺点：优先级低
3，外部样式表（外联式样式表）
<link href="01.css" rel="stylesheet" type="text/css" />
rel="stylesheet"---关联css样式
【css规则选择器】
1，html规则选择器---用html的标签来命名的都叫做html规则选择器
2，类规则选择器
1）命名规则：一般我们用点.后面跟26个英文字母来命名（骆驼命名法则）
***注意：可以以英文开头、数字结尾，不可以用数字开头英文结尾。不能用特殊符号可以中间用-或者_
2）调用规则：用class来调用
好处：可以重复调用
3，id规则选择器
1）命名规则：一般我们用点#后面跟26个英文字母来命名（骆驼命名法则）
***注意：可以以英文开头、数字结尾，不可以用数字开头英文结尾。不能用特殊符号可以中间用-或者_
2）调用规则：用id来调用
好处：唯一，不能重复利用
【css的优先级】
*代表通配符最低优先级 标签选择器 类 id 行内式
0.1 ---控制整个页面的效果
1 10 100 1000
【通配符】
*{ margin:0; padding:0;}----页面属性清空
margin---外边距
padding---内边距
*****margin:0 auto;-----块居中
css的注释 /*注释内容*/
font-weight:normal;----去除文字加粗样式
font-style:normal;-----去除倾斜样式
body{ font-size:12px;}-----控制页面里面的所有文字大小
