当前位置： 首页 > news >正文

web 0基础第一节 文本标签

news 2026/5/16 16:49:41

这是一个html文件的基本结构

在vs code 中使用英文的 !  可快捷设置这样的结构

<!--    -->     是在html写注释的结构

<!DOCTYPE html>                              <!--标识当前文档类型为html-->

<html>                                                 <!--html根节点/标签-->

        <head>                 <!--头部 head 一般编写标题或者规定字符集或者引入其他的资源文件-->

                <meta charset="usf-8">

<!--面试题：

meta 不在浏览器中显示内容，但是机器是可读的，为当前浏览器或者搜索引擎提供服务的-->

                <title> world good programming</title>

<!--网页的标题，中间的是自定义的网页的标题名称-->

        </head>

        <body>

<!--主体 body 一般编写html代码，显示在浏览器的可视区-->

                <!--

                    1.常用快捷键

                         >.ctrl + s   保存   敲完代码后要多按  

                         >.ctrl + x   剪切

                         >.ctrl + c   复制

                         >.ctrl + v   粘贴

                         >.ctrl + z   可以撤销上一步操作

                         >.Alt +B     vs code 运行的快捷键     这个是需要下载vscode的时候就设置好

                         >.ctrl + /   将该行的内容形成注释  也可以单独写一个注释符号

                         >.shift + alt +下 复制整行到下一行   将下换成上箭头，效果是可以推导的

                    2.标签

                         >.格式：

                              1.>开闭标签 拥有开和闭两个标签    

                                  具备一个开标签（开始标签）<标签名>  

                                  闭标签（闭合标签/结束标签）</标签名>

                              <标签名 属性=值（可以为多个）>  </标签名>

                              或

                              2.>自闭合标签 只具备一个开标签，没有闭标签

                              <标签名 属性=值（可以为多个）>

                        >.分类：

                             按照开闭分为：开闭标签，自闭合标签

                             按照是否换行分为：块级（会换行）标签   行内(大多数情况不会换行)标签

                    -->

                             <!-- 例如 -->

                <div>hello</div>html

                <span>hello</span>

                html

                <!-- 根据上面两种标签的运行结果上来看

                 div  会将其中的内容换行后才会进行下一步内容的呈现

                 span 则不会换行，导致  hello 和 html 在同一行-->

        </body>

</html>

标题和段落

1.标题标签 ---块级标签

            格式：  <h1>  </h1>    将其中的东西设置为一级标题   首尾换行   最多有6级标题

2.段落标签 ---块级标签

           格式：  <p>  </p>    将其中的内容设置为一个段落   首尾换行  

           这个不用p1等来区分是第几段的问题

            块级标签，这是一个标签的大类   特点是 在之前之后都换行     首尾换行

换行和水平线

        1.换行       ---行内标签

          格式：<br>    自闭合标签      换行是直接换到下一行   中间没有隔行

    没有后面的那个关回来的形成闭合的标签  所以称为自闭合标签    如:   <i>  </i>

        2.水平线标签  ---块级标签

          格式：<hr>    自闭合标签      将下一行打上水平线

          块级标签一般会把标签的内容进行隔行，首尾都隔，但换行没有

字体标签

现在先了解，因为在后续学习的CSS中可以很容易实现这些功能

下面给出一些实例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字体标签</title>

    <!-- 1.字体标签 仅了解，因为在后续学习的CSS中可以实现这些功能 -->

</head>

<body>

测试文字   -做对比用

   <hr>

    <!-- 1.加粗  b：样式为加粗  strong：在加粗的同时，在计算机里也强调其重要性，强调其语义  -          就是站在计算机的视角看 这个内容属于重要信息->

    <b>测试文字</b>

    <br>

    <strong>测试文字</strong>

   

    <!-- 2.斜体  i：样式   em：带有语义的斜体-->

     <i>测试文字 </i>

    <em>测试文字</em>

    <!-- 3.删除线  -->

     <s>测试文字</s>

     <del>测试文字</del>

   

    <!--4.双引号，表语义 -->

     <q>测试文字</q>

   

    <!-- 5.下划线 u：表样式， ins：表语义 -->

      <u>测试文字</u>

      <ins>测试文字</ins>

    <!--6.上标和下标字体         标的符号是#-->

    miaomiao<sup>#</sup>

    miaomiao<sub>#</sub>

    <!-- 7.大小号字体 -->

     <big>测试文字</big>

     <small>测试文字</small>

     <!-- 8.预保留标签 --保留原有的书写换行空格等   就是将其中的内容按照原有的形式保留下来 -->

     <pre>

        春夜喜雨

        杜甫（唐）

        好雨知时节，当春乃发生。

        随风潜入夜，润物细无声。

     </pre>

     <!-- 9.特殊字符

      >.格式  &特殊字符表示内容；

      >.常用总结如下：

        空白符：&nbsp；

        版权符：&copy；   呈现的形式是  @把其中的a换成了c

        大于小于  &lt：&gt；  -->

        <hr>

        username:&nbsp;&nbsp;&nbsp;&nbsp;miaomiao

        &copy;11s所有

        &lt;&lt;三国演义&gt;&gt;

        《三国演义》

