马士兵html javascript css学习总结
HTML:
1>:html不区分大小写,但推荐用小写。
2>:<style>…</style>定义CSS格式
<Script language=“”>…</Script>
用于定义脚本,Eg. Javascript
3>才常见标签:
超级链接,跳转到另一文件
<a href=“url” target=“TargetWindow”>文字
</a>
*标题字体大小--<h#> #=1、2、3、4、5、6
*分隔线--<hr>
* :空格
*<p>…</p>:分段落现实
*<div>…</div>(一层) <span>…</span>(行内块)
*分块显示:
<ul>…</ul>(列表)
<li type=“disc circle square”>…
*符号列表:
<ol>…</ol>
<li>…
*数字列表
*<br> 换行
*<nobr>…</nobr> 不换行
*<pre></pre>保留原有格式
*<marquee></marquee>跑马灯效果
*<blockquote></blockquote>
*<dl><dt><dd>
*对齐—align
<h1 align=“”>
<div align=“”>
<table align=“”>
<hr align=“”>
……
取值:left right center top middle bottom
*<img src=“” align=“” alt=“” border=“”>
Src 图片路径,一般使用相对路径
Alt 图片无法显示时显示的文字
Border 边框的厚度
Align = left right top middle bottom图文混排时用于和图片的对齐
4>表单:<form>……</form>
*<form>的属性
Method: (get post)
Get 发送较少数据(256byte),显示在url中,url/userinfo?username=张三&password=hehe
Post 数据长度无限制,不会显示在url中
Action:Form中数据交给服务器端哪个程序进行处理
*eg:<form method=“post” action=“user.jsp>……</form>
**位于<form>之中,接收用户输入:
格式:<input type=“” name=“”>
type:
text radio checkbox password hidden select submit reset button textarea image
name:
提交到服务器端的变量的名字
文本框 text
<input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度
size – 文本框宽度(字符)
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮
<input type=“radio” name=“” value="" checked>
典型用法 : 同一名字,不同的值
错误的用法 : 不同的名字
复选框
<input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name,不同的value
隐藏域
<input type=“hidden” name=“” value=“”>
不显示在网页中
通常用作向下一个页面传输已知信息或表单的附加信息
*分块:
<frameset cols=“20%,*”> <frame name=“left” src=“a.htm”> <frameset rows=“40%,*”> <frame name=“righttop” src=“b.htm”> <frame name=“rightbottom”
src=“c.htm”> </frameset></frameset>
html中username表单的验证:
<input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
<span id="usernameErr"></span>
js代码:
function checkUserName(ssn){
if( ssn.length<3 || ssn.length>18 ) {
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-18位!</font>";
form.username.focus()
return false;
}
CSS:(不用记忆,会改即可)
1>字体属性:
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
2>颜色与背景属性:
属性 含义 属性值
Color 颜色 颜色值
Background-color 背景色 颜色值
Background-image 背景图案 图片路径
Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滚动 Scroll | fix
Background-position 背景图案初始位置 % | n em | top | left | right | bottom
3>文本属性:
属性 含义 属性值
word-spacing 单词间距 n em
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top|middle| bottom| text-bottom
text-transform