您的位置：首页 > Web前端 > CSS

HTML 和 CSS 资料总结

2013-06-14 10:14 302 查看
<html> 开始

<head> 头

<title> 凭什么你是标题?

<body> 身体

设置一个字体的属性<font>

示例:<font color="#FF0000" size="6">演示字体和属性</font>

---------------------------------------------------------

导入一个图片让他具有超链接功能<imp src>

示例:

<!--这个呢.是让图片有超链接的功能.具体操作步骤是点击上面的设计.然后选取要连接的部分-->
<img src="Demoimp2.jpg" alt="演示" width="443" height="445" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="246,197,44" href="#" target="_top" />


---------------------------------------------------------

定义一个列表,带序列号的.<ol>

示例:

<!--<ol>让程序有上下级列表的关系.给列表前面加上序号.start相当于从第几个序号开始的-->
<ol type="a" start="3">
<li>哈哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>


---------------------------------------------------------

定义一个列表<ul><dl>

示例<ul>:

ul:中的li标签本身就具备了缩进.
<!--ul:可也可以让程序有上列表下级的关系.而且可以在前面加上原点.或者方框之类的;-->
<ul type="disc">
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
</ul>
示例<dl>:
<!--
注释文字
dl:定义列表的范围
dt:定义上层项目条目
dd:定义下层项目条目.而且dd具备缩进功能的效果.
-->
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dt>部门名称</dt>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
</dl>


---------------------------------------------------------

定义一个标题:

示例:<h1>-<h6>+


---------------------------------------------------------

整体示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
</head>

<body>
<!--给顶部定义一个标记可以用来快速返回顶部-->
<a name="top">顶部</a>
<!--<hr /> 代表分割线.-->
<hr />
<!--导入一个图片 src是图片的地址  alt是图片的信息  width是图片的大小-->
<img src="Demoimp.jpg" alt="这是一个图片" width="600" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="circle" coords="335,280,63" href="Iframe.html" />
</map>
<hr />
<!--这个呢.是让图片有超链接的功能.具体操作步骤是点击上面的设计.然后选取要连接的部分-->
<img src="Demoimp2.jpg" alt="演示" width="443" height="445" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="246,197,44" href="#" target="_top" />
</map>

<hr />
<!--
ol:中的li标签本身就具备了缩进.
-->
<!--<ol>让程序有上下级列表的关系.给列表前面加上序号.start相当于从第几个序号开始的-->
<ol type="a" start="3">
<li>哈哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>

<!--
ul:中的li标签本身就具备了缩进.
-->
<!--ul:可也可以让程序有上列表下级的关系.而且可以在前面加上原点.或者方框之类的;-->
<ul type="disc">
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
</ul>
<!--
注释文字
dl:定义列表的范围
dt:定义上层项目条目
dd:定义下层项目条目.而且dd具备缩进功能的效果.
-->
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dt>部门名称</dt>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
</dl>
<hr />

<!--设置字体的属性.font-->
<font color="#FF0000" size="6">演示字体和属性</font>
<h6>六级标题</h6>
<h2>二级标题</h2>

<!--a>b  c<a-->
a<b c>a
<html >

<!--设置超链接连接的是上面的超链接的名字.就可以直接回到顶部了-->
<a href="#top">回到顶部</a>
</body>
</html>


---------------------------------------------------------

定义一个超链接<a href...>

示例:

<a href="http://www.kuaibo.com/mime/变形金刚3.remb">变形金刚3.rmvb</a>


---------------------------------------------------------

定义一个表格<table...>:

示例:

<!--建立表格区域 table   border是表格线的粗细  bordercolor是表格线的颜色  cellpadding是文字距离上面表格的距离  width是表格

的大小如果加上%是距离边框的长度.动态的-->
<table border="1" bordercolor="#FF0000" cellpadding="10" cellspacing="2" width="600">

<!--tr代表表格的一行--<th 和 td代码行数>
<tr>
<!--th标题文字. rewspan代表占几列-->
<tr>
<!--在表格区域中加上caption 设置整个表格的标题-->
<caption>表格 </caption>
<th colspan="2">
人员信息
</th>
</tr>
<tr>
<th width="50%" height="50%">
姓名    </th>
<th width="50%">
年龄    </th>
</tr>
<tr>
<td>
孙百鑫
</td>
<td>
21
</td>
</tr>


---------------------------------------------------------

创建一个注册界面和一个服务器.注册之后在服务器给出回款信息

示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<!--
form:标签中常见的属性定义:
action:指定表单组件的发送位置,如果没有定义action属性,那么默认提交到当前页面.
method:定义表单体提交的方式.只用两种方式常用.get 和post .默认是get.

get和post的区别:
1.
get: 会将提交的信息显示在地址栏上
post:不会讲提交的信息显示在地址烂上
2.
get: 对于敏感信息不安全
post: 对于敏感信息安全,因为不显示.

3.
get:因为显示在地址栏,而地址栏的信息数据量是优先的,所以不可以提交大数据.
post:可以提交大体积的数据.

