黑马程序员-HTML概述

来源:互联网 发布:2重积分算法 编辑:程序博客网 时间:2024/03/29 16:19

 

----------- android培训java培训java学习型技术博客、期待与您交流! ------------ 

 

 

 

1 Html 就是超文本标记语言的简写,是最基础的网页语言。

2 Html 是通过标签来定义的语言,代码都是由标签所组成。

3 Html 代码不用区分大小写。

4 Html 代码由<html>开始,</html>结束。 里面由头部分<head></head>和体部分<body></body>两部分组成。

5 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。

6 体部分是真正存放页面数据的地方

<html>
 <head>
  <tittle> 标题 </tittle>
 </head>

 <body>
  主体
 </body>

</html>

 

 

 

 

字体标签


网页三剑客:
dreamwaver
flash
fireworks


字体标签  <font color="" size=""> </font>

<h6> </h6>

转译尖括号
&lt;    <
&quot;  "
&trade; =
&gt;    >
&amp;   &
&nbsp;  空格

 

 

 

列表标签


<dl>  列表范围
<dt>  上层项目条目
<dd>  下层项目条目,具备缩进效果


注释:<!--注释文字-->


数字标签 <ol>
符号标签 <ul>
具体项目内容标签,此标签只在<ol> <ul>中有效 <li>
    自带自动缩进

通过type属性更改项目符号,如果想做出效果更好的列表,就用到css。


<ul type="" start="3"> 
可以更改条目开头的点, 从第三个开始。

 

 

 

 

图像标签

<img src="" alt="。。。" border=“” > 
alt       说明文字
border    边框
align     对齐方式


设计视图:

工具条--设计
图像----热点工具    可以让图像的某一部分链接资源
  (图像热点区域,鼠标移动到指定位置会变手势)

 


 

表格标签

 

<table border="1" bordercolor="" width=""  cellpadding=“” cellspacing=“”>
//边框,宽度(60%,相对窗口大小),cellpadding文字距四个边框的距离,cellspacing单元格之间的距离

<caption> 表格标题 </caption>

<tr>   代表行
<td>   单元格
<th>   表格信息(居中加粗)

表格的作用就是格式化数据


table
  |--tbody
     |--tr
         |--td
         |--th

 

为了增加表格的下载速度
可以分成三部分

<thead> <tbody> <tfoot>

 

div+css+table
近期最流行的网页形式

 


<th colspan="2">
占两列

rowspan="2"
占两行

 

 

 

超链接标签

<a href="http..."> </a>


点击超链接浏览器做的事情
1、启动相对应的协议引擎
2、解析后面的具体内容
3、如果跟的是一个主机地址,先查找本机hosts文件列表,是否可以找到该主机对应ip;
若没有找到,会找本机指定的后者本机默认的DNS服务器,去解析该主机。
4、获取到该ip后,在连接该指定ip 的主机,并获取所需的资源。

 

注意:
1、当没有指定具体协议时,浏览器会默认file协议引擎来解析href的值
2、当指定协议,浏览器无法解析时,会在本地注册中查找是否有关联该协议的应用程序,并调用。


<a href="mailto:...?subject=hehe&cc=qqq@163.com"> 联系我们 </a>

则主题为hehe
则邮箱为
qqq@163.com

 

 

 

超链接标签-定位标记

<a href="#top"> 回到顶部位置 </a>

<a name="haha"> 中间位置 </a>
<a href="#haha">  回到中间位置 </a>
点击可以到haha的位置~


<a href="javascript:alert('hahahahha')">
一个对话框 </a>

 

 

 

框架

 

 

<frameset rows="30%,*" border="0">

 <frame src="1.html"/>


           <frameset clos="30%,*">
         <frame src="3.html"  noresize="noresize"/> 
         <frame src="2.html"/>

    </frameset>


</frameset>

 


点击超链接之后在右侧打开
<a href="1.html" target="right"> 一个连接
</a>
<br/>

 

noresize 禁止用户调整框架大小
border="0"  隐藏框架


href点击才请求,不点击不请求~

 

 

iframe 画中画标签

<iframe src="demo.html">这是画中画标签
</iframe>

 

 

表单中的组件

<form>

 

用户名: <input type="text" value="默认值" />     <br/>
密码:   <input type="password"/> <br/>
性别:   <input type="radio" name="sex"/> 男 <input type="radio" name="sex" checked="checked"/> 女 <br/>

技术:<input type = "checkbox"/> JAVA <input type = "checkbox" /> HTML
<input type="checkbox" /> css

附件:<input type = "file" /><br/>

<input type="image" src="..." hight="200px" width="300px"> <br/>

<input type = "button" value="我是一个按钮" onclick="javascript:alert('我弹')"/> <br/>


<input type="hidden" name="key" value="haha"/>

<input type = "submit" value="提交数据" />
<input type="reset" value="清除数据" />

 


<select multiple="multiple" size="3">
(multiple支持多选, size表示一次显示的个数)
 <optin>--选择国家--</optin>
 <optin>--美国--</optin>
 <optin selected="selected">--中国--</optin>
</seltct>
(下拉菜单)


<textarea cols="20" rows="10" > </textarea>
(cols和rows代表行和列)

</form>


 

 


radio是单选框

name= 若只能单选 组名要相同

checked 默认被选中

隐藏项虽然客户端看不到,但是会提交到服务端

图片的功能和提交按钮是一样的~
可以做一个漂亮的提交按钮

 


 

表单中的组件的name和value属性

表单的组件都需要定义两个属性:name和value

