当前位置: 首页 > news >正文

【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)

【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)

一、什么是HTML语义化标签

语义化的标签,旨在让标签有自己的含义
在这里插入图片描述
如上代码:p标签与span标签的区别之一就是,p标签的含义是段落而span标签没有独特的含义。

二、语义化标签的优势

  • 代码结构清晰,方便阅读,有利于团队合作开发。
  • 方便其他设备解析以语义的方式来渲染网页。
  • 有利于搜索引擎优化(SEO)。

三、无语义的布局标签

  • div:块级元素,没有任何意义的一个容器、盒子
  • span:行内元素,无语义化。

四、实体字符

当HTML页面不能识别一些特殊的字符时,可以使用实体字符来替代。

空格  
<  &lt;
> &gt;
版权 &copy;

五、HTML5新增布局标签

在HTML5出现之前,我们一般采用div+css布局页面。但这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取。为此,HTML5新增了很多语义化标签。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、视频和音频

🎈视频
Video标签定义视频,比如看电影片段或其它视频流。

    <video src="/images/v.mp4" controls="controls" autoplay>       
您的浏览器不支持 video 标签。</video>

视频常用的属性如下:
在这里插入图片描述

在这里插入图片描述
🎈🎈音频
audio标签定义音频,比如音乐或者其他的音频流。支持格式:MP3、ogg、wav

在这里插入图片描述
音频常用属性:

  • src:必须属性,路径
  • autoplay:自动播放
  • loop:循环播放
  • controls 显示控制面板
  • muted 静音

🎈🎈🎈source
<source>标签为媒介元素,<source>标签允许您规定的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
在这里插入图片描述
在这里插入图片描述

相关文章:

【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)

【零基础入门前端系列】—语义化标签、实体字符、视频、音频&#xff08;八&#xff09; 一、什么是HTML语义化标签 语义化的标签&#xff0c;旨在让标签有自己的含义 如上代码&#xff1a;p标签与span标签的区别之一就是&#xff0c;p标签的含义是段落而span标签没有独特的…...

超详细讲解线性表和顺序表!!

超详细讲解线性表和顺序表&#xff01;&#xff01;线性表顺序表顺序表的概念及结构静态顺序表动态顺序表顺序表接口实现1、创建2、初始化3、扩容4、尾插5、打印6、销毁7、尾删8、头插9、头删10、插入任意位置11、删除任意位置12、查找13、修改线性表 线性表&#xff08;linea…...

大数据之-Nifi-Nifi的安装_启动_认识Nifi的操作台---大数据之Nifi工作笔记0002

然后我们看一下如何安装nifi 这个上一节已经说了 然后看一下环境准备,这个自己去安装就可以了,需要jdk,1.8就可以了,然后 maven安装上就可以了 然后去下载,这里下载Linux版本的 1.9.2的版本比较稳定 下载以后,避免端口冲突要修改端口默认是8080,修改为58080 然后启动很简单,看…...

【大数据clickhouse】clickhouse 常用查询优化策略详解

一、前言 在上一篇我们分享了clickhouse的常用的语法规则优化策略&#xff0c;这些优化规则更多属于引擎自带的优化策略&#xff0c;开发过程中只需尽量遵守即可&#xff0c;然而&#xff0c;在开发过程中&#xff0c;使用clickhouse更多将面临各种查询sql的编写甚至复杂sql的…...

【Java项目】基于Java+MySQL+Tomcat+maven+Servlet的个人博客系统的完整分析

✨哈喽&#xff0c;进来的小伙伴们&#xff0c;你们好耶&#xff01;✨ &#x1f6f0;️&#x1f6f0;️系列专栏:【Java项目】 ✈️✈️本篇内容:个人博客系统前后端分离实现&#xff01; &#x1f680;&#x1f680;个人代码托管github&#xff1a;博客系统源码地址&#xff…...

java 程序员怎么做找工作

java 程序员怎么做找工作 在网络招聘网站上搜索职位。在中国&#xff0c;像智联招聘、前程无忧、猎聘网等招聘网站上&#xff0c;有许多公司在招聘JAVA程序员。通过这些网站可以快速找到自己合适的工作。 关注社交媒体和专业网站。 加入一些面向JAVA程序员的社交媒体和专业网…...

S7-1200对于不同项目下的PLC之间进行开放式以太网通信的具体方法示例

S7-1200对于不同项目下的PLC之间进行开放式以太网通信的具体方法示例 如下图所示,打开TIA博途创建一个新项目,并通过“添加新设备”组态 S7-1200 客户端 ,选择 CPU1214C DC/DC/DC (client IP:192.168.0.102),建立新子网; 首先编写客户端程序:打开OB1编程界面,选择指令…...

操作系统(四):磁盘调度算法,先来先服务,最短寻道时间优先,电梯算法

