【JAVA WEB】Web标签

目录

注释标签

标题标签 h1-h6

段落标签 

换行标签

格式化标签

        加粗：strong 标签和 b 标签

        倾斜：em 标签和 i 标签

        删除线： del 标签 和 s 标签

        下划线：ins 标签 和 u 标签

图片标签：img  单标签

src属性：

alt属性：

title属性：

width属性：

height属性：

border属性：

超链接标签：a标签

href属性：

target属性：

表格标签

单元格合并

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域：

表单空间

1>文本框

2>密码框

3>单选框

​4>复选框

5>普通按钮

6>提交按钮

7>重置按钮

8>选择文件

label标签

select标签

textarea标签

无语义标签

HTML中常用特殊字符

---

注释标签

        ctrl+'/' 将当前行注释，效果如下：

PS:要看注释掉的信息，F12显示代码

标题标签 h1-h6：

有六个，从h1-h6，数字越大，字体越小

hello
hello
hello
hello
hello
hello

效果如下（各个标签之间的间隙是浏览器默认的css样式，可更改）：

段落标签 

    
        
    
    
        
这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
            这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
            这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
        
        

            这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这
            是第二段这是第二段这是第二段这是第二段
            这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二这是第二段这是第二段这是第二段
        
    

换行标签

    
        
    
    
        
这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
            这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
            这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段
        
        

            这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这
            是第二段这是第二段这是第二段这是第二段
            这是第二段换行处
这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段
            这是第二这是第二段这是第二段这是第二段
        
    

格式化标签

        加粗：strong 标签和 b 标签

        倾斜：em 标签和 i 标签

        删除线： del 标签 和 s 标签

        下划线：ins 标签 和 u 标签

    
        
    
    
        
        

             加粗 strong标签 
        
        

             加粗 b标签 
        
        
        

             倾斜 em标签
        
        

             倾斜 i标签
        
        
        

             删除线 del标签
        
        

             删除线 s标签
        
        
        

             下划线 ins标签
        
        

             下划线 u标签
        
    

PS:虽说每种效果的两种标签效果一样，但是前者是带强调的意思。

图片标签：img  单标签

src属性：

        img标签必须带有src属性，指定图片的路径

alt属性： 
  
        替换文本，当前图片不能正确显示的时候，会显示一个替换的文字。如果图片加载成功，则不显示。
 
  
title属性：
 
  
        提示文本，鼠标放到图片上，就会有提示
 
  
width属性：
 
  
        图片的宽度，px单位 像素
 
  
height属性：
 
  
        图片的高度
 
  
border属性：
 
  
        给图片加边框
 
  
超链接标签：a标签
 
  
href属性：
 
  
必须具备，表示点击后跳转到哪个页面
 
  


    
        
    
    
       跳转页面
    
 
  
href="#"表示不做任何跳转，停留在当前页面
 
  
刷新
 
  
要用图片进行超链接跳转，可在a标签里添加img标签，示例：
 
  

     
 
  
target属性：
 
  
打开方式，默认是_self，如果是_blank则用新的标签页打开。
 
  

     
 
  
表格标签
 
  
 
  
table标签：表示整个表格
 
  
tr：表示表格的一行
 
  
td：表示表格的一个单元格
 
  
th：表示表头单元格，会居中加粗
 
  
thead：表格的头部区域，注意和th区分，范围是比th要大的
 
  
tbody：表格得到的主体区域
 
  



    
    
    


    
            

        
        
        

                
姓名
                
性别
                
年龄
            
        
        

            

                
                
张三
                
男
                
3
            
            

                
李四
                
男
                
4
            
            

                
王五
                
女
                
5
            
        
    

 
  
 
  
单元格合并
 
  
合并行 rowspan="合并的行数"
 
  
合并列 colspan="合并的列数"
 
  



    
    
    


    
            

        

                
姓名
                
性别
                
年龄
            
        
        

            


                
张三
                
                
男
                
3
            
            

                
李四
                
4
            
            

                
                
王五
                
5
            
        
    

 
  
 
  
