PHP Java 前端
一 PHP体系
前端技术： HTML+CSS+JS+jquery
后端 ： php（php、mysql、tp框架，项目实战）
二 行业情况（IT）
软件开发（用一些技术开发项目 QQ、淘宝、企业站等）
Java c/c++ php c# 。。。 计算机程序语言
php (容易学习，就业面广)
程序员--->初级工程师--->中级工程师---->高级工程师
项目经理（技术底子+沟通能力）
技术经理（要求技术能力）
三 学习方法
html+css 做页面
PC页面 移动端（手机、ipad）页面
前端课程
1 前端学完可以做什么？
PC页面（台式机、笔记本） + 移动端页面
静态布局+ 效果（动画）
2 前端工程师必备条件
a 会打字(打字速度) 懂得简单上网（浏览网页、下载东西）
b 勤奋练习
c 兴趣（培养）
*******计算机基础知识************
1 文件拓展名
文件名 基本名.后缀名(拓展名)
后缀名描述文件的类型
*.doc *.mp3 *.avi *.txt *.html
*.c
务必进行一个操作： 让自己系统的文件扩展名被显示
2 知道“打开方式”的含义
打开方式指的是以哪种软件打开该文件
大话西游.avi 暴风音 迅雷播放器
网页文件（*.html）
一个网页（*.html）以浏览器打开的，可以浏览
假如以记事本打开，显示源代码并且可以进行编辑
3 知道“快捷方式”
程序快速打开的一个入口，双击就能够打开程序。
装软件 （浏览器、sublime）
4 常用的快捷键（提高工作效率）
ctrl 配合其他键去使用 "control"
Ctrl+c 复制 ctrl+v 粘贴
shift 中英文输入法切换
alt alt+f4 关闭软件
tab
alt+tab 在打开的软件之间来回切换
ctrl+x 剪切
F2 重命名
F5 刷新
ctrl+z 撤销上一步的操作
windows+E 打开资源管理器（我的电脑）
windows+D 显示桌面
5 互联网原理（上网的过程）
*********我们电脑有这个特殊的文件夹 *************
C:\Users\Danny\AppData\Local\Microsoft\Windows \Temporary Internet Files
这个特殊文件就是存放的就是上网过程中产生的一些临时文件
上网的过程：有真实的物理文件传输，把服务器的资源文件传输到本地浏览器进行渲染
*************win8举例*********
现象：第一次网站打开比较慢，第二次打开时比较快？
原因： 第一次大家上网，有的资源文件会
存储在你的电脑上，第二次打开直接用你本地的，
减少了网络传输时间
**************专业名词解释******
服务器：电脑 配置和性能很高
百度服务器 服务器集群
阿里云 几十万台
BAT
************浏览器*************
主流的浏览器 页面的兼容
IE windows自带的 微软公司 -ms-
chrome google(谷歌) 教学用 -webkit-
FireFox(火狐) Mozilla -moz-
safair apple -webkit-
opera(欧朋) -o-
QQ浏览器 360浏览器 百度浏览器 。。。。
浏览器：本质软件，用于浏览网页
*******************HTML的初步认识***********
1kb=1024b
同样的文本，用记事本和文档去存储的话，
文件大小不一样
记事本，只存储文本内容本身
word软件，不仅仅可以存内容，还可以存样式
.html就是纯文本文件
纯文本：1 只有内容本身，没有样式
2 纯文本文件，用编辑器（
记事本、editplus、notepad、ue、sublime等）
打开不会乱码
***********语言： 交流的工具*************
计算机语言：人与计算机交流的工具
1.html 2.css 3.js 4.php
一 html
全称 HyperText Markup Language 超文本标记语言
超文本 标记（标签）
如何创建一个网页？
1 新建一个*.txt文件（用的是记事本）
2 在*.txt文件书写代码，保存
3 重命名文件*.txt---->*.html(*.htm)
4 在浏览器显示
理解 “超文本标记” 标记本身不会被显示，
对一些文本或者其他资源进行控制
学习的重点： 熟练掌握一些常用的标记
*************Html的基本结构（基本骨架）********************
<html>
<head></head>
<body>
</body>
</html>
1 标题标签
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 。。。
<h5></h5> 。。。
<h6></h6> 。。。
标记主要的含义：不是从外观角度考虑，
从语义的角度，标题标记（h1~h6）主要是
给文字赋予标题的含义
html4.01 html5
标记（标签）语法
1 双标记
<标签名></标签名>
2 单标记
<标签名 /> 比如 <br/> <img />
2 段落标记 <p></p> paragraph
<p>
今天是周一，天气小雨，今天我学了html的一些标记
</p>
一款软件：sublime
编辑软件（记事本差不多），这款软件轻巧，很多的快捷键
使用很方便，提高我们工作效率
类似的编辑软件：DW、editplus、utralEdit、notepad、webstorm等
sublime的使用
新建文件：ctrl+N ---->保存（.html后缀名一定要加）
--->书写代码--->保存
*********** sublime常用的快捷键***************
ctrl+滚轮 放大缩小文字
ctrl+shift+d 复制当前行
ctrl+shift+k 删除当前行
ctrl+shift+↑ 上移当前行
ctrl+shift+↓ 下移当前行
快速生成标记 标记名，按下Tab
自动生成骨架 html:xt 按下tab
二 .w3c 万维网联盟（组织） 由一些著名浏览器厂商
指定web标准
第一行 DTD语句，告诉浏览器当前的文档采用
的是 哪种版本的html网页
7种版本
html4.01
xhtml 1.0(严格版的html)
html5
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
元标签
字符集 utf-8 （字库最全）
支持世界上任何语言 一般用3个字节表示一个字符
gbk （gb2312）只要支持汉字以及少部分英文，一般用两个字节
表示一个字符
亲自检测： taobao 和新浪用的utf-8
京东 gbk
计算机只能识别 0和1
10 1010
“中”‘m’
码表
乱码的问题？
产生乱码？
我们设置 <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
保存的时候，我们设置的是gbk
“中” 比如在gbk中用56代表
在utf-8中用78代表
中真正保存为56
浏览器解析“中”的时候 拿56去码表中，
就是其他符号，产生了乱码
乱码解决方案： 文件保存时候设置的编码和meta指定的一致
sublime文件保存设置编码
文件--->文件编码（设置的编码和meta指定的一致）
关键词描述
<meta name="Keywords"
content="网易,邮箱,游戏,
新闻,体育,娱乐,女性,亚运,论坛,
短信,数码,汽车,手机,财经,科技,相册" />
SEO（搜索引擎优化）
页面描述： 对这个网页做一个简单的描述
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多 个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
************列表************
1 无序列表（没有顺序）*****常应用在项目中****
<ul>
<li>...</li>
<li>...</li>
...
</ul>
"组标签" ul和li配合使用，换句话说有ul,就需要有li
有li必须就要有ul,一个ul里面可以包含多个li
注意：ul的儿子必须是li,下面的写法错的
<ul>
<h3><h3>
<li>
</li>
</ul>
但是li是一个容器级标签，li里面啥都可以放
ul默认情况下会给每一项前面加前导符小圆点
ul的应用：想要描述“列表”语义的时候，就可以用
使用什么标签，一定要从语义的角度
li里面甚至可以再放一个无序列表
2 有序列表 : 表示有顺序的列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3 自定义列表
也是一个组标签
dt、dd只能在dl里面；dl里面只能有dt、dd
<dl>
<dt></dt>
<dd></dd>
</dl>
dl "definition list" 定义列表
dt "definition title" 定义标题
dd "definition description" 定义描述
dd是描述dt的，dl很灵活，比如一个dt可以配置多个
dd, 上面的三个城市可以用三个dl描述
自定义列表的应用场景： 网页尾部
div和span （重要的盒子）
div 一般“分割”的意思
span 表示范围、跨度
div的初步认识： 理解为一个盒子或者容器
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是 一个小区域。
div标签是一个容器级标签，里面什么都能放，用于网页布局
甚至可以放div自己
<div>
<div></div>
</div>
网页布局 div+css
表单：收集用户输入的信息
<form>
表单元素
</form>
具体的表单元素
1 文本框 <input type="text" value="默认值"/>
2 密码框 <input type="password" />
3 单选按钮
性别：<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
4 复选框
<input type="checkbox" />书法
<input type="checkbox" />软件开发
<input type="checkbox" />开车
<input type="checkbox" />唱歌
5 下拉列表
<select>
<option></option>
<option></option>
<option></option>
</select>
6 文本域（多行文本框）
<textarea cols="30" rows="10">
</textarea>
7 按钮
a 普通按钮 <input type="button" value="登录"/>
b 提交按钮 <input type="submit" value="登录"/>
c 重置按钮 <input type="reset" value="清空数据"/>
复习 html 标签
前端三项技术
HTML 结构
css 样式
js 交互或特效
列表（3种）
1 无序列表
<ul>
<li></li>
<li></li>
</ul>
"列表语义" 导航
2 有序列表
<ol>
<li></li>
</ol>
3 自定义列表 网页尾部
<dl>
<dt></dt>
<dd></dd>
</dl>
表单：收集信息
<form>
</form>
文本框 text
密码 <input type="password" />
单选按钮 <input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
复选框 <input type="checkbox" checked="checked"/>
下拉列表 <select>
<option></option>
<option></option>
</select>
文本域 <textarea cols="30" rows="8">
</textarea>
按钮 button submit reset
表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table标签定义表格，tr定义行，td定义单元格
table常用的属性
border 定义表格的边框 border="1"
cellspacing 指定单元格和单元格之间的距离
cellpadding 指定文字和单元格之间的距离
width : 规定了表格的宽度
height: .....................高度
align 表格的对齐方式 这个属性有三个值 分别为
left center right
bgcolor:
如何制作细线表格
1 让table的border属性设置为0，table的bgcolor属性值
就是细线的颜色，cellspacing="1"
2 让每行的tr的bgcolor属性值为white
<caption></caption>定义表格标题
合并单元格 <td colspan="2"></td> 2个单元格进行合并
<th>和<td>用法一样，都表示一个单元格，th有加粗居中效果
制作表格第一行（表头）
完整的表格结构
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
若干个td
</tr>
</tbody>
<tfoot>
<tr>
若干个td
</tr>
</tfoot>
</table>
table布局 div+css布局
***********HTML杂项*******************
1 注释 <!--注释的内容 --> 养成加注释的素养
2 实体字符
<p>
< 表示小于
> 表示大于
© 表示版权
® 表示商标
表示空格
至于其他实体字符，可以查手册（在线、离线）
w3c 是一个组织 制定web标准
http://www.w3school.com.cn/
HTML4 核心内容（熟练）
超链接 图片 列表 表单 表格 等
HTML 把样式包办了
加粗<b></b>或<strong></strong>
一般用b做css钩子,strong表示强调
我是<strong>中国</strong>人
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
