JavaWeb基础知识：Html与Css基础入门

html与css基础入门

1.html的常见标签和实战

1.1 a标签

点我送福利哦！
// target属性值_blank表示另取空白页打开网页，用new有同样的效果

1.2 img标签

// alt属性的值表示当图片找不到时显示的文字信息

1.3 列表标签

    
我是天才1号
    
我是天才2号
    
我是天才3号
    
我是天才4号



    
我是逗逼1号
    
我是逗逼1号
    
我是逗逼1号
    
我是逗逼1号



    
日记第一天
        
好兴奋啊要上课了
    
日记第二天
        
晚上要早点睡觉
    
日记第三天
        
真的心累啊热啊


/* ol(ordered list)：有序
        li（list item）：列表项
   ul（unordered list）：无序
   dl（defined list）：自定义
        dt（defined title）：自定义标题
        dd（defined document）：自定义内容
*/

1.4 表格标签

考试信息登记表

    
    

        
姓名
        
年龄
        
性别
        
成绩
    
    

        
小二
        
17
        
男
        
99
    
    

        
小三
        
19
        
女
        
86
    

        
小四
        
17
        
男
        
100
    

        
小五
        
20
        
男
        
59
    


/* 
    table属性：border表示边框，cellpadding表示表格内边距，spacepadding表示表格外边距
    td属性：rowspan表示合并的行数，colspan表示合并的列数
*/

1.5 表单标签

    用户名：

    密码：


      

    

    男   
    女    

    

    篮球
    足球
    排球
    乒乓球

    

    
        深圳
        北京
        上海
       

实战1：1024网站入口

• 先来看一下效果图

* 用到的图片如下

• 代码如下

  
      
  
  
  警告 / WRANNING
  
  
      本物品內容可能看不明白；不可將本物品內容派發，傳閱，出售，出租，交給 或出借予年齡非程序猿的人士出示，播放或播映。
  
  
      This article contains material which may offernd and may not be distributed, circulated, sold, hired, given, lent, shown, played or projected to a person under the age of 18 years. All models are 18 or older.
  
  
      
  
  

  实战2：世纪佳缘注册页面

• 先来看一下效果图

* 用到的图片如下

* 代码如下

    
世纪佳缘征婚注册表
    

        

            
用户名：
            

                
            
        
        

            
密码：
            

                
            
        

        

            
性别：
            

                男
                女
        

        

            
爱好：
            

                篮球
                足球
                排球
                玩毛线
        

        

            
城市：
            

                
                    深圳
                    江西
                    贵州
                    湖南
                    吉林
                    湖北
                
            
        

        

            
个人宣言：
            

                
                
            
        
        

        

            

                
            
        

    

2.css的使用

2.1 盒子模型

    
        
        

        
    

    

        

            我是个天才
            

                我是个小天才
            
        

    

2.2 css的三种选择器

• css获取html中的div有三种方式：类选择器，元素选择器，名称选择器。第一种是在div属性中定义一个class属性，然后在css中通过#来引用定义的值，同理第二种是通过.来引用，第三种是通过div名称来引用。
• 导入css样式到html中也有三种方式，如@import url(“css/style.css”);获取@import url(css/style.css);都可以

• 代码如下

  
      
      
      
  
  
      
  这是第一块DIV区域
      
  这是第二块DIV区域
  
      这是第一块span区域
      这是第二块span区域
  
      
  我是个天才
  
  

2.3 流式布局

    
        
        
        
    
    
        
div1中的内容
        
div2中的内容
        
div3中的内容