【07】进阶html5

HTML5 包含两个部分的更新,分别是文档web api

文档

HTML5 元素表

元素语义化

元素语义化是指每个 HTML 元素都代表着某种含义,在开发中应该根据元素含义选择元素

元素语义化的好处:

  1. 利于 SEO(搜索引擎优化)
  2. 利于无障碍访问
  3. 利于浏览器的插件分析网页

新增元素

多媒体

可以使用audio元素表达一个音频

可以使用video元素表达一个视频

它们均具有以下属性

属性名 含义 类型
src 多媒体的文件路径 普通属性
controls 是否显示播放控件 布尔属性
autoplay 是否自动播放 布尔属性
loop 是否循环播放 布尔属性
muted 静音播放 布尔属性

新版浏览器不允许「带声音的自动播放」,可能将来甚至不允许自动播放

浏览器希望播放行为由用户决定

文章结构

为了让搜索引擎和浏览器更好的理解文档内容,HTML5 新增了多个元素来表达内容的含义。

下面的示例中,使用了 HTML5 的新增元素来表达一篇文章

<!-- article:一篇文章 -->
<article>
  <!-- header:文章头部信息 -->
  <header>
    <h1>文章标题</h1>
    <!-- blockquote:引用信息 -->
    <blockquote>此文章引用的文献:xxxx</blockquote>
  </header>
  <!-- aside: 文章的其他附加信息 -->
  <aside>
    <span>作者:xxxx</span>
    <span>发布日期:xxx</span>
    <span>浏览量:xxx</span>
  </aside>
  <!-- section:章节 -->
  <section>
    <h2>章节1</h2>
    <p>段落1</p>
    <p>段落2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/475667.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring6--基础概念

1. 概述 1.1. Spring是什么 Spring 是一套广泛应用于 Java 企业级应用开发领域的轻量级开源框架&#xff0c;由 Rod Johnson 创立&#xff0c;旨在显著降低 Java 企业应用的复杂性&#xff0c;缩短开发周期&#xff0c;并提升开发效率。Spring 不仅适用于服务器端开发&#x…

Lenze伦茨8400变频器E84A L-force Drives 操作使用说明

Lenze伦茨8400变频器E84A L-force Drives 操作使用说明

html5cssjs代码 035 课程表

html5&css&js代码 035 课程表 一、代码二、解释基本结构示例代码常用属性样式和装饰响应式表格辅助技术 一个具有亮蓝色背景的网页&#xff0c;其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头&#xff0c;并对单元格设…

关于alias、root的用法

关于alias、root的用法 root 语法&#xff1a;root path 默认值&#xff1a; root html 配置段&#xff1a; http,server,location,if 例子&#xff1a; 静态文件地址&#xff1a;/home/static/html/js/demo.html 用例1&#xff1a; 以请求http://example.com/js/demo.html为…

指路明灯,99%自动化测试从业者都该看的职业规划!

这篇文章将从以下三个方面来给大家介绍自动化测试&#xff0c;其中包含自动化测试从业者需要了解的知识和一些常见的思想误区&#xff0c;以及自动化测试行业的前景以及如何进阶 1.自动化测试的介绍&#xff1a; 自动化测试什么是&#xff0c;有哪些被称作自动化测试&#xf…

2024-03-20 作业

作业要求&#xff1a; 1> 创建一个工人信息库&#xff0c;包含工号&#xff08;主键&#xff09;、姓名、年龄、薪资。 2> 添加三条工人信息&#xff08;可以完整信息&#xff0c;也可以非完整信息&#xff09; 3> 修改某一个工人的薪资&#xff08;确定的一个&#x…

C++利用开散列哈希表封装unordered_set,unordered_map

C利用开散列哈希表封装unordered_set,unordered_map 一.前言1.开散列的哈希表完整代码 二.模板参数1.HashNode的改造2.封装unordered_set和unordered_map的第一步1.unordered_set2.unordered_map 3.HashTable 三.string的哈希函数的模板特化四.迭代器类1.operator运算符重载1.动…

算法系列--递归

