web前端开发——标签一(注释、标题、段落、换行、格式、图片)

news2024/9/20 0:59:46

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

目录

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

注释标签:Ctrl+/

标题标签:  h1-h6

段落标签:

换行标签:

格式标签

图片标签_src属性


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

图片标签_src属性

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

绝对路径

图片路径

网络上的图片路径

相对路径

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

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

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


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

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

我们下次再见喽!

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

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

相关文章

如何利用大模型提高金融合规场景的工作效率?

金融是强监管行业&#xff0c;遵守法律法规、行业标准和内部政策是金融行业的基本要求。在强监管合规环境下&#xff0c;金融机构需要降低合规风险并提升服务质量。 人工审核效率低、成本高&#xff0c;且存在主观性导致的风险。过去&#xff0c;金融机构基于规则和NLP模型构建…

ArcGIS如何快速对齐两个图层

1、问题 如何让两个图层快速对齐 2、使用捕捉工具 移动点或折点&#xff0c;使其与其他要素的折点、边或端点精确重合。 可指定捕捉规则来控制是将输入折点捕捉到指定距离范围内的最近折点、边还是端点。

大模型时代的目标检测

https://zhuanlan.zhihu.com/p/663703934https://zhuanlan.zhihu.com/p/6637039341.open set/open word/ood 这个任务是指在实际应用上可以检测任何前景物体&#xff0c;但是有些不需要预测类别&#xff0c;只要检测出框就行。在很多场合也有应用场景&#xff0c;有点像类无关…

小白股票投资手册:股票入门基础知识合集!

小白股票投资手册&#xff1a;股票入门基础知识合集&#xff01; 随着经济的发展和人们对财富增长的渴望&#xff0c;股票投资已经成为许多人关注的焦点。然而&#xff0c;对于初次接触股票的小白来说&#xff0c;面对繁多的专业术语和复杂的市场变化&#xff0c;往往会感到迷茫…

Uniapp鸿蒙项目实战

Uniapp鸿蒙项目实战 24.7.6 Dcloud发布了uniapp兼容鸿蒙的文档&#xff1a;Uniapp开发鸿蒙应用 在实际使用中发现一些问题&#xff0c;开贴记录一下 设备准备 windows电脑准备&#xff08;家庭版不行&#xff0c;教育版、企业版、专业版也可以&#xff0c;不像uniapp说的只有…

Android --- Kotlin学习之路:自己写一个SDK给别的APP用(暴漏一个接口,提供学生的身高数据)

今天又来肝kotlin了&#xff0c;主题是&#xff1a;用kt写一个SDK给其他人用&#xff0c;这个小技能在项目中会经常用到&#xff0c;应该有很多小伙伴还不会用&#xff0c;不会的请往下看—⬇ 在项目里面新建一个module 选择Android library&#xff0c;然后点击finish就行了 …

使用Apache服务部署静态网站

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、网站服务程序 ​二、配置服务文件参数 ​三、SELinux安全子系统 四、个人用户主页功能 ​五、虚拟网站主机功能 六、Apache的访问控制…

期货量化交易客户端开源教学第十节——行情列表

行情列表数据 行情列表数据接收 行情列表接收到的数据根据接收到的数据进行字符处理。为了方便查看行情数据针对每个字段进行显示控制&#xff0c;并可根据显示器自动适配列宽。 发送命令&#xff1a;2 数据接受返回的格式&#xff1a; 2;13;1720682964;000;12021.00;24;120…

React18+Redux+antd 项目实战 JS

React18Reduxantd 项目实战 js Ant Design插件官网 Axios官网 (可配置请求拦截器和响应拦截器) JavaScript官网 Echarts官网 一、项目前期准备 1.创建新项目 hotel-manager npx create-react-app hotel-manager2.安装依赖 //安装路由 npm i react-router-domnpm i aixos /…

Cassandra数据库与Cql实战笔记

文章目录 启动数据库查看数据库节点启动成功状态 关闭数据库使用cqlsh工具常见命令查看集群信息 数据定义命令数据操作命令操作健空间创建Keyspace连接健空间删除健空间创建表主键表修改添加列删除列删除表清空表 添加数据数据过期时间 查询数据更新数据更新简单数据更新set类型…

Docker:基础概念、架构与网络模式详解

1.Docker的基本概念 1.1.什么是docker Docker是一个用于开发,交付和运行应用程序的开放平台.docker使您能够将应用程序域基础框架分开,以便你可以快速开发交付软件.使用docker,你可以管理你的基础架构以管理应用程序相同的方式.通过利用docker用于交付,测试和部署代码的方法,你…

「字符串匹配算法 2/3」有限自动机匹配字符串算法

有限自动机匹配字符串算法需要一定的数论知识&#xff0c;而且也不是很好玩。 本文不会展开说其数学属性&#xff0c;因为要说清楚这点需要读者有一定的离散数学基础&#xff0c;不然就得先解释清楚一些概念。所以如果你不懂自动机、状态机等概念&#xff0c;对集合、关系等概…

【Datawhale AI 夏令营】讯飞“基于术语词典干预的机器翻译挑战赛”

背景 机器翻译具有悠长的发展历史&#xff0c;目前主流的机器翻译方法为神经网络翻译&#xff0c;如LSTM和transformer。在特定领域或行业中&#xff0c;由于机器翻译难以保证术语的一致性&#xff0c;导致翻译效果还不够理想。对于术语名词、人名地名等机器翻译不准确的结果&…

PyTorch复现PointNet++——模型训练+模型测试

本博文主要实现对PointNet源码进行调试&#xff0c;训练可视化测试。 一、下载源码和数据集 论文&#xff1a;PointNet: Deep Hierarchical Feature Learning on Point Sets in a Metric Space GitHub源码&#xff1a;Pointnet2_pytorch 数据集包括三种&#xff1a;分类、零部…

修改留言板

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>备忘录</title><!-- <link rel"…

[Spring] Spring Web MVC基础理论

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

如何从 PDF 中删除背景

您是否曾经收到过充满分散注意力背景的扫描 PDF 文档&#xff1f;也许是带有繁忙水印的旧收据或背景光线不均匀的扫描文档。虽然这些背景可能看起来没什么大不了的&#xff0c;但它们会使您的工作空间变得混乱&#xff0c;并使您难以专注于重要信息。轻松删除这些不需要的元素并…

嵌入式基础 硬件接口汇总

在此收集整理嵌入式通信中常见的接口协议&#xff0c;它们具有一定的通用性&#xff0c;在今后的开发中会反复遇到。 包括但不限于以下类别&#xff08;逐步完善中…&#xff09;&#xff1a; GPIOUARTSPII2CUSBEthernetNAND Flash类SDRAM类&#xff08;ram-like&#xff09;LC…

机器学习——随机森林(学习笔记)

目录 一、基础认识 1. 集成算法介绍 2. 集成算法种类 二、sklearn中的随机森林 1. ensemble.RandomForestClassifier &#xff08;随机森林分类&#xff09; &#xff08;1&#xff09;基本参数 &#xff08;2&#xff09;基本属性 &#xff08;3&#xff09;基本接口 …

【Linux】centos7安装PHP7.4报错:libzip版本过低

问题描述 configure: error: Package requirements (libzip > 0.11 libzip ! 1.3.1 libzip ! 1.7.0) were not met: checking for libzip > 0.11 libzip ! 1.3.1 libzip ! 1.7.0... no configure: error: Package requirements (libzip > 0.11 libzip ! 1.3.1 libzi…