您的位置：首页 > 职场人生

黑马程序员--html和css基础

2012-12-30 09:28 435 查看

---------------------- Windows Phone 7手机开发、.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());

</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}

--------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航