本文最后更新于16 天前，其中的信息可能已经过时，如有错误请发送邮件到1169063119@qq.com

01.HTML快速入门

HTML快速入门

hello html

<html>
	<head>
		<title>HTML快速入门</title>
	</head>
	<body>
		<h1>hello html</h1>
	<body>
</html>

02.HTML快速入门

html快速入门

hello html

<!-- 声明文档的类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 字符集 -->
  <meta charset="UTF-8">
  <!-- 设置网页在移动设备上的显示宽度及缩放比例 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html快速入门</title>
</head>
<body>
  <h1>html快速入门</h1>
  <img src="C:\Users\11690\Desktop\文档\照片\11.jpg">

  <!-- 定义一个一级标题，标题内容：hello html -->
  <h1>hello html</h1>

  <!-- 定义一个图片，路径：C:\Users\11690\Desktop\文档\照片\11.jpg -->
   <img src="C:\Users\11690\Desktop\文档\照片\11.jpg"></img>
</body>
</html>

03.央视新闻-标题-排版

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
</head>
<body>
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  
  <!-- 定义一个超链接，超链接内容：央视网 -->
   <!-- href：超链接地址
         target：打开超链接的方式
                 _blank：新窗口打开
                 _self：当前窗口打开
 -->
    <a href="https://www.cctv.com/" target="_blank">央视网</a>
    2024年05月15日 20:05:01
</body>
</html>

04.央视新闻-标题-样式

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <!-- 方式二：全局样式 -->
  <!-- <style>
    span {
      color: gray;
    }
  </style> -->

  <!-- 方式三：外部样式 -->
   <link rel="stylesheet" href="css/news.css"></link>

   <style>
    span {
      /* 关键字 */
      /* color: gray; */

      /* rgb表示法 */
      /* color: rgb(128, 128, 128); */

      /* rgba表示法 */
      /* color: rgba(128, 128, 128, 0.5); */

      /* 十六进制表示法 */
      color: #b2b2b2;
    }
  </style>
   </style>
</head>
<body>
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <a href="https://www.cctv.com/" target="_blank">央视网</a>

    <!-- 方式一：行内样式 -->
    <!-- <span style="color: gray;"> 2024年05月15日 20:05:01</span> -->
    <span> 2024年05月15日 20:05:01</span>
</body>
</html>

05.央视新闻-标题-样式（选择器）

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01 666

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
   <link rel="stylesheet" href="css/news.css"></link>

   <style>
    /* 元素选择器
    span {
      color: #b2b2b2;
    } */

    /* 类选择器 
    .cls{
      color: #0000ff;
    } */

    /* id选择器  */
    #time{
      color: #ff0000;
    }

    a {
     /* 去除央视网下面的下划线  */
     text-decoration: none;
    }
   </style>
</head>
<body>
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <a href="https://www.cctv.com/" target="_blank">央视网</a>

    <span id="time"> 2024年05月15日 20:05:01</span>

    <span>666</span>

</body>
</html>

06.央视新闻-正文-排版

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01

央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。

行走在长江沿线，科研人员发现很多可喜现象。

在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。

在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。

在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。

水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。

实施长江十年禁渔，是以习近平同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。

按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。 2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。

实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。

安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。

在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。

在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。

长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
   <link rel="stylesheet" href="css/news.css"></link>

   <style>
    .cls{
      color: #b2b2b2;
    } 

    a {
   text-decoration: none; /*去除下划线 */
  
 }
   </style>