4.
get:会将信息封装到请求行,也就是http请求消息头之前
post: 会将信息封装在请求体.也就是http请求消息头之后,请求体和请求头之间是通过空格来进行分割的

注意滴特殊之处:
对于服务器是tomcat服务器.
当提交中文时
get:提交.服务端介绍到中文数据.会用默认的编码表iso8859-1解码,会出现乱码.所以要对该乱码进行一次编码操作.当服务器请求时.会将数

据封装到了一个请求对象中,request对象.可以通过该对象的String name = getParamter("user"); 获取客户端提交的用户名.但是解码用到

ISO8859-1.name会出现乱码. newString(name.getBytes("iso8859-1"),"gbk");

post提交:服务端收到中文,可以使用贬义词在结一次的方式.也就是和get一样的方式可以完成乱码的解决.  通过他有另一个方式.就是直接

食欲哦该呢request对象.调用一个方法.setCharacterEncoding("GBK"); 只要设置了请求对象中的数据的编码表.那么String name =

request.getParamter("user");那么name的值直接解码以后的正确数据.

注意:为什么get方法用方法.setCharacterEncoding("GBK");就不行呢?
因为该方法支队请求中的数九进行解码.不对请求头中的数据进行解码

综上所述:
以后再进行表达提交时:建议使用post提交>.
-->

<!--fieldset 相当于给表格外部加了一圈框线-->
<fieldset>
<!--legend 框线中的内如-->
<legend>我的注册区域</legend>
<!--form 将数据传输的服务端.  method是传输方式.模式是get-->
<form action="http://192.168.1.101:10002" method="post">
<!--建立表格区域.设置表格属性-->
<table border="1" bordercolor="#66FF33" width="600" cellpadding="10" cellspacing="0">
<tr>
<!--设置占几列  并用th标题-->
<th colspan="2">
注册页面    </th>
</tr>

<tr>
<td>
用户名:    </td>
<td>
<!--input  type 有好多属性.text文本条属性.一般用来添加账号之类的 一般要设置名字name因为传到服务器不知道是哪个-->
<input type="text" name="user"/>    </td>
</tr>
<tr>
<td>
密码:    </td>
<!--input  type 有好多属性.password.一般用来设置密码之类的. 一般要设置名字name因为传到服务器不知道是哪个-->
<td><input type="password" name="psw2" /></td>
</tr>
<tr>
<td>
确认密码:    </td>
<td>
<input type="password" name="psw" />    </td>
</tr>
<tr>
<td>
性别:    </td>
<td>
<!--radio 设置单选. 比如性别之类的.   但是单选的话名字必须相同.因为只可以选一个. checked想相当于默认值-->
<input type="radio" name="sex" value="nan" checked="checked"/>男
<input type="radio" name="sex" value="nv" />女    </td>
</tr>
<tr>
<td>
技术:    </td>
<td>
<!---checkbox 一般用来多选.比如爱好之类的 名字也要相同.但是他们的值value是不同的-->
<input type="checkbox" name="tech" value="java" />Java
<input type="checkbox" name="tech" value="css" />Css
<input type="checkbox" name="tech" value="html" />Html    </td>
</tr>
<tr>
<td>
国家:    </td>
<td>
<!--select下拉菜单,很多见. 当然也需要定义name名字-->
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="usa">美国</option>
<option value="en">英国</option>
</select>    </td>
</tr>

<tr>
<th colspan="2">
<!--submit 将数据发从出去.reset 从新设置-->
<input type="submit" value="提交数据" />
<input type="reset" value="从新设置" />    </th>
</tr>
</table>

</form>
</fieldset>
</body>
</html>


服务器代码:

package day01;

import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;

public class Test{
public static void main(String[] args) throws Exception{
ServerSocket ss = new ServerSocket(10002);
Socket s = ss.accept();
InputStream in = s.getInputStream();

byte[] buf = new byte[1024];

int len = in.read(buf);

System.out.println(new String(buf,0,len));

PrintWriter out = new PrintWriter(s.getOutputStream(),true);

out.println("<font color ='FF0000' size = 7> 提交成功 </font>");

s.close();
ss.close();
}
}


---------------------------------------------------------

写一个画中画标签

示例:

<iframe src="http://www.baidu.com" height="300" width="300">您的浏览器不支持画中画</iframe>

---------------------------------------------------------

浏览器没1秒一刷新 ,也可以定义目标.几秒一跳转

示例:

<meta http-equiv="refresh" content="1" />;

---------------------------------------------------------

<div>和<span>

示例:

div代表两行两个数据..span代表一行两个数据.

<div>
div区域
</div>
<div>
div区域
</div>
<span>
span区域
</span>
<span>
span区域
</span>


---------------------------------------------------------

<marquee ... 让文字动起来.beharior是滚动的方式.dircetion是方向

示例:

<marquee behavior="alternate" direction="down">
<h1>我飞</h1>
</marquee>

---------------------------------------------------------

<sup> 和 <sub> 上角标.和小角标.

X<sup>3</sup>X<sub>2</sub>


---------------------------------------------------------

建立框架

示例:

