关于对HTML CSS Javascript 的学习总结

于 2013-07-27 16:48:34 发布
阅读量670 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011208926/article/details/9530849
版权

由于主要学习java编程，其实对这一块老师讲的也不多，所以就把自己学的这一点总结了一下。

什么是 HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，用来描述网页的一种语言。

 HTML 标签通常是成对出现的，比如 <b> 和 </b>

 HTML 标签对大小写不敏感：<P> 等同于 <p>。

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

HTML 段落是通过 <p> 标签进行定义的。

HTML 链接是通过 <a> 标签进行定义的。

HTML 图像是通过 <img> 标签进行定义的。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>


列表：

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>











有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


定义列表


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>







浏览器显示效果








 

 

 

 

表单
 

表单是一个包含表单元素的区域。
 

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
 

表单使用表单标签（<form>）定义。
 

 

<form action="" method="post">
<p>用户名：<input name="用户名" type="text" /></p>
<p>密码：<input name="密码 " type="password" maxlength="20" /></p>
<p><input name="提交" type="submit" value ="提交"/>
<input name="reset" type="reset" value=" 重填 " /></p>
</form>
 

 

 

 

 

我学习这些时使用的软件是Dreamweaver，选择经典模式，标签基本不用手写，都可以在工具栏找到。
 

 

CSS 
 

CSS 指层叠样式表 (Cascading Style Sheets)
 

样式定义如何显示 HTML 元素
 

样式通常存储在样式表中
 

 

可抽取为外部样式表，可以极大提高工作效率
 

外部样式表通常存储在 CSS 文件中
 

<head>
 

<style type=” ”>
 

选择器（修饰对象）{
 

对象属性1：值1；
 

对象属性2：值2；
 

}
 

</style>
 

</head>
 

其中，选择器分为标签选择器，类选择器，及id选择器
 

总案例：
 

<!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>


<style type="text/css">
#menu {
	background-color: #036;
	color: #C30;
}
dl {<!--作用于所有的<dl>元素-->
	color: #006;
	background-color: #936;
}
.color {<!--类选择器-->
	color: #006;
	background-color: #093;
}
</style>
</head>

<body>
<a name="顶部" id="aaa"></a>
<h1>商城</h1>
<form action="" method="post">
<p>用户名：<input name="用户名" type="text" /></p>
<p>密码：<input name="密码 " type="password" maxlength="20" /></p>
<p><input name="提交" type="submit" value ="提交"/>
<input name="reset" type="reset" value=" 重填 " /></p>
<p><input name="" type="image" src="../课堂文件/20130722HTML入门/demo/超链接与表单表单/示例10：文本框，密码框和按钮/images/login.gif" /></p>
</form>
<a href="#ch2" >购物流程</a>

<div id="menu">
  <hr />
  <h2>产品</h2>
  <ul>
  <li><strong>数码</strong><ul><li>手机</li><li>笔记本</li></ul></li>
  <li>服装</li>
  <li>日用</li>
  </ul>
</div>
<hr />
<dl>
<dt><em><strong>哆啦A梦</strong></em></dt>
<dd>一只来自未来世界的猫型机器人</dd>
<dd>有神奇的百宝袋和各种奇妙的道具</dd>
</dl>
<hr />
<dl>
<dt><img src="file:///C|/Documents and Settings/Administrator/桌面/t0150018560aa0d1e86.jpg" width="150" height="164" /></dt>
<dd>一只来自未来世界的猫型机器人</dd>
<dd class="color">有神奇的百宝袋和各种奇妙的道具</dd>

</dl>
<hr />
<a name="ch2" id="ch2"></a>
<h2>购物流程</h2>
<ol><li>选取商品</li><li>加入购物车</li><li>付款</li></ol>
<hr />

<table width="400" border="0" align="center">
  <tr>
    <td><新闻></td>
    <td>环球网</td>
    <td>凤凰新闻</td>
  </tr>
  <tr>
    <td><科技></td>
    <td>苹果官网</td>
    <td>安卓应用</td>
  </tr>
  <tr>
    <td><购物></td>
    <td><a href="淘宝网 - 淘！我喜欢.htm">淘宝</a></td>
    <td>当当</td>
  </tr>
</table>

<a href="#顶部">顶部</a>
版权所有© Hjw
</body>
</html>

 

 

 

JavaScript 
 

 

JavaScript 是一种脚本语言
 

提供用户交互 
 

动态更改内容 
 

数据验证
 

将JavaScript嵌入网页
 

使用 <SCRIPT> 标签将语句嵌入文档
 

 

<HTML>
<HEAD>
<SCRIPT language = "JavaScript">
document.write("欢迎来到 JavaScript 世界");
</SCRIPT>
</HEAD>
 

 

 

将 JavaScript 源文件链接到 HTML 文档中
 

<script language=“JavaScript” 
src= “文件名.js"></script>
 
 

 

 

声明变量  var 变量名
 

var a= 10;
 

变量名必须以字母或下划线（"_"）开头
 

变量可以包含数字、从 A 至 Z 的大小写字母
 

JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
 

 

JavaScript基本语法中，关于“+”的使用有一点要注意：
 

 “+”可以用于两个数相加，还可以用于连接字符串
 

<HTML>
<HEAD> 
<SCRIPT LANGUAGE = "JavaScript">
var x=100;
var y;
var z;
y=prompt("加多少银子？","1");  
z=x+y;  
alert("您最终的出价\n"+z+"$");  //”\n”用于换行显示
</SCRIPT>
</HEAD>
<body>
</body>
</HTML> 
 

 

给y赋值22；
 


 
 
 

 

Prompt返回值类型为字符串，所以会导致z的值会是x与y拼接而成的形式
 

需改写为z=x+parseFloat( y );（z=x+parseInt( y );）
 

parseFloat( )函数将字符串转换为float数据
 

 parseInt( )函数将字符串转换为int数据
 

如果转换失败，返回NaN值(not a number)
 

 

 

定义函数
 

 function 函数名（参数名）
 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script LANGUAGE = "JavaScript">
function calcu(){
var num1 = document.calc.num1.value;
var num2 = document.calc.num2.value;
var total = parseFloat(num1) * parseFloat(num2);
document.calc.total.value = total;
}
</script>
</head>
<body>
<form name = "calc">
<p>竞拍价格<input name="num1" id="num1" type="text" /><br />
 竞拍数量<input name="num2" type="text" value = "1"/><br />
总计<input name="total" type="text" readonly/><br />
</p>
<p><input name="getAnswer" type="button" id="getAnswer" onClick="calcu()" value="计算看看" /></p>
</form>
</body>
</html>

 

 

 

 

 
Eval( ) 
函数可以计算某个计算表达式的值， 

   isNaN( )函数可用于判断是否是一个数字  
 

String对象的indexOf( )方法用于查找子字符串 
 

Math对象的random( )方法可以产生0－1的随机数
 

Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间
 

 
 

<SCRIPT language="JavaScript“>
  var a="3“ ,  b="4";
  alert (isNaN(a));
  alert (a+"+"+b );
  alert (eval(a+"+"+b) );
    </SCRIPT>
 

 

 

 

 

<SCRIPT language="JavaScript“>
  var  s="abcdefg" ;
  alert ( s.indexOf("cd",0) ) ;
  alert (s.substr(1,2)) ;
  alert (Math.round(9.38)) ;
  var now=new Date( );
  alert (now.getMonth( )) ; 
   </SCRIPT>
 

 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  H-j-w
                
              
            

            

                关注
              
            

        

        

          
      

      









              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值