列表标签
 
  
无序列表
 
  
ul 、li
 
  
ul中的 types属性 改变列前面的符号，有以下三种取值
 
  
 
   
 
    
 
     
disc(默认)
 
     
 
    
 
    
 
     
 
square
 
 
     
 
    
 
    
 
     
circle
 
     
 
    
 
   
 
  
 
  
 
  
PS:快捷键 ”ul>li*3+回车”  在ul下面写3个li“  在ul下面写3个li
 
  



    
    
    


    
这是无序列表
    
    

        
内容1
        
内容2
        
内容3
    

 
  
有序列表
 
  
ol 、li
 
  
ol中的 types属性 改变列前面的编号符号，有以下五种取值
 
  
 
   
 
    
 
     
a //小写英文字母编号
 
     
 
    
 
    
 
     
A //大写英文字母编号
 
     
 
    
 
    
 
     
i //表示小写罗马数字编号
 
     
 
    
 
    
 
     
I //表示大写罗马数字编号
 
     
 
    
 
    
 
     
1 //数字编号(默认)
 
     
 
    
 
   
 
  
 
  
ol 的start属性，更改编号的起始值
 
  



    
    
    


    
这是有序列表
    
    

        
这是有序列表1
        
这是有序列表2
        
这是有序列表3
        
这是有序列表4
    

 
  
自定义列表
 
  
dl 、dt 、dd
 
  



    
    
    


    
这是自定义列表
    
    

        
 自定义列表显示内容 
            
自定义列表内容1
            
自定义列表内容2
            
自定义列表内容3
        
    


 
  
 
  
 
  
表单标签
 
  
        用表单标签来完成服务器的一次交互
 
  
        分为两个部分： 
 
  
 
   
 
    
 
     
表单域
 
     
包含表单元素的区域，重点是form标签
 
    
 
    
 
     
表单控件
 
     
输入框，提交按钮等，重点是input标签
 
    
 
   
 
  
 
  
表单域：
 
  

    

    
    
 
  
表单空间
 
  
可以通过对type进行对应的取值，控制input的类型
 
  
1>文本框
 
  

    

        姓名
    
 
  
 
  
2>密码框
 
  

    

        姓名
        

        密码
    
 
  
 
  
3>单选框
 
  
input 的type 属性为radio时为单选框，使用name实现只能勾选一个的功能，checked="true" 表示默认是勾选的。
 
  



    
    
    


    

        姓名
        

        密码
        

        
        性别男
            女
    

 
  
4>复选框
 
  
input 的 type 属性为 checkbox 时
 
  



    
    
    


    

        爱好
        吃饭
        睡觉
        玩游戏
    

 
  
 
  
5>普通按钮
 
  
input 的 type 属性为 botton 时,value设置按钮显示的文字，点击按钮要触发的事件通过gs设置，
 
  
这里举例弹出hello
 
  

    
 
  
 
  
 
  
 
  
6>提交按钮
 
  
一般将数据提交到服务器上
 
  
input 的 type 属性为 submit  ，单击提交按钮后，会自动清空文本框中的数据
 
  

      姓名
      
 
  
7>重置按钮
 
  
重置文本框、单选框、复选框
 
  
 
  
8>选择文件
 
  
 
  
label标签
 
  
一般和单选框配合使用，实现单击文字也可勾选单选框的功能
 
  
男

        
女
 
  
 
  
select标签
 
  
一般和option配合使用（下拉框效果），默认显示第一个option的文字，可以通过设置selected属性，修改默认显示。
 
  

    
         --请选择年份--
         --2002--
         --2003--
         --2004--
     
 
  
 
  
textarea标签
 
  
row属性 设置超过多少行时出现滚轮
 
  

 
  
 
  
无语义标签
 
  
没有固定的用途，可以拿着这个标签啥都可以干
 
  
        div 是独占一行的，是一个大盒子
 
  
        span 是不独占一行的，是一个小盒子
 
  



    
    
    


    

        

            吃饭
            睡觉
            玩游戏
        

        
吃饭
        
睡觉
        
玩游戏
    

 
  
 
  
HTML中常用特殊字符
 
  
空格：  
 
  
小于号：<
 
  
大于号：>
 
  
按位与：&；