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

web 0基础第一节 文本标签

news 2026/2/8 18:17:06

这是一个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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/8 4:37:39

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28