兄弟连李捷PHP课堂笔记Word文档下载推荐.docx
《兄弟连李捷PHP课堂笔记Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《兄弟连李捷PHP课堂笔记Word文档下载推荐.docx（31页珍藏版）》请在冰豆网上搜索。
c）.Unicode（繁体中文）
2.文件编码统一使用utf-8
3.HTML标签：
a）.双标签<
a>
<
/a>
b）.单标签<
br/>
<
hr/>
c）.所有的标签都是闭合的
d）.建议大家使用小写标签，因为小写遵循xhtml标准
e）.属性可以有多个
f）.属性与属性之间要以空格隔开
g）.属性的值要用单引号或者双引号引起来
h）.属性=”属性值”
13、1.文件编码
14、HTML标签的颜色
a）.可以使用颜色单词
b）.可以使用#16进制来表示颜色
c）.#00（红色）00（绿色）00（蓝色）
15、Html注释：
a）.作用：
i.对代码进行说明、ii.便于团队开发、iii.便于排错
b）.特点：
i.注释同样会被浏览器加载、ii.不被浏览器解析
c）.注意：
i.尽量加必要的注释，不要长篇大论
d）.语法：
i.<
!
---->
、ii.注释可以注释多行、iii.可以注释单行、iv.注释不能嵌套使用
16、Html空白符
i.空白符会被浏览器解析成一个空格
ii.空白符不计数量
iii.如果想让页面显示多个空格，我们可以使用
iv.要注意代码的换行和缩进
Html实体：
i.空格：
、ii.小于号：
、iii.大于号:
>
17、HTML主体架构：
html>
head>
metahttp-equiv=”content-type”content=”text/html;
charset=utf-8”/>
-告诉浏览器使用utf-8的编码形式来解析以下的html代码-->
title>
网页的标题<
/tile>
/head>
body>
页面的主体
/body>
/html>
18、<
19、HTML的BODY标签：
20、格式标签
i.换行标签：
、1.<
ii.段落标签：
p>
、2.可以为单标签，可以为双标签
iii.水平居中：
、1.Center双标签
iv.将格式原样输出、1.Pre双标签
v.列表标签：
、1.Li双标签、2.特点：
、a）.自动换行，会在前边加一个小圆点
vi.有序列表：
、1.Ol双标签
vii.无序列表、1.Ul双标签
viii.分割标签、1.Hr单标签、2.特点：
a）.自动换行
b）.默认居中
21、和20同
22、文本标签
1.Hn、特点：
、1.自动换行、2.默认加粗、3.N1-6的范围内、4.1最大，6最小
2.B
可以将字体加粗
3.I
可以将字体变成斜体
4.U
可以给字体加下划线
5.Sub
下标
6.Sup
上标
7.Font
Color
Size、1-7、1最小、7最大
8.Strong、加粗
23、---------------------------------------------------
1.图像创建
a）Img
b）单标签
c）Src属性：
图像的路径
d）Width：
图像的显示宽度
e）Alt：
图像加载失败时显示图像信息
f）Title：
鼠标悬停时显示的图片的提示信息
g）要求：
将alt和title都加上
h）Border：
图片的边框线
---------------------------------------------------
LAMP兄弟连金牌讲师李捷：
微博：
博客：
http:
//www.thisky.me
捷哥视频：
//www.phpinfo.cc
QQ:
86267659
YY:
18098504
在线答疑YY频道号：
46392657
关注微信公众账号【lamplijie】，@提问+空格+问题，捷哥会及时为你解答！
24、1.超链接
a）点击一个元素的时候，页面会加载一个新的页面
b）<
c）Target:
指链接页面以什么形式打开
i._self
ii._blank
d）Href
i.链接地址
1.注意：
要写上协议名称
e）Title
i.提示信息
25、2.锚点
a）同样使用a标签
i.使用name属性来定义锚点的名称
ii.在写超链接地址时，加#表示访问本页的锚点#锚点名称
iii.如果访问其他页面的锚点，页面地址#锚点名称
26、和27同
27、3.URL
a）什么是URL?
i.统一资源定位符，就是链接地址
ii.组成：
1.:
80/xinwen/index.php?
keyword=非洲足球&
keyword2=key2&
username=lijie&
age=18&
sex=chunyemen
2.http:
//ftp:
//https:
//file:
//svn:
//协议名称
3.主机名
4.域名：
5.:
80端口号
6./xinwen目录名称
7.Index.php访问的文件资源名称
8.?
以后的内容叫做参数get参数post参数是不会显示到url地址栏当中的
iii.URL地址分为三种：
1.相对路径
a）./当前编辑文件的当前文件夹
b）../当前编辑文件的上一级目录
c）../../上级路径的上级路径，以此类推，可以无限的写下去
2.绝对路径
a）http:
//.........
3.站点根目录的相对路径
a）/linux系统的根路径
28、和27同
29、30、31、32、33、4.在html代码中添加表格
a）Table标签
i.Width宽度
ii.Height高度
iii.Border边框
iv.Cellspacing:
表格之间的间距
v.Cellpadding：
表格当中的内容与边框的距离
vi.Align:
表格在页面当中的水平位置
b）Tr标签
i.代表一行
ii.Align：
本行内容在表格当中的水平位置
c）Td
i.代表一个格
ii.跨列：
colspan=’列的个数’
iii.跨行：
rowspan=’行的个数’
iv.注意：
跨到哪个格上就要将这个格删除掉
d）Caption：
i.表格的标题
e）Th代表表格的表头
i.类似于td，功能与td相同，也同样表示一个格
ii.默认为居中、加粗
34、35、36、我们使用frameset主体架构
1.Rows：
行行的高度200px,200px,200px200px,*,200px
2.Cols：
列的宽度100px,*20%,*
1.双标签
2.不能有body
3.定义列和行：
3.Frame
1.单标签
2.Src代表是链接的页面的地址
3.Name分帧的名称，便于超链接页面时将链接的页面定位到指定的frame当中
4.Noframe
1.当浏览器不兼容分帧时，执行此标签内的内容
2.配合body使用
5.iframe
1.在当前页加载其他页面（经常使用）
2.Src
3.Width
4.Height
5.Frameborder
37、38、39、40、
Form标签
2.属性：
1.Action请求地址
2.Method请求方式get/post两种
3.Enctype上传时需要加enctype=”multipart/from-data”
3.Form表单当中的元素
1.Input
1.Type类型
1.Text单行文本域
2.Password密码域
3.File文件上传
4.Checkbox复选框
5.Radio单选框
6.Hidden隐藏域
7.Button普通按钮，不会提交
8.Image图片按钮会提交
9.Submit普通提交按钮
10.Reset重置按钮
2.Name、表单提交时带的参数名称
3.Value、默认值
4.Size、显示宽度
5.Maxlength、填写内容的最大字符长度
6.Checked、Radio和checkbox默认选中
7.Readonly、只读，无法修改，但是可以提交
8.Disabled、禁用，无法修改，无法提交
9.Accesskey、快捷键
10.Tabindex、Tab顺序
11.Src、图片按钮链接图片资源的路径
12.Alt、图片按钮的提示信息
2.Textarea
1.Cols、显示列数
2.Rows、显示行数
3.Name、名称
3.select
1.name、名称
2.Multiple、支持多选
3.Size、显示高度
4.Option
1.Value、提交的值
2.Selected、默认被选中
41-45、8.CSS层叠样式表
a）.由浏览器解释，不需要编译
b）.作用：
i.管理样式
ii.便于更改页面的样式
c）.必须以.css后缀结尾
d）.Css语法不区分大小写，我要求大家全部使用小写
9.CSS语法：
a）.选择符{属性1:
属性值1;
属性2:
属性值2;
……..}
b）.选择符有很多种
c）.要用大括号{}包含起来
d）.属性与属性值之间要使用冒号:
隔开
e）.属性和属性之间要使用分号;
10.CSS注释：
a）./*…..*/包含注释内容
b）.注释单行，也可以注释多行
c）.不要使用<
---->
11.长度单位：
a）.Px
b）.%
12.颜色取值：
a）.#ff0099<
?
#f09（html语法当中不能使用）
13.HTML当中放入css有几种方式：
a）.三种：
i.内联
1.行内
2.在标签当中使用style属性
3.Style的值为css的键值对
ii.内嵌
1.在html标签当中，使用style
2.Style标签写入到head标签当中
3.<
style>
css语法<
/style>
iii.外部链接
1.好处：
可以在多个页面当中使用同一个css
2.节省带宽，浏览器会缓存css文件
linkrel=”stylesheet”type=”text/css”href=”./style.css”>
iv.三种方式的优先级：
1.就近原则
a）.行内优先级最高--?
内嵌---?
外部链接
46-48、14.CSS选择符：
a）HTML选择符
i.Html标签名称{属性:
属性值;
…….}
ii.就会选择到html标签对象
b）类选择符：
i..class的名称
c）Id选择器：
i.id的值在页面当中是唯一的
ii.选择#id的值{属性对……}
d）关系选择符：
i.层级关系很重要
ii.<
pclass=’one’>
/p>
p.one（中间没有空格）
iii.<
fontclass=”one”>
/font>
pfont.one（中间有空格）
iv.层级可以无限往下写，建议不要超过四级
e）组合选择符：
i.多个选择符之间使用逗号拼接
ii.P,font,h1,h2,.one,#id{}
f）伪元素选择器
i.A:
link未点击的超连接
ii.A:
visited已点击过的超链接
iii.A:
hover鼠标划过时
iv.A:
active激活超链接（点击超链接的一瞬间）
49-55、4.CSS的常见属性：
a）字体
i.font-style:
italic;
/*字体样式*/
ii.font-variant:
small-caps;
/*所有字体转为大写*/
iii.font-weight:
bold;
/*是否加粗*/
iv.font-size:
18px;
/*字体大小*/
v.line-height:
20px;
/*行高*/
vi.font-family:
'
宋体,微软雅黑'
;
/*字体*/
b）背景属性
i.background-color:
#ccc;
/*背景色*/
ii.background-image:
url（'
./list_ico.png'
）;
/*背景图*/
iii.background-repeat:
no-repeat;
/*背景是否重复*/
iv.background-position:
0-81px;
/*背景图的位置*/
c）文本属性
i.letter-spacing:
10px;
/*字符间距*/
ii.word-spacing:
/*单词间距*/
iii.text-decoration:
underline;
/*是否有下划线*/
iv.text-align:
center;
/*水平位置*/
500px;
vi.text-indent:
2em;
/*缩进*/
d）边框属性
i.Border-style/*边框的样式*/
ii.Border-width/*边框的宽度*/
iii.Border-color/*边框的颜色*/
e）光标属性
i.Cursor:
pointer/*显示小手*/
f）列表属性
i.List-style-type/*列表的样式*/
ii.List-style-image/*列表的图片*/
iii.List-style-position/*列表的位置*/
56、DIV+CSS的样式布局
g）优势：
i.便于搜索引擎收录
ii.页面布局简单
iii.简洁，优化
h）DIV和SPAN的区别
i.都是无意义的标签（没有任何效果）
ii.Div是块级元素，是会默认换行的
iii.Span是内联元素，默认不换行
iv.换行都是块级元素，不换行的都是内联元素
v.块级元素可以设置宽高，内联元素设置宽高后，不生效，他的宽高为文本的宽高
57-58、5.W3C盒子模型：
a）实际内容
b）内补白padding
i.Padding-top
ii.Padding-right
iii.Padding-bottom
iv.Padding-left
v.Padding:
上右下左（顺时针）
c）外边距margin
d）边框border
59、6.Position:
a）Absolute:
绝对定位，位置相对于文档流（body）,会脱离文档流，会飘起来
i.Top
ii.Left
iii.Right
iv.Bottom
v.Z-index设置层级
60、定位：
i.Position
1.Absolute绝对定位位置相对于文档流，会脱离文档流，飘起来
a）Top
b）Right
c）Bottom
d）Left
i.Z-index
1.设置层级
2.Relative相对定位，位置相对于自己的当前位置，不会脱离文档流，不会飘起来
3.Fixed固定定位，位置相对于浏览器
e）让层相对于外部容器水平居中：
i.Margin:
0auto
f）绑定模式：
i.父层设置为position:
relative;
ii.子层设置为position:
absolute;
62、8.Display显示：
a）Block:
将元素转为块级元素显示出来
b）Inline：
将元素转为内联元素显示出来
c）None:
将此元素隐藏
i.不会占用位置
63、9.Visibility显示属性
a）Hidden会将元素隐藏，但是会占用位置
i.在子层当中设置为inherit
1.代表的意思是继承父层的显示
ii.在子层设置为visible
1.不管父层是否显示，子层永远会显示出来
64、10.Overflow处理超出边界的内容
a）Hidden:
隐藏起来
b）Visible:
超出显示，不做处理
c）Scroll:
始终出现滚动条
d）Auto:
自动，自适应，内容超出设置滚动条，内容不超出，滚动条消失
65-67、11.Float浮动
a）Left
c）只会水平浮动
d）会脱离文档流
e）多个div都设置为float，即为水平一条线
12.Clear清除浮动
a）Left清除左浮动
b）Right清除右浮动
c）Both清除左右浮动
d）从clear后的所有的内容都恢复原来的状态，不再受浮动的影响
68-70、7.DIV+CSS
a）优势：
ii.便于团队开发
iii.页面更加简洁，更改样式较方便（便于维护）
b）Div和span的区别：
i.Div和span都是无意义的标签，都是双标签
ii.Div和span必须配合CSS才有效果
iii.Div是块级元素（会自动换行），span是内联元素（不会自动换行）
iv.块级元素可以设置宽高，内联元素设置宽高无效，其宽高为本身的文本的宽高
c）W3C的盒子模型
i.边框border
ii.内补白Padding
1.Padding:
10px上下左右均为10px
2.Padding:
10px20px上下为10px，左右为20px
3.Padding:
10px20px30px上为10px，左右为20px，下为30px
4.Padding:
10px20px30px40px上为10px，右为20px，下为30px，左为40px
5.Padding-toppadding-rightpadding-bottompadding-left
6.使用padding的时候，盒子宽度会自动扩大
iii.外边界
1.Margin（不属于盒子的宽高）
2.用法和padding一模一样
d）定位：
i.Position
c）Bo
升级会员 