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

web 0基础第一节 文本标签

news 2025/11/16 4:06:51

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/10 7:28:52

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/11/7 20:35:54

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/11/12 19:49:40

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/11/12 13:25:31

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/11/9 10:08:00

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/11/12 5:13:39

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/11/13 17:09:04

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2025/11/13 18:58:01

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/11/13 18:50:43

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

编程新知 2025/11/3 8:29:51