JAVA WEB---HTML

<!DOCTYPE htm>

<head>
	<title>我的第一个网页</title>
   	<meta http-equiv="content-type" charset="utf-8" content="">
	head头信息:页面的辅助信息,声明页面的基本信息
</head>

<body>
	<h1>
    body体信息:当前页面要展示的内容
    </h1>
	
    <font color="yellow" size="200px" >
	标签上可以配置属性,控制标签效果
    </font>
    
    <hr>
    <!-- 这是HTML的注释-->
	<font color="rgb(0,0,0)" size="5"100px" face="宋体">
		1.Font标签 color颜色  face字体 size大小
	</font>
    
    <hr>
	<font color=red >
		 2.标题标签  h1->h6(align排列):left,right,center,justify自适应
	</font>
	<h1 align="left">一级标签</h1>
	<h2 align="center">二级标签</h2>
	<h3 align="right">三级标签</h3>
	<h4 align="justify">四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
    
    <hr>
	<font color=red >
		 3.特殊字符
		<p>"	&quot;	'	&apos;
		<p><	&lt;	>	&gt;
		<p>空格	&nbsp;	&	&amp; 
		<p>®	&reg;	©	&copy;
		<p>注意:不管是打多少个空格/制表符,都是一个空格/制表符
	</font>
    
    
    
    <hr>
	<font color=red >
		 4.颜色
    <p>color rgb(x,x,x) #xxxxxx  colorname
	</font>
     
    
    <hr>
	<font color=red >
		 5.1定义列表
		<p>dl/dl
		<p>dt:上层项目
		<p>dd:下层项目
	</font>
   
   
    <dl>
	<dt>游戏名称</dt>
		<dd>星际争霸</dd>
		<dd>红色警戒</dd>
	<dt>部门名称</dt>
		<dd>技术部</dd>
		<dd>培训部</dd>
	</dl>
    
    <hr>
	
	
	<font color=red >
		5.2有序列表
		<p>ol /ol
		<p>li /li
	</font>
    
  	<ol>
  		<li>Coffee</li>
  		<li>Tea</li>
  		<li>Milk</li>
  	</ol>
    
	
    <hr>
	<font color=red >
		5.3无序列表
		<p>ul /ul
		<p>li /li
	</font>
    
    <ul>
  		<li>Coffee</li>
  		<li>Tea</li>
  		<li>Milk</li>
	</ul>
    
    <hr>
	<font color=red >
		 6.图像
    <p> algin 对齐  border边框 height高度 wigth宽度 hspace左右侧空白 vspace上下侧空白 alt点击事件
	</font>
	
   
    <img src="绿叶.jpg" height="50%" wight="50%"alt="夏天到了">
    </img>
    
    <hr>
    7.超链接
    <p>7.1通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
       <p>href属性值可以是url,也可以是本地文件,也可使用其他协议如mailto、thunder等等。
       <p>target属性是指定在哪个窗口或者帧中打开
	    <xmp>
   		  <p><a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
		 </xmp>
       <p><a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
       
    <p>7.2通过使用 name 或 id 属性,创建一个文档内部的书签
	     <xmp>
   		 <p><a name=”end”>标记位置</a>
            ......文本内容........<br>
		 <p><a href=”#end”>返回标记位置</a>
		 </xmp>
		 
		 <a name="begin"></a>
		杨过和小龙女。。。。
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		小龙女.....<a name="middle"></a>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		都去了古墓。。。小说结束
		<a name="end"></a>

		<a href="#begin">顶部</a>
		<a href="#middle">中部</a>
		<a href="#end">尾部</a>
        
		<br>
		
		8.html原样输出文本不转义 下面三个都要加<><BR>  
		一、如果是有空格和回车这样的特殊字符的简单文本 在文本外加pre /pre标签<BR>
		二、如果是html内容、javascript、xml或其他特殊内容,使用xmp /xmp<BR>
		三、如果是在代码中执行时要显示或打印等可以使用![cdata[]]<BR>
		