</body>

</html>

<!-- 在标签中加上 title 属性 用于设置提示信息 ,在鼠标停留时的呈现出来-->

 <!-- 特殊字符：

           因为在html中无论打多少空格最终都只会识别一个，

           所以在有多个空格的需求时，采用特殊字符来解决这个问题

             如： &nbsp;  有几个这个符号就会多出多少个空格 -->

           

         

相关文章：

web 0基础第一节 文本标签

这是一个html文件的基本结构 在vs code 中使用英文的 ! 可快捷设置这样的结构 <!-- --> 是在html写注释的结构 <!DOCTYPE html> <!--标识当前文档类型为html--> <html> …...

编程日记 2024/10/14 3:21:03

Zookeeper快速入门：部署服务、基本概念与操作

文章目录 一、部署服务1.下载与安装2.查看并修改配置文件3.启动 二、基本概念与操作1.节点类型特性总结使用场景示例查看节点查看节点数据 2.文件系统层次结构3.watcher 一、部署服务 1.下载与安装 下载&#xff1a; 一定要下载编译后的文件&#xff0c;后缀为bin.tar.gz w…...

编程日记 2024/10/14 3:17:58

【Sqlite】sqlite内部函数sqlite3_value_text特性

目录 ⚛️1 结论 ☪️2 说明 ☪️3 传入数值转成科学计数法 ♋3.1 只有整数部分 ♏3.2 只有小数部分 ♐3.3 整数小数 ⚛️1 结论 整数(sqlite视为int64)位数 > 20位&#xff0c;sqlite3_value_text 采用科学计数法。否则正常表示。 浮点数(sqlite视为double)的整数部…...

编程日记 2024/10/14 3:15:53

树莓派应用--AI项目实战篇来啦-4.OpenCV读取、写入和显示视频

1. 介绍 视频是由一张一张图片组成的&#xff0c;所以读取视频就相当于读取很多张图片&#xff0c;然后将其连起来cv2.VideoCapture可以捕获摄像头&#xff0c;但是针对树莓派的CSI摄像头调用方式采用了之前介绍的Picamera2 库&#xff0c;所以在调用的时候是有区别的&#xff…...

编程日记 2024/10/14 3:13:52

智能电子后视镜，汽车驾驶更安全，会是一种趋势

相比于传统的后视镜&#xff0c;智能电子后视镜的确有很多的优点。在下雨天和夜晚场景&#xff0c;电子后视镜可以说是表现优秀。 我之前一直以为我们国内是有规定不能使用电子后视镜。没想到&#xff0c;偶然刷到享界S9的视频&#xff0c;这电子后视镜&#xff0c;妥妥的给安排…...

编程日记 2024/10/14 3:12:50

IEC104规约的秘密之九----链路层和应用层

104规约从TCP往上&#xff0c;分成链路层和应用层。 如图&#xff0c;APCI就是链路层&#xff0c;ASDU的就是应用层 我们看到报文都是68打头的&#xff0c;因为应用层报文也要交给链路层发送&#xff0c;链路层增加了开头的6个字节再进行发送。 完全用于链路层的报文每帧都只有…...

编程日记 2024/10/14 3:11:49

最新Prompt预设词指令教程大全ChatGPT、AI智能体（300+预设词应用）

使用指南 直接复制在AI工具助手中使用&#xff08;提问前&#xff09; 可以前往已经添加好Prompt预设的AI系统测试使用&#xff08;可自定义添加使用&#xff09; SparkAi系统现已支持自定义添加官方GPTs&#xff08;对专业领域更加专业&#xff0c;支持多模态文档&#xff0…...

编程日记 2024/10/14 3:07:45

DockerCompose 启动 open-match

背景介绍 open-match是Google和unity联合开源的支持实时多人匹配的框架&#xff0c;已有多家游戏厂商在生产环境使用&#xff0c;官网 https://open-match.dev/site/ 。原本我们使用的是UOS上提供的匹配能力&#xff0c;但是UOS目前不支持自建的Dedicated servers 集群&#x…...

编程日记 2024/10/14 3:04:41

Chainlit集成Dashscope实现语音交互网页对话AI应用

前言 本篇文章讲解和实战&#xff0c;如何使用Chainlit集成Dashscope实现语音交互网页对话AI应用。实现方案是对接阿里云提供的语音识别SenseVoice大模型接口和语音合成CosyVoice大模型接口使用。针对SenseVoice大模型和CosyVoice大模型&#xff0c;阿里巴巴在github提供的有开…...

