<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
-->
<img src="./img/1.gif" alt="松鼠">
<img width="200" src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMZaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDQUQyNzAxMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDQUQyNzAwMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSIyMEIwNzYzMUNEQzQ2NkI5NzM4RUFEQjBCNTdFMUE5RiIgc3RSZWY6ZG9jdW1lbnRJRD0iMjBCMDc2MzFDREM0NjZCOTczOEVBREIwQjU3RTFBOUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAM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
html与css的学习笔记与练习.zip
需积分: 1 73 浏览量
2024-03-13
22:42:03
上传
评论
收藏 22.46MB ZIP 举报
html与css的学习笔记与练习.zip （291个子文件） 
all.css 68KB all.css 68KB all.css 68KB fontawesome.css 67KB all.min.css 55KB all.min.css 55KB all.min.css 55KB fontawesome.min.css 54KB v4-shims.css 40KB v4-shims.min.css 26KB index.css 8KB svg-with-js.css 8KB svg-with-js.min.css 6KB normalize.css 6KB index.min.css 5KB iconfont.css 5KB style.css 2KB style.css 2KB reset.css 1KB reset.css 1KB reset.css 1KB reset.css 1KB reset.min.css 773B regular.css 733B solid.css 726B brands.css 714B regular.min.css 676B solid.min.css 668B brands.min.css 661B syntax2.css 598B base.css 524B other.css 496B syntax.css 391B base.min.css 286B style.css 69B a.css 52B style.css 44B a.min.css 19B fa-solid-900.eot 188KB fa-solid-900.eot 188KB fa-solid-900.eot 188KB fa-brands-400.eot 127KB fa-brands-400.eot 127KB fa-brands-400.eot 127KB fa-regular-400.eot 34KB fa-regular-400.eot 34KB fa-regular-400.eot 34KB iconfont.eot 6KB
1.gif 1.03MB 2.gif 261KB
11.图片标签.html 45KB 10.超链接.html 20KB 17.移动端页面.html 16KB index.html 11KB 06_京东顶部导航条.html 5KB 02_京东左侧导航条.html 5KB 02.浮动其他的特点.html 5KB 07.垂直方向的布局.html 5KB 10.背景2.html 4KB 03_网易新闻的右侧的列表.html 4KB 03.表格的样式.html 4KB 02.动画.html 4KB 01.过渡.html 3KB 01.定位的简介.html 3KB 03.弹性容器的样式.html 3KB 06.盒子的水平布局.html 3KB 01.弹性盒.html 3KB 16.淘宝导航.html 3KB 03.盒子模型_边框.html 3KB 01_CSS简介.html 3KB 10_电影卡片.html 3KB 05_京东的轮播图.html 3KB 02.绝对定位.html 3KB 04.粘滞定位.html 2KB 13.钟表.html 2KB index4.html 2KB 04.弹性元素的样式.html 2KB 13.颜色.html 2KB 01.浮动的简介.html 2KB 04.高度塌陷的问题.html 2KB 03.动画.html 2KB 05.盒子模型_外边距.html 2KB 14.复仇者联盟.html 2KB 05.关系选择器.html 2KB 04.变形.html 2KB 09.行内元素的盒模型.html 2KB 01.文档流.html 2KB 02.弹性容器的样式.html 2KB 11.选择器的权重.html 2KB 09.背景.html 2KB 04.语义化标签.html 2KB 12.轮廓和圆角.html 2KB 07.伪类选择器.html 2KB 08.外边距的折叠.html 2KB 04.表单.html 2KB 04_w3导航条.html 2KB 03_常用选择器.html 2KB 01.字体.html 2KB 05.绝对定位元素的布局.html 2KB 09_按钮练习.html 2KB共 291 条
- 1
- 2
- 3
资源评论
