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

web 0基础第一节 文本标签

news 2025/6/25 21:53:39

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/6/17 7:15:49

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/6/24 3:13:15

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/6/22 1:36:54

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/6/25 16:31:54

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/6/20 15:48:55

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/6/22 8:59:22

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/6/21 16:31:11

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/6/16 17:50:54

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/6/17 15:40:23

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/6/15 12:56:16