实验名称:实验一优化制作新闻详情页———参考答案

实验名称:实验一优化制作新闻详情页

💡

笔记

1.1 实验目的

HTML(HyperText Markup Language,超文本标记语言)是为‘网页创建和其他可在网页浏览器中看到的信息’设计的一种标记语言。HTML主要用来使信息结构化（例如：标题、段落、图片等），也可用来描述文档语义，还能改善文档外观，HTML主要是用来编写一些静态网页。此次实验在于熟悉基础的html常用的标签使用能够利用标签元素进行一些简单的文字排版以及图片插入。

1.2 效果展示

2.1 源码

注意：不提供图片素材，案例里的图片叫“hh.jpg”，请按需替换。

提示：<img src="./img/hh.jpg"> 此标签用于插入图片，其中

属性	意义	用法
src	图像文件的地址	src="./img/hh.jpg"
alt	图像替代文字	alt=”啊吧啊吧”
width	图像的显示宽度	width=”100px”
height	图像的显示高度	height=“80px”

1.3 详细解释

HTML 标签和属性详细介绍

在本教程中，我们将详细介绍给定 HTML 文件中所用的每个标签及其属性，包括用法和示例。通过学习这些基础知识，您将能够更有效地构建和修改网页。

1. `<!DOCTYPE html>`

描述：

<!DOCTYPE html> 是用于声明文档类型的指令，指示浏览器该网页使用的 HTML 版本。对于 HTML5，使用此声明可以确保浏览器以标准模式解析页面。这对于确保页面的跨浏览器兼容性非常重要。

示例：

2. `<html>`

描述：

<html> 标签是整个 HTML 文档的根元素，所有其他元素都应该包含在这个标签内。它告诉浏览器这个文档是一个 HTML 文档。

属性：

lang：定义文档的语言代码，帮助搜索引擎和屏幕阅读器识别内容的语言。

示例：

3. `<head>`

描述：

<head> 标签用于包含文档的元数据。这些信息通常不显示在浏览器窗口中，但对于浏览器和搜索引擎来说非常重要。

4. `<meta>`

描述：

<meta> 标签用于定义文档的一些元信息，如字符集、页面描述、关键词等。

属性：

charset：指定文档的字符编码，例如 "UTF-8" 允许使用多种语言字符。

name 和 content：用于描述文档目的或关键词，比如 "description" 和 "keywords"。

示例：

5. `<title>`

描述：

<title> 标签指定网页的标题，在浏览器标签或书签中显示。它对 SEO 也有重要影响。

示例：

6. `<body>`

描述：

<body> 标签包含网页的所有可见内容，包括文本、图像、链接等。

属性：

style：可以内联定义 CSS 样式。例如设置背景颜色。

示例：

7. `<h2>`

描述：

<h2> 标签是二级标题，用于结构化文档内容，使其更易于阅读和理解。HTML 提供了六个标题标签，<h1> 表示最高级别的标题，<h6> 是最低级别的标题。

示例：

8. `<hr>`

描述：

<hr> 标签生成一条水平线，用于分隔内容或表示主题的变化。它在视觉上帮助用户区分不同的部分。

示例：

9. `<img>`

描述：

<img> 标签用于在网页中插入图像。

属性：

src：必须属性，指定图像的路径。

alt：替代文本，图像无法显示时所显示的文本（有助于无障碍性和SEO）。

width 和 height：可选属性，控制图像的显示尺寸。

示例：

10. `<u>`

描述：

<u> 标签表示下划线文本。尽管有时被视为过时标签，但在某些场景中依然使用。

示例：

11. `<b>`

描述：

<b> 标签用于加粗文本，有时用于强调某段信息。它是纯展示性的，不一定表示重要性。

示例：

12. `<span>`

描述：

<span> 标签是一个行内元素，用于对部分文本进行样式化，而不会影响文档的布局。通常用来应用 CSS 样式。

属性：

style：可用于直接设置内联样式。

示例：

13. `<br>`

描述：

<br> 标签返回一个换行符，用于在文本中产生换行效果。适合在文本块中添加额外的间距，而不需要创建新的段落。

示例：

总结

本文详细介绍了给出的 HTML 文件中使用的标签和属性，包括如何使用它们来构建网页。理解这些基础知识将帮助您更有效地创建和管理网页内容。希望通过这个教程，您能对 HTML 有更深入的理解，并能应用于您的项目中。