HTML css 图像

最新推荐文章于 2024-01-15 00:46:18 发布
最新推荐文章于 2024-01-15 00:46:18 发布
阅读量171 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duyaoyuta/article/details/105646339
版权

css

CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用

内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

<body style="background-color:yellow;">  <!--背景黄色-->
<h2 style="background-color:red;">红色</h2>
<p style="background-color:green;">绿色</p>
</body>

在这里插入图片描述
HTML 样式实例 - 字体, 字体颜色 ，字体大小
斜体样式
font-family（字体），color（颜色），和font-size（字体大小）

<body>
<h1 style="font-family:verdana;">标题</h1>
<p style="font-family:arial;color:red;font-size:10px;">段落。</p>
</body>

在这里插入图片描述

text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<body>

<h1 style="text-align:center;">居中对齐</h1>
<p>段落。</p>

</body>

在这里插入图片描述

内部样式表

在<head> 部分通过 <style>标签定义内部样式表

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

主页链接到css版块代码

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style>	定义文本样式
<link>	定义资源引用地址

HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="图片介绍" width="304" height="228">

<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

<map name="planetmap">
  <area shape="rect" coords="1,1,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>

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

<table border="1"><!--定义边框的大小的-->
<caption>表格标题</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表
1.无序列表
无序列表使用

  • 标签 

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

在这里插入图片描述

2.有序列表
有序列表始于

  1. 标签。每个列表项始于
  2. 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

在这里插入图片描述
自定义列表
自定义列表以

标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
开始。 

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

在这里插入图片描述
列表标签

<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

有序列表详解

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

在这里插入图片描述

<h4>大写字母列表：</h4>
<ol type="A"><!--type="排序方式"-->
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

在这里插入图片描述

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

在这里插入图片描述

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

在这里插入图片描述

小写罗马数字列表：
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

在这里插入图片描述

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

在这里插入图片描述

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

在这里插入图片描述

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

在这里插入图片描述

<h4>嵌套列表​：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

在这里插入图片描述

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

在这里插入图片描述


<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dd>Milk</dd>
  <dt>- white cold drink</dt>
</dl>

在这里插入图片描述

duyaoyuta
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS 1号店
06-11
【HTML+CSS 1号店】是一个学习HTML和CSS基础及进阶知识的资源集合，主要涵盖网页布局、响应式设计以及图像应用等关键领域。在这个项目中，我们可以看到几个核心知识点： 1. **HTML（超文本标记语言）**：HTML是网页...
HTML + CSS 基本案例
08-22
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页开发的基石，它们共同构建了网页的结构和样式。在这个“HTML + CSS 基本案例”中，我们将探讨这两个关键技术的基础知识和应用。 HTML是...
HTML和CSS中的图像与背景图像
一碗周
08-27 810
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十四篇-《HTML和CSS中的图像与背景图像》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习HTML和CSS中图像的相关内容，本篇文章会涉及到的内容如下图所示： <img>图像元素 HTML提供<img>元素用于在页面中表示一个图像，该元素为一个空元素。使用src属性来引入一张图片
html如何载入图片,CSS如何插入图片？
weixin_36430300的博客
06-02 1万+
在CSS中，可以使用background-image属性或background属性来插入图片。background-image属性或background属性可以为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。background-image属性background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框...
HTML图片的css设置
m0_58565716的博客
08-26 390
在html中 用 用src就可以显示出图片 但是这样的耦合度太高了，不利于后期更换图片 所以用css来做就更好了。 但是用css src并不能显示图片，只有 具体不知道原因。 猜猜：HTML形成壳子。css也是壳子，所以需要background ...
HTML系列之图像标签img
热门推荐
老__L的博客
10-24 3万+
本文主要介绍 img 标签。 将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
HTML--CSS--图片和背景样式
weixin_44517278的博客
01-15 1541
最基本的应该就是对大小的管理width:像素值;宽度height:像素值;高度</imgwidth;height;</</</</
中国剪纸html+css
07-06
HTML将用于构建页面的框架，如标题、段落、图片等元素，而CSS则会用来设定字体样式、颜色、背景以及图像布局，以增强阅读体验，同时保持页面设计的一致性。 `appreciation.html`可能是关于剪纸欣赏的部分，展示各种...
html+css+js防笔趣阁首页
最新发布
03-23
这些图像可以使用HTML的`<img>`标签引入，或者通过CSS的`background-image`属性设置为背景。优化图像大小和格式对于提高网页加载速度至关重要。 综上所述，这个项目涵盖了网页开发的基本要素，通过HTML构建内容，...
HTML+CSS个人主页设计
03-15
在IT行业中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页内容和样式的基石。这个“HTML+CSS个人主页设计”项目显然旨在教授初学者如何利用这两种技术创建一个完整的个人主页。 ...
html img图片滑动,HTML+CSS入门 如何实现图片(image) 左右滑动
weixin_35816790的博客
06-04 2586
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
用CSS设置颜色、背景和图像效果
微风洋洋的博客
02-08 1万+
这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识，重要的知识点就是图文混排，尤其要注意图片的位置，为后面将相对位置、绝对位置做好铺垫。
CSS背景图片和HTML中的img标签
Night_Emperor的博客
04-15 1万+
背景图片：该图片是218*170css内容：div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px solid red; }div{ width: 500px; height: 500px; background: url(img/1.jpg); border: 2px solid red;...
HTML+css制作简易图片库
qq_32814941的博客
05-11 3180
CSS<style> div.img { float:left; margin: 10px; border:1px solid #bebebe; } div.img img{ display: inline; border:1px solid #bebebe; margin:5px
html css 图片位置
ChangeNew的博客
04-12 2987
图片水平垂直居中 https://blog.csdn.net/DreamFJ/article/details/68921957
怎么在html中加入网上的图片,css中如何插入图片？
weixin_29825861的博客
05-31 4212
css中如何插入图片？下面本篇文章就来给大家介绍一下使用CSS在HTML中插入图片的方法，希望对大家有所帮助。在css中，可以使用background-image属性添加图片。background-image属性为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素...
HTML直接插入图片和css使用背景图片区别
Darkness的博客
10-28 1万+
本文转载自：http://www.bangju.com/design_50.html 感谢分享 刚刚接触前端重构的小伙伴或许会遇到一个问题，网页中的图片是做背景（写在CSS中）好呢，还是写在HTML标签中好呢？其实呢不同的场景、不同的项目需求下，选择都会不一样。我们先来分析一下网友的一些结论，并适当吐槽下。 1.使用&lt;/&gt; 有一个好处是，用户可以很方便的右键保存或者复制图片的链接。 2...
HTML+CSS+JS做出图片自动切换效果
weixin_43784536的博客
11-28 2万+
HTML+CSS+JS，图片自动切换、鼠标移动触发切换效果（onmouseover获得当前元素id方法） 大学新手一枚，乱七八糟学了好多又忘了好多，以后要慢慢一点点记下来。 ================================================================ 效果图 文件结构： 素材文件夹里面都是所需的图片 鼠标触碰切换按钮图片，长宽都P成20px...
HTML中CSS引入图片并铺满背景
悬剑丨的博客
08-07 1万+
HTML代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;背景图片拉伸铺满页面&lt;/title&gt;         &lt;link type="text/css" rel=&q
HTML与CSS面试题精华版
这是一份针对初学者和面试准备者的IT知识总结，主要涵盖了HTML和CSS的基础概念。这份资料旨在帮助学员掌握面试中常见的技术问题，以便他们能流畅地回答。 1. HTML（HyperText Markup Language）是一种标记语言，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值