HTML样式CSS、图像

  • HTML样式-CSS:

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。CSS可以通过以下方式添加到HTML中:1)、内联方式:在HTML元素中使用“style”属性;2)、内部样式表:在HTML文档头部<head>区域使用<style>元素来包含CSS;3)、外部引用:使用外部CSS文件。

  1. 、内联样式:

<p style=“color:green;margin-left:20px;> </P>

<p style=“font-family:verdana;background:green;>font-size:20px; </P>

<body style=“background-color:yellow;”>

<h2 style=“background-color:red;”> </h2>

<p style=“background:green;> </P>

</body>

<h2 style=“font-family:verdana;”> </h2>

<h1 style=“text-align:center;”> </h2>

2)、内部样式表:

<head>

<style type=“text/css”>

Body {background-color:yellow;}

P{color:blue;}

</style>

</head/

3)、外部样式表:

<head>

<link rel=“stylesheet”type=“text/css”href=“mystyle.css”>

</head/

  • HTML图像:

在HTML中,图像由<img>标签定义。<img>是空标签,它只包含属性,没有闭合标签。

定义图像的语法:<img src=“url”alt=“some_text”>。src源属性的值是图像的URL地址。alt属性用来为图像定义一串预备的可替换的文本。

1)、HTML图像设置高度和宽度:

<img src=“url”alt=“some_text”> width=“300”height=“200”>

2)、HTML图像排列图片:

<img src=“url”alt=“some_text”> align="middle" width=“300”height=“200”>

3)、HTML浮动图像:

<img src=“url”alt=“some_text”style="float:left" width="32" height="32">

4)、HTML图像边框:

<img border="10" src=“url”alt=“some_text”style="float:left" width="32" height="32">

  1. 、HTML图像创建链接:

<p>创建图片链接:

<a href="http://www.runoob.com/html/html-tutorial.html">

<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">

</a>

</p>

  1. 、HTML图像映射:

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

HTML图像标签:

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

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

相关文章

阿里云OS系统Alibaba Cloud Linux 3系统的安全更新命令

给客户部署的服务&#xff0c;进入运维阶段&#xff0c;但是经常被客户监测到服务器漏洞&#xff0c;现在整理一下&#xff0c;服务器漏洞问题更新命令步骤。 服务器系统&#xff1a; 阿里云linux服务器&#xff1a;Alibaba Cloud Linux 3 漏洞类型和描述&#xff1a; #3214…

微课录屏软件哪个好?帮你轻松搞定课程录制

微课作为一种新型的教学方式&#xff0c;因其短小精悍、内容丰富等特点&#xff0c;越来越受到广大师生的喜爱。在制作微课时&#xff0c;选择一款合适的录屏软件显得尤为重要。可是微课录屏软件哪个好呢&#xff1f;本文将详细介绍两款微课录屏软件&#xff0c;并进行全方位对…

STM32-HAL库08-TIM的输出比较模式(输出PWM的另一种方式)

STM32-HAL库08-TIM的输出比较模式&#xff08;输出PWM的另一种方式&#xff09; 一、所用材料&#xff1a; STM32F103C6T6最小系统板 STM32CUBEMX&#xff08;HAL库软件&#xff09; MDK5 示波器或者逻辑分析仪 二、所学内容&#xff1a; 通过定时器TIM的输出比较模式得到预…

C++初阶(七)类和对象

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、流插入流提取1、流插入演示2、流提取演示3、cplusplus推荐 二、const成员三、取地址及con…

Go 如何实现并发

Go语言的并发机制是其强大和流行的一个关键特性之一。Go使用协程&#xff08;goroutines&#xff09;和通道&#xff08;channels&#xff09;来实现并发编程&#xff0c;这使得编写高效且可维护的并发代码变得相对容易。下面是Go的并发机制的详细介绍&#xff1a; 协程&#x…

指纹识别之dns

https://ephen.me/2017/dns-tcp/ https://c.biancheng.net/view/6457.html https://www.jianshu.com/p/b483300378af https://www.cnblogs.com/549294286/p/5172448.html wireshark数据包分析 Packet Details Pane(数据包详细信息), 在数据包列表中选择指定数据包&#xff0c;…

循环神经网络 - RNN

