免费html5代码,HTML5(示例代码)

2023-11-14

一、什么是HTML5

1.1 HTML5 简介

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素、属性和行为

XHTML可扩展超文本标记语言

是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求,基础班学习的是XHTML

HTML5

有更大的技术集,允许更多样化和强大的网站和应用程序

增加了新特性:语义特性,本地存储特性,设备兼容特性,链接特性,网页多媒体特性,三维、图形以及特效特性,性能与集成特性,css特性

1.2 广义的HTML5

广义的HTML5是HTML5本身+CSS+JavaScript

HTML5的一些特性仍让不被某些浏览器支持,但是他是一种发展趋势

二、HTML5新增语义化标签

:头部标签

:导航标签

:内容标签

:块级标签

:侧边栏标签

:尾部标签

80967d6b8d6a41c7b14cddd50ec343b9.jpg

注意:以前经常使用的div标签是没有语义的,

这种语义化标准主要针对搜索引擎的

这些新标签也可以使用多次的

在IE9中,需要把这些元素转换为块级元素

其实我们移动端更喜欢使用这些标签

三、HTML5新增多媒体标签

音频:

视频:

3.1音频标签

1.音频格式

5d9017df1a5f4597ac3fda575052587c.jpg

2.使用方法

您的浏览器不支持audio播放

3.常见属性

5dda88085f974dd8b183cef319b3b5ae.jpg

谷歌浏览器禁用了autoplay属性

3.2 视频标签

1.视频格式

609494b46fbd498fbb065eeceadb83e4.jpg

2.语法格式

3. 参数属性

6a871ce64b554abf8af04c93f68032e6.jpg

4. 使用方法

多媒体标签总结

- 音频标签与视频标签使用基本一致

- 多媒体标签在不同浏览器下情况不同,存在兼容性问题

- 谷歌浏览器把音频和视频标签的自动播放都禁止了

- 谷歌浏览器中视频添加 muted 标签可以自己播放

- 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册

四、HTML5新增input表单、表单属性

51dad695710c4d3eb93614e23e8b2bfc.jpg

这些HTML5 的表单大量应用于移动端,PC段不是很常用

新增属性

17f9ef6e36d5447cb457bf1fc4c0e007.jpg

placeholder和value属性的区别在于:placeholder的字体是灰色的,而且点击输入框可以直接定位到开始,而value属性字体是黑色的,点击框框里面的内容要手动清除

用户名:

5855c109588941aaba436fac9bba5e15.jpg

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

