【HTML进击】图片，表格基础的不能再基础篇

最新推荐文章于 2024-08-03 22:21:30 发布

Point酱

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_40571965/article/details/81291558

版权

图像的格式
1，GIF格式
就是图像交换格式，文件最多可使用256种颜色。最适合显示色调不连续或具有大面积单一颜色的图像。例如导航条，按钮，图标，徽标等
最大优点就是可以制作动态图像，可以将数张静态文件作为动画串联起来，转换成一个动画文件。
另一个优点就是可以将图像以交错的方式在网页中呈现。所谓的交错显示就是当图像尚未完成时，浏览器会先以马赛克的形式将图像缓慢显示，让浏览者可以大致猜出下载图像的雏形。
2，JPEG格式
它是一种图像压缩格式。此文件格式用于摄影或连续色调图像的高级格式。JPEG文件可以包含数百万种颜色。
JPEG格式是一种压缩的非常紧凑的格式，专门用于不含大色块的图像。它能够保存全真的色调版格式。
3，PNG格式
它是一种非破坏性的网页图像文件格式。它不仅具备GIF图像的大部分优点，而且还支持48位色彩，更快的交错显示，跨平台的图像亮度控制，更多层的透明度设置。
- 插入图像
  1,标记img,图像源文件src
  src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。
  语法：img src="图像文件的地址"
  2,图像的提示文字alt
  语法：img src="图像文件的地址" alt="提示文字的内容"
  3，图像的宽度和高度width,height
  语法：img src="图像文件的地址" width="图像的宽度" height="图像的高度"
  4，图像的超链接
  语法<a href="链接地址"><img src="图像文件的地址"></a>
  在该语法里，href参数用来设置图像的链接地址
  如<a href="#"><img src="1.jpg" width="400" height="286" border="0"/></a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图像的提示文字</title>
</head>
<body>

<!--<div align="center"><img src="12.jpg" width="400" height="264"></div>-->
    <img src="12.jpg" alt="韩孝周" width="400" height="264" align="left">
</body>
</html>

使用列表
1，有序列表
2，有序列表的序号类型
如<ol type="序号类型"> </ol>
3,有序列表的起始数值start
4，无序列表的类型type
语法：<ul type="符号类型">

`
disc——默认值，黑色实心圆点
circle—-空心圆形符号
square—正方形符号
依次对应下方代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        列表练习题
    </title>
</head>
<body>

<ol>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>

<ol type="a">
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>

<ol type="a" start="2">
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>

<ul type="square">
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ul>



</body>
</html>

这里写图片描述
5，定义列表标记dl

语法：

<dl>
<dt>定义条件</dt>
<dd>定义描述</dd>
... ...
</dl>

该语法中，<dl></dt>标记了定义列表的开始和结束。<dt>后面添加要解释的名词，而在<dd>添加名词的具体解释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        定义列表
    </title>
</head>
<body>
<dl>
    <dt>CSS</dt>
    <dd>CSS就是Cascading Style shees,中文翻译为”层叠样式表“，它是一种制作网页的新技术</dd>
    <dt>程序员</dt>
    <dd>掉头发群体</dd>
</dl>



</body>
</html>