01-1文章代码及思维导图

最新推荐文章于 2024-08-24 15:51:36 发布
最新推荐文章于 2024-08-24 15:51:36 发布
阅读量417 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript js知识点 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45036782/article/details/106114881
本文详细介绍了HTML中的基础标签，包括注释、标题、段落、水平线、换行、图片、视频、音频、链接、列表等标签的使用方法，以及特殊符号的表示，帮助初学者快速掌握HTML的基本语法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

01-初始HTML

<!--注释:用于大妈的解释,不会被浏览器解析,快捷键CTRL+/-->
<!-- 养成习惯保存时的习惯:CTRL+S -->
<!-- HTML:Hyper text markup language -->
<!DOCTYPE html>
<html lang="en">
    <!-- 缩进:为了代码的整洁性,一般四个空格 -->
    <!-- 头部标签:给浏览器看 -->
    <head>
        <!-- meta用来标记一些头部信息,描述文档的作者 项目说明 关键词等 -->
        <!-- charset字符编码集 -->
        <!-- UTF-8万国码 -->
        <meta charset="utf-8">
        <!-- name="keywords"关键词 -->
        <meta name="keywords" content="html 基本标签 第一节课">
        <!-- name="description"描述信息 -->
        <meta name="description" content="描述信息">

        <!--标题  -->
        <title>墨杨学长的第一个程序</title>
    </head>
    <body>
        前端生涯的第一个hello world!
    </body>
</html>

02-基本标签

<!-- 标题标签hi 段落标签p 水平线标签hr 换行标签br
      div标签 sapn标签 长引用标签blockquote 短引用标签q
    加粗strong b
    斜体em i
    删除线del s -->

<!DOCTYPE html>
<!-- lang="当前网页的语言" -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述信息">
        <!-- name="viewport" 视口 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 标题标签h1~h6 -->
        <!-- 注意:h1在单个页面中只能出现一次 -->
        <!-- 块级标签,独占整行 -->
        <h1>墨杨学长</h1>
        <h2>爱学习</h2>
        <h3>是的</h3>
        <h4>是的</h4>
        <h5>是的</h5>
        <h6>是的</h6>

        <!-- 段落标签p -->
        <!-- 块级标签,独占整行 -->
        <!-- 换行标签br -->
        <p>                     疫情发生以来，马云向<br>全球150多个国家和地区捐赠总计1亿余件物资；搭建覆盖233个国家和地区的全球新冠肺炎实战<br>共享平台。4月21日，马云又向世界卫生组织捐赠1亿件医用口罩、核酸检测试剂盒等应急物资。他多次在个人社交媒体上呼吁，“全世界在同一片着了火的森林，人类只有合作、团结、互助才能打败它。”</p>
        <p>我爱学习</p>
        <p>我爱学习</p>
        <p>我爱学习</p>

        <!-- 水平线标签hr -->
        <hr>
        <!-- 换行标签br -->
        <br>

        <!-- div 标签  划出一块区域-->
        <!-- 块级标签,独占整行 -->
        <div>独占整行 弹窗不是标签</div>

        <!-- span标签 -->
        <!-- 行内标签,不占整行 -->
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
        <span>ddd</span>

        <!-- 长引用标签blockquote(有缩进) -->
        <!-- 块级标签,独占整行 -->
        <blockquote>
            1111111111
        </blockquote>

        <!-- 短引用标签q (网页会出现引号,在网页中引号不能复制)-->
        <!-- 行内标签,不占整行 -->
        <q>
            123
        </q>
        <q>123</q>

        <!-- 文本格式化标签 -->
        <!-- 行内标签,不占整行 -->
        <p>
           你离开，我只能等待。

           <!-- strong加粗 -->
           <!-- strong还具有强调性,强调给浏览器 -->
           <strong>字体加粗</strong>

           <!-- b只是视觉效果加粗 -->
           <b>也是字体加粗</b>

           <!-- em斜体 -->
           <em>加重语义的斜体</em>

           <!-- i视觉上斜体 -->
           <i>也是斜体</i>

           <!-- del删除线 -->
           <del>这是删除线</del>

           <!-- s是删除 -->
           <s>删除</s>

        </p>
    </body>

</html>

03-图片视频音频链接列表标签(网页布局)

<!-- img图片展示标签 相对路径与绝对路径
     video视屏展示标签
    audio音频展示标签
    链接标签a(与href一起写)
    列表标签:有序列表 无序列表 自定义列表
    -->