循环神经网络&#xff08;Rerrent Neural Network,RNN&#xff09;是神经网络的一种&#xff0c;类似的还有深度神经网络&#xff08;DNN&#xff09;、卷积神经网路(CNN)、生成对抗网络&#xff08;GAN)等。**RNN对具有时序特性的数据非常有成效&#xff0c;他能挖掘数据中的时…

Asterisk Ubuntu 安装

更新环境 sudo apt update sudo apt install wget build-essential git autoconf subversion pkg-config libtool sudo contrib/scripts/get_mp3_source.sh A addons/mp3 A addons/mp3/common.c A addons/mp3/huffman.h A addons/mp3/tabinit.c A addons/mp3/Ma…

【Midjourney入门教程2】Midjourney的基础操作和设置

文章目录 Midjourney的常用命令和基础设置1、 /imagine2、 /blend3、 /info4、 /subscribe5、 /settings&#xff08;Midjourney的基础设置&#xff09;6、 /shorten 有部分同学说我不想要英文界面的&#xff0c;不要慌&#xff1a; 点击左下角个人信息的设置按钮&#xff0c;找…

Vue分页控件报错 “pagerCount“

报错信息&#xff1a;[Vue warn]: Invalid prop: custom validator check failed for prop “pagerCount”. <template><div class"pagination"><el-paginationsmallbackground:layout"layout":total"total":current-page"…

深度学习之基于ResNet18的神经网络水果分类系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介二、功能三、神经网络水果分类系统四. 总结 一项目简介 基于ResNet18神经网络的水果分类系统是一个利用深度学习技术进行水果图像分类的系统。下面是该系统…

Web APIs——节点操作

1、DOM节点 DOM节点&#xff1a;DOM树里每一个内容都称之为节点 节点类型&#xff1a; 元素节点 所有的标签 比如body、div属性节点 所有的属性 比如 href文本节点 所有的文本其他 2、查找节点 关闭二维码案例&#xff1a; 点击关闭按钮&#xff0c;关闭的是二维码的盒子&#…

第02章_MySQL环境搭建

第02章_MySQL环境搭建 讲师&#xff1a;尚硅谷 宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 1. MySQL的卸载 步骤1&#xff1a;停止MySQL服务 在卸载之前&#xff0c;先停止MySQL8.0的服务。按键盘上的“Ctrl Alt …

https原理

首先说一下几个概念&#xff1a;对称加密、非对称加密 对称加密&#xff1a; 客户端和服务端使用同一个秘钥&#xff0c;分两种情况&#xff1a; 1、所有的客户端和服务端使用同一个秘钥&#xff0c;这个秘钥被泄漏后数据不再安全 2、每个客户端生成一个秘钥&…

rhcsa-vim

命令行的三种模式 将ets下的passwd文件复制到普通用户下面 编辑模式的快捷方式 a--光标后插入 A--行尾插入 o--光标所在上一行插入 O--光标所在上一行插入 i--光标前插入 I--行首插入 s--删除光标所在位然后进行插入模式 S--删除光标所在行然后进行插入 命令模式的快捷…

MathType7.4.8.0下载安装教程

MathType是一款专业的数学公式编辑器,兼容Office word,excel等700多种程序,用于编辑数学试卷、书籍、报刊、论文、幻灯演示等文档轻松输入各种复杂的数学公式和符号。 可以帮助用户快速的在各种文档中插入符号和公式&#xff0c;多复杂的公式都可轻松编辑完成&#xff0c;还可…

如何本地部署Jellyfin影音服务器并实现在公网访问

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

Git保姆级教学(超详细版)

一、Git概述 Git 是一个免费的、开源的 分布式版本控制系统 &#xff0c;可以快速高效地处理从小型到大型的各种 项目。 Git 易于学习&#xff0c;占地面积小&#xff0c;性能极快。 它具有廉价的本地库&#xff0c;方便的暂存区域和多个工作 流分支等特性。其性能优于 Sub…

GD32 单片机 硬件I2C死锁解决方法

死锁的复现方式 在I2C恢复函数下个断点&#xff08;检测到I2C多次超时之后&#xff0c;应该能跳转到I2C恢复函数&#xff09;使用镊子&#xff0c;将SCL与SDA短接&#xff0c;很快就能看到程序停到恢复函数的断点上&#xff0c;此时再执行恢复函数&#xff0c;看能否正常走出&…