编程日记 2024/10/14 3:01:38

Canal 扩展篇（阿里开源用于数据同步备份，监控表和表字段（日志））

1.Canal介绍 Canal把自己伪装成从数据库&#xff0c;获取mysql主数据库的日志&#xff08;binlog&#xff09;信息&#xff0c;所以要想使用canal就得先开启数据库日志 https://github.com/alibaba/canal Canal 主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量…...

编程日记 2024/10/14 3:00:37

顺序表的定义

一.顺序表的定义 顺序表--用顺序存储的方式实现线性表 顺序存储。把逻辑上相邻的元素存储在物理位置上也相邻的存储单元中&#xff0c;元素之间的关 系由存储单元的邻接关系来体现。 二.顺序表的实现--静态分配 #include<stdio.h> #define MaxSize 10 //定义最大长度 …...

编程日记 2024/10/14 2:59:36

青少年编程能力等级测评CPA C++一级试卷（1）

青少年编程能力等级测评CPA C一级试卷&#xff08;1&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; CP1_1_1&#xff0e;在C中&#xff0c;下列变量名正确的是&#xff08; &#xff09;。 A&#xff0e;$123 B&#…...

编程日记 2024/10/14 2:58:34

R语言中的plumber介绍

R语言中的plumber介绍 基本用法常用 API 方法1. GET 方法2. POST 方法3. 带路径参数的 GET 方法 使用 R 对数据进行操作处理 JSON 输入和输出运行 API 的其他选项其他功能 plumber 是个强大的 R 包&#xff0c;用于将 R 代码转换为 Web API&#xff0c;通过使用 plumber&#x…...

编程日记 2024/10/14 2:57:34

uniapp 设置 tabbar 的 midButton 按钮

效果展示&#xff1a; 中间的国际化没生效&#xff08;忽略就行&#xff09; 示例代码&#xff1a; 然后在 App.vue 中进行监听&#xff1a; <script>export default {onLaunch(e) {// #ifdef APPuni.onTabBarMidButtonTap(()>{console.log("中间按钮点击回调…...

编程日记 2024/10/14 2:56:31

php 生成随机数

记录：随机数抽奖 要求：每次生成3个 1 - 10 之间可重复（或不可重复）的随机数，10次为一轮，每轮要求数字5出现6次、数字4出现3次、…。 提炼需求： 1，可设置最小数、最大数、每次抽奖生成随机数的个数、是否允许重复 2，可设置每轮指定数字的出现次数 3，可设置每轮的抽奖…...

编程日记 2024/10/14 2:55:30

MySQL 8.4修改初始化后的默认密码

MySQL 8.4修改初始化后的默认密码 &#xff08;1&#xff09;初始化mysql&#xff1a; mysqld --initialize --console &#xff08;2&#xff09;之后,mysql会生成一个默认复杂的密码&#xff0c;如果打算修改这个密码&#xff0c;可以先用旧密码登录&#xff1a; mysql -u…...

编程日记 2024/10/14 2:54:29

前端开发笔记--css 黑马程序员1

文章目录 1. css 语法规范2.css的书写风格3.基础选择器选择器的分类标签选择器类选择器类选择器的特殊使用--多类名 id 选择器 字体属性常见字体字体大小字体粗细字体倾斜字体的复合简写字体属性总结 文本属性文本颜色文本对齐装饰文本文本缩进文本间距文本属性总结 css的引入方…...

编程日记 2024/10/14 2:52:27

ORACLE 19C创建多个不同字符集PDB

现在需要在一个测试环境创建1个为AL32UTF8的PDB,2个ZHS16GBK的PDB 这种情况下,必须先创建的CDB为AL32UTF8,下面是具体步骤: 1.AL32UTF8的pdb在建实例的时候一起创建完成 2.创建第一个ZHS16GBK的PDB cdr,通过pdbseed来克隆: SQL> create pluggable database cdr admin us…...

编程日记 2024/10/14 2:50:25

基于协同过滤的景区旅游可视化与景区推荐系统（自动爬虫，地点可换）

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍过程展示项目移植每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍 本项目是一个综合性的旅游景区数据管理与分析推荐系统,集成了用…...

编程日记 2024/10/14 2:49:24

ElasticSearch搜索引擎

npm run start ELK&#xff1a; ESLogstashKibana Kibana&#xff1a;端口号5601 elasticSearch是面向文档 Kibana可以将ElasticSearch的数据通过友好的页面展示出来。 Es与Kibana的版本一致 es查询的效率很高&#xff0c;处理大数据 ES和solr的区别&#xff1a; 当单纯的对已有…...

编程日记 2024/10/14 2:47:22

1、Halcon频域魔法：从傅里叶变换到图像增强实战

