黑马程序员--html和css基础
2013-10-24 22:33
585 查看
--------------------- ASP.Net+Android+IO开发S、.Net培训、期待与您交流！
----------------------
(1)html
格式
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
（2）常用特殊字符
空格 ； 大于号<；小于号>
（3）常用标签
文字格式
<br/>回车两之间没有空白知识换行 <p>分段两端之间有较大空白
居中<center></center>
h标签 从<h1>到<h6>表示不同大小字体从大到小排序只有6种
<b></b>粗体
<font></font字体标签><font color="颜色"size="数字">显示字</font>
超链接<a href="http://www.adada.com">显示的字</a> 属性target 设定"_blank"在新窗口中打开
<a href="http://www.adasd.com"><img src="http://www/adad"/></a>
URL： 资源在网络中的位置 http://124.0.0.1/a.html
"/"表示网站根目录 "../"表示父目录，"../../"表示父目录的父目录
页内跳转
<a name="Last">呆呆地</a> <a href="#Last">跳掉name处</a>
图片
<img src="a.jpg"/> alt属性为图片无法显示是显示的字 title 鼠标放上去显示的字
width height 调整图片大小 border 边框设定
（4）列表表格
列表<ul><li>灌水区</li><li>版务区</li></ul>
表格<table><tr><td>列</td></tr></table>
一般用表头替代<tr><thead>表头</thead>
(5)表单
<form></form> 所有表单内用都要写到这个标签里
<from action="提交到得页面"></from>
<input type="text">文本框
<input type="checkbox">多选框
<input type="button">按钮
type 可选值 submit 提交按钮 file文件选择框 image图片 password密码框 radio单选按钮 rest重置
text 属性 value text的值 maxlength可输入最大值 readonly 只可看不可写 readonly="readonly"
checkbox 属性 checked="checked" 默认选中
file 用file form属性enctype必须设置成multipeart/form-date method属性必须为 post
radio 属性 name 相同的为一组 name一样的一组才能互斥
select标签下拉菜单
<select><option>显示内容<option></select>
select属性 size 的值就是显示出来的列表数量 size为1就是下拉菜单
option 属性selected="selected" 就是默认选项值
<optgroup>分组的内容<optgroup>
<textarea></textarea> 多行文本框 属性cols rows 设定最大行列
<Lable></Lable>聚焦 点姓名 光标就会出现在text中<Lable for="name">姓名</lable><input id="name"type="text"/>
<fieldset >内容<fieldset> 将内容放到一起规整 看起来更规整
（1）css
格式一<input type="text" value="123"style="background-color:Red;border-color:Green"/>
格式二 在<head>标签里边 <style type="text/css">input{background-color:Red;border-color:Green}</style> 把所有input标签设置格式
格式三 引用其他文件夹下的css样式表 在<head><link type="text/css" rel="Stylesheet" href="css.css"
(2)Div, Span
Div 把内容包到一起放到矩形区域里当成一块处理 前后有换行符
Span 把内容也放到一起不是矩形，是随着数据而改变的什么形状也行
（3）css常用样式
css计量单位
px 像素 % em相对单位 width：20px
background-color：Red 背景颜色 color文本颜色
border-style：solid 边框风格 实线虚线 点（dotted）等 border-color：边框颜色border-width 边框宽度
style="border-color:Red;border-width:1px"
display: 元素是否显示 none
cursor 鼠标在元素上时显示的光标图标，cursor默认值光标 pointer手 wait忙漏斗 help 帮助
Li LIST-STYLE-TYPE：none 不显示圆点
（4）样式选择器
标签选择器 input{border-color：Red}
class选择器 .名字{background：Red} <div class="名字">ddd</div>
标签+Class选择器
标签名.Class
input.accountor{text-align:right;}
<input class="accountor"type="text"value="ddd"/>
id选择器
#id名字 {border-color：Red;}
#id user{color:Yellow;}
<input type="txst" id="user"/>
伪选择器
A:visited：超链接点击过的样式 A:active 选中超连接时 A:link 超链接未被访问时的状态A:hover 鼠标移动到超链接的状态
超链接死格式复制黏贴就行了
A:visited{TEXT-DECORATION:none}A:active{TEXT-DECORATION:none}A:lin{TEXT_DECORATION:none}
A:hover{TEXT-DECORATION:underline}
（5）javascript
在<head>标签中
<script type="text/javascript">
alert(new Date(),toLacelDateString());
&l
a022
t;/script>
javascript 可以写成单独的文件中引用时<script src="test.js" type="text/javascript"></script>
事件
在超链接里点击执行javascript：<a href="javascript:alert()">hahah</a>特殊只有 超链接里href 才加 javascript：。。。。
当点击按钮时<input type="button" onclick="alert(99)"value="久久"/>
变量
var i=0； 此时就是整形 i="abc" 此时就是字符串型 嫁鸡随鸡嫁狗随狗。
判断变量初始化
var x
if（x=null）{alert（"null"）；}
if{typeof(x)=="undefined"}
if(!x){alert("不x");}
函数 格式 声明一个函数当成类使用
function add（i1，i2）{return i1+i2；}不需要返回值，参数不需要类型
匿名函数 function（）{}
js面向对象基础
function Person（name，age）{
this.name=name;
this.age=age;
this.SayHello=function(){
alert("你好，我是"+this.name+",+我"+this.age+"岁了");
}}
var p1=new Person("tom",20);//不要丢了new 在js中方法要当成类使用
p1.SayHello();
Array 对象 数组 动态的没有长度
var name= new Array();
for(var k in dict){alert(k);} 遍历一个数组dict 相当于C#中foreach
简化声明数组 var arr=[30,20,40];
字典风格简化创建 var arr1={"tom":30,"jerry":50}
----------------------
(1)html
格式
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
（2）常用特殊字符
空格 ； 大于号<；小于号>
（3）常用标签
文字格式
<br/>回车两之间没有空白知识换行 <p>分段两端之间有较大空白
居中<center></center>
h标签 从<h1>到<h6>表示不同大小字体从大到小排序只有6种
<b></b>粗体
<font></font字体标签><font color="颜色"size="数字">显示字</font>
超链接<a href="http://www.adada.com">显示的字</a> 属性target 设定"_blank"在新窗口中打开
<a href="http://www.adasd.com"><img src="http://www/adad"/></a>
URL： 资源在网络中的位置 http://124.0.0.1/a.html
"/"表示网站根目录 "../"表示父目录，"../../"表示父目录的父目录
页内跳转
<a name="Last">呆呆地</a> <a href="#Last">跳掉name处</a>
图片
<img src="a.jpg"/> alt属性为图片无法显示是显示的字 title 鼠标放上去显示的字
width height 调整图片大小 border 边框设定
（4）列表表格
列表<ul><li>灌水区</li><li>版务区</li></ul>
表格<table><tr><td>列</td></tr></table>
一般用表头替代<tr><thead>表头</thead>
(5)表单
<form></form> 所有表单内用都要写到这个标签里
<from action="提交到得页面"></from>
<input type="text">文本框
<input type="checkbox">多选框
<input type="button">按钮
type 可选值 submit 提交按钮 file文件选择框 image图片 password密码框 radio单选按钮 rest重置
text 属性 value text的值 maxlength可输入最大值 readonly 只可看不可写 readonly="readonly"
checkbox 属性 checked="checked" 默认选中
file 用file form属性enctype必须设置成multipeart/form-date method属性必须为 post
radio 属性 name 相同的为一组 name一样的一组才能互斥
select标签下拉菜单
<select><option>显示内容<option></select>
select属性 size 的值就是显示出来的列表数量 size为1就是下拉菜单
option 属性selected="selected" 就是默认选项值
<optgroup>分组的内容<optgroup>
<textarea></textarea> 多行文本框 属性cols rows 设定最大行列
<Lable></Lable>聚焦 点姓名 光标就会出现在text中<Lable for="name">姓名</lable><input id="name"type="text"/>
<fieldset >内容<fieldset> 将内容放到一起规整 看起来更规整
（1）css
格式一<input type="text" value="123"style="background-color:Red;border-color:Green"/>
格式二 在<head>标签里边 <style type="text/css">input{background-color:Red;border-color:Green}</style> 把所有input标签设置格式
格式三 引用其他文件夹下的css样式表 在<head><link type="text/css" rel="Stylesheet" href="css.css"
(2)Div, Span
Div 把内容包到一起放到矩形区域里当成一块处理 前后有换行符
Span 把内容也放到一起不是矩形，是随着数据而改变的什么形状也行
（3）css常用样式
css计量单位
px 像素 % em相对单位 width：20px
background-color：Red 背景颜色 color文本颜色
border-style：solid 边框风格 实线虚线 点（dotted）等 border-color：边框颜色border-width 边框宽度
style="border-color:Red;border-width:1px"
display: 元素是否显示 none
cursor 鼠标在元素上时显示的光标图标，cursor默认值光标 pointer手 wait忙漏斗 help 帮助
Li LIST-STYLE-TYPE：none 不显示圆点
（4）样式选择器
标签选择器 input{border-color：Red}
class选择器 .名字{background：Red} <div class="名字">ddd</div>
标签+Class选择器
标签名.Class
input.accountor{text-align:right;}
<input class="accountor"type="text"value="ddd"/>
id选择器
#id名字 {border-color：Red;}
#id user{color:Yellow;}
<input type="txst" id="user"/>
伪选择器
A:visited：超链接点击过的样式 A:active 选中超连接时 A:link 超链接未被访问时的状态A:hover 鼠标移动到超链接的状态
超链接死格式复制黏贴就行了
A:visited{TEXT-DECORATION:none}A:active{TEXT-DECORATION:none}A:lin{TEXT_DECORATION:none}
A:hover{TEXT-DECORATION:underline}
（5）javascript
在<head>标签中
<script type="text/javascript">
alert(new Date(),toLacelDateString());
&l
a022
t;/script>
javascript 可以写成单独的文件中引用时<script src="test.js" type="text/javascript"></script>
事件
在超链接里点击执行javascript：<a href="javascript:alert()">hahah</a>特殊只有 超链接里href 才加 javascript：。。。。
当点击按钮时<input type="button" onclick="alert(99)"value="久久"/>
变量
var i=0； 此时就是整形 i="abc" 此时就是字符串型 嫁鸡随鸡嫁狗随狗。
判断变量初始化
var x
if（x=null）{alert（"null"）；}
if{typeof(x)=="undefined"}
if(!x){alert("不x");}
函数 格式 声明一个函数当成类使用
function add（i1，i2）{return i1+i2；}不需要返回值，参数不需要类型
匿名函数 function（）{}
js面向对象基础
function Person（name，age）{
this.name=name;
this.age=age;
this.SayHello=function(){
alert("你好，我是"+this.name+",+我"+this.age+"岁了");
}}
var p1=new Person("tom",20);//不要丢了new 在js中方法要当成类使用
p1.SayHello();
Array 对象 数组 动态的没有长度
var name= new Array();
for(var k in dict){alert(k);} 遍历一个数组dict 相当于C#中foreach
简化声明数组 var arr=[30,20,40];
字典风格简化创建 var arr1={"tom":30,"jerry":50}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 