web前端开发——标签一

今天我来针对web前端开发讲解标签一

Html标签_标题&段落&换行

注释标签:Ctrl+/

Ctrl+/ ,用户可能会获取到注释标签

注释的原则:

•和代码逻辑一致

•尽量使用中文

•正能量

标题标签:<h1></h1>  h1-h6

标题标签有6个,h1-h6,数字越大,字体越小,字体也越来越细。标题标签是单独起一行的。

段落标签:<p></p>

P标签之前存在一个空隙。

当前的p标签描述的段落,前面还没有缩进。

自动根据浏览器宽度来决定排版。

Html内容首位处的换行,空格均无效。

在html中文字之间输出的多个空格只相当于一个空格。

Html中直接输入换行(回车)不会真的换行,只是一个空格

在段落标签内回车(enter)视为空格

换行标签:<br/>  

br是break的缩写,表示换行

br是一个单标签(不需要结束标签)

br标签不像p标签一样带有很大的间隙

<br/>是标准写法,不建议写成<br>

换行标签换行之后间隙比段落标签间隙小

格式标签

加粗:strong标签和b标签

倾斜:em标签和i标签

删除线:del标签和s标签

下划线:ins标签和u标签

 <strong>stronng 加粗</strong><b>b 加粗</b><em>em 倾斜</em><i>i 倾斜</i><del>del 删除线</del><s>s 删除线</s><ins>ins 下划线</ins><u>u 下划线</u>

PS:

在Web开发中,标签用于给文本和内容添加语义信息和视觉样式。其中,对文本进行强调通常使用以下几种标签:

1.<strong>标签

<strong>标签用于表示文本的强调语义,通常浏览器会将其显示为粗体字体,这并不是其唯一作用,它的主要目的是为了强调文本的重要性,而不是仅仅通过视觉效果来实现。搜索引擎也会根据<strong>标签来

确定文本的重要性。

示例:

<p>This is<strong>important</strong>information.</p>

2.<em>标签:

<em>标签用于表示文本的强调语义,通常浏览器会将其显示为斜体字体。与<strong>不同的是<em>标签侧重于强调文本的语义重要性,而不是物理样式。搜索引擎也会根据<em>标签来确定文本的语气和情感强调。

示例:

<p>This is an<em>emphasized</em> text.</p>

3.<b>标签:

<b>标签用于表示文本的强调,通常浏览器会将其显示为粗体字体、与<strong>不同的是,<b>标签仅仅是对文本进行视觉上的加粗,而不会影响其语义重要性,因此,在语义上应优先使用<stong>或<emn>标签

示例:

<p>This is <b>bold</b> text.</p>

总结来说,Web开发中的这些标签不仅帮助开发者在视觉上强调文本,更重要的是它们提供了语义化的方式来描述文本的重要性或语气,从而使得网页内容更易于理解和被搜索引擎识别。

img标签_src属性

img标签必须搭配着src使用(指定图片路径)

绝对路径

图片路径

网络上的图片路径

相对路径

./xxx.png 同一层路径的图片

./img/xxx.png 下一层路径的图片

../xxx.png  上一层路径的图片


少年没有乌托邦,心向远方自明朗!

如果这个博客对你有帮助,给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞收藏关注哦❤
如果有疑问或有不同见解,欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关web前端的内容和示例
点赞加关注,学习不迷路,好,本次的学习就到这里啦!!!

我们下次再见喽!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机-第二节-数码管

一、数码管介绍&#xff1a; 1.什么是数码管&#xff1f; 多个LED组合成8字显示器。 2.一位数码管的引脚&#xff08;只有一个8&#xff09;&#xff1a; 数码管的引脚为1-10&#xff0c;其中公共极为3,8&#xff0c;其余八位分别对应一个二极管&#xff0c;如下图&#xff…

【大模型】大模型相关技术研究—微调

为什么要对大模型进行微调 1.成本效益&#xff1a; o 大模型的参数量非常大&#xff0c;训练成本非常高&#xff0c;每家公司都去从头训练一个自己的大模型&#xff0c;这个事情的性价比非常低。 2.Prompt Engineering 的局限性&#xff1a; o Prompt Engineering 是一种相…

视图库对接系列(GA-T 1400)十二、视图库对接系列(本级)人员数据推送

