目录
页资源
1. 进入网页
2. 寻找源代码
3. 定位源代码中的url地址
一、HTML网页的介绍
HTML（超文本标记语言）是创建和设计网页的基础。一个简单的HTML网页框架包含几个基本的组成部分：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://example.com">访问示例网站</a>
</body>
</html>
框架分析：
<!DOCTYPE html>声明文档类型和版本。<html>元素是一个页面的根元素。<head>部分包含了文档的元（meta）数据，如标题。<title>定义了网页的标题，显示在浏览器标签页上。<body>是网页的主体部分，包含所有可见的内容。
二、 常用标签
在HTML中，有一些标签是非常基础且频繁使用的，用于构建网页的结构和内容。以下是一些常用标签的示例。
1. 标题标签（h1-h6）
标题标签从 <h1> 到 <h6>，代表了不同层级的标题，<h1> 是最高级别的标题：
<body>
<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
<h3>这是一个H3标题</h3>
<h4>这是一个H4标题</h4>
<h5>这是一个H5标题</h5>
<h6>这是一个H6标题</h6>
</body>2. 段落标签（p）
段落标签 <p> 用于定义文本的段落：
<body>
<p>这是一个段落，用来展示普通的文本内容。</p>
</body>3.超链接标签（a）
超链接标签 <a> 用于创建指向其他页面的链接：
<body>
<a href="https://www.example.com">访问Example网站</a>
</body>4. 注释标签（<!-- -->）
在HTML中，注释标签用来插入注释，这些注释不会在浏览器中显示，但可以帮助开发者理解代码的结构或目的。注释在HTML中用 <!-- 和 --> 包围：
<body>
<!-- 这是一个注释，它不会在网页中显示 -->
<p>这个段落上面有一个注释。</p>
</body>5. 标签属性
HTML标签可以包含属性，属性提供了有关HTML元素的额外信息，通常用于设置元素的样式、类、id等：
<!DOCTYPE html>
<html>
<head>
<title>属性示例</title>
</head>
<body>
<p class="text-large" id="first-paragraph" style="color: blue;">这是一个具有多个属性的段落。</p>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问Example网站</a>
</body>
</html>在上述示例中，<p> 标签具有三个属性：
class="text-large"：指定了段落的类名，通常用于CSS样式化。id="first-paragraph"：提供了一个唯一的标识符。style="color: blue;"：直接在标签上定义了样式，这里是设置文字颜色为蓝色。
三、设置字体格式
1. 字体家族
font-family 属性用来指定文本的字体。你可以指定一个或多个字体，浏览器会按顺序尝试加载，直到找到可用的字体。
<p style="font-family: Arial, sans-serif;">这是Arial字体的段落。</p>
2. 字体大小
font-size 属性用于设置字体的大小。可以使用像素（px）、点（pt）、em、rem 等单位。
<p style="font-size: 16px;">这个段落的字体大小是16像素。</p>
3. 字体粗细
font-weight 属性用于设置字体的粗细。常用的值有 normal、bold、bolder、lighter，或者使用数值（如 400 对应 normal，700 对应 bold）。
<p style="font-weight: bold;">这是加粗的文本。</p>
4. 字体样式
font-style 属性主要用于设置字体的风格，如斜体。常用的值包括 normal、italic 和 oblique。
<p style="font-style: italic;">这是斜体文本。</p>
5. 文本颜色
color 属性用来设置文本的颜色。可以使用颜色名（如 red）、HEX代码（如 #FF0000）、RGB（如 rgb(255, 0, 0)）等方式指定。
<p style="color: blue;">这段文本是蓝色的。</p>
6. 文本对齐
text-align 属性用来设置文本的对齐方式。常见的值有 left、right、center 和 justify。
<p style="text-align: center;">这段文本居中对齐。</p>
示例
将以上所有样式组合在一段文本中：
<p style="font-family: 'Times New Roman', serif; font-size: 20px; font-weight: bold; font-style: italic; color: darkgreen; text-align: center;">
这是一段使用多种字体格式设置的文本。
</p>
这段代码将创建一个文本段落，其中包括Times New Roman字体，20像素大小，加粗，斜体，深绿色文本，且文本居中对齐。通过这样的设置，你可以有效地控制网页上文本的显示样式，使其更符合你的设计需求。
四、 添加多媒体
在编写HTML时，我们通常会使用HTML代码段来嵌入多媒体内容。下面我将详细介绍如何在HTML文件中添加图片、音频和视频。
1. 添加网页图片
为了在HTML中添加图片，你需要在HTML文件中使用 <img> 标签。下面的Python示例创建一个简单的HTML文件，其中包含一个图片元素：
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个图片示例：</p>
<img src="example.jpg" alt="示例图片">
</body> 这段代码会生成一个HTML文件，其中包含一个指向 "example.jpg" 的图片。确保图片文件与生成的HTML文件位于同一目录中，或者提供正确的路径。
2. 添加网页音频
在HTML中嵌入音频可以使用 <audio> 标签，允许用户控制播放。下面的Python代码示例演示如何生成包含音频文件的HTML：
<body>
<h1>听听这个音频</h1>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>这将创建一个包含音频播放器的HTML文件，用户可以播放、暂停和调整音频。
3. 添加网页视频
同样地，视频可以通过 <video> 标签添加到HTML中，下面的示例创建一个HTML文件，其中包含视频播放器：
<body>
<h1>观看这个视频</h1>
<video controls>
<source src="example.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</body>这段代码会生成一个HTML文件，用户可以在其中播放、暂停和控制视频。
以上示例均展示了如何使用Python生成包含多媒体内容的HTML文件。在实际应用中，你需要确保多媒体文件路径正确，或者使用网络URL代替本地路径。
五、 获取网页资源
为了使我们编写的HTML文件更加的丰富以期能完成更加复杂的工作，我们往往回想要获取更加丰富的网络资源，但网页中的资源，往往受限于网络控件而无法获取，但我们可以通过获取url的方式来获取网络资源，基本步骤如下：
1.进入网页
例如我们进入人民邮电出版社官方的图书页中
url=https://www.ptpress.com.cn/shopping/index我们可以看见以下界面
其中每一个图片都有一个对应的url，这个url就是我们要获取的资源
2.寻找源代码
右击鼠标点击检查就可以看见源代码如下图所示
3.定位源代码中的url地址
例如在这个代码中我们想获取第一张图片
我们可以看到“心稻盛和夫的一生嘱托”这本书的封面图片对应这一个地址，这个url地址就是该图片的下载地址，读者可以通过这种方法自行寻找网络资源
url="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-53619-8/72jpg/53619.jpg"
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