<!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>
    <!-- 图片展示标签 -->
    <!-- src:图片路径 -->
    <!-- 相对路径:
                1.同一目录下:./(src="./某某.jpg,./可以不写") 
                2.下一级目录下:/ images/某某.jpg
                3.下下一级目录下:例如:images/文件夹名/某某.jpg
                4.上一级目录:../(有几级就写几个../)
        绝对路径:
                1.网址:右键复制图片地址(如果网上图片不见了,自己的就没了)
                2.磁盘根路径下:下载到本地磁盘,属性查看地址(路径\某某.jpg),但是别人在该路径下没有该图片,就看不到这个图片-->
    <!-- 总结:一般情况下避免使用绝对路径,项目中我们使用相对路径,做作业时用网址 -->

    <!-- alt:图片不能正常显示时的替换文本 -->
    <!-- title:鼠标悬停的提示文本 -->
    <!-- width:图片的原始宽度 -->
    <!-- height:图片的原始高度 -->
    <!-- width,height是属性 用来标注原始信息,不轻易改变 -->
    <img src="存放当前图片的路径" alt="" title="" width="500" height="248" srcset="">

    <!-- 视频展示标签video -->
    <!-- src="插入网址" -->
    <!-- controls="controls"播放控件 -->
    <!-- controls="controls和controls效果一样 -->
    <video src="" controls="controls"></video>

    <!-- 音频展示标签audio -->
    <audio src="" controls></audio>

    <!-- 链接标签a (要与href一起写) -->
    <!-- target:跳转方式 -->
    <!-- _self默认值,在当前窗口打开 -->
    <!-- _blank新窗口打开 -->
    <a href="https://www.baidu.com" target="_self">百度一下,你就知道</a>
    <a href="01初识HTML.html">跳转本地这个网页文件</a>

    <!-- 列表标签 -->
    <!-- 1.无序列表ul 块级标签 li中只能放相似的内容 -->
    <!-- ul只能放li标签 -->
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>

    <!-- 2.有序列表ol 块级标签-->
    <!-- type属性 -->
    <!-- ol后没有,就是1234,若为其他,则加ol type="a等" -->
    <ol>
        <li>aaa</li>
        <li>vvv</li>
        <li>rrrr</li>
        <li>sssss</li>
    </ol>

    <!-- 3.自定义列表 -->
    <dl>
        <!-- dt:名字 -->
        <dt>口红品牌</dt>
        <!-- dd:对该名词解释 -->
        <dd>mac</dd>
        <dd>ysl</dd>
        <dd>阿玛尼</dd>

        <dt>车</dt>
        <dd>宝马</dd>
        <dd>玛莎拉蒂</dd>
        <dd>法拉利</dd>
    </dl>
</body>
</html>

04-特殊符号标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述内容">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
    
        <!-- pre保留代码原格式 -->
    <!-- pre -->
    <pre>
        空格符:&nbsp;
        123           123 111111        123
    </pre>

    <!-- 特殊符号 -->
    <!-- 1.空格&nbsp; -->
    <!-- 一个&nbsp;代表一个空格 -->
    <p>1&nbsp;&nbsp;&nbsp;&nbsp;3</p>

    <!-- 2.小于号&lt; -->
    <p>&lt;</p>

    <!-- 3.大于号&gt; -->
    <p>&gt;</p>

    <!-- 4.和号&amp; -->
    <!-- 5.人民币&yen; -->
    <!-- 6.版权&copy; -->
    <!-- 7.注册商标&reg; -->
    <!-- 8.摄氏度&deg; -->
    <!-- 9.正负号&plusmn; -->
    <!-- 10.乘&times; -->
    <!-- 11.除&divide; -->
    <!-- 12.平方&sup2; -->
    <!-- 13.立方&sup3; -->
    <!-- 14.下角标&sub2; -->
    </body>
</html>

05-HTML基本标签思维导图

在这里插入图片描述

、、、
申明：本教程收集于网络，请勿商用，仅供个人学习使用，如有侵权，请联系作者删除。