1.html
<!--rows 距离边框30%, frameborder显示边框  framespacing边框的宽度 -->
<frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1">
<frame src="text004.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset rows="*" cols="30%,*" framespacing="1" frameborder="yes" border="0">
<frame src="text003.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="text002.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>


2.html

<font color="#FF0000" size="+6">LOGO</font>


3.html

<!--在下左窗口定义超链接 target在右边窗口显示.要指定右边窗口的名字  -->
<a href="http://www.baidu.com" target="mainFrame">百度一下你就知道</a><br />
<a href="Demoimp.jpg" target="mainFrame">小女孩</a>


4.html

<font color="#FF0000">内容</font>


---------------------------------------------------------------

CSS 和 HTML结合的四种方式:

示例1:

<div style="background-color:#990000;
color:#FF0000">
要测试的文字
</div>


示例2:

在标题下面加入<style>标签

<title>无标题文档</title>
<style>
div{background-color:#0000FF;
color:#00FF00
}
</style>


示例3:

通过导入css文件

<style>
@import url(1.css);
</style>


1.clss

@charset "utf-8";
/* CSS Document */
@import url(div.css);
@import url(span.css);

<!--body 是背景颜色-->
body{
background-color:#FF0000;
}


div.css

@charset "utf-8";
/* CSS Document */

div{background-color:#00FF00;
color:#FF0000;
}


span.css

@charset "utf-8";
/* CSS Document */

span{ background-color:#000000;
color:#FFFFFF;
}


示例4:

用HTML代码的<link>标签

<link rel="stylesheet" type="text/css" href="1.css" />

--------------------------------------------------------

CSS代码的格式:

选择器名称{属性名:属性值;属性名:属性值;.....}

属性与属性之间用分号隔开

属性与属性值之间用 冒号 连接

如果一个属性有多个值的话,那么多个值keyiyo9ng空格可开

---------------------------------------------------------

选择器:就是制定CSS要作用的标签,那个白哦请的名称就是选择器.以为:

选择器容器.选择器一共有三种

1.html标签选择器.使用的就是html的标签名.

2.class选择器.其实使用的标签中的class属性.

3.id选择器.其实使用的是标签中的id属性.

每一个标签都定义了class属性和id属性.用于对标签进行标示.方便

对标签进行操作.在定中,多个标签的class属性值可以相同,而id值要

保证唯一因为javaScript中经常用.

2)class选择器:

在标签中定义class属性并赋值.通过 标签名.class值 读该标签进行样式设置

示例:

相同标签下设置不同的样式,用class进行区分.

示例:

p.pclass_1{color:#00FF00}
p.pclass_2{background-color:#FF0000}
.pclass
<p class="pclass_1">
p1的标签样式
</p>
<p class="pclass_2">
p2的标签样式
</p>


注意:class可以定义多个同名的 .pclass{color:#00FF00} 这样同名的就都符合

3)ID选择器

尽量保证唯一性.在javaScript中用的很多.

#kk{background-color:#000000;
color:#FFFFFF
}
<div  id="kk">
div ID 选择器设置
</div>


ID选择器>class选择器>标签选择器

这就是样式优先级.如果标签相同的话.就看加载是顺序了

---------------------------------------------------------------

扩展选择器:



1)关联选择器

标签可以嵌套的,要让相同的表情中的不同标签显示不同的样式

就可以用到此选择器.

span b{
background-color:#00FF00;
color:#FF0000
}


意思是span中的b标签改变颜色

2)组合选择器

对多个不同的选择器惊醒相同样式设置的时候应用此选择

span,div{
background-color:#00FF00;
color:#FF0000
}


注意:多个不同选择器要用逗号分隔开.

3)为元素选择器

其实就在html中预先定义好的一些选择器.称之为伪元素是因为CSS的术语.

格式:标签名:为元素.类名 标签名.类名.类名为元素.都可以

几个状态:

a:link 超链接未点击状态,.

a:visited 被访问后的状态.

a:hover光标移到超链接上的状态(未点击)

a:active 点击超链接时候的状态.

使用顺序 L V H A

p:first-line 段落的第一行文本.

p:first-letter段落中的第一个字母.

:focus具有交点的元素.IE6浏览器不支持.在firefox中可以看到效果.

input:focus背景.比如文本区域.点击后.改变颜色

--------------------------------------------------------------

用CSS对HTML进行美化.

示例:

<style type="text/css">
ul{
list-style:none;
list-style-image:url(Demoimp2.jpg);
}
</style>
<body>
<ul>
<li>酸辣的空间啊</li>
<li>酸辣的空间啊</li>
<li>酸辣的空间啊</li>
<ul>


对表格美化.

table{
border:#00FF00 1px outset;
width:600px;
border-collapse:collapse;
}
<!--对表格中的td进行设置-->
table td{
border:#FF0000 1px solid;
padding:10px 20px 30px 60px;
}

对文本框进行美化.
input{
border:none;
border-bottom:#000000 1px solid;
}
请输入答案<input type="text" />


PS:其余乱七八糟的.参与帮助文档
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航