</body>
</html>
<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	1.表格
    1.1.table
    <P>table标签定义 HTML 表格。
    <P>tr元素定义表格行,td 元素定义表格单元,th 元素定义表头
	<p>thead,tbody,tfoot ,没写就将其加载到隐藏的tbody,一个网页可以多个tbody,相互独立<br>
	
	<p> align:对齐方式 border:边框宽度  bgcolor:背景颜色 width:宽度   cellpadding:单元格沿其内容之间的空白  cellspacing:单元格之间的空白
	<p> rowspan:td单元格的属性标签    单元格跨几行
	<p> colspan: td单元格的属性标签    单元格跨几列
   <TABLE  border="1" bgcolor="lightgray" width="250px" cellpadding="0px" cellspacing="0px"> 
        <tr align="center">               <!--tr表行-->
        	<th>国家</th>  <!--th表头-->
            <th>省份</th>
            <th>姓名</th>
        </tr>
    	<tr	align="center">
        	<td>中国</td>   <!--td表格单元-->
            <td>浙江</td>
            <td rowspan="2">wuyun</td>  <!-- rowspan单元格跨两行 所以从这个tr表行开始起的下面tr表行一个少了一个td单元格-->
        </tr>
        
        <tr	align="center">
        	<td >外国</td>
            <td> tk</td>
        </tr>
        
         <tr align="center">
		    <td >俄罗斯</td>
        	<td colspan="2" >未知</td> <!-- colspan单元格跨两列 所以这个tr表行一个td单元格-->
       
  </tr>
    </TABLE>
    
	
	
	
    <hr>
    1.2 captian 表格标题
	<table border="3">
  		<caption>Monthly savings</caption>
  		<tr>
   			 <th>Month</th>
    		 <th>Savings</th>
 		</tr>
  		<tr>
    		<td>January</td>
    		<td>$100</td>
  		</tr>
	</table>
    
	
	
	
    
    
</body>
</html>
<!DOCTYPE html>
<!--frameset框架属性	cols	值:pixels %  *  定义框架集中列的数目和尺寸。
						rows	值:pixels %  *  定义框架集中行的数目和尺寸。
	frame每个框架属性   src:来源
						framespacing="0"表示框架与框架间保留的空白的距离
						frameborder:设定框架的边框,取值为(1|0),缺省值为1  1 -- 在每个页面之间都显示边框   0 -- 不显示边框
						border="0"  设定框架的边框厚度,以 pixels 为单位。
						noresize:  在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
	
	查看演示http://www.w3school.com.cn/tags/tag_frameset.asp
-->

<!--  垂直框架
		<frameset cols="25%,50%,25%">  按列,每列占用比例分别是25,50,25
			<frame src="/example/html/frame_a.html">
			<frame src="/example/html/frame_b.html">
			<frame src="/example/html/frame_c.html">
		</frameset>
-->

<!-- 水平框架
		<frameset rows="25%,50%,25%"> 按行,每行占用比例分别是25,50,25
			<frame src="/example/html/frame_a.html">
			<frame src="/example/html/frame_b.html">
			<frame src="/example/html/frame_c.html">
		</frameset>
-->



<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">		
<!-- 混合框架-->
<frameset rows="50%,50%">     <!-- 先将整个框架分为两个分框架,第一个框架行占50%,第二个框架行占50%-->
	<frame src="/example/html/frame_a.html" >
	<frameset cols="25%,75%">  <!-- 再将第二个框架分为两个小框架,第一个小架列占25%,第二个小框架行占75%--> 
		<frame src="/example/html/frame_b.html">
		<frame src="/example/html/frame_c.html" frameborder=0  noresize="noresize">
	</frameset>
</frameset>
   

</html>




<!DOCTYP HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">		
	</head>
	<!--iframe 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
		       src:	URL	              规定在 <iframe> 中显示的文档的 URL。
			   frameborder: 1 0。     规定是否显示 <iframe> 周围的边框。
			   scrolling:yes no auto。规定是否在 <iframe> 中显示滚动条。
			   height:	pixels	      规定 <iframe> 的高度。
			   width:	pixels	      规定 <iframe> 的宽度。
			   

	-->
	
	<body>
		<iframe src="http://www.baidu.com" frameborder=0 scrolling=no width="800px" height="500px">这里有个iframe内嵌页面,很遗憾你的浏览器无法展示</iframe>
	</body>