一.如何理解递归 递归对于初学者来说是一个非常抽象的概念,笔者在第一次学习时也是迷迷糊糊的(二叉树遍历),递归的代码看起来非常的简洁,优美,但是如何想出来递归的思路或者为什么能用递归这是初学者很难分析出来的 笔者在学习的过程中通过刷题,也总结出自己的一些经验,总结来…

Beamer模板——基于LaTeX制作学术PPT

Beamer模板——基于LaTeX制作学术PPT 介绍Beamer的基本使用安装和编译用于学术汇报的模板项目代码模板效果图 Beamer的高级特性动态效果分栏布局定理环境 介绍 在学术领域&#xff0c;演示文稿是展示和讨论研究成果的重要方式。传统的PowerPoint虽然方便&#xff0c;但在处理复…

基于python+vue家政服务系统flask-django-php-nodejs

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低家政公司的运营人员成本&#xff0c;实现了家政服务的标准化、制度化、程序化的管理&#xff0c;有效地防止了家政服务的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、准确地…

MAC本安装telnet

Linux运维工具-ywtool 目录 1.打开终端1.先安装brew命令2.写入环境变量4.安装telnet 1.打开终端 访达 - 应用程序(左侧) - 实用工具(右侧) - 终端 #注意:登入终端用普通用户,不要用MAC的root用户1.先安装brew命令 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/H…

什么是高防CDN?

高防CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;在网络安全中的作用非常重要。它通过一种特别的方式来保护网站和网络应用程序免受大规模DDoS攻击。以下是它的一些主要优势&#xff1a; 01 分布式防护 高防CDN通过在全球各地设立大量的节点…

智能电表多少钱一个?

嗨&#xff0c;朋友们&#xff0c;你是否好奇过家里那个默默工作的智能电表到底值多少钱呢?今天我们就来聊聊这个话题&#xff0c;一起走进智能电表的世界&#xff0c;看看它们是如何从传统的机械表进化为现代的智能设备&#xff0c;并了解它们的价格区间。 首先&#xff0c;…

基于Java+SpringBoot+vue+element实现毕业就业招聘系统

基于JavaSpringBootvueelement实现毕业就业招聘系统 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…

宏宇、萨米特、新明珠、金意陶、简一、科达、力泰、道氏、SITI BT、POPPI……35家参展商发布亮点

3月18日&#xff0c;2024佛山潭洲陶瓷展&#xff08;4月18-22日&#xff09;亮点发布会在广东新媒体产业园成功举办&#xff0c;主题为“我们不一样”。 陶城报社社长、佛山潭洲陶瓷展总经理李新良代表主办方&#xff0c;发布了2024佛山潭洲陶瓷展的“不一样”&#xff1b;佛山…

位运算第三弹

力扣268.丢失的数字 public static int missingNumber(int[] nums) {int nnums.length;int []retnew int[n1];for(int i1;i<n;i){ret[nums[i-1]];}for(int i0;i<n;i){if(ret[i]0){return i;}}return 0;} 和上一道题&#xff0c;一个性质&#xff0c;用的是底层哈希表的思…

C语言例:表达式10<<3+1的值

10的二进制 00001010 10<<3 01010000 十制左移m位&#xff0c;乘以。 0101 0000 十进制80 10<<31 81

【极简无废话】open3d可视化torch、numpy点云

建议直接看文档&#xff0c;很多都代码老了&#xff0c;注意把代码版本调整到你使用的open3d的版本&#xff1a; https://www.open3d.org/docs/release/tutorial/visualization/visualization.html 请注意open3d应该已经不支持centos了&#xff01; 从其他格式转换成open3d…

go和rust使用protobuf通信

先下载protoc 首先下载proc程序以生成代码 https://github.com/protocolbuffers/protobuf/releases 解压&#xff0c;然后把bin目录的位置放到环境变量 测试 rust作为server&#xff0c;rpc使用tonic框架 官方教程 go作为service&#xff0c;使用grpc go语言使用grpc 效…

倪诗韵古琴雷期展示,琴体秀气

音色通透、细腻&#xff0c;灵敏度高&#xff0c;好不好自己听吧&#xff0c;绝对是入门演奏利器。想不想听试音&#xff1f;试音已经发出来了&#xff0c;但是这床琴已经订出去了&#xff0c;不过琴友可以听听雷期的音色&#xff0c;那就关注我吧