多媒体与语义化标签

最新推荐文章于 2024-08-02 17:30:06 发布
最新推荐文章于 2024-08-02 17:30:06 发布
阅读量4.8k 收藏
点赞数
分类专栏： 前端学习 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43256819/article/details/119922841
版权

区块标签

div标签实现文档区块分隔

  • 以前，div标签是文档区块分隔唯一手段，为了区分每个div的功能，程序员会借助div标签的class属性
<body>
	<div class="header">
	<div class="logo"></div>
	<div class="nav"></div>
	</div>
	<div class="banner"></div>
	<div class="content">
	<div class="aside"></div>
	<div class="main"></div>
	</div>
	<div class="footer"></div>
</body>
  • HTML5推出了众多新的区块标签
区块标签说明
<section>文档的区域，语义比div大
<article>文档的核心文章内容，会被搜索引擎主要抓取
<aside>文档的非必要相关内容，比如广告等
<nav>导航条
<header>页头
<main>网页核心部分
<footer>页脚

语义化标签

<span>标签

  • <span>标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式
<p>
	<span>北京</span>的区号是<span>010</span>
</p>
<p>
	<span>上海</span>的区号是<span>021</span>
</p>

<b>、<u>、<i>标签

  • <b>、<u>、<i>标签充满浓浓的“样式”意味，已经被CSS替代，但是在网页中也可以表示需要强调的文本
标签说明
<b>被加粗的文字，CSS已经替代了它的功能
<u>加下划线的文字，CSS已经替代了它的功能
<i>倾斜的文字，CSS已经替代了它的功能

<strong>、<em>、<mark>标签

  • <strong>、<em>、<mark>标签均表示强调语义.
标签说明
<strong>代表特别重要文字
<em>代表强调文字
<mark>代表一段需要被高亮的文字

<figure>、<figcaption>标签

  • <figure>元素代表一段独立的内容, 与说明<figcaption>配合使用, 它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体

图片标签

<img>标签

  • <img>标签用来在网页中插入图片

<img src="images/gugong.jpg">

  • 一定注意，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中
  • 图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传

<img>标签的alt属性

  • alt 属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的

<img src="images/gugong.jpg" alt=" ">

  • 如果由于某种原因无法加载图像，浏览器会在页面上显示alt
    属性中的备用文本
  • 供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本

标签的width、height属性

  • width、height属性分别设置宽度和高度，单位是像素，但
    是不需要写单位
    <img src="images/gugong.jpg" alt=" " width="300">
  • 如果省略其中一个属性，则表示按原始比例缩放图片

网页上支持的图片格式

格式说明
.bmpwindows画图软件默认保存的格式，位图
.gif支持动画（比如表情包）
.jpeg(.jpg)有损压缩图片，用于照片
.png便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg矢量图片
.webp最新的压缩算法非常优秀的图片格式

相对路径

  • 相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了”

<img src="images/gugong.jpg">

  • 随着网页和图片的位置关系不同，插入图片的代码随之改变
  • 如果需要回退层级，使用“…/”这样的写法

绝对路径

  • 绝对路径：描述图片精准地址。比如“北京市海淀区西三环北路甲2号院中关村国防科技园2号楼”

<img src="https://www.imooc.com/static/img/index/logo-recommended.png">

  • 不管网页在哪里，绝对路径不需要改变

超级链接

  • 超级链接是将网页和网页连结到一起的方法，是互联网成“网”的原因
  • 使用<a>标签制作超级链接

<a href="2.html">去第二个网页</a>

  • a是anchor（锚）的首字母，hypertext reference超文本引用
  • href属性支持相对路径和绝对路径
<a href="web/2.html">去第二个网页</a>
<a href="../web/2.html">去第二个网页</a>
<a href="http://www.immoc.com">去慕课</a>
  • <a>标签的title属性用于设置鼠标的悬停文本
  • 将<a>标签的target属性设置为blank，即可在新标签页中打开网页
    <a href="2.html" target="blank">去第二个网页</a>
  • HTML4代，blank之前有一个下划线
    <a href="2.html" target="_blank">去第二个网页</a>
  • 图片也可以设置超级链接，只需要用<a>标签包裹img标签即可
<a href="2.html" target="blank">
	<img src="images/goblin.png">
</a>
  • 较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”
    <h1 id="wuxi">无锡美景</h1>
  • 当网址后面添加#时，页面将自动滚动到锚点所在位置
  • 其他页面的超级链接，可以链接到指定锚点
    <a href="lvyou.html#wuxi">看无锡美景</a>
  • 指向exe、zip、rar等文件格式的链接，将自动成为下载链接
    <a href="1.zip">下载</a>
  • 有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件
  • 有tel:前缀的链接是电话连接，系统将自动打开拨号盘