</head>
<img>
  <!-- 新闻标题 -->
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <a href="https://www.cctv.com/" target="_blank">央视网</a>

    <span class="cls"> 2024年05月15日 20:05:01</span>

  <!-- 新闻正文 -->
  <!-- 定义一个视频，引入video -->
   <!-- video标签属性
      src：视频地址
      controls：控制视频播放
      autoplay：自动播放
      loop：循环播放
      muted：静音播放
      width：视频宽度(宽度和高度只设置一个即可，另一个会等比例缩放)
      height：视频高度
      单位：
        px：像素
        %：百分比(相对于父元素的百分比)
   -->
      <video src="video/01.mp4" controls width="100%" height="100%"></video>
      <!-- <audio></audio>
       视频就用video标签，音频就用audio标签 -->

      <p>
       央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
       总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。
       这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
      </p>
      <p>
       行走在长江沿线，科研人员发现很多可喜现象。
      </p>

      <!-- 定义一张图片，引入img -->
      <!-- - 绝对路径:
                绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
                绝对网络路径: <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif" alt="">
            相对路径:
                ./ （可以省略的）: 当前目录 
                ../: 上一级目录
     -->
      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif" alt=""></img>
      <p>在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。</p>

      <p>在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。</p>
      <p>在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。</p>

      <img src="https://p1.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519361961631.png" alt=""></img>
      <p>水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。</p>
      <p>实施长江十年禁渔，是以习近平同志为核心的党中央从中华民族长远利益出发作出的重要决策。
        党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。</p>

      <img src="https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519373997073.png" alt=""></img>
      <p>按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。
        禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。
        2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。</p>
        <p>实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。</p>


      <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519390212454.png" alt=""></img>
      <p>安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。</p>
      <p>在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。</p>
      <p>在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。
        禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。</p>

      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519401915410.png" alt=""></img>
      <p>长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。
        下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。</p>
</body>
</html>

07.央视新闻-正文-样式

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01

央视网消息 （新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。

行走在长江沿线，科研人员发现很多可喜现象。

在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。

在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。

水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。

实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。

安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。

在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
   <link rel="stylesheet" href="css/news.css"></link>

   <style>
    .cls{
      color: #b2b2b2;
    } 

    a {
   text-decoration: none; /*去除下划线 */
 }

    p{
       line-height: 2; /*行高：两倍行高 */
       text-indent: 2em; /* 首行缩进 */
    }
   </style>
</head>
<img>
  <!-- 新闻标题 -->
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <a href="https://www.cctv.com/" target="_blank">央视网</a>

    <span class="cls"> 2024年05月15日 20:05:01</span>

  <!-- 新闻正文 -->
      <video src="video/01.mp4" controls width="100%" height="100%"></video>
      <p>
        <!--字符实体 
        &nbsp;空格 
        &gt;大于号>
        &lt;小于号<
        -->

        <!-- 加粗可以使用<b></b>或者<strong></strong> -->
         <strong>央视网消息</strong>
       （新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
       总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。
       这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
      </p>
      <p>
       行走在长江沿线，科研人员发现很多可喜现象。
      </p>

      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif" alt=""></img>
      <p>在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。</p>

      <p>在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。</p>
      <p>在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。</p>

      <img src="https://p1.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519361961631.png" alt=""></img>
      <p>水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。</p>
      <p>实施长江十年禁渔，是以习近平同志为核心的党中央从中华民族长远利益出发作出的重要决策。
        党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。</p>

      <img src="https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519373997073.png" alt=""></img>
      <p>按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。
        禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。
        2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。</p>
        <p>实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。</p>


      <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519390212454.png" alt=""></img>
      <p>安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。</p>
      <p>在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。</p>
      <p>在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。
        禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。</p>

      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519401915410.png" alt=""></img>
      <p>长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。
        下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。</p>
</body>
</html>

08.央视新闻-整体布局

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

央视网 2024年05月15日 20:05:01

行走在长江沿线，科研人员发现很多可喜现象。

在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。

在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。

水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。

实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。

安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。

在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
   <link rel="stylesheet" href="css/news.css"></link>

   <style>
    .cls{
      color: #b2b2b2;
    } 

    a {
   text-decoration: none; /*去除下划线 */
 }

    p{
       line-height: 2; /*行高：两倍行高 */
       text-indent: 2em; /* 首行缩进 */
    }

    /* 整体版面居中显示 */
    #content-container{
      width: 70%;
      margin-left: auto;
      margin-right: auto;
    }
   </style>
</head>