name负责给组件起名 用于区分组件
value是该组件的具体的值

文本框、密码框和文本区域,name必须指定,value可以不用指定,因为文本框录入的文字就是value的值

但是指定value也没有问题,会在文本框或文本区域中默认显示。

 

 

 

表单提交 get和post的区别

<fieldset>  (区域标签)
<legend> 我的注册区域 </legend>
<form action="
http://127.0.0.1:10009" method="">
(默认当前页面和get)

 

 

<table border="1" bordercolor="#0099FF" width="70%" cellpadding="10px" cellspacing="0">
 
 <tr>
  <th colspan="2"> 我的注册页面
  </th>
 <tr>

 <tr>
  <td>用户名
  </td>
  <td>
  <input type="text" name="psw" />
  </td>
 </tr>
 <tr>
  <td>密码
  </td>
  <td>
  <input type = "password" name="repsw" />
  </td>
 </tr>
 <tr>
  <td>确认密码
  </td>
  <td>
  </td>
 </tr>
 <tr>
  <td>性别
  </td>
  <td>
   <input type="radio" name="sex" value="nan"/> 男
   <input type="radio" name="sex" value="nv"/> 女
  </td>
 </tr>
 <tr>
  <td>技术
  </td>
  <td>
   <input type="checkbox" name="tech" value="java" /> JAVA
   <input type="checkbox" name="tech" value="html" />HTML
   <input type="checkbox" name="tech" value="css" />CSS
  </td>
 </tr>
 <tr>
  <td>国家
  </td>
  <td>
   <select name="country" >
  <option value="none" >  选择国家   </option>
<option value="usa" >  美国   </option>
<option value="cn" >   中国   </option>
<option value="en" >   英国   </option>
  </td>
 </tr>

 <tr>
  <th colspan="2">
   
<input type="submit" value="提交数据" >
<input type="reset" value="清除数据">
  </th>
 </tr>

</table>


</form>

</fieldset>

 


form标签中常见的属性定义:
action:指定表单数据发送的位置,默认提交当前页面
method:定义表单提交的方式,常用的是get和post,默认get提交


提交后url中?后跟的是提交的数据
每个属性由&来做间隔

 

 

注册服务器

import java.net.*;
import java.io.*;
class RegServer
{
 public static void main(String[] args) throws Exception
 {
  ServerSocket ss = new ServerSocket(10009);

  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 = 'green' size='7'> 注册成功 </font>");
  
  s.close();
  ss.close();
 } 
}

 


get和post区别


1、get提交的信息显示在地址栏上,而post不会

2、get对于敏感信息不安全,而post较安全,因为不显示在地址栏上

3、地址栏的数据量是有限的,因此get不能提交大数据,而post可以提交大体积的数据

4、get会将信息封装在请求行,也就是http请求消息头之前;而post会将信息封装在请求体,也就是http请求消息头之后。
请求体和请求头之间是通过空行来进行分隔的。

 


特殊之处:


      对于Tomcat服务器,当提交中文时,
get提交:服务端接收到中文数据,会用默认的IOS8859-1解码,会出现乱码,所以必须对该乱码进行一次编码再解码的动作。当向服务端请求时,会将数据封装在一个请求的对象中,request对象,可以通过该对象的String name = getParameter(“user”);获取客户端提交的用户名。 但会出现乱码,所以要用new String (name.getBytes("iso8859-1"),"GBK");

 

      post提交:服务端收到中文,可以使用编一次再解一次的方式,也就是和get一样的方式可以完成乱码的解决。通过它有另一种方式,也就是直接使用request对象,调用一个方法。setCharacterEncoding("GBK"); 只要设置了请求对象中的数据的编码表,那么 String name = request.getParame?ter("user");那么name的值,直接就是解码完毕的正确数据。

      注意:因为get只对请求体中的数据进行解码,不对请求头中的数据进行解码,所以不能使用setCharacterEncoding("GBK");这个方法


综上所述:
 在进行表单提交时,建议使用post提交。

若需要提交数据,要写form标签。

 


 BS和CS结构

      目前开发的基本架构:
1.BS结构:Browser /Server
       开发者需要编写两个端点,一个是客户端程序,一个是服务端程序。
      例如:QQ、360
       需要在客户机上安装客户端的部分


       弊端:客户端的维护较为麻烦,机器只要一重装,就需要重新安装该软件,升级也比较麻烦。后期有一个解决方案,对于升级,可以通过网络升级的形式完成。
       好处:客户端的出现,可以减轻服务端的运算压力,可以让一部分运算转移到客户端来,而且可以在客户端进行用户的个性化配置信息的存储~


       最为常见的是网络游戏,比如传奇,魔兽世界,杀毒软件。

 

2.CS结构:Client /Server


        程序员只需要编写服务端,而客户端只需要有浏览器即可。只要装有操作系统机器都自带浏览器。这是web技术的流行,导致了这种结构的流行。


        不用开发客户端,相对省事儿很多,而且操作简单,只要能上网,就可以进行像浏览网页一样进行功能的使用。
 运行全在服务端,对于大数据运算,就会很慢~页游是用flash完成的,数据量较小,而且flash也是在客户端由浏览器启动flash解析引擎,再进行解析执行。 

 

       等云计算普及后,可以实现分布式计算,所有的运算都交给云端(互联网上的各个服务器)完成,但必须解决掉两个问题:

1、数据的安全性 

2、带宽

 

 

 

----------- android培训java培训java学习型技术博客、期待与您交流! ------------ 

 

原创粉丝点击