背景 人体和非机动车和机动车类似的,只是请求的参数不一样而已。人员数据推送 接入人员数据推送相对比较简单,我们只需要实现对应的接口就ok了。 具体如图: 有增删改查接口,目前的话 因为我们是做平台,我们只需要实现添加接口就可以了。 接口实现 service 层 /**** …

软件工程面向对象 超市管理系统 需求分析 系统设计 课程设计报告

1、引言 系统简述 超市管理系统的功能主要有前台管理和后台管理两个大块。其使用对象 有超市管理人员和超市销售人员两类。超市管理系统主要为了实现商品输 入、 输出管理数据的自动化&#xff0c; 提高商品统计信息的实时性&#xff0c; 减轻人工劳动强 度从而节省人力成本。实…

Go语言---异常处理error、panic、recover

异常处理 Go 语言引入了一个关于错误处理的标准模式,即 error 接口,它是 Go 语言内建的接口类型,该接口的定义如下: package errorsfunc New(text string) error {return &errorString{text} }// errorString is a trivial implementation of error. type errorString st…

springboot事故车辆与违章车辆跟踪系统-计算机毕业设计源码03863

springboot事故车辆与违章车辆跟踪系统 摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。…

W外链怎么样,他们家的短网址免费的吗?

W外链作为短网址服务的一种&#xff0c;体现了短网址技术的现代发展趋势&#xff0c;它不仅提供了基础的网址缩短功能&#xff0c;还扩展了一系列高级特性和增值服务&#xff0c;以适应更广泛的市场需求。根据相关参考内容&#xff0c;W外链具有以下特点和优势&#xff1a; 短域…

2024程序员行业风口和面试宝典

国际研究机构Gartner会在每年10月份左右发布下一年度的战略发展趋势预测&#xff0c;并在次年3月左右发布和网络安全相关的趋势预测。绿盟科技通过将近3年的趋势预测进行分组对比分析后发现&#xff0c;除了众人皆知的AI技术应用外&#xff0c;数据模块化、身份优先安全、行业云…

01-图像基础-颜色空间

1.RGB颜色空间 RGB是一种常用的颜色空间&#xff0c;比如一幅720P的图像&#xff0c;所对应的像素点个数是1280*720&#xff0c;每一个像素点由三个分量构成&#xff0c;分别是R,G,B。 R代表红色分量&#xff0c;G代表绿色分量&#xff0c;B代表蓝色分量&#xff0c;以24位色来…

加密与安全_密钥体系的三个核心目标之不可否认性解决方案

文章目录 Pre概述不可否认性数字签名&#xff08;Digital Signature&#xff09;证书是什么证书使用流程 PKICA证书层级多级证书证书链是如何完成认证的&#xff1f; 其他疑问1. Alice能直接获取Bob的公钥&#xff0c;是否还需要证书&#xff1f;2. 为什么即使能直接获取公钥也…

理解机器学习中的潜在空间(Understanding Latent Space in Machine Learning)

1、什么是潜在空间&#xff1f; If I have to describe latent space in one sentence, it simply means a representation of compressed data. 如果我必须用一句话来描述潜在空间&#xff0c;它只是意味着压缩数据的表示。 想象一个像上面所示的手写数字&#xff08;0-9&…

vue学习day01-vue的概念、创建Vue实例、插值表达式、响应式、安装Vue开发者工具

1、vue的概念 Vue是一个用于构建用户界面的渐进式 框架 &#xff08;1&#xff09;构建用户界面&#xff1a;基于数据动态渲染页面 &#xff08;2&#xff09;渐进式&#xff1a;循序渐进的学习 &#xff08;3&#xff09;框架&#xff1a;一条完整的项目解决方案&#xff…

GenAl如何改变 DevOps 中的软件测试?

TestComplete 是一款自动化UI测试工具&#xff0c;这款工具目前在全球范围内被广泛应用于进行桌面、移动和Web应用的自动化测试。 TestComplete 集成了一种精心设计的自动化引擎&#xff0c;可以自动记录和回放用户的操作&#xff0c;方便用户进行UI&#xff08;用户界面&…

RTK_ROS_导航(2):卫星图查看

目录 1. 基于MapViz的卫星图查看 1. 基于MapViz的卫星图查看 安装 # 源码安装 mkdir -p RTK_VISION/src cd RTK_VISION/src git clone https://github.com/swri-robotics/mapviz.git --branchmelodic-eol sudo apt-get install ros-$ROS_DISTRO-mapviz ros-$ROS_DISTRO-mapviz-…

IP-GUARD如何禁止电脑自带摄像头

IP-GUARD可以通过设备管理模块禁止USB接口&#xff0c;所以USB外置摄像头很容易就可以禁止了。 但是笔记本自带摄像头无法禁止&#xff0c;配置客户端策略如下&#xff1a; device_control_unknown_mode1 device_control_unphysical_mode3

记一次 Qt installer framework安装程序过程中 安装驱动依赖

在installscript.qs 文件中该函数添加exe 依赖程序放置位置

Python28-11 CatBoost梯度提升算法

CatBoost&#xff08;Categorical Boosting&#xff09;是由Yandex(一家俄罗斯互联网企业&#xff0c;旗下的搜索引擎曾在俄国内拥有逾60%的市场占有率&#xff0c;同时也提供其他互联网产品和服务)开发的一种基于梯度提升的机器学习算法。CatBoost特别擅长处理类别特征&#x…

什么是ThingsKit物联网平台?

在信息化时代的浪潮中&#xff0c;物联网&#xff08;IoT&#xff09;作为新一代信息技术的核心&#xff0c;已经逐渐渗透到我们生活的方方面面。而在这个大背景下&#xff0c;Thingskit物联网平台以其独特的技术优势和应用场景&#xff0c;成为了物联网领域的一颗璀璨明星。本…

3.flink架构

目录 概述 概述 Flink是一个分布式的带有状态管理的计算框架&#xff0c;为了执行流应用程序&#xff0c;可以和 Hadoop YARN 、K8s 进行整合&#xff0c;当然也可以是一个 standalone 。 官方地址&#xff1a;速递 k8s 是未来的一种趋势&#xff0c;对资源管控能力强。

Windows 控制中心在哪里打开,七种方法教会你

在 Windows 操作系统中&#xff0c;控制中心的概念可能稍有些混淆&#xff0c;因为 Windows 通常使用“控制面板”这一术语来指代用于配置系统设置和更改硬件及软件设置的中心区域。 不过&#xff0c;随着 Windows 的更新&#xff0c;微软也在逐步将一些设置迁移到“设置”应用…