web学习笔记(十六)

目录

HTML5新增标记汇总

1.新增语义化标签

2.新增音频和视频标签

2.1音频标签 audio

2.1视频标签 video

3.新增图像标签

4.新增表单元素和表单控件 


HTML5新增标记汇总

1.新增语义化标签

        新增语义化标签能够便于开发者阅读和写出更优雅的代码同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容,更好地搜索引擎优化。

标签描述
header表示页面的头部区域,相当于定义了一个类名为header的div(块级元素)
nav定义页面的导航部分,也是一个盒子(块级元素)
main是HTML中用来定义网页主要内容的标签。它通常是整个网页的核心部分(块级元素)
footer定义 section 或 网页的页脚部分(块级元素)
aside定义页面的侧边栏内容。(块级元素)
section相当于定义了页面中的一块(块级元素)
article定义页面独立的内容区域。
figure规定独立的流内容(图像、图表、照片、代码等等)。
figcaption定义 <figure> 元素的标题
time

定义日期或时间,例如新闻的发布日期。(行内标签)

其实这些语义化标签大都和div的作用一样,没有什么含义,只是一个盒子,只不过在编写页面时我们多了一些选择。

2.新增音频和视频标签

2.1音频标签 audio

    推荐使用MP3格式的音频(主流浏览器都兼容)

  •   src:音频文件路径
  •   controls:控制器,控制音频的播放显示
  •   autoplay:自动播放
  •   loop:循环播放
  •   muted:静音播放
<audio src=""></audio>

2.1视频标签 video

推荐使用mp4格式(主流浏览器都兼容 )

<video src=""  ></video>

3.新增图像标签

用  <canvas></canvas>标签结合js来绘制图形,注意:<canvas></canvas>标签设置宽高的时候尽量不要用css样式,可能会有潜在问题,可以在标签内部通过属性的方式直接进行设置。

<canvas width="500px" height="200px"></canvas>

      下面我们将演示一下如何用 <canvas></canvas>标签结合js在长方形画布上来绘制一个正方形

 <div class="box"><canvas width="500px" height="200px" style="border:1px solid red;" id="mycanvas"></canvas> <!-- 准备画布 --></div><script>var mycanvas = document.querySelector('#mycanvas'); //查找元素console.log(mycanvas);var ctx = mycanvas.getContext("2d"); //getContext("")方法准备画笔ctx.fillStyle = "red"; //给画好的图形填充颜色ctx.fillRect(0, 0, 200, 200); //制作一个边长二百的正方形,括号内写入所画图形左上角和右下角的坐标。</script>

运行效果:

4.新增表单元素和表单控件 

  • 邮箱:input(type="email"),提交数据时提供了邮箱格式的验证。
  • 数字输入框:input(type="number"),
  • 网址输入框:input(type="url"),验证输入内容是否为网址,需要完整网址,以http协议开头
  • 搜索输入框:input(type="search"),提供了输入文本清空的控件
  • 选择颜色:input(type="color") ,在页面上出现一个颜色选择器
  • 文件上传:input(type="file"),默认只能上传一个文件

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32-调用 vTaskStartScheduler API 后出现 HardFault

STM32 移植 FreeRTOS 后调用 vTaskStartScheduler() 后出现 HardFault 异常。 原因分析&#xff1a; FreeRTOS 配置头文件 FreeRTOSConfig.h 中与中断有关的配置和通过系统接口 void NVIC_PriorityGroupConfig(uint32_t NVIC_PriorityGroup) 设置的中断分组冲突。 /* The lo…

leetcode——将x减到0的最小操作数

文章目录 题目解析所用算法算法解析步骤 代码示例 题目解析 题目链接 首先我们先看一下题目如下 我们来解析一下这个题目其实也很简单说的是给你一个整数和一个数组问你每当移除最左边和左右边的某个数字时x也减去该元素的值&#xff0c;问你这里面的最佳方案是什么。&#x…

ChatGPT给出的前端面试考点(html+css+JS)

ChatGPT给出的前端面试考点&#xff08;htmlcssJS&#xff09; HTML HTML是什么&#xff0c;它的主要作用是什么&#xff1f; 什么是DOCTYPE&#xff0c;为什么在HTML文档中使用它&#xff1f; HTML5相对于之前的HTML版本有哪些主要的新特性&#xff1f; 解释语义化HTML的概…

pandas的concat

pandas的concat()函数用于连接&#xff08;合并&#xff09;pandas对象&#xff0c;如Series、DataFrame或Panel&#xff0c;沿指定的轴进行连接。 语法&#xff1a; pandas.concat(objs, axis0, join‘outer’, ignore_indexFalse, keysNone) 参数说明&#xff1a; objs: 要…

安防监控系统EasyCVR平台用户调用设备参数,信息不返回是什么原因?

安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;平台能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台支持设备通过4G、5G、WIFI、有…

【数字人】10、HyperLips | 使用 audio 实现高保真高清晰的唇部驱动

文章目录 一、背景二、相关工作2.1 Audio-Driven Talking Face Generation2.2 HyperNetwork2.3 Prior Based Face Restoration 三、方法3.1 Base Face Generation3.2 High-Fidelity Rendering 四、效果 论文&#xff1a;HyperLips: Hyper Control Lips with High Resolution De…

着色器语言GLSL学习

