javaweb学习day01(HTML)

一、B/S 软件开发架构简述

1 Java Web 技术体系图

2  B/S 软件开发架构简述

• B/S架构 

• 前端

• 后端

• 数据库 

 二、HTML

1 官方文档 

• 地址: https://www.w3school.com.cn/html/index.asp 
• 离线文档: W3School 离线手册(2017.03.11 版).chm 

 2 网页

3 HTML 介绍 

3.1 HTML 是什么 

• HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)
•  HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链
• 接等
• HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容

 3.2 HTML 运行方式

3.2.1 本地运行 

3.2.2 远程访问 

 

4 HTML 快速入门 

4.1 使用 idea 编写 hello.html 

4.2 创建工程 hspedu_javaweb 

 

 4.3 创建 html 页面

 

    
    
    
    




    hello,林然

4.4 注意事项和细节 

5 HTML 基本结构 

6 HTML 标签 

6.1 html 的标签/元素 文档

在线文档 : https://www.w3school.com.cn

6.2 html 的标签/元素-说明 

•  HTML 标签用两个尖括号”<>”括起来
•  HTML 标签一般是双标签，如和 前一个标签是起始标签, 后一个标签为结束标签
•  两个标签之间的文本是 html 元素的内容
•  某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如
  

  ---

• HTML 元素指的是从开始标签到结束标签的所有代码。

 6.3 html 标签注意事项和细节

• 创建 D:\idea_java_projects\hspedutemp200\tag-detail.html 说明标签使用的细节, (html
• 命名规范 xx.yy.html ， xx-yy.html xx_yy.html 根据公司规范要求即可)

    
    
    
    




    hello,林然

6.4 font 字体标签

应用实例 创建 font.html : 在网页上显示 北京 ，并修改字体为 微软雅黑，颜色为蓝色

    
    


        
        北京

 6.5 字符实体

• 在网页上显示一些特殊的符号，称为字符实体(也叫符号实体)。
• 应用实例 将

  ---

  标签以文本方式显示在页面

 

    
    


        
        jack
        
    
        smith
        

        <hr/>
        smith smith2 hsp

        smith
        smith2           hsp

 6.6 字符实体一览表

 6.7 标题标签

• 标题使用

  -

  标签进行定义。

  定义最大的标题。

  定义最小的标题 

    
    


        
        
标签 1
        
标签 2
        
标签 3
        
标签 4
        
标签 5
        
标签 6

 6.8 超链接标签

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以

是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一

个应用程序

    
    


        
     搜狐1
         搜狐2

6.9 无序列表 ul/li

    
    


            
            
五虎将
            

                
jack
                
tom
                
smith
                
mary
                
milan
            

 6.10 有序列表 ol/li

    
    


        
        

            
jack
            
tom
            
smith
            
mary
            
milan
        

 6.11 图像标签(img)

 

 6.12 表格(table)标签

    
    


        
    

        
        

            
名字
            
住址
            
邮件
        
        

            
第一行第一列
            
第一行第二列
            
第一行第三列
        

        

            
第二行第一列
            
第二行第二列
            
第二行第三列
        

        

            
第三行第一列
            
第三行第二列
            
第三行第三列
        
    

6.13 表格标签-跨行跨列表格

 

    
    


        

    

        

            
星期一菜谱

        

        

        
            
素菜
            
青草茄子
            
花椒扁豆
        

        


            
小葱豆腐
            
炒白菜
        

        

            
荤菜
            
油焖大虾
            
海参鱼刺
        

        


            
红烧肉
            
烤全羊
        
    

6.14 form(表单)标签介绍

 url 表示定位一个 web 资源的路径, method 主要有两种 get ,post ，区别后面说

 6.15 form(表单)元素-小练习

    
    


        
    
登录系统
       

           用户名：

           密码：

               
       

6.16 input 标签/元素

 6.17 select/option/textarea 标签

 6.18 表单综合练习

请完成如下界面 

    
    


        
    

        用户注册信息

        用户名称：

        用户密码：

        确认密码：

        请选中你喜欢的运动项目篮球

        足球

        手球

        请选择你的性别男

        女

        请选择你喜欢的城市
        
            --选择--
            成都
            北京
            上海
    `   
        


        自我介绍  

        选择你的文件(头像)

         
    

 表单格式化

    
    


        
    

        
用户注册信息
        

            

                
用户名称：
                

            
            

                
用户密码：
                

            
            

                
确认密码：
                

            
            

                
请选中你喜欢的运动项目
                
篮球
                
足球
                
手球
            
            

                
请选择你的性别
                

                
男
            
            


                

                
女
            
            

                
请选择你喜欢的城市
                

                    --选择--
                    成都
                    北京
                    上海
                    
            
            

                
自我介绍
                

            
            

                
选择你的文件(头像)
                

            
            

                
 
                

            
        





    

6.20 表单提交注意事项

•  action 属性设置提交的服务器地址/资源
•  method 属性设置提交的方式 GET(默认值)或 POST

•  表单提交的时候，数据没有发送给服务器的三种情况：
•         表单某个元素项(比如 text,password)没有 name 属性值
•         单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
•         表单项不在提交的 form 标签中

 

6.21 div 标签

 

    
    


    
    hello,world
    

        
this is a h3
        goto 百度
    

6.22 p 标签

    
    


        
        hello,world
        
段落 1
        
段落 2
        
段落 3

6.23 span 标签

    
    


        
        您的购物车有10个商品