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.hqwc.cn/news/157839.html

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

相关文章

企业上ERP的节奏商讨

导读&#xff1a;目前国内很多企业都选择ERP作为企业信息化系统&#xff0c;ERP系统的实施是一个系统的工程&#xff0c;实施过程中只有遵循正确的步骤&#xff0c;才能达到事半功倍的效果。 企业建立ERP管理系统&#xff0c;不是把现有的手工管理模式照搬到计算机上来操作&…

vue3中,使用html2canvas截图包含视频、图片、文字的区域

需求&#xff1a;将页面中指定区域进行截图&#xff0c;区域中包含了图片、文字、视频。 第一步&#xff0c;先安装 npm install html2canvas第二步&#xff0c;在页面引入&#xff1a; import html2canvas from html2canvas;第三步&#xff0c;页面使用&#xff1a; 1&…

项目实战:编辑页面加载库存信息

1、前端编辑页面加载水果库存信息逻辑edit.js let queryString window.location.search.substring(1) if(queryString){var fid queryString.split("")[1]window.onloadfunction(){loadFruit(fid)}loadFruit function(fid){axios({method:get,url:edit,params:{fi…

《巴渝小将》少儿电视综艺走进江小白金色黄庄拍摄圆满成功!

巴渝小将&#xff0c;乘风破浪&#xff01; 张扬巴渝魅力&#xff0c;展示少年风采&#xff0c;本期拍摄我们来到了位于江津的江小白金色黄庄。 江小白金色黄庄位于永兴镇黄庄村&#xff0c;是一座充满诗意又不乏童趣的农文旅综合体&#xff0c;基于当地良好的酿酒高粱产业基础…

Spring Boot 3系列之一(初始化项目)

近期&#xff0c;JDK 21正式发布&#xff0c;而Spring Boot 3也推出已有一段时间。作为这两大技术领域的新一代标杆&#xff0c;它们带来了许多令人振奋的新功能和改进。尽管已有不少博客和文章对此进行了介绍&#xff0c;但对于我们这些身处一线的开发人员来说&#xff0c;有些…

FPGA 如何 固化程序到 FLASH中

1、导出Hardware 2、导出bit文件 3、打开SDK 4、 点击Ok 5、创建工程 6、 输入工程名称&#xff1a;guhua 7、选择 Zynq FSBL 8、单击 guhua、然后点击 build 点击&#xff1a;build all 9、 右键之后&#xff0c;点击&#xff1a;Creat Boot Image 10、点击 Cr…

主从复制(gtid方式)

基于事务的Replication&#xff0c;就是利用GTID来实现的复制 GTID&#xff08;全局事务标示符&#xff09;最初由google实现&#xff0c;在MySQL 5.6中引入.GTID在事务提交时生成&#xff0c;由UUID和事务ID组成.uuid会在第一次启动MySQL时生成&#xff0c;保存在数据目录下的…

【SpringMVC篇】5种类型参数传递json数据传参

&#x1f38a;专栏【SpringMVC】 &#x1f354;喜欢的诗句&#xff1a;天行健&#xff0c;君子以自强不息。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f33a;普通参数&#x1f33a;POJO参数&#x1f33a;嵌套…

【Redis】安装(Linuxwindow)及Redis的常用命令

Redis简介 Redis是一个开源&#xff08;BSD许可&#xff09;&#xff0c;内存存储的数据结构服务器&#xff0c;可用作数据库&#xff0c;高速缓存和消息队列代理。 它支持字符串、哈希表、列表、集合、有序集合&#xff0c;位图&#xff0c;hyperloglogs等数据类型。内置复…

集简云slack(自建)无需API开发轻松连接OA、电商、营销、CRM、用户运营、推广、客服等近千款系统

slack是一个工作效率管理平台&#xff0c;让每个人都能够使用无代码自动化和 AI 功能&#xff0c;还可以无缝连接搜索和知识共享&#xff0c;并确保团队保持联系和参与。在世界各地&#xff0c;Slack 不仅受到公司的信任&#xff0c;同时也是人们偏好使用的平台。 官网&#x…

vue 获取上一周和获取下一周的日期时间

效果图&#xff1a; 代码&#xff1a; <template><div><div style"padding: 20px 0;"><div style"margin-left: 10px; border-left: 5px solid #0079fe; font-size: 22px; font-weight: 600; padding-left: 10px">工作计划</…

提升ChatGPT答案质量和准确性的方法Prompt engineering

文章目录 怎么获得优质的答案设计一个优质prompt的步骤:Prompt公式:示例怎么获得优质的答案 影响模型回答精确度的因素 我们应该知道一个好的提示词,要具备一下要点: 清晰简洁,不要有歧义; 有明确的任务/问题,任务如果太复杂,需要拆分成子任务分步完成; 确保prompt中…