1 初步尝试 import { Scene, WebGLRenderer, OrthographicCamera, PlaneGeometry, ShaderMateria } from three.jsconst scene new Scene() const camera new OrthographicCamera(-1,1,1,-1,0.1, 10)const renderer new WebGLRenderer() renderer.setSize(window.innerWidt…

springcloud之链路追踪

写在前面 源码 。 本文一起来看下链路追踪的功能&#xff0c;链路追踪是一种找出病因的手段&#xff0c;可以类比医院的检查仪器&#xff0c;服务医生治病救人&#xff0c;而链路追踪技术是辅助开发人员查找线上问题的。 1&#xff1a;为什么微服务需要链路追踪 孔子同志月过…

中仕公考:国考进面后资格复审需要准备什么?

参加国考面试的考生在资格审核阶段需要准备以下材料&#xff1a; 1、本人身份证、学生证或工作证复印件。 2、公共科目笔试准考证复印件。 3、考试报名登记表。 4、本(专)科、研究生各阶段学历、学位证书(应届毕业生没有可以暂时不提供)。 5、报名资料上填写的各类证书材料…

剑指 Offer 40.最小的k个数

剑指 Offer 40.最小的k个数 剑指 Offer 40.最小的k个数 设计一个算法&#xff0c;找出数组中最小的k个数。以任意顺序返回这k个数均可。 示例&#xff1a; 输入&#xff1a; arr [1,3,5,7,2,4,6,8], k 4 输出&#xff1a; [1,2,3,4] 提示&#xff1a; 0 < len(arr) &l…

Spring Boot3 跨域配置 Cors

什么是CORS&#xff1f; CORS&#xff0c;全称是“跨源资源共享”&#xff08;Cross-Origin Resource Sharing&#xff09;&#xff0c;是一种Web应用程序的安全机制&#xff0c;用于控制不同源的资源之间的交互。 在Web应用程序中&#xff0c;CORS定义了一种机制&#xff0c…

前端:布局(用于div中有多行元素,一行只显示四个,最左或最右要紧贴父div,最顶层和最底层也要紧贴父div)

效果 一、flex实现 html <!DOCTYPE html> <html><head><title>Flexbox Layout</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;border: 1px solid red;}.box {flex: 1 0 calc(25% …

2023年中国传感器行业研究报告(附传感器产业链全景图谱)

​传感器是一种通常由敏感元件和转换元件组成的检测装置&#xff0c;测量并感知信息后&#xff0c;通过变换让传感器中的数据或价值信息转换成电信号或其他所需形式的输出&#xff0c;以满足信息的传输、处理、存储、显示、记录和控制等要求。传感器是数字经济时代关键的硬件入…

4.Swing常用组件

Swing常用组件 4. Swing常用组件4.1 面板组件4.1.1 JPanel4.1.1.1 构造方法4.1.1.2 常用方法 4.1.2 JScrollPane4.1.2.1 构造方法4.1.2.2 常用方法 4.2 文本组件4.2.1 JTextField4.2.1.1 构造方法4.2.1.2 常见方法 4.2.2 JTextArea4.2.2.1 构造方法4.2.2.2 常见方法 4.3 标签组…

Educational Codeforces Round 161 (Rated for Div. 2) B 2的零次方竟然是1

目录 心情&#xff1a; 55.999999999999993&#xff1a; 题意&#xff1a; 思路&#xff1a; 核心代码&#xff1a; 心情&#xff1a; Div.2&#xff0c;我竟然在50分钟内C题做掉了&#xff0c;想着B题做了基本上不会掉分了这把&#xff0c;B题要考什么我也清楚&#xff0…

【Kafka】Kafka介绍、架构和概念

目录 Kafka介绍Kafka优势Kafka应用场景Kafka基本架构和概念ProducerConsumer/Consumer GroupBrokerZooKeeperTopicPartitionReplicasOffsetsegment Kafka介绍 Kafka是是一个优秀的分布式消息中间件&#xff0c;关于常用的消息中间件对比可参考文章&#xff1a;消息中间件概述。…

【Docker】Nacos的单机部署及集群部署

一、Nacos的介绍 Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 动态服务发现&#xff1a;Nacos支持DNS与RPC服务发现&#xff0c;提供原生SDK、OpenAPI等多种服务注册方式和DNS、HTTP与API等多种服务发现方式。服务健康监测&#xff1a;Nacos提供…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析&#xff0c;这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考&#xff1a;财经新闻数据 数据来源 新浪财经的新闻网&#xff0c;说实话&#xff0c;他这个网站做成这样就是用来爬虫的…

鸿蒙开发(五)鸿蒙UI开发概览

从用户角度来讲&#xff0c;一个软件拥有好看的UI&#xff0c;那是锦上添花的事情。再精确的算法&#xff0c;再厉害的策略&#xff0c;最终都得通过UI展现给用户并且跟用户交互。那么&#xff0c;本篇一起学习下鸿蒙开发UI基础知识&#xff0c;认识下各种基本控件以及使用方式…

Zoho Survey评价:功能全面,值得一试

通常来讲&#xff0c;我们在使用一款问卷调查制作工具制作问卷时会有哪些需求呢&#xff1f; 用户需求 1、操作简单&#xff0c;易上手。 2、能够满足用户个性化的需求。 3、提供多语言服务。 4、能够帮助发布以及数据收集。 5、简化数据分析 市面上的问卷调查制作工具都…