</html>
<!DOCTYP HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">		
	</head>
	<!-- marquee滚动内容
	   direction 表示滚动的方向,值可以是left,right,up,down,默认为left 
	   behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动) 
		loop 表示循环的次数,值是正整数,默认为无限循环 
		scrollamount 表示运动速度,值是正整数,默认为6 
		scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒 
		align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle 
		bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色 
		height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度。 
		hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 
		onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。
		
	
	-->
	<body>
		<marquee direction="right" behavior="slide">
			<font scrolldelay="0.1" color="RED" size="7">我来了。。。。</font>
		</marquee>
	</body>
</html>
<!DOCTYP HTML>
<HTML>
	<head>
		<meta http-equiv="content-type" charset="utf-8" content="">
		<title>表单</title>
		
	</head>
	<body>
		 <h1>表单标签<h1>
		  HTTP协议 
			  规定了浏览器和服务器之间通信的方式<br>
			  
			  1.基于请求响应的模型<br>
			  2.一次请求对应一次响应<br>
			  3.只能由客户端发起请求,服务端被动等待请求做出响应<br><br>
			  
			  HTTP只支持7种请求方式   GET POST...<br>
			  HTTP请求<br>
				  请求行<br>
						GET /index.html HTTP/1.1<br>
				  请求头<br>
						...<br>
				  空行<br>
				  实体内容<br><br>
				  
			 HTTP响应<br>
			       状态行<br>
						HTTP/1.1 200	OK<br>
				   响应头<br>
				   空行<br>
				   实体内容<br><br>
				
			 
		 
		  (1)get提交将数据显示在地址栏,对于敏感信息不安全。<br>
				 post提交不显示在地址栏,对于敏感信息安全<br>
			  (2)地址栏中存放的数据是有限,所以get方式对提交的数据体积有限制。<br>
				 post可以提交大体积数据。<br>
			  (3)对提交数据的封装方式不同:<br>
					get:将提交数据封装到了http消息头的第一行,请求行中。<br>
					post:将提交的数据封装到消息头后,在请求数据体中。<br><br>
		 
		 <form action="https://www.baidu.com" method="GET">     

                  <textarea name="wenben" rows="5" col="5" >
				  文本域textarea
				 </textarea>
				 <br><br>
				 
				 地区:选择标签select/option  size:显示项目个数。  multipe:是否可以选择多项  selected:默认选中
				      <select name="province"   size="5" multiple="multiple">
						   <option value="bj">北京</option>
						   <option value="sh">上海</option>
						   <option value="zj" selected="selected">浙江</option>
					  </select>
					  <br><br><br>
			fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。<br>
            legend标签为fieldset 元素定义标题。<br>	
			 <fieldset>
				<legend>基本信息</legend>
			 用户名<input type="text" name="userId"  value="WuYun" readonly="readonly" disabled="disabled"/>  text文本框 readonly只读可提交   disabled不可改不可提交</br>
			 密码  <input type="password" name="userPassword"/> password密码框<br>
			 </fieldset>
			 
			 <br><br><br>
			 <fieldset>
				<legend>扩展信息</legend>
			 性别<input type="radio" name="gender" value="man">男 
				 <input type="radio" name="gender" value="wen">女 <br>
				 radio单选框 如想单选就让name一致<br><br>
			 爱好<input type="checkbox" name="like" value="football">足球
				 <input type="checkbox" name="like" value="basketball">篮球
				 <input type="checkbox" name="like" value="cf">cf<br>
				 checkbox复选框,其name必须保持一致<br><br>
			</fieldset>
			 
			 <fieldset>
				<legend>其他操作</legend>
		    选择上传的文件
			      <input type="file" name="file"><br>
				  file文件上传后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
				  <br><br><br>
				  
			点击按钮清除
			      <input type="button" value="点击清除内容"  onclick="alert('被点了 正在清除内容')"><br>
			      button 按钮   value显示在按钮上的字, 触发点击事件onclick="alert(' ')"<br><br>
			
				  <input type="hidden" name="money" value="500"><br>  
				  hidden隐藏域,在用户看不到的情况下但会提交数据<br><br> 
			 重置
			 <input type="reset"><br>  
			 reset重置,将表单中填写的内容设置为初始值。
			 </fieldset>
			 <br><br>
			 图片提交<input type="image" src="资料.png" width="200px" height="200px" alt="点我就提交"><br>
			 image图像 它可以点击图片提交<br><br>
			 提交<input type="submit" /><br>
			 submit提交,用于提交表单中的内容。
			
		 </form>
	</body>
</HTML>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值