免费html5代码,HTML5(示例代码) 的相关文章

  • C++ 堆内存分配 new delete 简谈

    堆内存 堆区 heap 是内存空间 是区别于栈区 全局数据区和代码区的内存区域 是程序在运行时申请的内存空间 new和delete new和delete是C 专有的操作符 不需要声明头文件 new是用来申请分配堆内存的 delete是用来释
  • 剖析muduo网络库核心代码,重写muduo库

    项目简介 模拟muduo库实现nonnon blocking IO multiplexing loop线程模型的高并发 TCP 服务器模型 开发环境 Centos7 技术栈 C 多线程 socket网络编程 epoll多路转接 项目设计 整
  • 某机字长为32位,存储容量为64MB,若按字节编址.它的寻址范围是多少?

    问题 1 某计算机字长为32位 其存储容量为16MB 若按双字编址 它的寻址范围是多少 2 某机字长为32位 存储容量为64MB 若按字节编址 它的寻址范围是多少 解答 我的方法是全部换算成1位2进制的基本单元来算 先计算总容量 如第一题中
  • telnet端口不通怎么解决(单边不通的方法建议)

    telnet端口不通是大家在检测端口的时候可能会遇到的问题之一 遇到这种状况一般要如何解决呢 这里为各位带来分享 看一下telnet端口不通的解决方式 看一下如何处理吧 telnet端口不通怎么解决 1 开放供应商服务器端口 总是出现由于连
  • The engine “node“ is incompatible with this module. Expected version

    前言 vue项目用了yarn yarn install后报错如下 开始 执行 yarn config set ignore engines true 然后yarn install后成功 结束 在此记录问题 如有需要修改的地方 还请不吝赐教
  • Kubernetes—K8S运维管理

    Kubernetes K8S运维管理 更新中 一 Node管理 1 1 Node的隔离与恢复 1 2 Node 的扩容 二 更新资源对象的Label 三 Namespace 集群环境共享与隔离 3 1 创建Namespace 3 2 定义C
  • [病虫害识别|博士论文]面向农作物叶片病害鲁棒性识别的深度卷积神经网络研究

    文章目录 创新点 文章中的方法 国内外现状 手工设计特征 基于深度特征学习的农作物病害识别研究 基于高阶残差的卷积神经网络的农作物病害识别 结构图 对比方法 基于高阶残差和参数共享反馈的卷积神经网络农作物病害识别方法 结构图 对比方法 基于
  • CSS选择除第一个和最后两个以外的所有子元素 + 结构伪类选择器深度解析

    最近在练习网易严选首页的布局时 发现它的顶部导航栏需求很特殊 第一项和最后两项是没有下拉选择框的 那么问题来了 在写css的时候该怎么使用选择器去达到这样的需求呢 首先先贴一下我最后的解决方案 nav first gt li nth chi
  • 数据库技术之mysql50题

    目录 数据表介绍 数据SQL 练习题 数据表介绍 1 学 表 Student SId Sname Sage Ssex SId 学 编号 Sname 学 姓名 Sage 出 年 Ssex 学 性别 2 课程表 Course CId Cname
  • 18-Go语言之单元测试

    go test工具 Go语言中的测试依赖go test命令 编写测试代码和编写普通的Go代码过程是类似的 并不需要学习新的语法或工具 go test命令是一个按照一定约定和组织的测试代码的驱动程序 在包目录内 所有以 test go为后缀的
  • 就业DAY7_web服务器_http协议

    import socket def servece client new socket 为这个客户端返回数据 1 接收浏览器发送过来的请求 即http请求 GET HTTP 1 1 request new socket recv 1024
  • 【Unity3D】如何快速做出点击按钮切换场景

    1 首先建立第一个场景 在Canvas创建一个Button 快捷键为Ctrl N 再按Ctrl S保存该场景到文件 如图所示 图中的 开始 为按钮 2 创建第二个场景 作为点击按钮后切换的场景 点击左上角 File Build Settin
  • 精心挑选了三种热门的Python技术书籍送给大家!!

    本周三狗哥给大家挑选了三种热门的Python书籍 送给大家 每种书送两本 共6本 文末查看送书规则 Python大数据分析 公众号回复 送书 Python最优化算法实战 扫码回复 送书 Python数据分析 扫码回复 送书 公众号回复 送书
  • js 把带有对象的数组里的某个属性组成新的数组

    如果想将数组对象中的某个属性组成一个新的数组 可以使用Array map 方法 这个方法会遍历原始数组的每个元素 并返回一个新的数组 其中包含指定属性的值 以下是一个示例 假设有一个包含对象的数组 每个对象都有一个name属性 你想要将所有
  • html5新特性

    目录 使用语义化标签的目的 1 html5新增的语义化标签 2 html新增的多媒体标签 1 视频 video 2 音频 audio 属性 object fit 3 html5新增的input表单元素属性 1 新增的input标签type属
  • 准备加入第二个项目(第5960小时加入)

    今天 老师过来办事 看了我做的东西后 邀请我加入他的项目 让我受宠若惊 2012年10月 我加入老师的项目后 2天内落荒而逃 因为一句代码都没有写出来 再然后 老师以我没有项目经验为由 拒绝了我后来想加入项目的要求 2年后 老师邀请我去做项
  • 安装Anaconda科学计算包

    Anaconda介绍 最近在看 Python语言及其应用 这本书 作为一本介绍Python语言和应用的书非常不错 在这本书的最后 介绍了一些Python常用的第三方类库 像科学计算库 金融计算库 图形图像库等等 其中也介绍了Anaconda
  • 移动端H5页面生成图片解决方案

    现在有很多微信公众号运营活动 都有生成图片的需求 生成图片后可以发送给好友和发到朋友圈扩散 利于产品的宣传 1 生成图片可以用canvas 但是由于已经有了html2canvas这个开源库 所以为了节省时间就没有自己写了 github地址
  • 为什么文件删除了但磁盘空间没有释放?

    1 案例现象 这天 监控系统发来一条告警消息 内容说某台服务器根目录磁盘占用空间达到阈值 超过百分之八十了 登上服务器 df Th 看一下 发现磁盘空间确实不够用了 root localhost df Th 文件系统 类型 容量 已用 可用

