HTML CSS学习笔记
head中的常用标签
<title>文字</title>
“文字”将显示在浏览器标题栏上
<meta>：用于设置一些头信息
<metahttp-equiv=“content-type” content=“text/html;charset=gb2312”>
<metahttp-equiv=“refresh” content=“3;url=http://www.foo.com”>
<metaname="keywords" content="your keywords">
<metaname="description" content="your description">
<metahttp-equiv=“expires” content=“0”>（不缓存，expires过时）
<meta http-equiv=“pragma” content=“no-cache”>(不要再代理服务器上缓存)
<metaname=“generator | author | copyright” content=“…..”>(generator有什么工具生存的代码)
<style>…</style>定义CSS格式
<Scriptlanguage=“”>…</Script>
用于定义脚本，Eg. Javascript
超级链接，跳转到另一文件
<a href=“url” target=“TargetWindow”>文字
</a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”
链接到url的point部分
在url文档中用<aname=“point”></a>标识
URL
Uniform ResourceLocator（统一资源定位符）
网络协议＋主机名＋端口号＋资源名（定位标记）
http://www.bjsxt.com:80/index.html#top
带有参数的url 及 url编码问题 见Servlet / JSP部分
URN
Uniform ResourceName
持久可用的资源标准名称
例如邮箱名[email protected]
URI
Uniform ResourceIdentifier
包含URL和URN
表格和表单：
表格（table）
tr是一行
td是一列
th是表头
align是横向的对齐
valign是纵向的对齐
rowspan=“2”就是占用两行。
colspan= "2"就是占用两列。
用这两个标签有点像word里面的表格的合并单元格。
表单（form可以用接受用户的输入）
form是有两个重要的属性：
method：数据提交的方式。一般有两种：get，post。区别在于：get是信息会跟在url地址后面，把数据提交。格式如下：显示在url中，url/userinfo?username=张三&password=hehe
一般是少于256个字节。post不会在url当中显示，没有字数限制。
action：填好的内容，提交服务器的哪个文件上。（01.html）
input type=text name=“username” text就是文本框，username就是变量名。
input type=password name="pwd" password就是加密文本框 pwd是变量名
单选框是radio
<td>
<inputtype=radio name="gender" value="male" >男
<inputtype=radio name="gender" value="female">女
<inputtype=radio name="gender" value="baomi" checked>保密
</td>
value就是变量gender的值，checked就是默认选中的值。
radio的典型的用法：同一个名字，不同的值。
打钩多选框是checkbox
<td>你感兴趣</td>
<td>
<inputtype="checkbox" name="interest" value="vc"checked>VC
<inputtype="checkbox" name="interest" value="vb"checked>VB
<inputtype="checkbox" name="interest"value="vfoxpro">VF
<inputtype="checkbox" name="interest"value="vjava">VJ
<br>
<inputtype="checkbox" name="interest" value="bc">BC
<inputtype="checkbox" name="interest"value="cobol">CO
<inputtype="checkbox" name="interest"value="java">JA
<inputtype="checkbox" name="interest"value="delphi">Delphi
</td>
checkbox的典型的用法：同一个名字，不同的值。只是可以选择多个对象。
<input type="hidden"name="interest" value="jsp">
这个变量是看不见的，名字是interest，值是jsp。
select是栏目多选框
<td>
<selectname="interest2" size=8 multiple>
<optionvalue="vc" selected>VC</option>
<optionvalue="vb" selected>VB</option>
<optionvalue="vfoxpro">VF</option>
<optionvalue="vjava">VJ</option>
<optionvalue="bc">BC</option>
<optionvalue="cobol">CO</option>
<optionvalue="java">JA</option>
<optionvalue="delphi">Delphi</option>
</select>
</td>
变量的名字name="interest2"，值就是value，selected就是默认选中的值。
select单选，下拉框
<td>
<selectname="province">
<optionvalue=0>请选择 </option>
<optionvalue=34>安徽</option>
<optionvalue=11>北京</option>
<optionvalue=50>重庆</option>
<optionvalue=35>福建</option>
<optionvalue=62>甘肃</option>
<optionvalue=44>广东</option>
<optionvalue=45>广西</option>
<optionvalue=52>贵州</option>
<optionvalue=46>海南</option>
<optionvalue=13>河北</option>
<optionvalue=23>黑龙江</option>
<optionvalue=41>河南</option>
<optionvalue=42>湖北</option>
<optionvalue=43>湖南</option>
<optionvalue=32>江苏</option>
<optionvalue=36>江西</option>
<optionvalue=22>吉林</option>
<optionvalue=21>辽宁</option>
<optionvalue=64>宁夏</option>
<optionvalue=15>内蒙古</option>
<optionvalue=63>青海</option>
<optionvalue=31>上海</option>
<optionvalue=14>山西</option>
<optionvalue=37>山东</option>
<optionvalue=51>四川</option>
<optionvalue=61>陕西</option>
<optionvalue=12>天津</option>
<optionvalue=54>西藏</option>
<optionvalue=65 selected>新疆</option>
<optionvalue=53>云南</option>
<optionvalue=33>浙江</option>
<optionvalue=71>台湾</option>
<optionvalue=81>香港</option>
<optionvalue=82>澳门</option>
<optionvalue=0>其他</option>
</select>
</td>
<td>
<textarearows="12" cols="80" name="intro"wrap="hard"></textarea>
</td>
12行，80列，变量名是intro，硬换行，就是单词到头就换行。
button按钮
<input type="submit"value="提交"> 就是提交到服务器
<input type="reset"value="重置"> 就是reset
<input type="button" value="ok">点的没反应，需要用javascript来加上响应。
Frame也就是框架，效果是把当前的页面非常好多个不同的部分。
在frame的页面当中是没有body的。
frameset 框架
³ <frameset rows=“row1,row2…” cols=“col1,col2…”>
<frame name=“” src=“” noresize>
<frame name=“” src=“”scrolling=“”>
……
</frameset>
多框架嵌套
<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>
注意，使用框架的时候，是没有<body></body>的。
CSS样式表就是cascade style sheet。
用来装饰HTML、XML的标记集合。
描述的如下是css。其实css是用来装修标签的。
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
<style type="text/css">
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
</style>
把H1的标签按照{font-size:16pt;color:red}装修。
把H2的标签按照{font-size:10pt;color:green}装修
可以把css单独拉出来，作为一个单独的文件
<html>
<head>
<title>af</title>
<link REL=stylesheethref="03.css" type="text/css"> //连接一个外部样式表，对应的03.css文件
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>
这个就是03.css
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
有两种以上的装修风格，应用在同一个元素上。才用的是就近原则，不是重叠。
<html>
<head>
<link REL=stylesheethref="03.css" type="text/css">
</head>
<body>
<h1style="font-size:20pt;color:blue">Hello</h1>
<h2 style="font-size:10pt;background:yellow;font-family:courier">World</h2>
<h1>Hello2</h1>
</body>
</html>
比如这里就有两个装修风格，那么就是就近才用装修风格。
CSS选择符：Class选择符， ID选择符
Class对应“.”就是说如果是code，就是用{font-size:16pt;color:red}，如果是comment就是用{font-size:20pt;color:red}。
<pre></pre>
是保留原有格式、
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<style type="text/css">
P.code{font-size:16pt;color:red}
.comment{font-size:20pt;color:red}
</style>
</head>
<body>
<divclass="comment">第一个Java程序第一个Java程序</div>
<P class="comment">//第一个Java程序</p>
<pre>
<P class="code">
public class Hello {
publicstatic void main(String args[]) {
System.out.println("HelloWorld!");
}
}
</P>
</pre>
</body>
</html>
上来直接写“.”就是说所有的都是这个装修风格。
<html>
<head>
<style type="text/css">
.code{font-size:16pt;color:red}
</style>
</head>
<body>
<h1 class="code">//第一个Java程序</h1>
<pre>
<P class="code">
public class Hello {
publicstatic void main(String args[]) {
System.out.println("HelloWorld!");
}
}
</P>
</pre>
</body>
</html>
ID选择符ID对应“#”
<html>
<head>
<style type="text/css">
#code1{font-size:16pt;color:red}
#code2{font-size:16pt;color:blue}
</style>
</head>
<body>
<h1 id="code1">//第一个Java程序</h1>
<font id="code1">//第一个Java程序</font>
<div id="code1">//第一个Java程序</div>
<pre>
<P id="code2">
public class Hello {
publicstatic void main(String args[]) {
System.out.println("HelloWorld!");
}
}
</P>
</pre>
</body>
</html>
ID选择符和Class选择符的区别：Class可以一样，id不可以。ID还可以使用在javaScript当中。
<html>
<head>
<style type="text/css">
h1,p{font-size:30;color:red} //碰到h1，或者p的时候采用这样的装修风格。
p a{font-size:45;color:yellow}
</style>
</head>
<body>
<h1>//第一个Java程序</h1>
<pre>
<P>
public class Hello {
publicstatic void main(String args[]) {
System.out.println("HelloWorld!");
}
}
</P>
</pre>
<p>
<aname="test">hello</a>
</p>
</body>
</html>
a:link{color:green;text-decoration:none} 超链接
a:active{color:blue;text-decoration:none} 鼠标放上面，但是还没有点
a:visited{color:orange;text-decoration:none}已经访问过
a:hover{color:red;text-decoration:underline}鼠标滑过，有下划线