【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+'/' 将当前行注释,效果如下:





    

【JAVA WEB】Web标签_第1张图片

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

标题标签 h1-h6:

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

hello

hello

hello

hello

hello
hello

效果如下(各个标签之间的间隙是浏览器默认的css样式,可更改):

【JAVA WEB】Web标签_第2张图片

段落标签 



    
        测试页面
    
    
        

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

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

【JAVA WEB】Web标签_第3张图片

换行标签




    
        测试页面
    
    
        

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

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

【JAVA WEB】Web标签_第4张图片

格式化标签

        加粗:strong 标签和 b 标签

        倾斜:em 标签和 i 标签

        删除线: del 标签 和 s 标签

        下划线:ins 标签 和 u 标签



    
        测试页面
    
    
        
        

加粗 strong标签

加粗 b标签

倾斜 em标签

倾斜 i标签

删除线 del标签

删除线 s标签

下划线 ins标签

下划线 u标签

【JAVA WEB】Web标签_第5张图片

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:表格得到的主体区域




    
    
    Document


    
            
姓名 性别 年龄
张三 3
李四 4
王五 5

【JAVA WEB】Web标签_第6张图片

单元格合并

合并行 rowspan="合并的行数"

合并列 colspan="合并的列数"




    
    
    Document


    
            
姓名 性别 年龄
张三 3
李四 4
王五 5

【JAVA WEB】Web标签_第7张图片

列表标签

无序列表

ul 、li

ul中的 types属性 改变列前面的符号,有以下三种取值

disc(默认) 【JAVA WEB】Web标签_第8张图片

square

【JAVA WEB】Web标签_第9张图片
circle 【JAVA WEB】Web标签_第10张图片

PS:快捷键 ”ul>li*3+回车”  在ul下面写3个li“  在ul下面写3个li




    
    
    Document


    

这是无序列表

  • 内容1
  • 内容2
  • 内容3

有序列表

ol 、li

ol中的 types属性 改变列前面的编号符号,有以下五种取值

a //小写英文字母编号 【JAVA WEB】Web标签_第11张图片
A //大写英文字母编号 【JAVA WEB】Web标签_第12张图片
i //表示小写罗马数字编号 【JAVA WEB】Web标签_第13张图片
I //表示大写罗马数字编号 【JAVA WEB】Web标签_第14张图片
1 //数字编号(默认) 【JAVA WEB】Web标签_第15张图片

ol 的start属性,更改编号的起始值




    
    
    Document


    

这是有序列表

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

自定义列表

dl 、dt 、dd




    
    
    Document


    

这是自定义列表

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

【JAVA WEB】Web标签_第16张图片

表单标签

        用表单标签来完成服务器的一次交互

        分为两个部分: 

表单域 包含表单元素的区域,重点是form标签
表单控件 输入框,提交按钮等,重点是input标签

表单域:


    

表单空间

可以通过对type进行对应的取值,控制input的类型

1>文本框


    
姓名

2>密码框


    
姓名
密码

【JAVA WEB】Web标签_第17张图片

3>单选框

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




    
    
    Document


    
姓名
密码
性别

【JAVA WEB】Web标签_第18张图片4>复选框

input 的 type 属性为 checkbox 时




    
    
    Document


    
爱好 吃饭 睡觉 玩游戏

5>普通按钮

input 的 type 属性为 botton 时,value设置按钮显示的文字,点击按钮要触发的事件通过gs设置,

这里举例弹出hello

【JAVA WEB】Web标签_第19张图片

6>提交按钮

一般将数据提交到服务器上

input 的 type 属性为 submit  ,单击提交按钮后,会自动清空文本框中的数据

姓名

7>重置按钮

重置文本框、单选框、复选框

8>选择文件

label标签

一般和单选框配合使用,实现单击文字也可勾选单选框的功能



        

【JAVA WEB】Web标签_第20张图片

select标签

一般和option配合使用(下拉框效果),默认显示第一个option的文字,可以通过设置selected属性,修改默认显示。

【JAVA WEB】Web标签_第21张图片

textarea标签

row属性 设置超过多少行时出现滚轮

【JAVA WEB】Web标签_第22张图片

无语义标签

没有固定的用途,可以拿着这个标签啥都可以干

        div 是独占一行的,是一个大盒子

        span 是不独占一行的,是一个小盒子




    
    
    Document


    
吃饭 睡觉 玩游戏
吃饭
睡觉
玩游戏

【JAVA WEB】Web标签_第23张图片

HTML中常用特殊字符

空格:  

小于号:<

大于号:>

按位与:&;

你可能感兴趣的:(java,前端,算法)