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

今天我来针对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.mzph.cn/news/871147.shtml

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

相关文章

小程序-设置环境变量

在实际开发中&#xff0c;不同的开发环境&#xff0c;调用的接口地址是不一样的 例如&#xff1a;开发环境需要调用开发版的接口地址&#xff0c;生产环境需要正式版的接口地址 这时候&#xff0c;我们就可以使用小程序提供了 wx.getAccountInfoSync() 接口&#xff0c;用来获取…

查找PPT中某种字体的全部对应文字

本文章的目的是找到某种字体的文字&#xff0c;而不是替换某种字体的文字&#xff0c;也不是将某种字体全部替换为另外一种文字。 第一步&#xff1a;在PPT中按下ALTF11 出现以下窗口 第二步&#xff1a;点击插入->模块 第三步&#xff1a;将以下代码输入到窗体中 Sub F…

树的结构(b,b+树)

无论线性表&#xff0c;栈还是队列&#xff0c;都是一对一&#xff0c;查询的时候&#xff0c;效率较低&#xff0c;数据量比较的大的情况 1.树的定义 一种数据结构&#xff0c;有层次关系的集合&#xff0c;根朝上&#xff0c;叶朝下 除了根节点外&#xff0c;每个子节点都…

论文翻译:Large Language Models for Education: A Survey and Outlook

https://arxiv.org/abs/2403.18105 目录 教育领域的大型语言模型&#xff1a;一项调查和展望摘要1. 引言2. 教育应用中的LLM2.1 概述2.2 学习辅助2.2.1 问题解决&#xff08;QS&#xff09; 2.2.2 错误纠正&#xff08;EC&#xff09;2.2.3 困惑助手&#xff08;CH&#xff09;…

解决elementUI列表的疑难杂症,排序显示错乱的问题

大家好&#xff0c;在使用elementUI表格时&#xff0c;有时会出现一些意料之外的问题&#xff0c;比如数据排序正常但表格显示、排序错乱等。在网上搜索后一般有2种解决方法&#xff1a;1.给表格每一项的el-table-column添加唯一的id用于区分。2.给表格每一项的el-table-column…

羧基聚乙二醇生物素的制备方法;COOH-PEG-Biotin

羧基聚乙二醇生物素&#xff08;COOH-PEG-Biotin&#xff09;是一种常见的生物分子聚合物&#xff0c;具有多种应用&#xff0c;特别是在生物实验、药物研发和生物技术等领域。以下是对该化合物的详细解析&#xff1a; 一、基本信息 名称&#xff1a;羧基聚乙二醇生物素&#x…

数据结构:链表详解 (c++实现)

前言 对于数据结构的线性表&#xff0c;其元素在逻辑结构上都是序列关系&#xff0c;即数据元素之间有前驱和后继关系。 但在物理结构上有两种存储方式&#xff1a; 顺序存储结构&#xff1a; 使用此结构的线性表也叫 顺序表物理存储上是连续的&#xff0c;因此可以随机访问…

电压反馈型运算放大器的增益和带宽

简介 本教程旨在考察标定运算放大器的增益和带宽的常用方法。需要指出的是&#xff0c;本讨论适用于电压反馈(VFB)型运算放大器。 开环增益 与理想的运算放大器不同&#xff0c;实际的运算放大器增益是有限的。开环直流增益(通常表示为AVOL)指放大器在反馈环路未闭合时的增益…

借人工智能之手,编织美妙歌词篇章

在音乐的领域中&#xff0c;歌词宛如璀璨的明珠&#xff0c;为旋律增添了无尽的魅力和情感深度。然而&#xff0c;对于许多创作者来说&#xff0c;编织出美妙动人的歌词并非易事。但如今&#xff0c;随着科技的飞速发展&#xff0c;人工智能为我们带来了全新的创作可能。 “妙…

