HTML入门Day2

最新推荐文章于 2025-04-29 09:37:13 发布

t3163786

最新推荐文章于 2025-04-29 09:37:13 发布

阅读量84

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/t3163786/article/details/122446652

版权

列表标签

1.无序列表

<ul>
<li>列表内容</li>
<li>列表内容</li>
</ul>

2.有序列表

<ol>
<li>列表内容</li>
<li>列表内容</li>
</ol>

练习内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <title>Document</title>
</head>
<body>
    <ul>
        <li>黄</li>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>汪</li>
        <li>李迪</li>
        <li>王宏</li>
        <li>王成</li>
        <li>罗祥</li>
        <li>佟娅</li>
    </ol>
</body>
</html>

三、定义列表

<dl>
<dt>名词、术语、图片</dt>
<dd>名词、术语、图片的说明</dd>
</dl>

应用场景：商城二级导航+图文列表

图片标签

<img src='图片的地址' alt='图片替代的文本' width='宽度' height='高度'>

说明：
1.多种图片格式都支持
2.设置宽度，高度会等比例变化，反之亦然。

练习
实现一张图片，300*400，替代文字为这是一张图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  src="1.png" alt="这是一张图片" width="300" height="400"  >
</body>
</html>

路径

绝对路径：从盘符或者协议出发，得到的路径
相对路径：相对于当前文件所在的位置得到的路径
书写方法
同级：直呼其名
上级：…/
下级：/

超链接：从一个位置跳转到另一个位置。

超链接的标签

<a href='http.www.baidu.com'_self></a>
<a href='http.www.baidu.com'_blank></a>
_self:当前标签页打开
_blank:新的标签页打开

练习，点击666跳转到百度的页面，并且在新的页面打开。

<a href="http://www.baidu.com " target="_blank">666</a>

ps的基础使用
编辑-首选项-单位与标尺-修改单位像素
alt+滚轮滚动–放大、说小
CTRL+h 添加取消参考线

图片类型

gif：动图
svg：矢量图
png：带透明格式的图
jpeg：可以降低提高压缩级别。会填充透明为白色

切图：
1.选中切片工具
2.ctrl+shift+alt保存成web所有格式
3.按住shift键，点选所有切的图案，然后选择图片存储格式
4.确定-选择权限图案+所有用户切片-保存