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

web 0基础第一节 文本标签

news 文章来源：https://blog.csdn.net/2301_80198453/article/details/142879519 2025/5/7 10:57:35

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

leetcode哈希表（二）-两个数组的交集

题目 . - 力扣&#xff08;LeetCode&#xff09; 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集。输出结果中的每个元素一定是唯一的。我们可以不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[…...

编程日记 2024/10/14 2:46:21

嵌入式硬件设计中EDA布局与布线实现

大家好，今天主要给大家分享一下，如何使用立创EDA进行布局和布线，具体实现过程如下： 第一：PCB概念介绍 在介绍PCB的时候，先来说明一下，电子管的发明史。 贝尔在1876年发明了电话，爱迪生1879年发明了白炽灯、特斯拉于1888年发明了电动机，所有这些，都为电子学的诞生准…...

编程日记 2024/10/14 2:45:19

entity，pojo，vo，dto 详解

在Java项目中&#xff0c;包名通常用于组织代码&#xff0c;使其更加清晰和易于维护。entity、pojo、vo和dto是常见的包名&#xff0c;它们各自有不同的含义和用途。下面将详细解释这些包名的含义&#xff0c;并提供一个示例&#xff0c;帮助你更好地理解它们在项目中的应用。 …...

编程日记 2024/10/14 2:44:18

C语言常见知识点

目录 一、单位 二、变量 三、常量 四、转义字符 五、操作符 六、指针 七、数组 一、单位 在刚接触编程时&#xff0c;肯定会了解到计算机的存储单位&#xff0c;它们由小到大分别为bit&#xff08;位&#xff09;、Byte&#xff08;字节&#xff09;、KB&#xff08;千字…...

编程日记 2024/10/14 2:43:17

产品设计——应用架构

我的理解应用架构是业务架构的落地&#xff0c;微服务架构下平台的应用架构设计&#xff0c;实质是根据业务来明确应用微服务的边界。因此业务不同&#xff0c;应用架构图也不同。但是基本框架应该相差不大。 其划分原则莫过于高内聚、低耦合。这个跟接口设计是一致的。我们总是…...

编程日记 2024/10/14 2:42:16

Linux初阶——动静态库

一、静态库&#xff08;格式&#xff1a;libxxx.a&#xff09; 1. 原理 在运行之前就已经把函数的实现代码拷进 main.c 文件里了&#xff0c;因此静态库的权限是没有可执行权限的&#xff0c;因为根本不会执行到静态库里的内容。静态库的创建原理本质上就是把所有的函数源文件…...

编程日记 2024/10/14 2:41:15

创建一个c#程序，实现字符串类型转整数类型

首先&#xff0c;创建一个c#程序 在代码编辑器中编写代码&#xff0c;点击Run按钮或者按下F5键来运行程序。 下面&#xff0c;编写将字符串类型转换为整数类型的代码。 sing System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…...

编程日记 2024/10/14 2:35:06

Spring Boot知识管理系统：敏捷开发实践

3系统分析 3.1可行性分析 通过对本知识管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本知识管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…...

编程日记 2024/10/14 2:33:04

算法竞赛（Python）-AI的思维模式（搜索）

文章目录 一 、深度优先搜索1 零钱搭配2“油漆桶”与连通性 二 、记忆化三、在游戏中制胜的AI1 永远的平局——井字棋2 一起来解谜——数独3 数字华容道 一 、深度优先搜索 深度优先搜索是最基本的搜索方法&#xff0c;在深度优先搜索的过程中&#xff0c;如果把所有的可行解看…...

编程日记 2024/10/14 2:32:02

Android Studio开发Kotlin项目中遇到的问题解决集

背景&#xff1a;Android Studio 2022.3.1 1.Unexpected tokens (use ; to separate expressions on the same line) 无法在同一行声明一个变量并实例化。 解决&#xff1a;分开 &#xff08;1&#xff09; var aaCo:Runoob<String>aaCoRunoob("aa") &…...

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