PHP语言开发整理
网站开发主要使用 HTML、CSS、JavaScript 三种语言 来开发。
····HTML对页面骨干编写，css内容展现样式编写，JavaScript展现动态编写·····
HTML
编辑框架：头部head， 身体body， 尾部footer
html
head……/head
body……/body
footer……/footer
/html
–
这里是 html 标签
标题（Heading)
使用 h1 - h6 标签定义，1-6的大到小字号顺序
&：<用h1>This is a heading</用h1>
–
段落
使用 p 标签定义 ,<放这里>
&：< p>This is a paragraph.</ p>
–
链接
使用 a 标签定义 ,并 在 href 属性 中，来指定链接的地址。
&：< a href="http://www.xxx.com ">This is a link</ a>
–
图像
使用 img 标签定义 ,
&：< img src=“xx.jpg” width=“104” height=“142” />
–
链接
使用 a 标签定义 ,
&：< p>This is a heading</ p>
分类 ：
块级元素
class：为元素的类定义 CSS 样式
使用 < div class=""> 元素定义，用于 HTML 元素的容器。有开始&结束
：：通过< style>定义样式后，在块元素中用class调用，来定义块元素的样式。
&：
< style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</ style>
< body>
< div class=“cities”> // 调用样式
< h2>London</ h2>
< /div>
< /body>
–
行内元素
使用 **< span> ** 元素定义，用于 文本的容器。有开始&结束
< style>
span.red {color:red;}
< /style>
< body>
< h1>My < span class=“red”>Important< /span> Heading< /h1> // 调用样式
< /body>
响应式 Web 设计？
RWD 指响应式 Web 设计（Responsive Web Design）
：可变尺寸传递网页
：针对 平板和移动设备是必需的。
添加到 head 部分：··固定标签有6个··
< title>、< meta>、< link>、< base>、< script> 、 < style>。
title标签：定义文档标题。是必需的
base标签：规定默认地址（target）
<head>
<base href="http://www.xxx.com.cn/images/" />
<base target="_blank" />
</head>
link标签：定义文档与外部资源之间的关系。
meta标签：提供关于 HTML 文档的元数据。元数据不会显示在页面，是给机器读的信息。
即定义页面的关键词；搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。
<meta name="keywords" content="HTML, CSS, XML" />
script标签：定义客户端脚本，如 JavaScript
style标签：用于为 HTML 文档定义样式信息。
注意：
<!DOCTYPE> 声明：必须是 HTML 文档的第一行，位于 <html> 标签之前。
：：它是指示 web 浏览器，正确获知页面的文档类型。即能知道使用哪个 HTML 版本来编写页面类型的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
：：DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
<footer> 标签：定义文档或节的页脚
：：页脚通常包含>文档的作者、版权信息、使用条款链接、联系信息<。
：：可在一个文档中使用多个 <footer> 元素。
：：注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。
CSS 语法
规则：由两个部分构成：选择器&声明(1或多条)
例：：selector {declaration1; declaration2; ... declarationN }
选择器：是要改变样式的 HTML 元素；
声明：：由1个属性和1个值组成
背景 ：都应用 body 元素来定义
局部背景 添加，背景的相关属性可应用在任何元素中。
如：为段落元素添加：：：p.flower {background-image: url(/i/eg_bg_03.gif);}
如：为行内元素添加：：：：a.radio {background-image: url(/i/eg_bg_07.gif);}
背景图像set
background-image
使用 属性值** image** 定义
：：页面的背景图片是否平铺set
：：3种值：repeat-x 图像水平重复
—————repeat-y 图像垂直重复
—————no-repeat 不允许图像平铺
–
背景重复set
background-repeat
使用 属性值** repeat** 定义
：：页面的背景图片是否平铺set
：：3种值：repeat-x 图像水平重复
—————repeat-y 图像垂直重复
—————no-repeat 不允许图像平铺
–
背景定位set
background-position 属性
使用 属性值** position** 定义，
：：使用关键字：top、bottom、left、right、 center；还可使用 长度值100px，百分数值50% ；
：：50% 50% (为中心对齐)，0% 0%放在元素内边距区的左上角
–
背景关联set
background-attachment 属性
使用 属性值** attachment** 定义，设置背景图像是否随页面 关联滚动
：：使用关键字：
——fixed 固定，不受到滚动的影响
——scroll 滚动，会随文档滚动。是默认值
–
id 选择器
：为标有 id 的 HTML 元素,指定特定的样式。
：以 "#" 来定义。
：ID 选择器：不引用 class 属性的值；要引用 id 属性中的值。
：ID 选择器：在文档中使用一次
：常用于建立派生选择器== sidebar 。
：：在文档中只出现1次;
：：#sidebar p {font-style: italic;}
：：以上是 用于出现在 id 是 sidebar 的元素内的段落。
与类class选择器区别：：
：在文档中只使用一次
：可独立用于 某元素的样式需求。
：：即在css中给定一个 ID 值为 自定义变量名 的元素；元素根据需要来调用ID值样式。
如：：#mostImportant {color:red; background:yellow;}
：：：<h1 id="mostImportant">This is important!</h1>
html调用css/js 文件规则
js 中
id 用 # 来调用 class 用 ·点来调； html元素 不用符号调
如：：#bigBox .inputBox .inputText input{}
<div id="bigBox">
<div class="inputBox">
<div class="inputText">
<input type="text" />
</div>
</div>
</div>
快捷
HTML中
写多行, 用 *数量 可创建多个div盒子
li：div.col-md-1*12
<div class="col-md-1"></div>
：：md是尺寸
css中
重复代码，采用 多元素器来优化代码。用逗号隔开。
常规
container盒子 一般做容器装内容
-
div栅格计算：即屏幕划分格数，要计算每份占有宽度
：屏幕的宽度不能用像素，因为屏幕会不能自由伸缩；只能用百分比。
：可在网页打开检查代码窗口，在console控制台中去计算：
：：如划分12份，每份宽度
：：(1/12)
：：(1/12).toFixed(8) --保留小数位数。
：：(1/12*100).toFixed(8) --计算百分数后的宽度。
JavaScript
== js用于改变HTML内容样式 ==
// 输出
js文件中编写输出内容：格式3种
1. alert('写内容') ---- 弹窗模式显示，通过HTML文件中使用<script src='' ''>调用来输出内容。
2. document.write("写内容") ----可直接显示在网页body中。
3. console.log("写内容") -----是显示在console控制台中，在网页中通过浏览器的‘检查’-console中来查看输出。
//输入
用：prompt("写提示内容") ---目的将用户输入内容显示出来。
&& var num = prompt("请输入内容")
alert( num)
//函数
函数具有一定功能的代码块；用function 来封装；
固定格式：function 函数名(){ 函数代码块 }
如何调用输出？用：函数名()
&&
function fn(){
>>功能是：弹出两次
alert(10)
alert(10)
}
fn();
//事件绑定
固定格式： 对象.onclick = function () { 业务逻辑代码块 }
//获取和设置html元素的内容：用 innerHTML 。
innerText 和 innerHTML区别：前者可解析html代码标签；后者只能解析获取纯文本，即不解析纯文本中的代码标签，直接获取。
//获取input的内容
input格式：<input type="text" id="ipt" value="写内容">
1 value是输入的提示内容（即获取和设置input值用value）；2 input语句没有结束语。
js 的function封装中 编写逻辑代码块：弹出alert(oIpt.vlaue) ; 更改oIpt.value ="更改的内容"；
//js结构：
找到对象：
var oBtn = document.getElementById("btn")
设置点击事件并绑定处理：
oBtn.onclick = function () { 业务逻辑代码块 }
注：js中代码变动主要是 function中的代码块，其他都是固定结构。