<body>
  <div id="content-container">
    <img>
  <!-- 新闻标题 -->
  <!-- 定义一个一级标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 style="font-size: 30px;">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <a href="https://www.cctv.com/" target="_blank">央视网</a>

    <span class="cls"> 2024年05月15日 20:05:01</span>

  <!-- 新闻正文 -->

      <video src="video/01.mp4" controls width="100%" height="100%"></video>
      <p>
         <strong>央视网消息</strong>
       （新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
       总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。
       这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
      </p>
      <p>
       行走在长江沿线，科研人员发现很多可喜现象。
      </p>

      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif" width="100%"></img>
      <p>在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。</p>

      <p>在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。</p>
      <p>在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。</p>

      <img src="https://p1.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519361961631.png" width="100%"></img>
      <p>水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。</p>
      <p>实施长江十年禁渔，是以习近平同志为核心的党中央从中华民族长远利益出发作出的重要决策。
        党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。</p>

      <img src="https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519373997073.png" width="100%"></img>
      <p>按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。
        禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。
        2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。</p>
        <p>实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。</p>


      <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519390212454.png" width="100%"></img>
      <p>安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。</p>
      <p>在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。</p>
      <p>在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。
        禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。</p>

      <img src="https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051519401915410.png" width="100%"></img>
      <p>长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。
        下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。</p>
  </div>
</body>
</html>

09.盒子模型

盒子模型

A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    #div1 {
      width: 400px; /* 默认是内容展示区域的宽度 */
      height: 300px;  /*默认是内容展示区域的高度 */
      background-color: red;
      padding: 30px;
      box-sizing: border-box;
      border: 20px solid #ffff00;
      margin: auto;
    }
  </style>
</head>
<body>
  <div id="div1">
    A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A
  </div>
</body>
</html>

10.tlias案例-顶部导航栏

tlias智能学习辅助系统

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tlias智能学习辅助系统</title>
  <style>
    /* 导航栏样式 */
    .navbar {
      background-color: #808080;
      display: flex; /* 弹性布局 */
      justify-content: space-between; /* 左右对齐 */
      padding: 10px;  /* 内边距 */
      align-items: center; /* 垂直居中 */
    }
    .navbar h1{
      margin: 0;
      font-weight: bold;
      color: white;
      /* 设置字体为楷体 */
      font-family: "楷体";
    }
    .navbar a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <h1>Tlias智能学习辅助系统</h1>
    <a href="#">退出登录</a>
  </div>
</body>
</html>

11.flex布局

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
    #flex-container {
      width: 500px;
      height: 300px;
      background-color: #f1eeee;
      display: flex;
      flex-direction: row; /* 默认是row 水平布局，设置主轴*/
      /* flex-end 从尾部开始排列 */
      /* flex-start 从头部开始排列 */
      /* space-around 平分剩余空间 */
      /* space-between 两边对齐 在平分剩余空间 */
      justify-content: space-around;
    }
    .flex-item {
     width: 100px;
     height: 100px;
     background-color: rgb(184, 246, 184);
     border: 1px solid rgb(141, 138, 138);
    }
  </style>
</head>
<body>
  <div id="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
</body>
</html>

12.表单标签

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>
<body>
  <form action="/save" method="post">
    姓名：<input type="text" name="name"></input>
    年龄：<input type="text" name="age"></input>
    <input type="submit" value="提交"></input>
  </form>
</body>
</html>

13.表单项标签

Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="post">
    姓名：<input type="text" name="name"></input><br><br>

    密码：<input type="password" name="password"></input><br><br>

    性别：<input type="radio" name="sex" value="男">男</input>
           <label><input type="radio" name="sex" value="女">女</input><br><br>
