因为PHP擅长的是web开发。所以HTML也是phper需要了解的.
HTML知识点
基础篇
快捷键
ctrl+A 全选 ctrl+s 保存 ctrl+c复制 ctrl+v保存
ctrl+o 打开 ctrl+w 关闭 ctrl+p打印 ctrl+n新建
PS中快捷键
ctrl+ "+" 放大 ctrl+ "-" 缩小 ctrl+r 显示/隐藏标尺
ctrl+h 隐藏参考线 ctrl+d 取消选区
文件夹起名字要求
数字、字母、下划线,不允许使用汉字,不允许用数字开头
三原色:
红(red) 绿(green) 蓝(blue)
16进制:0-9和a-f随机组合3位或者6位,比如(#fof #abb123)
rgb(0-255,0-255,0-255)
图像的格式:
JPG PNG GIF JPEG BMP
建站点
新建文件夹:
文件夹(HTML)网页
文件夹(css)样式
文件夹(images)图片
HTML网页的基本格式
<!DOCTYPE html>
<html>
<head>
<title>网页的名字</title>
</head>
<body>网页的内容</body>
</html>
标签的基本语法
单标签:<标签名 属性="属性值"> 例子:`<img src="">`
双标签:<标签名 属性="属性值">内容</标签名> 例子`<p style="color:red;">文字</p>`
列表
无序列表
<ul>
<li></li>
</ul>
无序列表的属性:type(类型)
属性值:square(小正方形) disc(实心圆,是默认值) circle(空心圆)
有序列表
<ol>
<li></li>
</ol>
有序列表的属性:type(类型) reversed(倒序显示) start(开始)
type属性值:"1"(阿拉伯数字,是默认值) "a"(a-z) "A"(A-Z) "Ⅰ"(罗马数字ⅠⅡⅢⅣⅤ)
reversed(倒序显示)
例子
<ol type="A" reversed>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
显示结果为
C 文字
B 文字
A 文字
start(从当前开始顺序显示,或者倒序显示)
例子1
<ol type="A" statr="B">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
显示结果为
B 文字
C 文字
D 文字
E 文字
例子2
<ol type="A" start="B" reversed>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
显示结果为
F 文字
E 文字
D 文字
C 文字
B 文字
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
注意:dt和dd是同级,常用的格式是:dt放图,dd放字。一个自定义列表中,可以放很多个dd,但是只能放1个dt。
超链接:<a></a> 一对一 ---- 文字会变成蓝色,并且添加下划线
<a href="#">文字</a> # 代表的是空链接
属性:引入地址 href 目标打开方式 target="_self"原窗口 _blank 新窗口
表格:表格中的内容默认情况下 --- 水平居左 垂直居中
table 表格
属性:border边框 width宽度 height高度 align对齐方式(left/center/right)
bgcolor背景颜色 cellspacing 单元格间距 cellpadding单元格边距
tr 行
属性:align对齐方式(left/center/right) bgcolor背景颜色
td 单元格、列
属性:align对齐方式(left/center/right) bgcolor背景颜色
colspan 水平合并(合并的多列)
例子:colspan="5" 删掉本行(tr)中的4个列(td)
rowspan 垂直合并(合并的多行)
例子:rowspan="5" 删掉除过本行(tr)往下4个行(tr)每行的一个列(td)
细线表格的制作步骤:
1、给table设置边框border为0(可以不用写border)
2、给table设置背景色bgcolor,表格的背景色就是线的颜色
3、给每个tr设置背景色
4、给table设置单元格间距为1---- cellspacing="1"
表单
表单:用于显示,收集信息,并把信息提交给服务器
表单的结构:
<form>
<input type="...">(输入标签)
<selcet>(下拉菜单)
<option>内容1</option>
<option selected>内容2</option>
<option>内容3</option>
<select>
<textarea>(文本域,用于影评等)
</textarea>
</form>
表单的属性:action(服务器地址) name(表单名称) target(目标打开方式) method(提交方式)
表单属性的属性值: target(_blank新窗口打开 _self原窗口打开,是默认值) method(post隐式提交,提交数据时,内容不会显示在地址栏,安全性高,提交数据的大小也没有限制 get明文提交,提交数据时会显示在地址栏,安全性低,提交数据大小有限制,最大为2KB)
注意:如果有文件需要上传服务器,method(提交方式)必须改为"post"
输入标签
<input type="...">(表单控件,放在form中)
输入标签的属性:type(类型) name(名称) value赋值 checked默认选中(用于,协议等) placeholder光标获取
输入标签中type的属性值:
text(文本框)
password(密码框)
radio(单选框,同一组单选框中,必须给一个name,而且name的值要相同,不然,无法单选)
checkbox(多选框)
file(文件域)
image(图像域,具有提交功能)
submit(提交按钮)
reset(重置按钮)
button(普通按钮)
tel(电话)
email(邮箱)
url(网址)
number(数值, max最大 min最小 取范围)
date(日期)
datetime(世界时间,UTC时间)
datetime-local(本地时间)
color(颜色)
week(第几周)
month(几月,不是第几个月)
range(滑动轴)
**css篇**
三种样式表(三种样式表可以搭配使用):
行内样式:直接在标签内部写 style="属性:属性值;" 例子<p style="color:red;">文字</p>
内嵌样式:在head之间写一个双标签<style></style>,在style之间写CSS
外部样式:新建一个CSS样式表,再用link导入
三种样式表的优先级: 行内样式>内嵌样式>外部样式
文字属性
font-size文字大小 网页中,正文(12px)标题(14px)
font-color文字颜色
font-family文字字体 黑体、宋体等
font-style字体倾斜(italic倾斜 normal正常字体)
font-weight文字加粗(bold/bolder加粗 noamal正常字体)
text-decoration文本修饰(underline下划线 overline上划线 line-through删除线 none去掉下划线)
text-align文本对齐(left左 center中 right右)
text-indent文本缩进
line-height行高
背景属性
background-color背景颜色
background-image:url(../images/a.png);背景图片
background-repeat背景图片重复(repeat默认值 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复)
background-position背景图片位置 先水平(left/center/right,像素) 后垂直(top上/center中/bottom下,像素)
background-size背景图片的尺寸 先水平(百分数,像素) 后垂直(百分数,像素)
列表属性
list-style:none;去掉项目符号
浮动: float:left/right/none;
**div篇**
元素分类:
1:行内元素:在一行内显示,元素前后没有换行效果,不会自动换行,在css添加width和height,不会起作用
2:块元素:一个标签独占一行,元素前后带有换行效果,在css中添加任何属性都起作用
3:可变元素:button/input
行内元素例子 b / i / u / img / a / em / strong / span
块元素例子: h1-h6 /p / ul / ol / li / dl / dt / dd / table / form / div