1. 频域魔法&#xff1a;当工业视觉遇上傅里叶变换 第一次在Halcon里用傅里叶变换处理图像时&#xff0c;我盯着屏幕上的频域图看了足足十分钟——那些对称的亮斑和放射状条纹&#xff0c;活像一幅抽象派油画。但正是这幅"画"帮我解决了困扰团队两周的难题&#xff1…...

编程新知 2026/5/16 16:01:23

从调参到调优：手把手教你用RFSoC API榨干DAC性能（插值、滤波器、数据路径全解析）

从调参到调优&#xff1a;手把手教你用RFSoC API榨干DAC性能&#xff08;插值、滤波器、数据路径全解析&#xff09; 在无线通信和雷达系统的原型开发中&#xff0c;RFSoC的DAC性能直接决定了整个系统的信号质量与效率。许多开发者虽然能够完成基础配置&#xff0c;但当面临&qu…...

编程新知 2026/5/16 15:15:40

UI-TARS桌面版终极指南：用自然语言控制电脑的免费AI助手

UI-TARS桌面版终极指南&#xff1a;用自然语言控制电脑的免费AI助手 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-desktop …...

编程新知 2026/5/16 15:08:56

凌壹科技ZO-3965U-6C2L嵌入式主板深度拆解：硬件解析与工业应用实战

1. 项目概述&#xff1a;一块嵌入式主板的深度拆解最近在整理手头的工控项目资料&#xff0c;翻出了一块来自凌壹科技的ZO-3965U-6C2L嵌入式主板。这块板子之前在一个边缘计算网关项目里服役了两年多&#xff0c;一直稳定可靠。趁着这个机会&#xff0c;我决定把它从机箱里拆出…...

编程新知 2026/5/16 13:54:11

C#+FastReport 实战：动态图片绑定与报表生成全流程解析

1. 动态图片绑定与报表生成的核心思路 在C# WinForms应用开发中&#xff0c;动态图片绑定与报表生成是一个常见的需求场景。想象一下这样的业务场景&#xff1a;用户需要上传自己的产品图片&#xff0c;系统自动生成包含该图片的销售报表。这种需求在零售、医疗、教育等行业非常…...

编程新知 2026/5/16 13:47:47

用Wireshark抓包实战，手把手教你读懂LwIP里的TCP/IP数据帧（附真实数据解析）

Wireshark与LwIP实战&#xff1a;从抓包数据到协议栈实现的深度解析 当你第一次在Wireshark中看到那些密密麻麻的十六进制数据时&#xff0c;是否感到无从下手&#xff1f;作为嵌入式开发者&#xff0c;理解网络数据包的底层结构不仅是调试网络问题的关键&#xff0c;更是优化L…...

编程新知 2026/5/16 10:11:08

手把手教你用Zynq-7100 FPGA实现100Mbps OOK信号定时同步（含完整Verilog代码）

基于Zynq-7100的OOK信号定时同步实战&#xff1a;从算法到FPGA实现全解析 在无线通信系统中&#xff0c;定时同步是数字接收机设计中最关键的环节之一。当我们需要在Xilinx Zynq-7100 FPGA平台上实现100Mbps OOK信号的接收处理时&#xff0c;面临的最大挑战是如何在仅有50MHz外…...

编程新知 2026/5/16 9:29:00

Cursor3.3发布：Skill 自动转为快捷操作

想象一下&#xff1a;每次发版之前&#xff0c;你盯着一个庞大PR&#xff0c;脑子里同时跑着十几个线程——这个模块要重构、那个API要优化、还有安全扫描不能忘。以前你得像个孤独的指挥家&#xff0c;一根根指挥棒轮流挥。 现在&#xff0c;Cursor直接给你拉来一支AI交响乐团…...

编程新知 2026/5/16 8:23:21

[GESP202512 C++ 三级] 选择题第 8 题 ← unsigned int

【题目描述】 在一个特定的计算机系统中&#xff0c;假如 unsigned int 类型需要占用2个字节的存储空间&#xff08;每个字节有8位&#xff09;&#xff0c;则 unsigned int 可以表示的数据范围是&#xff08; A &#xff09; A. 0 ~ 65535 B. 0 ~ 65536 C. -65536 ~ 655…...

编程新知 2026/5/16 7:44:58

亿图脑图高级技能：从思维建模到生产力提升的完整指南

1. 项目概述与核心价值最近在整理个人知识库和项目文档时&#xff0c;我一直在寻找一个能让我思维更清晰、协作更高效的“大脑外挂”。市面上思维导图工具不少&#xff0c;但要么功能臃肿、学习曲线陡峭&#xff0c;要么过于轻量、难以应对复杂的结构化思考。直到我深度体验并拆…...

编程新知 2026/5/16 6:48:04