大模型生成人物关系思维导图的实战教程
herosunly的博客
07-13 20万+
本文主要介绍了大模型生成人物关系思维导图的实战教程，希望对使用大语言模型的同学们有所帮助。 文章目录 1. 前言 2. 实战教程
【04】从0到1构建AI生成思维导图应用 -- 创建 AI 工作流
m0_56699208的博客
06-29 1441
工作流支持通过可视化的方式，对插件、大语言模型、代码块等功能进行组合，从而实现复杂、稳定的业务流程编排，例如旅行规划、报告分析等。工作流支持通过可视化的方式，对插件、大语言模型、代码块等功能进行组合，从而实现复杂、稳定的业务流程编排，例如旅行规划、报告分析等。​当目标任务场景包含较多的步骤，且对输出结果的准确性、格式有严格要求时，适合配置工作流来实现。​功能概述​工作流由多个节点构成，节点是组成工作流的基本单元。例如，大语言模型 LLM、自定义代码、判断逻辑等节点。​。
简明代码和代码重构思维导图
04-06
clean code和重构的读书笔记，都是思维导图，方便记忆。
代码精进之路--思维导图
小强快跑~~
08-27 550
转：代码审查“思维导图”
kenmlee的博客
08-20 395
代码审查“思维导图” 　　关注我们:     代码审查，就好比编辑写完一篇稿子需要审核一样。在如今的开发中，代码审查工作越发重要，如果做的好，对项目会有很大的帮助，如果做的不好，只会费时又费力，或许还会引起一些不必要的麻烦。 下面是一个代码审查的“思维导图”（使用Xmind）。把所有涉及代码审查的要点联系在一起，希望对您能有所帮助。 点击查看大图 以下是一些开发者使用代码...
《编码》思维导图
Dreamy
02-16 4021
<编码：隐匿在计算机硬件背后的语言>全书框架基于上一篇编码笔记博文整理的脉络图： 这个思维导图是用Xmind编辑的，如果需要原文件的话可以和我说一声。
使用思维导图，优雅的完成自己的代码
weixin_34405557的博客
12-15 554
我自己常常在写代码的时候，会突然搞不清变量用来干嘛的，也会被理不清的逻辑搞得自己异常烦躁，我甚至常常暗示自己我不适合写代码，思维总是那么不清晰。直到我发现了思维导图的妙用。 最开始使用思维导图的时候，我其实是用来记知识点的。然而某一刻就灵光一闪了，尝试使用了思维导图来记录代码变量和逻辑，最后居然就轻松的把以为要理很久的问题搞定了。为了验...
vue3使用simple-mind-map，分分钟开发思维导图
最新发布
qq_31676725的博客
08-24 1万+
思维导图？感觉很复杂的样子，这种很牛p的东西应该不是我三两天就能手写搞定的，于是我`github`转了一圈，果然不出我所料，对比了几个插件以后我是先选择了它
前端学习路线图--陆神版本思维导图
好程序员IT教育
11-07 739
想要更好的完成页面的开发，更好的与UI部门合作，这些页面制作工具是必须掌握的。本系列课程从概念到具体基础知识点全程干货满满，为前端小白入门找到了很好的学习抓手，可以作为前端开发学习“梦开始的地方”，老师深入浅出的讲解和动画视频解析并用真实的案例巩固知识，学练结合，打好基础，不怕学不会！比如，Facebook的基于React技术的ReactNative原生APP的开发，谷歌的基于Dart技术的Flutter原生APP的开发，以及华为的基于JS技术的HarmonyOS鸿蒙原生APP的开发。
javaEE思维导图.
08-20
在本思维导图中，我们将会探讨以下几个关键知识点： 1. **Spring MVC**：Spring MVC是Spring框架的一个模块，专门用于构建Web应用程序。它遵循Model-View-Controller设计模式，提供了处理HTTP请求、数据绑定、视图...
完整的思维导图项目源码
11-06
完整的思维导图项目源码 　
思维导图
05-03
NULL 博文链接：https://lingzhi927.iteye.com/blog/2427472
c语言思维导图
05-08
最全的c语言大纲的xmind的思维导图，可做收藏，复习巩固c语言知识
数据代码思维导图模板
chigang5594的博客
04-14 222
数据代码思维导图模板下载链接: http://pan.baidu.com/s/1slkSRVn 密码: jfwq Web前端技能树： 大数据时代： 转载于:https://my...
ORB-SLAM2代码思维导图
陈建驱的博客
04-11 926
初始化 跟踪线程 局部建图线程 回环检测线程
js画思维导图代码
weixin_73675558的博客
05-21 1107
在JavaScript中，您可以使用各种库来绘制思维导图，例如mindmap.jsd3.js或go.js。下面是一个简单的例子，展示了如何使用d3.js来绘制一个基本的思维导图。首先，您需要在HTML文件中包含d3.js</</</</</</</然后，在mindmap.js这段代码创建了一个简单的思维导图，其中包含一个中心主题和四个分支主题。节点之间通过连线连接，并且可以通过拖拽来移动。这是一个基本的示例，您可以根据需要添加更多的功能和样式。请注意，这个示例使用了d3.js。
【c++思维导图与代码示例】02 函数
是小武呀
12-14 1153
【思维导图与代码示例】02 函数思维导图代码示例 思维导图 代码示例 示例1： /************************************************* ** **Description： 寻找并输出11-999之间的数m,m 自身、平方、立方值均为回文;数理解函数的调用 ** ** Author：慕灵阁-wpke ** Time：2021-11-05 ** Versions ：2_1.cpp ** * ********************************
编写可读代码的艺术 思维导图
极客神殿
01-19 299
编写可读代码的艺术笔记，如有错误或不明白的地方，欢迎指出
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值