Java学习总结（二十三）——前端：HTML基本标签的使用

一．HTML概述
1.HTML：（Hyper Text Markup Language）超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。
2.HTML的基本结构：

（1）中主要包括网页的基本信息：网页标题，元数据标签
（2）中主要包括网页内容
3.网页基本信息：
（1）DOCTYPE声明

（2）

大家好

大家好

大家好

大家好

大家好

大家好

运行结果：

2.网页的基本标签
（1）段落标签：

…

（2）换行标签：

（3）水平线标签：

---

（4）注释：注释
（5）特殊符号：

例3（上述标签的使用）：

    
    


    
清平乐
    

    
年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！
    
今年海角天涯，萧萧两鬓生华。
    
看取晚来风势，故应难看梅花

运行结果：

3.图像标签
（1）常见的图像格式：JPG,GIF,PNG,BMP
（2）图像标签的使用：

例4（图片标签的使用）：

    
    


    
清平乐
    

    
年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！
    
今年海角天涯，萧萧两鬓生华。
    
看取晚来风势，故应难看梅花
    

运行结果：

4.链接标签
（1）使用语法：

（2）使用场合：
a.超链接使用场合：
·页面间链接（从一个页面链接到另一个页面）
b.功能性链接：
·电子邮件
·迅雷
·QQ等
例5（链接标签的使用）：

    
    


    
清平乐
    

    
年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！
    
今年海角天涯，萧萧两鬓生华。
    
看取晚来风势，故应难看梅花
    
    点击图片查看更多梅花图片

    跳转至li2.html页面

运行结果：

点击图片跳转：

点击跳转li2.html:

5.html列表
（1）无序列表

·无序列表的类型：
ul标签type属性取值

（2）有序列表

·有序列表的类型
Ol标签的type取值

（3）定义列表

列表对比：

例6（列表的使用）：

    
    


    
西安大学名称
    

    

        
西安交通大学
        
西安电子科技大学
            

                
信息工程学院
                    
电子信息工程
                    
张飞
                
                
自动化学院
                
机械学院
            
        
        
西安理工大学
        
西安邮电大学
        
陕西师范大学
    

运行结果：

三．HTML中的表格
1.表格语法

2.对其方式
（1）表格对齐方式：默认对齐、居中对齐、左对齐、右对齐
（2）单元格对齐方式：水平对齐方式、垂直对齐方式

3.表格的跨行跨列
（1）表格的跨行：

（2）表格的跨列：与跨行相似使用rowspan=”n”;

例7（表格练习）：

    
    
    


    
天津高级中学学生成绩统计表
    

        

            
理科学生成绩表
        
        

            
学号
            
姓名
            
科目成绩
            
总分
            
排名
        
        

            
语文
            
数学
            
英语
            
理科综合
        
        

            
1
            
张飞
            
119
            
138
            
120
            
270
            
647
            
1
        
        

            
2
            
赵云
            
120
            
143
            
106
            
269
            
638
            
3
        
        

            
3
            
关羽
            
134
            
137
            
119
            
239
            
629
            
4
        
        

            
4
            
刘备
            
134
            
123
            
108
            
240
            
605
            
5
        
        

            
5
            
诸葛亮
            
145
            
109
            
102
            
289
            
645
            
2
        
        

            
链接
            
点击跳转至文科学生成绩统计表
        
    

运行结果：

四．表单标签
1.表单：

2.表单语法：

3.表单元素格式：

4.表单元素：
（1）文本框：

（2）密码框：

（3）单选按钮：

（4）复选框：

（5）下拉列表框：

（6）按钮：

（7）多行文本域：

（8）文件域：

（9）表单元素的高级属性
·只读：readonly=”true”
·禁用：disabled=”true”
例8（表单标签的使用）：

    
    
    


    

        
欢迎来到哈哈网注册界面
        

            
用户名：
            
密    码：
            

                性别：
                男
                女
            
            

                兴趣爱好：
                 足球
                 蓝球
                 乒乓球
                 网球
                 跳舞
                 唱歌
            
            

                籍    贯：
                
                    请选择你所在的省份
                    陕西
                    河北
                    河南
                    山东
                    湖南
                    湖北
                    四川
                    浙江
                    云南
                    山西
                
            
            

                出生年月：
                    
                
            
            

                自我描述：

                    
            
            

                上传个人照片：
                
            
            

                
                
            
        

    

运行结果：

五．滚动标签
direction="down" left默认值 right up
behavior="alternate" 滚动方式 scoll滚动 alternate 来回滚动 slide单次滚动
loop 循环次数 默认就是无限滚动 可以给具体的次数 -1代表无限滚动
scrollamount 决定文字滚动的速度 数值越大滚动速度越快
bgcolor 滚动区域的背景
width height 滚动的宽高区域
scrolldelay="2000" 滚动的延时
hspace 调整滚动区域离左边边框的横向间距
vspace 调整滚动区域离上边框的纵向间距
onmouseover="this.stop()" 鼠标移动上去，暂停滚动
onmouseout="this.start()" 鼠标离开后，继续滚动
例9（滚动标签练习）：

    
    
    


    
       
       
×××
       中央人民政府               美利坚合众国
       
        
            
       

运行结果：


【本次HTML部分总结完毕】