</label> 
    爱好：<input type="checkbox" name="hobby" value="打游戏"></input>打游戏
            <input type="checkbox" name="hobby" value="看电影"></input>看电影
            <input type="checkbox" name="hobby" value="看小说"></input>看小说<br><br>
    
    图像：<input type="file" name="image"></input><br><br>

    生日：<input type="date" name="birthday"></input><br><br>

    时间：<input type="time" name="time"></input><br><br>

    日期时间：<input type="datetime-local" name="datetime"></input><br><br>

    学历：<select name="degree">
      <option value="">请选择</option>
      <option value="高中">高中</option>
      <option value="大专">大专</option>
      <option value="本科">本科</option>
      <option value="硕士">硕士</option>
      <option value="博士">博士</option>
    </select><br><br>

    描述：<textarea name="desc" cols="30" rows="10"></textarea><br><br>

    <input type="hidden" name="id" value="123"></input>

    <input type="button" value="按钮"></input>
    <input type="reset" value="重置"></input>
    <input type="submit" value="提交"></input>
  </form>
</body>
</html>

14.tlias案例-搜索表单区域

tlias智能学习辅助系统

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tlias智能学习辅助系统</title>
  <style>
    /* 导航栏样式 */
    .navbar {
      background-color: #808080;
      display: flex; /* 弹性布局 */
      justify-content: space-between; /* 左右对齐 */
      padding: 10px;  /* 内边距 */
      align-items: center; /* 垂直居中 */
    }
