Lazy loaded image
🗒️HTML 第一批作业——参考答案
字数 1137阅读时长 3 分钟
2024-10-16
2024-11-24

HTML 第一批作业——答案

 
💡
笔记
 

1.1 题目-复原中图片的网页样式

 
要求:第一题增加背景图片,第二题背景颜色是:#FFD39B

1.1.1 第一题

notion image

1.1.2 第二题

notion image

1.2 源码

 

1.2.1 第一题

注意:不提供图片素材,案例里的图片叫“u=3635362084,1992212334&fm=193&f=GIF.jpg”,请按需替换
 
提示:<img src="./img/hh.jpg"> 此标签用于插入图片,其中
属性
意义
用法
src
图像文件的地址
src="./img/hh.jpg"
alt
图像替代文字
alt=”啊吧啊吧”
width
图像的显示宽度
width=”100px”
height
图像的显示高度
height=“80px”
 

1.2.2 第二题

警告::不提供图片素材,案例里的路径和图片名叫“./img/zuxia_logo.png”,请按需替换

1.3.1 解释

 

1. <!DOCTYPE html>

<!DOCTYPE html> 声明告诉浏览器,这个文档是一个 HTML5 文档。这是每个 HTML 页面应该包含的第一行代码。

2. <html>

<html> 标签是HTML文档的根元素,所有其他元素都应该在这个标签内。它可以包含一个 lang 属性,指定文档的语言。

3. <head>

<head> 标签包含文档的元数据(metadata),如标题、字符集、链接到 CSS 文件等。这部分内容不会在浏览器中直接显示。

常用子标签:

  • <meta charset="UTF-8">: 指定文档使用的字符编码,这里使用的是 UTF-8。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 这行代码用于响应式设计,确保页面在手机等设备上显示正常。
  • <title>: 文档的标题,会显示在浏览器标签页上。

4. <body>

<body> 标签定义了文档的主体,包含用户在浏览器中看到的内容。可以通过设置 background 属性为其指定背景图像。

5. 文本格式化标签

<body> 中,还有一些用于文本格式化的标签:
  • <b>: 表示加粗文本
    • <u>: 表示带下划线的文本
      • <i>: 表示斜体文本
        • <span>: 行内元素,常用于为文本应用特定样式。可以通过 style 属性设置样式,如 font-size

          6. 字体大小

          使用 CSS 的 font-size 属性可以调整文本的大小,例如:
           

          7. <img> 标签

          <img> 标签用于在网页中嵌入图像。它是一个自闭合标签,没有闭合标签。基本语法为:

          属性说明:

          • src: 指定图像文件的路径。这个路径可以是相对路径或绝对路径。在示例中,图像路径为 ./img/zuxia_logo.png
          • alt: 替代文本,用于在图像无法加载时显示的文本,以及提高可访问性。良好的实践是在 <img> 标签中添加 alt 属性。
          示例代码:

          其他注意事项

          • &ensp;: HTML 实体,用于插入空格。
          • &ensp; 表示一个标准的空格。
          • 在实际开发中,尽量使用外部 CSS 来控制样式,不建议在具体标签中使用 style 属性。
          以上是对 index.html 文件中使用到的 HTML 标签和属性的介绍。希望对你学习 HTML 有所帮助!
          上一篇
          C 语言 基本数据类型
          下一篇
          HTML 表单与表单元素

          评论
          Loading...