JavaWeb学习-HTML

软件结构

B/S结构 Browser/Server 浏览器端和服务器端交互

C/S结构 Client/Server 客户端和服务器端交互

前端开发流程

根据需求设计网页画面→将设计做成静态网页→将静态网页修改为动态网页

网页结构主要分为：内容、表现、行为

内容：在页面中显示的数据，使用html技术实现；

表现：内容在页面上的展现形式，使用css技术实现；

行为：页面中元素与输入设备交互的响应，使用JavaScript技术实现。

技术介绍

HTML（Hyper Text Markup Language）超文本标记语言，HTML通过标签来标记要显示的网页中的各部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告知浏览器如何显示其中的内容。

创建HTML文件

1.创建一个web工程（静态的web工程）

2.在工程下创建html页面

注：HTML文件不需要编译，直接由浏览器解释执行

HTML的书写规范

    
    


    new world

标签介绍

1.标签的格式：

<标签名>封装的数据

2.标签名大小写不敏感；

3.标签拥有自己的属性；

      1）分为基本属性：bgcolor="red"        --bgcolor是背景颜色属性

      2）事件属性：οnclick="alert('hello')"        --onclick表示点击事件，alert()是js提供的警告框函数

4.标签又分为，单标签和双标签。

      1）单标签格式：<标签名/>        --
换行        --

---

水平线

      2）双标签格式：<标签名>封装数据

标签语法

    
    


  
  正确：
new world
  错误：
new world
  

  
  
  正确：
new world
  错误：
new world
  

  
  正确：
1
  错误：
2
  

  
   正确：new world
   错误：new world
   错误：new world
  

  
  正确：
  错误： -->

font字体标签（过时）

    
    


  
  字体标签

特殊字符

    
    


  
  
  标签<br>

标题标签

标题标签是h1 到 h6

    
    


  
  
标题1
  
标题2
  
标题3
  
标题4
  
标题5
  
标题6

超链接（★★★★★）

在网页中所有点击之后可以跳转的内容都是超链接

    
    


  
  baidu

  sina

  qq

列表标签

分为无序列表、有序列表、定义列表

    
    


  
  
  

    
玛莎拉蒂
    
奔驰
    
宝马
    
奥迪
  
  
    

        
百达翡丽
        
劳力士
        
卡地亚
        
江诗丹顿
    

img标签

表格标签（★★★★★）

    
    


  
  
  

    

      
数字单元格表头
    
    

      
1.1
      
1.2
      
1.3
    
    

      
2.1
      
2.2
      
2.3
    
    

      
3.1
      
3.2
      
3.3
    
  
  

表格可跨行跨列

    
    


  
  
  

    

      
单元格跨越行或列练习
    
    

      
1.1
      
1.3
      
1.4
      
1.5
    
    

      
2.1
      
2.2
      
2.3
      
2.4
      
2.5
    
    

      
3.2
      
3.3
      
3.4
      
3.5
    
    

      
4.1
      
4.2
      
4.3
      
4.4
    
    

      
5.1
      
5.2
      
5.3
    
  

iframe框架标签

iframe标签可以在一个html页面上打开一个小窗口来加载一个单独的页面

    
    


 
  单独的页面

 
  

  

    

       
标签语法
        
font标签
        
特殊字符
    

表单标签（★★★★★）

表单是html页面用来收集用户信息的所有元素集合，并将信息发送给服务器。

表单显示

    
    


  
  

    用户名：

    密码：

    确认密码：

    性别：男女

    兴趣爱好：javaScriptjavaC#

    国籍：
        --请选择国籍--
        中国
        美国
        英国
        瑞典
     

    自我评价：默认值

    

    

    

    
    
  

表单格式化

    
    


  
  

      
用户注册
      

          

              
用户名：
              

          
          

              
密码：
              

          
          

              
确认密码：
              

          
          

              
性别：
              
男女
          
          

              
兴趣爱好：
              
javaScriptjavaC#
          
          

              
国籍：
              

                  --请选择国籍--
                  中国
                  美国
                  英国
                  瑞典
              
          
          

              
自我评价：
              
默认值
          
          

              

              

          
      
  

表单提交细节

  
  


  

  
  
用户注册
  

    

      
用户名：
      

    
    

      
密码：
      

    
    

      
确认密码：
      

    
    

      
性别：
      
男
        女
    
    

      
兴趣爱好：
      
javaScript
        java
        C#
    
    

      
国籍：
      

        --请选择国籍--
        中国
        美国
        英国
        瑞典
      
    
    

      
自我评价：
      
默认值
    
    

      

      

    
  

其他标签

    
    


  
  
div标签1
  
div标签1
  
  span标签1
  span标签1
  
  
段落标签1
  
段落标签2
下一行