HTML 和 CSS 资料总结

最新推荐文章于 2021-11-17 22:59:37 发布

百鑫

最新推荐文章于 2021-11-17 22:59:37 发布

阅读量891

点赞数

本文链接：https://blog.csdn.net/u010035035/article/details/9091639

版权

<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:其余乱七八糟的.参与帮助文档