首页 前端知识 HTML-标签之文字排版、图片、链接、音视频

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

2024-03-06 09:03:23 前端知识 前端哥 700 662 我要收藏

1、标签语法

HTML超文本标记语言——HyperText Markup Language

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

2、HTML基本骨架

HTML基本骨架是网页模板

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

VS Code快速生成骨架:在HTML文件(.html)中,!(英文)配合Enter/Tab键

3、标签的关系

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

  • 父子关系(嵌套关系)
  • 兄弟关系(并列)

向后缩进:Tab

向前缩进:Shift+Tab

4、注释

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

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

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

 5、标题标签

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

标签名:h1~h6(双标签)

显示特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行(换行)

经验分析:

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

6、段落标签

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

标签名:p(双标签)

如上图,有三个段落 

显示特点:

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

7、换行与水平线标签

  • 换行:<br> (单标签)

  • 水平线:<hr> (单标签)

8、文本格式化标签

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

都是双标签

9、图形标签

作用:在网页中插入图片

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

9.1 图像标签-属性

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

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

10、路径

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

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

10.1 相对路径

10.2 绝对路径

  • Windows电脑从盘符出发
  • Mac电脑从根目录(/)出发

  • Windows默认是 \,其他系统是 /,建议统一写为 /
  • 文件的在线网址:https://www.itheima.com/images/logo.png
  • 绝对路径的应用场景:友情链接

11、超链接 

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

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

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

target="_blank"属性作用:在新窗口打开页面。 

12、音频标签

常见属性

属性作用特殊说明
src(必须属性)音频URL支持格式:MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验,浏览器一般会禁用自动播放功能

13、视频标签

属性作用特殊说明
src(必须属性)视频URL支持格式:MP4、WebM、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放为了提升用户体验,浏览器支持在静音状态自动播放

综合案例一

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

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

<!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&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&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&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3317.html
标签
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!