【嘉兴东臣PHP】HTML+CSS+JS 周总结
2015-12-13 00:00
567 查看
摘要: HTML CSS JS
一、HTML
<!--注释-->
<h1>标题，<hx>字号逐级变小;<p>定义段落，在其前后创建一些空白；
<body>主体文档；img图片标签：例<img src="1.jpg">；
<head>标签用于定义文档的头部；<title>网页的标题信息，出现在标题栏；<html>根标签；
<strong>粗体；<em>斜体;<span>设置单独的样式；<br/>换行标签；
空格 ；<hr/>分隔的横线；
ul-li标签：无序列表（默认每项li前者自带一个圆点）；
ol-li标签：有序列表（默认每项li前都自带一个序号）；
<div>容器 div的命名：例<div id="版块名称">--</div>;
<table>：表格；<tr>表格的行；<td>表格某行的列；
为表格加入边框style="border:1px solid #000";
<cpation>表格标题；
<a>标签：链接到另一个页面：<a href="目标网址" title="鼠标滑过显示的文本">文本</a>;
链接网页在新的浏览器窗口中打开：<a href="目标网址" target="_blank">文本</a>;
<input type="text"/> text 文本输入框 ；<input type="button"/>button 按钮；
<input type="submit"/>submit 提交按钮 ；<input type="file"/>file 上传 ；
<input type="password"/>password密码输入框；
<textarea>文本域 <textarea rows="行数" cols="列数">文本</textarea>
<input type="radio/checkbox" value="值" checked="checked"（默认选中）/>radio 单选框, checkbox 复选框；
<select><option>文本</option></select>创建下拉列表框 selected="selected" 默认选中；
二、CSS
/*注释语句*/；font-size:字体大小；color：字体颜色；font-weight:字体粗细；
字体对齐方式：text-align属性：left，right,center;
控件对齐方式：float属性：left，right;
cursor：pointer； 显示手势；
display: block（显示）、none（隐藏）显示文字或者控件；
background-color:rgba(0,0,0,0.5)；设置DIV透明度
盒模型：
margin：外边距；设置字体、控件的边距，margin: 上边距 右边距 下边距 左边距，例如：margin:10px 20px 30px 40px ，注意：中间都有空格，如果不想设置边距，可以用0px，或者0表示，在设置时候可以直接设置左边距如：margin-left：30px等；
padding：外边距；设置字体、控件的边距，padding: 上边距 右边距 下边距 左边距，例如：padding:10px 20px 30px 40px ，注意：中间都有空格，如果不想设置边距，可以用0px，或者0表示，在设置时候可以直接设置左边距如：padding-left：30px等；
边框：
border-style（边框样式）常见样式有：
&nb
3ff0
sp; dashed虚线 | dotted点线 | solid实线
border-color（边框颜色）
border-weidth（边框宽度）
只为一个方向边框设置形式：
上：border-top
右：border-right
下：border-bottom
左：border-left
width 宽；height 高；
CSS样式的插入方式：
内联式：把CSS代码直接写在现有的HTML标签中，例如：<p style="color:red">这里文字是红色</p>；
嵌入式：把CSS样式代码写在<style type="text/css"></style>标签中；
外联式：把CSS代码写在一个单独的外部文件中，这个CSS样式文件以".css"为扩展名，在<head>内使用<link>标签将CSS样式文件链接到HTML文件内，如：<link href="base.css" rel="stylesheet" type="text/css">;
选择器{
样式；
}
类选择器：.(类选择器名称){CSS样式代码；}
1.英文圆点开头；2、其中类选择器名称可以任意起名；
（1）<span class="stress">文本</span>
（2）.stress{color:red;}
ID选择器：1、为标签设置id="ID名称",而不是class="类名称"；
2、ID选择符的前面是（#）号，而不是英文圆点（.）；
ID选择器和类选择器的区别：（1）ID在文档中只能使用一次，而类可多次；
（2）类可为一个元素同时设置多个样式而ID不行；
三、JS
function 函数名(){ } 定义一个函数，函数名() 调用了一个函数
alert(“内容”); 警告框
document.write("内容")；写入一个内容，可以加入HTML代码
confirm(“内容”)； 是确认框
window.close 关闭窗口 IE
关键字：又叫保留字，特指语言中内部所使用单词，这些单词禁止用来做 变量、常量或者函数的名字。
标识符：是告诉你 变量、常量或者函数的名字只能 字母、下划线、$符号开头。
转义符：可以经常用\ 转义某一个特殊符号 如" 能让脚本正常运行。
变量：可以改变的量，如数值、字符串、浮点、布尔：
变量用var申明。例如var a = 10；这就是告诉你，一个名字叫a的变量赋了一个初始值为10；注意10为整型。
常量：不能改变的量，常量用const申明，例如：const b = 10；这就是告诉你，一个名字叫b的常量值为10，并且这个值不能改变，除非你销毁它；
document.writeln("<pre>") 支持转义字符，如\n换行等，注意：必须在<pre> </pre> 之间写转义；
undenfied 是指找不到某一个对象的属性或者某一个变量，没有赋初始值；
null 是指空置，特指找到了属性，但是找不到或者获取不到值。所以为空；
全局变量和局部变量，一般发生在作用域之内，全局变量一般是在函数的之外，局部的是在函数的里面的；
+ 在通常的情况下是表示字符串的连接符，例如："a"+"b" 输出的就是ab，
+ 在字符串和任何的类型都是连接符。
+ 在整型之间的是做加法运算符。
其他的 - * / 都是运算符，但是注意：如果强制让一个字符串运算的话，结果是NaN，就是特指未知的值。
parseInt() 将其他类型转化为整型，注意转化整型是从左往右，取出全部的整型，当遇到第一个非整型的值时结束。
parseFloat() 将其他类型转化为浮点型。
.style 利用JS设置CSS样式 如document.getElementById("login_message").style.display = "none";
运算符分类
1、算术运算符：+ - * /
2、比较运算符：> < == >= <=
3、赋值运算符：a = b
4、逻辑运算符：&&(同时满足)，||(或，满足一个)，！(非，取反值)。
5、条件运算符：条件 ？条件成立 : 条件不成立
（1） 注意：比较运算符返回，布尔类型也就是true或者false。
（2）注意：&&(与)运算符，如果两个数比较的话，返回后者，注意：同时满足才会满足。
（3）注意：或运算符,如果两个数比较的话，或运算符的特点就是满足一个就是满足，后面的相当于不需要看，所以只要前面满足，返回就是前面后面。
条件判断
1、第一种形式
if(条件){
}else{
}
2、第二种形式
if(条件){
}else if(条件){
}else{
}
3、第三种形式
if(条件){
if(条件){
}else{
}
}else{
}
while的基本写法：
while(条件){
循环操作
}
注意：不要死循环，切记不到万不得已，不要写true。有个限制才会从while循环里出来。
do..while：也是循环写法和while的区别就是：
do..while 先执行一次再判断条件，while先判断条件，再看是否执行。
for( 初始值；条件 ；自增自减情况 ；){
}
switch(){
case 0:
case 1:
default:
}
注意：default用于默认情况，也就是都不满足的情况下执行。
break：在英文单词上的意思是打破，在程序中的意思是跳出当前循环。
contiue：在英文单词上的意思是继续，在程序中的意思是跳出当前循环，进入下一个循环。
++ 自增，++i 与 i++ 的区别：
（1）++i:先++再赋值；
（2）i++:先赋值再++；
一、HTML
<!--注释-->
<h1>标题，<hx>字号逐级变小;<p>定义段落，在其前后创建一些空白；
<body>主体文档；img图片标签：例<img src="1.jpg">；
<head>标签用于定义文档的头部；<title>网页的标题信息，出现在标题栏；<html>根标签；
<strong>粗体；<em>斜体;<span>设置单独的样式；<br/>换行标签；
空格 ；<hr/>分隔的横线；
ul-li标签：无序列表（默认每项li前者自带一个圆点）；
ol-li标签：有序列表（默认每项li前都自带一个序号）；
<div>容器 div的命名：例<div id="版块名称">--</div>;
<table>：表格；<tr>表格的行；<td>表格某行的列；
为表格加入边框style="border:1px solid #000";
<cpation>表格标题；
<a>标签：链接到另一个页面：<a href="目标网址" title="鼠标滑过显示的文本">文本</a>;
链接网页在新的浏览器窗口中打开：<a href="目标网址" target="_blank">文本</a>;
<input type="text"/> text 文本输入框 ；<input type="button"/>button 按钮；
<input type="submit"/>submit 提交按钮 ；<input type="file"/>file 上传 ；
<input type="password"/>password密码输入框；
<textarea>文本域 <textarea rows="行数" cols="列数">文本</textarea>
<input type="radio/checkbox" value="值" checked="checked"（默认选中）/>radio 单选框, checkbox 复选框；
<select><option>文本</option></select>创建下拉列表框 selected="selected" 默认选中；
二、CSS
/*注释语句*/；font-size:字体大小；color：字体颜色；font-weight:字体粗细；
字体对齐方式：text-align属性：left，right,center;
控件对齐方式：float属性：left，right;
cursor：pointer； 显示手势；
display: block（显示）、none（隐藏）显示文字或者控件；
background-color:rgba(0,0,0,0.5)；设置DIV透明度
盒模型：
margin：外边距；设置字体、控件的边距，margin: 上边距 右边距 下边距 左边距，例如：margin:10px 20px 30px 40px ，注意：中间都有空格，如果不想设置边距，可以用0px，或者0表示，在设置时候可以直接设置左边距如：margin-left：30px等；
padding：外边距；设置字体、控件的边距，padding: 上边距 右边距 下边距 左边距，例如：padding:10px 20px 30px 40px ，注意：中间都有空格，如果不想设置边距，可以用0px，或者0表示，在设置时候可以直接设置左边距如：padding-left：30px等；
边框：
border-style（边框样式）常见样式有：
&nb
3ff0
sp; dashed虚线 | dotted点线 | solid实线
border-color（边框颜色）
border-weidth（边框宽度）
只为一个方向边框设置形式：
上：border-top
右：border-right
下：border-bottom
左：border-left
width 宽；height 高；
CSS样式的插入方式：
内联式：把CSS代码直接写在现有的HTML标签中，例如：<p style="color:red">这里文字是红色</p>；
嵌入式：把CSS样式代码写在<style type="text/css"></style>标签中；
外联式：把CSS代码写在一个单独的外部文件中，这个CSS样式文件以".css"为扩展名，在<head>内使用<link>标签将CSS样式文件链接到HTML文件内，如：<link href="base.css" rel="stylesheet" type="text/css">;
选择器{
样式；
}
类选择器：.(类选择器名称){CSS样式代码；}
1.英文圆点开头；2、其中类选择器名称可以任意起名；
（1）<span class="stress">文本</span>
（2）.stress{color:red;}
ID选择器：1、为标签设置id="ID名称",而不是class="类名称"；
2、ID选择符的前面是（#）号，而不是英文圆点（.）；
ID选择器和类选择器的区别：（1）ID在文档中只能使用一次，而类可多次；
（2）类可为一个元素同时设置多个样式而ID不行；
三、JS
function 函数名(){ } 定义一个函数，函数名() 调用了一个函数
alert(“内容”); 警告框
document.write("内容")；写入一个内容，可以加入HTML代码
confirm(“内容”)； 是确认框
window.close 关闭窗口 IE
关键字：又叫保留字，特指语言中内部所使用单词，这些单词禁止用来做 变量、常量或者函数的名字。
标识符：是告诉你 变量、常量或者函数的名字只能 字母、下划线、$符号开头。
转义符：可以经常用\ 转义某一个特殊符号 如" 能让脚本正常运行。
变量：可以改变的量，如数值、字符串、浮点、布尔：
变量用var申明。例如var a = 10；这就是告诉你，一个名字叫a的变量赋了一个初始值为10；注意10为整型。
常量：不能改变的量，常量用const申明，例如：const b = 10；这就是告诉你，一个名字叫b的常量值为10，并且这个值不能改变，除非你销毁它；
document.writeln("<pre>") 支持转义字符，如\n换行等，注意：必须在<pre> </pre> 之间写转义；
undenfied 是指找不到某一个对象的属性或者某一个变量，没有赋初始值；
null 是指空置，特指找到了属性，但是找不到或者获取不到值。所以为空；
全局变量和局部变量，一般发生在作用域之内，全局变量一般是在函数的之外，局部的是在函数的里面的；
+ 在通常的情况下是表示字符串的连接符，例如："a"+"b" 输出的就是ab，
+ 在字符串和任何的类型都是连接符。
+ 在整型之间的是做加法运算符。
其他的 - * / 都是运算符，但是注意：如果强制让一个字符串运算的话，结果是NaN，就是特指未知的值。
parseInt() 将其他类型转化为整型，注意转化整型是从左往右，取出全部的整型，当遇到第一个非整型的值时结束。
parseFloat() 将其他类型转化为浮点型。
.style 利用JS设置CSS样式 如document.getElementById("login_message").style.display = "none";
运算符分类
1、算术运算符：+ - * /
2、比较运算符：> < == >= <=
3、赋值运算符：a = b
4、逻辑运算符：&&(同时满足)，||(或，满足一个)，！(非，取反值)。
5、条件运算符：条件 ？条件成立 : 条件不成立
（1） 注意：比较运算符返回，布尔类型也就是true或者false。
（2）注意：&&(与)运算符，如果两个数比较的话，返回后者，注意：同时满足才会满足。
（3）注意：或运算符,如果两个数比较的话，或运算符的特点就是满足一个就是满足，后面的相当于不需要看，所以只要前面满足，返回就是前面后面。
条件判断
1、第一种形式
if(条件){
}else{
}
2、第二种形式
if(条件){
}else if(条件){
}else{
}
3、第三种形式
if(条件){
if(条件){
}else{
}
}else{
}
while的基本写法：
while(条件){
循环操作
}
注意：不要死循环，切记不到万不得已，不要写true。有个限制才会从while循环里出来。
do..while：也是循环写法和while的区别就是：
do..while 先执行一次再判断条件，while先判断条件，再看是否执行。
for( 初始值；条件 ；自增自减情况 ；){
}
switch(){
case 0:
case 1:
default:
}
注意：default用于默认情况，也就是都不满足的情况下执行。
break：在英文单词上的意思是打破，在程序中的意思是跳出当前循环。
contiue：在英文单词上的意思是继续，在程序中的意思是跳出当前循环，进入下一个循环。
++ 自增，++i 与 i++ 的区别：
（1）++i:先++再赋值；
（2）i++:先赋值再++；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【嘉兴东臣php】HTML+CSS+JS基础学习笔记
- 【嘉兴东臣php】HTML+CSS+JS周总结
- 利用CSS进行网页布局
- CSS设计表格（上）--样式设计及全选功能
- border制作带箭头的提示框等好看的效果
- CSS.DIV网页样式与布局学习总结
- 四个好看的CSS样式表格
- 什么是CSS BFC(Block Formatting Context)
- CSS减肥的工具–Firefox插件 CSS Usage
- 用JS来切换CSS，很好很简单
- CSS3之边框属性border
- 关于js中取非行间样式的兼容问题
- 兼容IE6/IE7/IE8/FireFox的css hack
- 纯代码实现CSS圆角
- animation-timing-function 之 step
- 动态加载js和css
- 你真的了解CSS3硬件加速吗？
- 你不知道的css中的expression
- 前端div+css布局
- xaml的margin和css的margin对比