<a href="mailto:me@test.com">给小编发邮件</a>`
<a href="tel:12306">打电话买火车票</a>

音频和视频

  • 以前，在网页中插入音频和视频需要借助Flash，今天，Flash技术已经快要被淘汰，HTML5可以轻松在网页中插入音频和视频
  • 在浏览器中插入音频需要使用<audio>标签，兼容到IE9
<audio controls src="音频地址">
	抱歉，您的浏览器不支持audio标签，请升级浏览器
</audio>
  • 常用音频格式是mp3和ogg格式
  • 声明autoplay属性，音频会自动播放
  • 常用的浏览器为了不打扰用户，可能会不允许自动播放音乐，必须让用户手动点击之后才能播放
  • 声明loop属性，将循环播放音频

视频

  • 在浏览器中插入视频需要使用<video>标签，兼容到IE9.
<video controls src="视频地址" loop autoplay>
	抱歉，您的浏览器不支持video标签，请升级浏览器
</video>
  • 常用音频格式是mp4、ogv、webm等格式
我可真是个小机灵鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.4 多媒体与语义化标签
sid170401023的博客
01-16 295
一、图片与超链接标签 1.图片标签 （1）<img>标签：<img>标签用来在网页中插入图片 <img src=“images/gugong.jpg>” img 是images(图片)的缩写 src是source(来源)的缩写 图片的存储目录和完整的文件名 (2)注意点 ①图片必须要复制到项目文件夹中，一般将图片保存到项目文家中的images子文件中 ②images/表示images文件夹 ③后缀名一定要写 ④图片路径必须正确 <img src=“images/g
html5语义化标签 加粗,html5标签 H5标签
weixin_32868705的博客
05-31 630
html>h5文本元素1.文本元素2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~7.强调 倾斜元素 em 8.删除线2 s元素9998 9.下划线 u 10.下划线2 ins元素 11.小号字体small元素 12.下标 sub：CH4COOH ; 上标sup：20平方米=20m213.倾斜 dfn 14.代表缩写 并没...
前端学习积累（三）多媒体与语义化标签-语义化标签
i_donot_care的博客
07-03 1494
区块标签 语义化标签 1）spao标签 <span>标签是区块标签，结合css使用 它是行内标签，被<span>标签包裹的文字不会换行，后期用CSS可以对span标签进行美化 <p> <span>北京</span>的区号是<span>010</span> </p> <p> <span>上海</span>的区号.
HTML5概述 - 语义化标签
前端队长Daotin
11-20 6598
一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；•HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 ...
HTML5-语义化标签
hjg的专栏
07-10 1890
HTML5发布新增了多个语义化标签，所谓语义化标签的意思就是使用含有具体意义的词语作为标签。 从网页的布局来说，一般会分成几个区域，如头部、地图、标题等等，在HTML5之前都是使用div、span添加不同的样式来区分。HTML5之后就对这块做了优化，使用了含有具体意义的词语来表示对应的布局模块。 语义化标签包括: 1.header 网页头部 2.nav 网页导航 3.footer 网页底部 4.
html5增加语义化标签,HTML5新增语义化标签
weixin_42138788的博客
05-31 258
在HTML第五次重大修改后，用于取代HTML4和XHTML的第一代标准版本，称为HTML5。HTML5中新增了一些语义化标签，提高可用性和改进用户的友好体验。接下来，就让我们来学习HTML5中新增的标签吧~(╹▽╹)狭义的HTML5指的是HTML语言的第五个版本。广义的HTML5是指，HTML5 + CSS3 + Javascript技术的综合。HTML5新增语义化标签HTML5的优势：提高可用性...
html标签语义化理解,你真的理解HTML5标签语义化吗？
weixin_34417272的博客
05-31 202
作者：陈大鱼头github：KRISACHAN标签分类在一个html文档中，标签大致可以分为以下两个大类：1.：声明文档类型；2.：限定文档区域；内又有以下几类：1. head标签用于定义文档的头部，它是所有头部元素的容器。描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。head内可存放标签有：：为页面上的所有链接规定默认地址或默认目标。：主要用于s...
HTML5新增语义化标签与多媒体标签
weixin_51130406的博客
04-07 75
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
HTML5新增的语义化标签
原地起飞
08-02 3719
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
HTML5新特性之语义化标签
09-27
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中一项关键改进是语义化标签的引入。语义化标签使得HTML代码更具有描述性和可理解性，帮助开发者更好地组织网页内容，同时提升了网页在不同设备和环境下的可...
3.语义化标签.pdf_html5_
10-03
5. 语义化标签与传统非语义化标签的对比： - 传统的非语义化标签如`<div>`和`<span>`仅作为容器，而语义化标签提供了更多的上下文信息。 - 语义化标签更利于机器解析，而非语义化标签可能需要通过CSS类或ID来理解...
Web-前端html+css从入门到精通 124 HTML5新语义化标签（2）.zip
05-23
此外，对于那些依赖屏幕阅读器或其他辅助技术的用户，语义化标签可以提供更好的导航和理解页面内容的体验。 在学习过程中，观看"Web-前端html+css从入门到精通 124 HTML5新语义化标签（2）.mp4"这个视频教程，你将...
HTML5不支持标签和新增标签详解
09-27
在这个过程中，HTML5淘汰了一些不再被推荐使用的标签，同时引入了许多新的标签，以更好地支持网页内容的结构化和语义化。 首先，让我们来看看HTML5不再支持的标签： 1. `<acronym>`：这个标签用于定义只取首字母的...
HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
12-14
1. **概念更新**：HTML5更加注重内容和结构，提倡语义化标签，比如`<header>`、`<nav>`和`<article>`等，使网页内容更加清晰。 2. **声明与标签的简化**：HTML5简化了一些标签的语法，部分标签可以省略结束标签，...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1933
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML-04.新浪新闻-标题-超链接
最新发布
程小白的博客
08-02 90
【代码】HTML-04.新浪新闻-标题-超链接。
【Python】Python 转换 Html 为 Markdown
Young_Pro的博客
08-02 599
在将 HTML 转换为 Markdown 时，表格通常可以保留其基本结构，但可能无法保持所有的格式细节。函数读取 HTML 文件，将其内容转换 为Markdown，然后将 Markdown 内容写入新的文件。如果你需要保持表格的精确格式，可能需要手动调整转换后的 Markdown 或寻找支持更多特性的转换工具。使用这些技巧时，请记住，Markdown 的目的是为了简洁和可读性，而不是复杂的布局。或其他转换工具，结果可能有所不同，因为不同的库可能对HTML到Markdown的转换有不同的实现方式。
HTML-03.新浪新闻-标题-样式2
程小白的博客
08-02 149
【代码】HTML-新浪新闻-标题样式2。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值