/* <h1>标签样式 */ 
    .navbar h1 {
      margin: 0;
      font-weight: bold;
      color: white;
      /* 设置字体为楷体 */
      font-family: "楷体";
    }
    .navbar a {
      color: white;
      text-decoration: none;
    }

    /* 搜索表单样式 */
    .search-form {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;  /*控件之间的距离 */
      margin: 10px 0;
    }
    .search-form input[type="text"],.search-form  select{
      padding: 5px;
      width: 230px;
    }

    /* 搜索表单按钮样式 */
    .search-form button {
      padding: 5px 15px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <h1>Tlias智能学习辅助系统</h1>
    <a href="#">退出登录</a>
  </div>

  <form class="search-form" action="/search" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名"></input>

    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value=""></option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>

    <label for="position">职位：</label>
    <select id="position" name="position">
      <option value=""></option>
      <option value="班主任">班主任</option>
      <option value="讲师">讲师</option>
      <option value="学工主管">学工主管</option>
      <option value="教研主管">教研主管</option>
      <option value="咨询师">咨询师</option>
    </select>

    <button type="submit">查询</button>
    <button type="reset">清空</button>
  </form>
  
</body>
</html>

15.tlias案例-表格数据展示区域

tlias智能学习辅助系统

姓名	性别	头像	职位	入职日期	最后操作时间	操作
张三	男		班主任	2023-01-01	2024-05-15 10:00:00
李四	女		讲师	2023-02-15	2024-05-14 15:30:00

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tlias智能学习辅助系统</title>
  <style>
    /* 导航栏样式 */
    .navbar {
      background-color: #808080;
      display: flex; /* 弹性布局 */
      justify-content: space-between; /* 左右对齐 */
      padding: 10px;  /* 内边距 */
      align-items: center; /* 垂直居中 */
    }
/* <h1>标签样式 */ 
    .navbar h1 {
      margin: 0;
      font-weight: bold;
      color: white;
      /* 设置字体为楷体 */
      font-family: "楷体";
    }
    .navbar a {
      color: white;
      text-decoration: none;
    }

    /* 搜索表单样式 */
    .search-form {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;  /*控件之间的距离 */
      margin: 10px 0;
    }
    .search-form input[type="text"],.search-form  select{
      padding: 5px;
      width: 300px;
    }

    /* 搜索表单按钮样式 */
    .search-form button {
      padding: 5px 15px;
    }

    /* 表格样式 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    .actions button {
      margin: 0 5px;
      padding: 5px 10px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <h1>Tlias智能学习辅助系统</h1>
    <a href="#">退出登录</a>
  </div>

  <form class="search-form" action="/search" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名"></input>

    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value=""></option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>

    <label for="position">职位：</label>
    <select id="position" name="position">
      <option value=""></option>
      <option value="班主任">班主任</option>
      <option value="讲师">讲师</option>
      <option value="学工主管">学工主管</option>
      <option value="教研主管">教研主管</option>
      <option value="咨询师">咨询师</option>
    </select>

    <button type="submit">查询</button>
    <button type="reset">清空</button>
  </form>

    <!-- 表格部分 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>头像</th>
          <th>职位</th>
          <th>入职日期</th>
          <th>最后操作时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
    </table>
</body>
</html>

16.tlias案例-底部版权区域

tlias智能学习辅助系统

姓名	性别	职位	入职日期	最后操作时间
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00
张三	男	班主任	2023-01-01	2024-05-15 10:00:00
李四	女	讲师	2023-02-15	2024-05-14 15:30:00

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tlias智能学习辅助系统</title>
  <style>
    /* 导航栏样式 */
    .navbar {
      background-color: #808080;
      display: flex; /* 弹性布局 */
      justify-content: space-between; /* 左右对齐 */
      padding: 10px;  /* 内边距 */
      align-items: center; /* 垂直居中 */
    }
/* <h1>标签样式 */ 
    .navbar h1 {
      margin: 0;
      font-weight: bold;
      color: white;
      /* 设置字体为楷体 */
      font-family: "楷体";
    }
    .navbar a {
      color: white;
      text-decoration: none;
    }

    /* 搜索表单样式 */
    .search-form {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;  /*控件之间的距离 */
      margin: 10px 0;
    }
    .search-form input[type="text"],.search-form  select{
      padding: 5px;
      width: 300px;
    }

    /* 搜索表单按钮样式 */
    .search-form button {
      padding: 5px 15px;
    }

    /* 表格样式 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    .actions button {
      margin: 0 5px;
      padding: 5px 10px;
    }

       /* 页脚样式 */
       .footer {
      background-color: #808080;
      color: white;
      text-align: center;
      padding: 10px 0;
      margin-top: 20px;
    }

    .container {
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
      <!-- 顶部导航栏 -->
  <div class="navbar">
    <h1>Tlias智能学习辅助系统</h1>
    <a href="#">退出登录</a>
  </div>

  <form class="search-form" action="/search" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名"></input>

    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value=""></option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>

    <label for="position">职位：</label>
    <select id="position" name="position">
      <option value=""></option>
      <option value="班主任">班主任</option>
      <option value="讲师">讲师</option>
      <option value="学工主管">学工主管</option>
      <option value="教研主管">教研主管</option>
      <option value="咨询师">咨询师</option>
    </select>

    <button type="submit">查询</button>
    <button type="reset">清空</button>
  </form>

    <!-- 表格部分 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>头像</th>
          <th>职位</th>
          <th>入职日期</th>
          <th>最后操作时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td><img src="path/to/avatar1.jpg" alt="张三" class="avatar"></td>
          <td>班主任</td>
          <td>2023-01-01</td>
          <td>2024-05-15 10:00:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td><img src="path/to/avatar2.jpg" alt="李四" class="avatar"></td>
          <td>讲师</td>
          <td>2023-02-15</td>
          <td>2024-05-14 15:30:00</td>
          <td class="actions">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        <!-- 可以继续添加更多行 -->
      </tbody>
    </table>
    <!-- 页脚部分 -->
  <footer class="footer">
    <p>江苏传智播客教育科技有限公司</p>
    <p>版权所有</p>
  </footer>
  </div>
</body>
</html>

01.HTML快速入门

hello html

02.HTML快速入门

html快速入门

hello html

03.央视新闻-标题-排版

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

04.央视新闻-标题-样式

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

05.央视新闻-标题-样式（选择器）

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

06.央视新闻-正文-排版

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

07.央视新闻-正文-样式

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

08.央视新闻-整体布局

【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章

09.盒子模型

10.tlias案例-顶部导航栏

Tlias智能学习辅助系统

11.flex布局

12.表单标签

13.表单项标签

14.tlias案例-搜索表单区域

Tlias智能学习辅助系统

15.tlias案例-表格数据展示区域

Tlias智能学习辅助系统

16.tlias案例-底部版权区域

Tlias智能学习辅助系统

推荐文章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章

【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章