前端开发第二节课

news2024/11/15 17:36:25

HTML常用的标签

文本格式化标签

在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签使文字以特殊的方式显示。

标签语义:突出重要性,比普通文字更重要。

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

<div>和<span>标签

<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。

<div>这是头部</div>

<span>今日价格</span>

div是division的缩写,表示分割、分区。span意为跨度、跨距。

特点:

1.<div>标签是用来布局,但是现在一行只能放一个<div>,大盒子

2.<span>标签用来布局,一行上可以多个<span>,小盒子

图像标签

<h4>图像标签的使用:</h4>
    <img src="img.jpg" />
    <h4>alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="img1" alt="我是靳向阳">
    <h4>title提示文本鼠标放到图像上,提示的文字:</h4>

    <img src="img.jpg" alt="我是靳向阳" title="我是靳老师思密达" />
    <h4>height给图像设定高度:</h4>
    <img src="img.jpg" alt="我是靳向阳" title="我是靳老师思密达" width="500" height="100" />
    <h4>border给图像设定边框</h4>
    <img src="img.jpg" alt="我是靳向阳" title="我是靳老师思密达" width="500" border="15" />

效果图

 

 1.图像标签

图像标签属性注意点:

图像标签可以拥有多个属性,必须写在标签名的后面。

属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

属性采取键值对的格式,即key="value"的格式,属性="属性值"

重点掌握点:

请说出图像标签那个属性是必须要写的?

src

请说出图像标签中alt和title属性区别?

替换和提示

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

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

相关文章

Spring框架;Spring中IOC简介及搭建;Spring中AOP简介;

一&#xff0c;Spring介绍 Spring 的全称&#xff1a; Spring Framework Spring是一个优秀的开源的轻量级的企业应用开发框架&#xff0c;是为了解决企业应用程序开发复杂性而创建的。它大大简化了java企业级开发的复杂性&#xff0c;提供了强大&#xff0c;稳定的功能&#xf…

XR-Frame 实现 始终朝向屏幕(相机)的面片与模型

wxml&#xff0c;xr-frame中plane平面默认是趴在场景中的&#xff0c;需要先绕x轴渲染90度&#xff0c; // 面片 <xr-node id"l" position"-3.0 0 0.0"><xr-mesh rotation"90 0 0" geometry"plane" uniforms"u_base…

浅析synchronized锁升级的原理与实现 2

本文内容是继我的上篇博客 浅析synchronized锁升级的原理与实现 1-CSDN博客 目录 各状态锁的升级场景 无锁 --> 轻量级锁 偏向锁 --> 轻量级锁 偏向锁 --> 重量级锁 轻量级锁 --> 重量级锁 总结 各状态锁的升级场景 下面我们结合代码看下各状态锁的升级场景。…

VL53L1CB TOF开发(2)----多区域扫描模式

VL53L1CB TOF开发.2--多区域扫描模式 概述视频教学样品申请源码下载硬件准备主要特点生成STM32CUBEMX串口配置IIC配置XSHUTGPIO1X-CUBE-TOF1堆栈设置函数说明初始化设置预设模式 (Preset mode)VL53L1_SetPresetModeVL53L1_SetDistanceMode时间预算单个ROI&#xff08;Single R…

从 Oracle 到 TiDB 丨数据库资源评估指南

原文来源&#xff1a; https://tidb.net/blog/5058e24f 本文作者&#xff1a;柳冬冬 导读 在当今技术飞速发展的时代&#xff0c;传统单机数据库正面临着前所未有的挑战。随着人工智能、云计算和大数据的崛起&#xff0c;企业对数据库的性能、可靠性和扩展性的需求日益增…

wordcloud兼figma的词云图片python生成

文章目录 一.Figma1.简介2.特点 二.代码构成1.详细代码2.word.py代码详解3.成果图 一.Figma 1.简介 Figma是一款全平台可使用的使用软件&#xff0c;和Sketch功能差不多&#xff1b;但是他可以在Mac&#xff0c;Windows PC&#xff0c;Linux计算机甚至Chromebook&#xff0c;…

中国各地级市-产业增加值、产业升级、产业结构高级化(2000-2021年)

产业增加值、产业升级和产业结构高级化是衡量地区经济发展水平的重要指标&#xff1a; 产业增加值&#xff1a;指在一定时期内&#xff0c;单位产值的增长部分&#xff0c;体现了产值、产量和增加值的综合增长能力。 产业升级&#xff1a;指通过技术进步和效率提升&#xff0c…

5.sklearn-朴素贝叶斯算法、决策树、随机森林

文章目录 环境配置&#xff08;必看&#xff09;头文件引用1.朴素贝叶斯算法代码运行结果优缺点 2.决策树代码运行结果决策树可视化图片优缺点 3.随机森林代码RandomForestClassifier()运行结果总结 环境配置&#xff08;必看&#xff09; Anaconda-创建虚拟环境的手把手教程相…