文章目录一、磁盘结构二、先来先服务三、最短寻道时间优先四、电梯算法 SCAN一、磁盘结构 盘面&#xff08;Platter&#xff09;&#xff1a;一个磁盘有多个盘面&#xff1b; 磁道&#xff08;Track&#xff09;&#xff1a;盘面上的圆形带状区域&#xff0c;一个盘面可以有多…...

maven解决包冲突简单方式(插件maven helper | maven指令)

文章目录使用idea插件maven helper使用maven指令在Java开发中&#xff0c;常常会遇到不同jar包之间存在冲突的情况&#xff0c;这可能会导致编译错误、运行时异常等问题。 使用idea插件maven helper 在idea安装插件maven helper 安装重启完之后点击pom文件&#xff0c;有一个De…...

100行Pytorch代码实现三维重建技术神经辐射场 (NeRF)

提起三维重建技术&#xff0c;NeRF是一个绝对绕不过去的名字。这项逆天的技术&#xff0c;一经提出就被众多研究者所重视&#xff0c;对该技术进行深入研究并提出改进已经成为一个热点。不到两年的时间&#xff0c;NeRF及其变种已经成为重建领域的主流。本文通过100行的Pytorch…...

linux操作系统篇

目录 操作系统概述基本特征并发共享虚拟异步进程管理内存管理文件管理设备管理宏内核和微内核宏内核微内核中断分类外中断异常陷入(系统调用)进程管理进程与线程的区别进程状态切换进程调度算法**批处理系统****交互式系统**进程同步临界...

redis+token实现登录校验,前后端分离,及解跨域问题的4种方法

目录 一、使用自定义filter实现跨域 1、客户端向服务端发送请求 2、服务端做登录验证了&#xff0c;并生成登路用户对应的token&#xff0c;保存到redis 3、响应&#xff08;报错&#xff09;-----跨域问题 4、解决跨域问题--------服务器端添加过滤器&#xff0c;设置请求…...

怎么解密MD5,常见的MD5解密方法,一看就会

MD5是一种被广泛使用的密码散列函数&#xff0c;曾在计算机安全领域使用很广泛&#xff0c;但是也因为它容易发生碰撞&#xff0c;而被人们认为不安全。那么&#xff0c;MD5应用场景有哪些&#xff0c;我们怎么解密MD5&#xff0c;本文将带大家了解MD5的相关知识&#xff0c;以…...

Vue3 目录结构

Vue3 目录结构 架构搭建 请确保你的电脑上成功安装 Node.js&#xff0c;本项目使用 Vite 构建工具&#xff0c;需要 Node.js 版本 > 12.0.0。 查看 Node.js 版本&#xff1a; node -v建议将 Node.js 升级到最新的稳定版本&#xff1a; 使用 nvm 安装最新稳定版 Node.js…...

Tsp_nurrec表空间满处理记录20230215

Tsp_nurrec表空间满处理记录20230215 一、问题: 问题:护理病历表空间不足。 二、解决过程:1.查询表空间使用效率 SELECT UPPER(F.TABLESPACE_NAME) “表空间名”, D.TOT_GROOTTE_MB "表空间大小(M)",D.TOT_GROOTTE_MB - F.TOTAL_BYTES "已使用空间(M)"…...

影像测量设备都有什么?有哪些影像仪器?

影像测量仪器是广泛应用于机械、电子、仪表的仪器。主要由机械主体、标尺系统、影像探测系统、驱动控制系统和测量软件等与高精密工作台结构组成的光电测量仪器。一般分为三大类&#xff1a;手动影像仪、自动影像仪和闪测影像仪。测量元素主要有&#xff1a;长度、宽度、高度、…...

Transformer:开启CV研究新时代

来源&#xff1a;投稿 作者&#xff1a;魔峥 编辑&#xff1a;学姐 起源回顾 有关Attention的论文早在上世纪九十年代就提出了。 在2012年后的深度学习时代&#xff0c;Attention再次被翻了出来&#xff0c;被用在自然语言处理任务&#xff0c;提高RNN模型的训练速度。但是由…...

Flink X Hologres构建企业级Streaming Warehouse

摘要&#xff1a;本文整理自阿里云资深技术专家&#xff0c;阿里云Hologres负责人姜伟华&#xff0c;在FFA实时湖仓专场的分享。点击查看>>本篇内容主要分为四个部分&#xff1a; 一、实时数仓分层的技术需求 二、阿里云一站式实时数仓Hologres介绍 三、Flink x Hologres…...

关于 mysql数据库插入中文变空白 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/129048030 红胖子网络科技的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…...

不可错过的SQL优化干货分享-sql优化、索引使用

本文是向大家介绍在sql调优的几个操作步骤&#xff0c;它能够在日常遇到慢sql时有分析优化思路&#xff0c;能够让开发者更好的了解sql执行的顺序和原理。一、前言在日常开发中&#xff0c;我们经常遇到一些数据库相关的问题&#xff0c;比方说&#xff1a;SQL已经走了索引了&a…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...