HTML进阶
设置字体格式
HTML提供了大最的、不同样式的字体格式标签，将这些标签相互嵌套使用,可以使得网页正文内容显不同的字体格式效果。
设置字体的字形与效果
给字体设置粗体格式使用<b>标签。
示例代码:
<body><h1>我是标题1</h1>
<p>这里可以写一个<b>段落</b>的文字信息</p></body>第3行代码在段落标签中嵌套了一个粗体格式标签，使得“段落”两个字的字体被加粗，保存代码文件并使用浏览器打开后的网页显示效果如图14-9所示。
给字体设置斜体格式使用<i>标签，设置上标格式使用<sup>标签，设置下标格式使用<sub>标签，设置下画线格式使用<u>标签，
示例代码:
<body>
<h1><i>我是</i><sup>标</sup><sub>题</sub>1</h1><p>这里可以写一个<b>段落</b>的<u>文字信息</u></p></body>第2行代码在<h1>标签中嵌套使用斜体格式标签<i>将“我是”设置为斜体格式,嵌套使用上标格式标签<sup>将“标”设置为上标格式，嵌套使用下标格式标签<sub>将
勷这里是标麵10st63342/书代码/第14章程..园→C localh
“题”设置为下标格式。第3行代码在<p>标签中使用粗体格式标签<b>将“段落”加粗嵌套使用下画线格式标签<u>将“文字信息”设置为下画线格式。保存该代码文件并使用浏览器打开，打开后的网页显示效果如图14-10所示。
设置字体颜色
HTML颜色由红色、绿色和蓝色混合而成,字体颜色可以通过标签的属性style设置。其使用形式如下:
<标签名 style="color:颜色值">内容</标签名>将style样式值设置为color,并且对color设定相应的颜色值,颜色值有以下3种使用方式,第1种，使用十六进制符号。颜色值可参考本书附录中的“常见颜色码对照表”
第2种，使用RGB值。RGB值由红色、绿色和蓝色的色值组成,每种颜色的色值范围是0~255,读者可Word软件中字体颜色的自定义颜色选项卡中查看,或者参考本书附录中的“常见颜色码对照表”第3种，使用颜色名。例如Blue表示蓝色、Black表示黑色(详情可参考本书附录中的“常见颜色码对照不区分大小写)。
当style样式值为background时表示设置字体的背景颜色,background值的使用方式与上面3种颜色值的使用方式一致。
第 14 室 操作HTML网页
示例代码(实现不同的颜色效果):
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 style="color:rgb(168,168,168)">我是标题1</h1><p style="color:#FF0000">这里写一个段落的文字信息</p><p style="color:blue">我是第二段内容</p><h2 style="background:LightSeaGreen ; color:blue">我是标题2</h2></body>
</html>第2行代码使用RGB值设置标题1的颜色。
第3行代码使用十六进制符号设置段落的颜色
第4行代码使用颜色名设置段落的颜色为蓝色
第5行代码设置标题2的背景颜色为LightSeaGreen,字体颜色为蓝色h
注意当styile中存在多个值时,需要使用分号隔开,且style样式值为一个字符事。
我是标题1
保存代码文件并使用浏览器打开后的网页显示效果如图14-11所示。
设置字体大小
设置标签内容的字体大小可以通过给样式style赋予font-size的值来实现。其使用形式如下:
<标签名 style="font-size:38pt">我是标题1</标签名>以上形式表示设置“我是标题1”标签的字体大小为38pt,其单位可以有多种形式,例如pt(磅)、cm(厘米)、inches(英寸)、mm(毫米)等。
示例代码:
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 style="font-size:38pt">我是标题1</h1><p style="font-size:1cm">我们一起学习Python办公自动化</p></body>
</html>第2行代码设置“我是标题1”的字体大小为38pt。
第3行代码设置段落标签的字体大小为1cm。我是标题1保存代码文件并使用浏览器打开后的网页显示效果如图14-12所示。读者可自行尝试使用其他单位设置字体大小。
添加多媒体
在HTML网页中可以轻松地使用标签来添加图片、音频、视频等多媒体,而这些多媒体并不需要读者获取到实际的文件或上传到网页中，只需要找到它们的网址(url)即可。
添加网页图片
在网页中插入图片可以使用<img>标签(<img>是单标签,即在整个网页中只需要1个<img>标签)来实
现。其使用形式如下:
kimg src="网址"alt="文字”width="304px" height="228px"><img>标签中存在多个属性,这里列举了常见的src、alt、width和height属性属性src:指必须填入的属性，表明插入的图片的url。属性alt:指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字。属性width和height:表示图片的宽度和高度,其单位为px,表示像素。当只填入一个参数时，默认按原R
寸比例自动缩放。示例代码:
<body><h1 >我是标题1</h1><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41773-2/72jpg/417730203s300.jpg”alt="图片丢失了"width="200px">04</body>第3行代码链接了人民邮电出版社官网中某一本书的封面图片,读者在实验时一定要找到图片的网络源地址
(即urI),图片的ur!一般带有图片的格式后缀,例如以上代码中图片网址的后缀为.jpg。获取图片url的方法可参考14.5节。属性width="200px"表示将图片的宽度设置为200像素,图片的高度会随着宽度值的变化而按原尺寸比例缩放。
如果将第3行代码中图片的url修改为-保存代码文件并使用浏览器打开后的网页显示效果如图14-13所示。个错误的url，图片将无法显示在网页中，而且会出现属性alt的内容“图片丢失了”，如图14-14所示，即当图片url错误或失效时都会显示“图片丢失了”
添加网页音频
在HTML中可以使用<audio>标签实现在网页中插入音频。其使用形式如下:
<audio controls='contro1s'src="音频地址,mp3"type="音频类型">当浏览器不支持播放时的提示信息</audio>属性controls:为网页音频播放提供控件，例如暂停、播放、音量调节等。属性src:用于链接音频文件的地址。音频文件的地址一般以,mp3、.wav等为后缀。读者需要找到一个纯音频的网址，而不是网页中包含音频和其他元素信息的网址。
属性type:表示音频文件的类型。通常情况下,mp3格式为audio/mpeg,.0gg格式为audio/ogg，.wav格式为audio/wav.
<audio>标签中包含文字信息。某些浏览器不支持<audio>标签,因此当浏览器无法播放音频时,网页会显示文字“当浏览器不支持播放时的提示信息”。
示例代码:
<body>
<h1 >我是标题1</h1>
<audio controls="controls” src="音乐.mp3">音乐丢失了</audio>
</body>第3行代码使用了<audio>标签,并通过属性controls设置在网页中显示播放控件,通过属性src链接音频
手网址随时会更新，为避免网址被恶意更新导致进入非法网站的可，非暂不给出具体的音频网址，读者可以通过搜索引警校营造编可，进行实验，具体方法可参考14.5节进荐代码文件并使用浏览器打开后的网页显示效果如图14-15所录
添加网页视频
在HTML中可以使用<vide0>标签实现在网页中播入视频。其使用形式如下
io sc="视频网址"contzols="controls" width=*兜度值”heighe="m度h"autepiay isop muteds </7idEo属性src;需要播放的视频的ur1。视频文件的链接地址一般以.mp4为后级。读者需要找到一个纯视频网而不是网页中包含视频和其他元素信息的网址。属性controls;为网页视频播放提供控件,例如暂停、播放、音最调节等属性width和heigh:用于设置视频的宽度和高度,单位为px，即原素属性autoplay:表示一旦通过ur1链接到视频文件便会自动播放视频。
属性loop:设置视频循环播放。
属muted:设置视频播放时默认静音。
示例代码:
<body>
<video src="https://视频网址.mp4" controls="controls" width="500"></video>03</body>第3行代码中插入了视频标签，并通过属性controls设置在网页中显示播o放控件。由于网址会更新，为避免网址更新导致进入恶意网站的可能，本书暂播放视频啦不给出具体的视频网址，读者可以通过搜索引擎找到一个纯视频网址来进行实验,具体方法可参考14.5节。
保存代码文件并使用浏览器打开后的网页显示效果如图14-16所示。
在浏览器中査看网页源代码的方法如图14-18所示，以Chrome浏览器为例,在网页空白处单击鼠标右键在弹出来的快捷菜单中选择“检查”进入网页检查窗口,如图14-19所示。检查窗口将会自动获取渲染(该知在第15章还会进一步介绍)后的全部网页的源代码。
步骤2，找到资源对应的url。
检查窗口中提供了快速定位到图片url的方法，首先单击图14-19所示的标注框中的按钮(元素选择按钮)，再单击左侧需要下载的图片，例如单击《即兴演讲 掌控人生关键时刻》的封面图，如图14-20所示，在检查窗口中即可自动获取《即兴演讲 掌控人生关键时刻》的封面图片url。
通居集限限公
MC、作，林
美国国家体能协会注册体能训练专家认证(CSCS)官方指定教材中文简体版【重磅上市]官方配我已控同以更新上些
厨币·
B
通常图片url的后缀为.jpg、.png、·gif等图片文件的扩展名，音频的url后缀为.mp3、.wav等音频文件的扩展名，视频的ur1后缀为.mp4、.avi、.flv等视频文件的扩展名。案例中获取的图片url如下:https://cdn.ptpress.cn/uploadimg/Materia1/978-7-115-48382-9/72jpg/48382 s300.jpg
图 14-20
当读者使用以上方法仍然无法定位所需要的资源url时,还可以在检査窗口中使用快捷键Ctr1+F查询资源后缀,例如要寻找视频文件，输入mp4之后会自动获取整个网页中内容为mp4的结果。
步骤3，下载url对应的资源。
获取url之后即可通过浏览器完成资源的下载。首先在浏览器中打开一个新的标签页，然后将url复制到新标签页的网址文本框中，最后选中该图片并单击鼠标右键，在弹出来的快捷菜单中选择“图片另存为”即可将图片下载到本地，如图14-21所示。
其他格式资源的下载方法与此相同，读者可自行尝试。针对无法直接下载图片或视频的网站，这种方法通常是有效的，但切记要遵守《中华人民共和国网络安全法》等。