随机推荐

  • java怎么从一个类传值到另一个类,关于JAVA的引用类型传值.

    方法参数传递都按值传递 对于基本类型 传递原始值 对于对象类型 传递其指向的对象的地址值 多个同类型不同的变量可以指向同一个对象 但是其中任何一个变量被重新赋值 也就是指向一个新的对象时 不影响其它变量的指向 方法定义的形参 在调用的发生的
  • Socket编程之聊天程序 - 模拟Fins/ModBus协议通信过程

    设备控制软件编程涉及到的基本通信方式主要有TCP IP与串口 用到的数据通信协议有Fins与ModBus 更高级别的通信如 net中的Remoting与WCF在进行C S架构软件开发时会采用 本篇文章结合Fins ModBus协议的指令帧结
  • 关于前端获取后端传输的参数并在js中应用该参数

    在进行dynamicTree名称获取时 如果是涉及到不同数据库需要使用不同的dynamicTree的xml文件且该名称在前端写死状态 可以采用setAttribute方法将值赋给前端 前端用 接收该值 并在js处使用document get
  • TCP UDP协议的应用以及高级IO的介绍

    TCP UDP协议的应用以及高级IO的介绍 网络通信协议 模型 TCP和UDP两个协议都是一对多的网络通信模型 TCP编程模型 UDP编程模型 实例 TCP模型 聊天室的服务器 有私密消息功能以及列出聊天者的功能 include
  • RCE远程命令执行漏洞挖掘思路

    RCE漏洞可能出现在哪些地方 1 URL上 在url参数上 不仅仅可能存在ssrf漏洞 也有很大概率存在命令执行 很大可能调用系统命令如curl payload例子 index php id 2 phpinfo ttp www xxx co
  • ue4编辑模型时,让模型底部刚好在地面上的方法

    选中模型按住End键
  • Matlab 公式大全

    1 MATLAB公式 例如 在命令窗口中输入sin pi 5 然后单击回车键 则会得到该表达式的值 sin pi 5 ans 0 5878 例如 sin 1 9 pi sin 2 9 pi sin 3 9 pi sin 4 9 pi sin
  • linux软件共用的依赖关系,利用 yum 解决 Linux 软件包的依赖关系

    在Linux系统软件安装包依赖关系是一个很烦恼的问题 yum能够从指定的服务器自动下载RPM包并且安装 可以自动处理依赖性关系 并且一次安装所有依赖的软体包 无须繁琐地一次次下载 安装 可以利用ftp和Createrepo共同搭建本地软件库
  • C语言结构体中定义函数指针详解

    C语言结构体中定义函数指针详解 结构体指针函数应用场景之一 驱动程序编写 结构体的一些基本用法 形式 先定义结构体类型 再定义变量 形式 在定义类型的同时定义变量 形式 直接定义变量 用无名结构体直接定义变量只能一次 结构体指针在嵌入式Li
  • canvas绘制线条、矩形、曲线及填充

    1 绘制线条和填充 1 绘制线段的API是上下文对象的方法 2 beginPath 开始定义一条新的路径 3 moveTo 开始定义一条新的子路径 该方法确定了线段的起点 4 lineTo 将上面定义的线段起点和指定的新的点连接起来 5 到
  • Vue+element ui -- 自定义表单验证:金额

    在实际项目中 表单验证可以说非常普遍 尤其是财务系统项目和商城项目 涉及到金额的输入框更是很多 那么验证用户输入信息的争取与否 就变得至关重要 不单要做到准确还要照顾用户的输入习惯以及舒适度 这边笔记记录了原来我在项目中进行 金额 方面的自
  • xp系统电脑服务器端口,XP的电脑用CMD指令怎么开3389端口

    输入命令 REG ADD HKLM SYSTEM CurrentControlSet Control Terminal Server v fDenyTSConnections t REG DWORD d 00000000 f 如果用CMD命
  • MATLAB与深度学习(一)— Deep Learning Toolbox

    MATLAB与深度学习 一 Deep Learning Toolbox 最近 我在学习基于matlab的深度学习的内容 并整理出如下学习笔记 本文借鉴和引用了网上许多前辈的经验和代码 如有冒犯 请及时与我联系 1 MATLAB与深度学习的简
  • 使用ImageMagick为你的网站减重(转)

    片在网站所占的比重越来越重 更好的优化图片可以提高网站速度 减少宽带流量 1 对用户上传图片进行缩放 对于用户自己上传的图片不能简单的 用css限制大小 因为这样每次加载图片时候还是会加载整幅大图 占用多余的宽带 并且影响页面加载速度 应该
  • 安装程序无法自动安装Virtual Machine Communication Interface Sockets(VSock)驱动程序

    关于 VMware Tools安装时出现的问题的解决办法 安装时出现问题对话框 安装程序无法自动安装Virtual Machine Communication Interface Sockets VSock 驱动程序 必须手动安装此驱动程序
  • 动态场景下基于实例分割的SLAM(毕业设计开题及语义分割部分)

    动态场景下基于实例分割的SLAM 毕业论文设计思路及流水 前言 今年选了个比较难的毕设题目 这里记录一下自己思路和流程 为之后的学弟学妹 划掉 铺个方向 会按日期不定期的更新 一 开题 2019 12 24 考研前选择课题是 利用深度学习对
  • Linux ixgbe网卡(光模块)兼容性问题(没有网卡配置文件)

    Linux ixgbe网卡 光模块 兼容性问题 ixgbe光纤网卡的驱动在默认情况下不支持第三方兼容光模块 会导致网卡驱动加载失败 表现为 执行lspci grep 82599能看到网卡在pci设备中 06 00 0 Ethernet co
  • 剑指 Offer 15. 二进制中1的个数

    public class Solution you need to treat n as an unsigned value public int hammingWeight int n int div 1 int num 0 for in
  • 李宏毅 机器学习 2016 秋:3、Gradient Descent

    文章目录 三 Gradient Descent 3 1 Tuning your learning rates 3 2 Stochastic Gradient Descent 3 3 Feature Scaling 3 4 理论支持 三 Gr
  • 免费html5代码,HTML5(示例代码)

    一 什么是HTML5 1 1 HTML5 简介 万维网的核心语言 标准通用标记语言下的一个应用超文本标记语言 HTML 的第五次重大修改 作为新HTML语言 具有新的元素 属性和行为 XHTML可扩展超文本标记语言 是一种增强了的HTML