Cornerstone3D导致浏览器崩溃的踩坑记录

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ⛳️ 问题描述 在使用vue3vite重构Cornerstone相关项目后&#xff0c;在Mac本地运行良好&#xff0c;但是部署测试环境后&#xff0c;在window系统的Chrome浏览器中切换页面会导致页面崩溃。查看Chrome的任务管理器&am…

浅析Kafka Streams消息流式处理流程及原理

以下结合案例&#xff1a;统计消息中单词出现次数&#xff0c;来测试并说明kafka消息流式处理的执行流程 Maven依赖 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusio…

【三维AIGC】扩散模型LDM辅助3D Gaussian重建三维场景

标题&#xff1a;《Sampling 3D Gaussian Scenes in Seconds with Latent Diffusion Models》 来源&#xff1a;Glasgow大学&#xff1b;爱丁堡大学 连接&#xff1a;https://arxiv.org/abs/2406.13099 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何…

Spring Security学习笔记(一)Spring Security架构原理

前言&#xff1a;本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 Spring Security中文文档&#xff1a;https://springdoc.cn/spring-security/index.html 一、什么是Spring Security Spring Security是一个安全控制相关的java框架&#xff0c;它提供了一套全…

海外ASO:iOS与谷歌优化的相同点和区别

海外ASO是针对iOS的App Store和谷歌的Google Play这两个主要海外应用商店进行的优化过程&#xff0c;两个不同的平台需要采取不同的优化策略&#xff0c;以下是对iOS优化和谷歌优化的详细解析&#xff1a; 一、iOS优化&#xff08;App Store&#xff09; 1、关键词覆盖 选择关…

用node.js写一个简单的图书管理界面——功能:添加,删除,修改数据

涉及到的模块&#xff1a; var fs require(‘fs’)——内置模块 var ejs require(‘ejs’)——第三方模块 var mysql require(‘mysql’)——第三方模块 var express require(‘express’)——第三方模块 var bodyParser require(‘body-parser’)——第三方中间件 需要…

打造你的智能家居指挥中心:基于STM32的多协议(zigbee、http)网关(附代码示例)

1. 项目概述 随着物联网技术的蓬勃发展&#xff0c;智能家居正逐步融入人们的日常生活。然而&#xff0c;市面上琳琅满目的智能家居设备通常采用不同的通信协议&#xff0c;导致不同品牌设备之间难以实现互联互通。为了解决这一难题&#xff0c;本文设计了一种基于STM32的多协…

ant design form动态增减表单项Form.List如何进行动态校验规则

项目需求&#xff1a; 在使用ant design form动态增减表单项Form.List时&#xff0c;Form.List中有多组表单项&#xff0c;一组中的最后一个表单项的校验规则是动态的&#xff0c;该组为最后一组时&#xff0c;最后一个表单项是非必填项&#xff0c;其他时候为必填项。假设动态…

docker inspect 如何提取容器的ip和端口 网络信息?

目录 通过原生Linux命令过滤找到IP 通过jq工具找到IP 使用docker -f 的过滤&#xff08;模板&#xff09; 查找端口映射信息 查看容器内部细节 docker inspect 容器ID或容器名 通过原生Linux命令过滤找到IP 通过jq工具找到IP jq 是一个轻量级且灵活的命令行工具&#xf…

(视频演示)基于OpenCV的实时视频跟踪火焰识别软件V1.0源码及exe下载

本文介绍了基于OpenCV的实时视频跟踪火焰识别软件&#xff0c;该软件通过先进的图像处理技术实现对实时视频中火焰的检测与跟踪&#xff0c;同时支持导入图片进行火焰识别。主要功能包括相机选择、实时跟踪和图片模式。软件适用于多种场合&#xff0c;用于保障人民生命财产安全…

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验

OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记二之glad加载opengl函数以及opengl-API(函数)初体验1.运行2.重点3.目录结构4.main.cpp5.CMakeList.txt 1.运行 2.重点 3.目录结构 01_GLFW_WI…