产品售后|基于SprinBoot+vue的产品售后管理​​​​​​​系统(源码+数据库+文档)

产品售后管理系统 目录 基于SprinBootvue的产品售后管理系统 一、前言 二、系统设计 三、系统功能设计 管理员模块实现 客户模块实现 受理人员模块实现 工程师模块实现 厂商模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

STM32外部中断(总结了易出现的BUG)

本文主要讲述了&#xff0c;本人在使用STM32F103C8T6做项目时&#xff0c;使用到按键触发外部中断时&#xff0c;发现无法触发外部中断。通过查看寄存器找出问题的过程&#xff0c;并总结了出现该问题的原因。 出现的问题 在使用STM32F103C8T6做一个矩阵键盘任务时&#xff0…

【学习笔记】卫星通信NTN 3GPP标准化进展分析(五)- 3GPP Release19 研究计划

一、引言&#xff1a; 本文来自3GPP Joern Krause, 3GPP MCC (May 14,2024) Non-Terrestrial Networks (NTN) (3gpp.org) 本文总结了NTN标准化进程以及后续的研究计划&#xff0c;是学习NTN协议的入门。 【学习笔记】卫星通信NTN 3GPP标准化进展分析&#xff08;一&#xff…

R语言报错 | object ‘integral‘ not found whilst loading name

1、报错背景 Registered S3 method overwritten by htmlwidgets:method from print.htmlwidget tools:rstudio Error: package or namespace load failed for ‘Seurat’:object integral not found whilst loading namespace spatstat.core 当我想library&…

RabbitMQ~架构、能力、AMQP、工作模式、高可用、死信队列了、事务机制了解

RabbitMQ RabbitMQ是使用Erlang编写的一个开源的消息中间件。它实现了AMQP(高级消息队列协议)&#xff0c;并支持其他消息传递协议&#xff1a;例如STOMP(简单文本定向消息协议)和MQTT(物联网协议)。 支持多种客户端如:Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、…

4-7 使用bios 中断 读取磁盘

1 首先是逻辑。 首先来看一下 他的编译代码的逻辑。 可以看到我 生成的 实际上是 Boot.bin , 这个文件可不止一个扇区&#xff0c; 然后将这个文件写入到了&#xff0c; disk1.img 这里加载了 disk1.img , disk2.img 我不太理解。 但是可以跑通&#xff0c; 暂时先不管了。…

How can I change from OpenAI to ChatOpenAI in langchain and Flask?

题意&#xff1a;“在 LangChain 和 Flask 中&#xff0c;如何将 OpenAI 更改为 ChatOpenAI&#xff1f;” 问题背景&#xff1a; This is an implementation based on langchain and flask and refers to an implementation to be able to stream responses from the OpenAI …

力扣763-划分字母区间(Java详细题解)

题目链接&#xff1a;763. 划分字母区间 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷贪心类的题目所以该题就默认用贪心方法来做。 贪心方法&#xff1a;局部最优推出全局最优。 如果一个题你觉得可以用局部最优推出全局最优&#xf…

云服务器系统盘存储空间不够用怎么办?解决方法:扩容或挂载数据盘

云服务器系统盘满了不够用怎么办&#xff1f;服务器百科&#xff1a;可以系统盘扩容&#xff0c;也可以通过挂载数据盘来增大存储空间。 1、系统盘扩容教程&#xff1a;使用云服务器系统盘空间不足时&#xff0c;可以在ECS控制台上扩容云盘的容量以增加存储空间。阿里云支持云…

MCU3.电平等一些名词

1.电平的简单定义 计算机由各种硬件组成&#xff0c;只认识0和1&#xff0c;可以通过改变电压来向计算机输入数据&#xff08;0和1&#xff09; 例如&#xff1a;最大电压为3.3V 电压范围是0~3.3V&#xff0c;可以定义0~1V较低的电压表示0&#xff0c;定义2~3.3V较高的电压表…

领域驱动设计——大型结构(Large-Scale Structure)的综合运用

在一个大的、复杂的系统中&#xff0c;可能需要在一个设计中综合运用几种策略。那么&#xff0c;大型结构如何与CONTEXT MAP共存?应该把构造块放到哪里?第一步先做什么?第二步和第三步呢?如何设计你的战略? 把大型结构与BOUNDED CONTEXT结合起来使用 战略设计的3个基本原…

SpringBoot中@Value获取值和@ConfigurationProperties获取值用法及比较

SpringBoot中Value获取值和ConfigurationProperties获取值用法及比较 更新时间&#xff1a;2024年08月08日 09:41:48 作者&#xff1a;岳轩子 在Spring Boot中,Value注解是一个非常有用的特性,它允许我们将外部的配置注入到我们的Bean中,ConfigurationProperties用于将配置文件…