HTML-标签之文字排版、图片、链接、音视频

本文介绍: IT之家 11 月 29 日消息，在今日晚间的 Re d m i 十周年暨 K70 系列手机新品发布会上，Re d m i K70 系列新机正式发布，本文主要介绍标准版机型，该机定位“新一代旗舰性能新标杆”，售价 2499 元起，查看详情

1、标签 语法

HTML超文本标记语言——Hyp e rText Mar k up Langua g e

超文本是链接
标记也叫标签，带尖括号的文本

2、HTML基本骨架

HTML基本骨架是网页模板

html：整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主体，存放给用户看的代码，例如图片、文字
title：网页标题

VS Code 快速生成骨架：在HTML文件（.html）中，!（英文）配合Ent e r/Ta b键

3、标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）
兄弟关系（并列）

向后缩进：Ta b

向前缩进：Sh i ft+Tab

4、注释

注释就是对代码的解释和说明，其目的是能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。

<!-…->注释标签用来在源文档中插入注释，注释不会在浏览器中显示

在VS Code中，添加/删除注释的快捷键：Ctrl + /

5、标题 标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签）

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

经验分析：

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
h2~h6没有使用次数的限制

6、段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p（双标签）

如上图，有三个段落

显示特点：

独占一行
段落之间存在间隙

7、换行与水平线标签

换行：<b r> （单标签）

水平线：<hr> （单标签）

8、文本 格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

都是双标签

9、图形标签

作用：在网页中插入图片

src 用于指定图像的位置和名称，是<img>的必须属性。建议以./开头，VS Cod e有提示功能

9.1 图像标签-属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

属性名=“属性值”
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

10、路径

路径是指查找文件时，从起点到终点经历的路线。

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- windows 电脑从盘符出发
- Mac 电脑从根目录出发

10.1 相对路径

10.2 绝对路径

Win dows 电脑从盘符出发
Mac 电脑从根目录（/）出发

Win dows 默认是，其他系统是 /，建议统一写为 /
文件的在线网址：https://www.ithe ima.com/image s/logo.png
绝对路径的应用场景：友情链接

11、超链接

作用：点击跳转到其他页面

href 属性值是跳转地址，是超链接的必须属性。

不确定跳转地址，可以使用 # 空链接

target=”_blank“属性作用：在新窗口打开页面。

12、音频标签

常见属性

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
control s	显示音频控制面板
loop	循环播放
auto play	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

13、视频标签

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、We bM、Ogg
control s	显示视频控制面板
loop	循环播放
muted	静音播放
auto play	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

综合 案例一

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 —> 写代码 —> 保存 —>刷新浏览器，看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>今日话题</h1>
    <hr>
    <p>IT之家 11 月 29 日消息，在今日晚间的 Redmi 十周年暨 K70 系列
    手机新品发布会上，Redmi K70 系列新机正式发布，本文主要介绍标准版
    机型，该机定位“新一代旗舰性能新标杆”，售价 2499 元起<a href="./综合案例二.html">vue</a>，
    <a href="https://item.jd.com/100078020142.html?cu=true&amp;utm_source=www.ithome.com&amp;utm_medium=jingfen&amp;utm_campaign=t_236375426_RV_kuIDkuZY&amp;utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a>   
    </p>
    <img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300">
    <h2>性能方面</h2>
    <p>Redmi K70 <strong>搭载第二代骁龙 8</strong>，综合跑分超 171 万，辅以
         LPDDR5X 内存，UFS 4.0 闪存，支持狂暴引擎 3.0、5000mm² 环形
         冷泵 VC 液冷散热。<ins>我很喜欢，你喜欢不</ins>
    </p>
    <p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置，具体来说，该机采用 6.67 
        英寸 3200×1400 华星光电 C8 OLED 柔性直屏，手动最高亮度 700nit、全屏激
        发 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 触控采样率
        （瞬时 2160Hz），3840Hz 高频 PWM 调光，12bit 色深，JNCD ≈ 0.35；
    </p>
    <h2>影像方面</h2>
    <p>该机前置 16MP（豪威 OV16A1Q），后置 50MP 主摄（光影猎人 800，
        1/1.55"，OIS）+8MP 超广角（豪威 OV08D10）+2MP 微距（思特威 
        SC202PCS）三摄；续航方面，Redmi K70 搭载 5000mAh 电池，支持
         120W 快充，搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。
    </p>
    <h2>其它方面</h2>
    <p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达，搭载 
        1012+1216 立体声双扬声器，通过双 Hi-Res 认证，搭载小米澎湃 OS 
        系统。
    </p>
</body>
</html>

综合 案例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>今日话题</h1>
    <hr>
    <p>IT之家 11 月 29 日消息，在今日晚间的 Redmi 十周年暨 K70 系列
    手机新品发布会上，Redmi K70 系列新机正式发布，本文主要介绍标准版
    机型，该机定位“新一代旗舰性能新标杆”，售价 2499 元起<a href="./综合案例二.html">vue</a>，
    <a href="https://item.jd.com/100078020142.html?cu=true&amp;utm_source=www.ithome.com&amp;utm_medium=jingfen&amp;utm_campaign=t_236375426_RV_kuIDkuZY&amp;utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a>   
    </p>
    <img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300">
    <h2>性能方面</h2>
    <p>Redmi K70 <strong>搭载第二代骁龙 8</strong>，综合跑分超 171 万，辅以
         LPDDR5X 内存，UFS 4.0 闪存，支持狂暴引擎 3.0、5000mm² 环形
         冷泵 VC 液冷散热。<ins>我很喜欢，你喜欢不</ins>
    </p>
    <p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置，具体来说，该机采用 6.67 
        英寸 3200×1400 华星光电 C8 OLED 柔性直屏，手动最高亮度 700nit、全屏激
        发 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 触控采样率
        （瞬时 2160Hz），3840Hz 高频 PWM 调光，12bit 色深，JNCD ≈ 0.35；
    </p>
    <h2>影像方面</h2>
    <p>该机前置 16MP（豪威 OV16A1Q），后置 50MP 主摄（光影猎人 800，
        1/1.55"，OIS）+8MP 超广角（豪威 OV08D10）+2MP 微距（思特威 
        SC202PCS）三摄；续航方面，Redmi K70 搭载 5000mAh 电池，支持
         120W 快充，搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。
    </p>
    <h2>其它方面</h2>
    <p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达，搭载 
        1012+1216 立体声双扬声器，通过双 Hi-Res 认证，搭载小米澎湃 OS 
        系统。
    </p>
</body>
</html>