• 【Java Web】HTML 标签 总结

    目录

    1.HTML

    2.标签

       1. head  标签

            1.图标

            2.样式居中

       2. body 标签

    1.注释  ：     

    2.加载图片 img

    3.加载视频 iframe

    4.区域 div span p  标题 h1 h2 h3

    5.格式化标签

    6.上下跳转，页面跳转 a

    7.表格 table

    8.有序列表 ul li，无序列表 ol li 自定义列表

    9.登录

    10.普通按钮 

    11.提交按钮 表单操作

    12.多选框 单选框

    13.文本框

    14.下拉列表

    1.HTML

    概念：HTML（Hypertext Markup Language ) 超文本标记语言。

    HTML 不是一种编程语言，而是一种标记语言。
    Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。
    HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。
    可以使用任意文本编辑器编辑，需要使用浏览器执行。

    访问：https://www.w3school.com.cn/

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. body>
    10. html>

    2.标签

       1. head  标签

          头部标签...

     

            1.图标

    例如

            2.样式居中

      是需要额外写.css代码的

             或者

     
   write code...

       2. body 标签

          body标签...

    1.注释  ：     

     

    2.加载图片 img

    加载不出来时显示这段话

    border是边框大小

    3.加载视频 iframe

    例如


    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTMLtitle>
    6. head>
    7. <body>
    9. <img width="303" src="image.png" alt="asddd" title="光标提示词" border="1"> 
    11. <iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" > iframe>
    12. body>
    13. html>

    效果 

    4.区域 div span p  标题 h1 h2 h3

    分区

    每个区域中分几部分 

    文章分段


    换行

    分割线

    我是一级标题

    我是二级标题

    我是三级标题

    ...

    我是正文

    上面这几个可以嵌套使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9.     <div>
    10.         我是第一个区域
    11.     div>
    12.     <div>
    13.         <span>我是第二个区域的第一部分span>
    14.         <span>我是第二个区域的第二部分span>
    15.     div>
    16.     <p>
    17.         我是第一段文字
    18.     p>
    19.     <p>
    20.         我是第二段文字
    21.     p>
    22.     <h1>一级标题h1>
    23.     <h2>二级标题h2>
    24.     <h3>三级标题h3>
    25.     <p>我是正文p>
    26. body>
    27. html>

    效果 

    5.格式化标签

    （1）加粗    

    （2）倾斜      

    （3）删除线     

    （4）下划线     

    6.上下跳转，页面跳转 a

    （1）当前页面打开 target="_self"

            点击小破站

    （2）新的页面打开 target="_blank"

            点击小破站

            点击到达底部

            

    底部

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <a href="#test">点击到达底部a>
    10. <br>
    11. <a href="https://www.bilibili.com/" target="_blank">新的页面打开a>
    12. <br>
    13. <a href="https://www.bilibili.com/" target="_self">当前页面打开a>
    14. <br>
    15. <img width="800" src="image.png" alt="加载中">
    16. <img width="800" src="image.png" alt="加载中">
    17. <img width="800" src="image.png" alt="加载中">
    18. <div id="test">底部div>
    19. body>
    20. html>

    效果 

    7.表格 table

    属性

    • border 显示边框   
    • width 宽   
    • cellspacing 单元格与单元格之间的距离
    • cellpadding 定义单元格中内容和边框之间的距离
    • tr 行 表格的行
    • td 一个单元格
    • th 头部单元格 加粗的
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    10. <table  border="" width="300" cellspacing="0" cellpadding="30">
    11.     <thead> 
    12.     <tr>
    13.         <th>学号th>
    14.         <th>姓名th>
    15.         <th>性别th>
    16.     tr>
    17.     thead>
    18.     <tbody> 
    19.     <tr>
    20.         <td>0001td>
    21.         <td>张伟td>
    22.         <td>男td>
    23.     tr>
    24.     <tr>
    25.         <td>0001td>
    26.         <td>张伟td>
    27.         <td>男td>
    28.     tr>
    29.  
    30.     tbody>
    31. table>
    32. body>
    33. html>

    效果 

    8.有序列表 ul li，无序列表 ol li 自定义列表

    （1）无序列表   

            
      
            
    • 一号
      • 
            
    • 二号
      • 
            
    • 三号
      • 
            
    • 四号
      • 
            
    • 五号
      • 
        
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <ul>
    10.     <li>一号li>
    11.     <li>二号li>
    12.     <li>三号li>
    13.     <li>四号li>
    14.     <li>五号li>
    15. ul>
    16. body>
    17. html>

    （2）有序列表

            


                  
    1. 一号

      2.            
    2. 二号

      3.            
    3. 三号

      4.            
    4. 四号

      5.            
    5. 五号

      6.         

    type="A" / "a" / "1" / "i" / "I"

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <ol type="1">
    10.     <li>一号li>
    11.     <li>二号li>
    12.     <li>三号li>
    13.     <li>四号li>
    14.     <li>五号li>
    15. ol>
    16. <ol type="A">
    17.     <li>一号li>
    18.     <li>二号li>
    19.     <li>三号li>
    20.     <li>四号li>
    21.     <li>五号li>
    22. ol>
    23. <ol type="a">
    24.     <li>一号li>
    25.     <li>二号li>
    26.     <li>三号li>
    27.     <li>四号li>
    28.     <li>五号li>
    29. ol>
    30. <ol type="i">
    31.     <li>一号li>
    32.     <li>二号li>
    33.     <li>三号li>
    34.     <li>四号li>
    35.     <li>五号li>
    36. ol>
    37. <ol type="I">
    38.     <li>一号li>
    39.     <li>二号li>
    40.     <li>三号li>
    41.     <li>四号li>
    42.     <li>五号li>
    43. ol>
    44. body>
    45. html>

    （3）自定义列表

    
    
    
        
    ...
    
        
    ...

    9.登录

    作用：label是点击例如账号这个字或者一些图标就能锁定输入。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body style="text-align: center">   
    8.     <h2>登录网站h2>  
    9.     <div>
    10.         <label>
    11.             账号：
    12.             <input type="text" placeholder="Username...">
    13.         label>
    14.     div>
    15.  
    16.     <div>
    17.          <label>
    18.             密码：
    19.             <input type="password" placeholder="password...">
    20.         label>
    21.     div>
    22.  
    23.     <div>
    24.         <label>
    25.             <input type="checkbox">
    26.             我同意...
    27.         label>
    28.     div>
    29.  
    30.     <div>
    31.         <br>  
    32.         <button> 取消 button>
    33.         <button> 登录 button>
    34.     div>
    35.  
    36.     <div>
    37.         <a href="https://www.bilibili.com/">忘记密码a> 
    38.     div>
    39.  
    40.     <div>
    41.         <label>
    42.             日期：
    43.             <input type="date" placeholder="Username...">
    44.         label>
    45.     div>
    46.  
    47.     <div>
    48.         <label>
    49.             日期：
    50.             <input type="datetime-local">
    51.         label>
    52.     div>
    53.  
    54.     <div>
    55.         <label>
    56.             文件:
    57.             <input type="file">
    58.         label>
    59.     div>
    60.  
    61. body>
    62. html>

    10.普通按钮 

    或者

                                        

    11.提交按钮 表单操作

    οnclick=' '  登录提示弹窗

    提交按钮submit与 form 搭配使用

    form作用

    提交数据 比如登录等操作，需要将数据提交到服务器（地址）上去，这就离不开form

    前端填写的数据，提交到服务器上去

            

     

            

            

    提交 重置 选择文件 input

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.     <form action="https://www.hao123.com/?tn=85070231_42_hao_pg">
    9.         用户名<input type="text" name="username">
    10.         <input type="submit" name="提交">
    11.         <input type="reset">
    12.         <input type="file">
    13.     form>
    14. body>
    15. html>

    12.多选框 单选框

                          

    13.文本框

    14.下拉列表

                                 

  • 相关阅读:
    二叉查找树(1)-二叉树-数据结构和算法(Java)
    热门开源项目推荐
    【BOOST C++ 19 应用库】（4） Boost.Serialization
    dubbo以xml方式操作和新版dubbo-admin安装
    4、QT中的网络编程
    Acwing3715. 最少交换次数（冒泡排序法的模拟思路）
    验证k8s中HPA功能及测试
    CSS 清除浮动
    export和source
    c/c++常见的数据类型表示的范围
  • 原文地址：https://blog.csdn.net/m0_73381672/article/details/132849672