• HTML5-基本标签的使用

    目录

    1.初始HTML

    2.网页基本标签

    3.图像标签

    4.超链接标签及应用

    5.块元素和行内元素

    1.初始HTML

    • HTML

            Hyter Text Markup Language（超文本标记语言）

            超文本包括：文字、图片、音频、视频、动画等等

    • W3C 标准

            W3C
                    World Wide Web Consortium（万维网联盟）

                    成立于1994 年，Web 技术领域最权威和具影响力的国际中立性技术标准机构

                    http://www.w3.org/

                    W3C中文官网

            W3C 标准包括
                    结构化标准语言（HTML、XML）

                    表现标准语言（CSS）

                    行为标准语言（DOM、ECMAScript）

    • html的基本结构
    2. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    5. <head>
    7.     <meta charset="UTF-8">
    8.     <meta name="keywords" content="biubiu">
    9.     <meta name="description" content="this is my first html5 page">
    11.     <title>Titletitle>
    12. head>
    14. <body>
    15. Hello,world
    16. body>
    17. html>
    •  、 等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如
      意为用 / 来关闭空元素

    2.网页基本标签

    • 标题标签(

      ......

      ,数字越小字体越大)
    • 段落标签（

      ）

    • 水平线标签(
      )
    • 换行标签(
      )
    • 粗体/斜体(/)
    • 特殊符号（空格、大于、小于、版权符号等等）

    代码测试：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>基本标签学习title>
    6. head>
    7. <body>
    9. <h1>一级标签h1>
    10. <h2>二级标签h2>
    11. <h3>三级标签h3>
    12. <h4>四级标签h4>
    13. <h5>五级标签h5>
    14. <h6>六级标签h6>
    15.  
    17. <p>当我们在进行基于数据库的web程序开发时，我们可以先在主程序（如Servlet、Bean）中通过JDBC中的DriverManager建立数据库连接，p>
    18. <p>然后将要对数据库进行操作的sql语句封装到Statement中，最后在返回结果集后断开数据库连接。p>
    19. <p>以上是较为传统的开发模式，然而用这种模式开发会埋下严重的安全隐患。p>
    20.  
    22. <hr/>
    23.  
    25. 当我们在进行基于数据库的web程序开发时，我们可以先在主程序（如Servlet、Bean）中通过JDBC中的DriverManager建立数据库连接，<br/>
    26. 然后将要对数据库进行操作的sql语句封装到Statement中，最后在返回结果集后断开数据库连接。<br/>
    27. 以上是较为传统的开发模式，然而用这种模式开发会埋下严重的安全隐患。<br/>
    28.  
    30. <strong>粗体：i love youstrong><br>
    31. <em>斜体：i love youem><br>
    32.  
    34. 空    格： <br>
    35. 大于:><br>
    36. 小于:<<br>
    37. 版权符号:©<br>
    38.  
    39. body>
    40. html>

    3.图像标签

    1）常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
    • ……

    2）图像标签格式

    <img src="path" alt="text" title="text" width="x" height="y" />

    属性说明：
            src：图像地址，必选

            alt：图像的替代文字，必选

            title：鼠标悬停提示文字

            width：图像宽度

            height：图像高度

    3）代码测试：

    首先养成良好的习惯，创建一个 resources 文件夹用于存放资源，在 resources 下面创建一个 img 文件夹专门用于存放图片资源。在里面存放一个图片 1.png

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>图像标签学习title>
    6. head>
    7. <body>
    9. <img src="../resource/image/1.PNG" alt="测试头像" title="悬停文字" width="135" height="100"><br>
    10.  
    11. <a href="连接标签.html#down">跳转a>
    12. body>
    13. html>

    4.超链接标签及应用

    1）连接标签

    属性说明：

            href：链接路径

            target：指定链接在哪个标签打开，

                         常用值：_self（默认，在当前标签打开链接）

                                       _blank（在新标签打开链接）

    2）超链接

    • 从页面间链接（从一个页面链接到另一个页面）
    • 锚链接
    • 功能性链接

    3）锚链接

    • 需要一个锚标记（id 属性，原来是 name 属性但已经被废弃了）
    •  跳转到标记（跳转路径为 #id属性定义的值）

    完整代码测试：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>连接标签title>
    6. head>
    7. <body>
    8. <a name="top">顶部a><br>
    10. <a href="我的第一个网页.html" target="_blank">点击跳转至页面一a><br>
    11. <a href="https://www.baidu.com" target="_self">点击跳转至页面二a><br>
    12. <a href="我的第一个网页.html">
    13.     <img src="../resource/image/1.PNG" alt="测试图片">
    14. a>
    15.  
    17. <p>
    18.     <a href="我的第一个网页.html">
    19.         <img src="../resource/image/1.PNG" alt="测试图片">
    20.     a>
    21. p>
    22.  
    23. <p>
    24.     <a href="我的第一个网页.html">
    25.         <img src="../resource/image/1.PNG" alt="测试图片">
    26.     a>
    27. p>
    28.  
    29. <p>
    30.     <a href="我的第一个网页.html">
    31.         <img src="../resource/image/1.PNG" alt="测试图片">
    32.     a>
    33. p>
    34.  
    35. <p>
    36.     <a href="我的第一个网页.html">
    37.         <img src="../resource/image/1.PNG" alt="测试图片">
    38.     a>
    39. p>
    40.  
    41. <p>
    42.     <a href="我的第一个网页.html">
    43.         <img src="../resource/image/1.PNG" alt="测试图片">
    44.     a>
    45. p>
    46.  
    48. <a href="#top">回到顶部a><br>
    49.  
    50. <a name="down">downa><br>
    51.  
    53. <a href="mailto:348082979@qq.com">点击联系我a>
    54. body>
    55. html>

    5.块元素和行内元素

  • 相关阅读:
    Python数据可视化：类别比较图表可视化
    Flutter FlutterActivity找不到
    sklearn实现多元线性回归 【Python机器学习系列（七）】
    信贷业务中一大最重要的指标数据测算
    【Java】常用API——String类、Math类
    springboot+vue+elementUI304springboot305springboot农机电招租赁预约平台#毕业设计
    Python GDAL+numpy遥感图像处理过程中背景像元处理方法
    Endotoxin Substrate：Boc-LGR-pNA，CAS号: 68223-96-1
    制造业数字化转型究竟是什么
    ruby基础-安装和命令行
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126420117