html5 初步了解

1、html5 含义

简而言之,html5 其实就是新的一代html标准!

2、html5的优缺点

优点

  1. 语义化html 增加了很多语义化的标签,让html结构更加清晰,更具可读性
  2. 由于增加了很多语义化的标签,对SEO更加友好

缺点

        其他主流浏览器(Chrome,Firefox,Safari,Opera)都已支持,IE是从9开始支持的,也只是部分支持

3、html5 常用的一些语义化标签

布局相关的标签

标签名字解释
header定义文档或节的页眉
main一般用于放
aside定义内容之外的内容(比如侧栏)
nav定义导航链接的容器
aside定义文档或节的页脚
article定义独立的自包含文章,类似于div的用法,但是更具语义化
section定义文档中的节,一般是分块用

多媒体、绘图相关标签

video用于播放视频
audio播放音频
canvas绘图用

input相关的标签

datalist

定义input 输入框的联想
details定义额外的细节
summary定义 details 元素的标题

datalist 使用例子

 <input type="text" list="optionData"> <datalist id="optionData">
        <option value="赵云">赵云</option>
        <option value="关羽">关羽</option>
        <option value="刘备">刘备</option>
        <option value="张飞">张飞</option>
    </datalist>

datalist 效果

details 及 summary

<details>
   <summary>如何赢取白富美,走上人生巅峰?</summary>
   <p>美死你~略略略</p>
</details>

 

进度条-progress

<progress max="100" value="50">进度条</progress>

input新增输入类型

color

颜色选择器

date

日期选择器

datetime

日期时间选择器

datetime-local

本地日期时间本选择器

email

会校验是否符合右键规则的输入框

month

月份选择器

number

数字类型的输入框

range

选择范围的

search

 用于搜索字段(搜索字段的表现类似常规文本字段)。

tel

 用于应该包含电话号码的输入字段

time

时间选择器

url

用于应该包含电话号码的输入字段

week

周选择器

以上是部分常用的内容,详细的用法及更多关于html5 相关知识可以访问 这里

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

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

相关文章

【Java笔试强训】Day10(CM62 井字棋、HJ87 密码强度等级)

CM62 井字棋 链接&#xff1a;井字棋 题目&#xff1a; 给定一个二维数组board&#xff0c;代表棋盘&#xff0c;其中元素为1的代表是当前玩家的棋子&#xff0c;0表示没有棋子&#xff0c;-1代表是对方玩家的棋子。当一方棋子在横竖斜方向上有连成排的及获胜&#xff08;及…

【算法】新的开始(Kruskal算法,虚拟源点)

题目 发展采矿业当然首先得有矿井&#xff0c;小 FF 花了上次探险获得的千分之一的财富请人在岛上挖了 n 口矿井&#xff0c;但他似乎忘记了考虑矿井供电问题。 为了保证电力的供应&#xff0c;小 FF 想到了两种办法&#xff1a; 在矿井 i 上建立一个发电站&#xff0c;费用…

[Linux] dns域名解析服务

一、DNS 1.1 DNS简介 域名解析&#xff1a;&#xff08;英文&#xff1a;Domain Name System&#xff0c;缩写&#xff1a;DNS&#xff09;是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便地访问互联网。DNS使用udp53和tcp53…

SPC on-line 应用探讨

中国是制造业大国&#xff0c;大部分工厂主要重点是将原料经由加工制造过程&#xff08;或流程&#xff09;转变为最终可销售的产品或服务。”产品”是经过被定义的规格下&#xff08;定义规格者包含客户、制造商本身、供应商…等&#xff09;&#xff0c;在经过”受控制”的人…

day59【单调栈】503.下一个更大元素Ⅱ 42.接雨水

文章目录 503.下一个更大元素Ⅱ42.接雨水 503.下一个更大元素Ⅱ 力扣题目链接 代码随想录讲解链接 题意&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数…

键盘接受一串字符到BUF为首地址的字节单元中,要求用下列方法分别编程,将它们以相反的次序显示在屏幕的下一行中

(1).按地址从尾向前依次显示。 (2)利用堆栈反向显示。 (3).利用交换的方法反序后&#xff0c;然后显示&#xff1a;即ai<——>aj

Rust 中的引用与借用

目录 1、引用与借用 1.1 可变引用 1.2 悬垂引用 1.3 引用的规则 2、slice 类型 2.1 字符串字面量其实就是一个slice 2.2 总结 1、引用与借用 在之前我们将String 类型的值返回给调用函数&#xff0c;这样会导致这个String会被移动到函数中&#xff0c;这样在原来的作用域…

网络运维Day14

监控概述 监控的目的 报告系统运行状况每一部分必须同时监控内容包括吞吐量、反应时间、使用率等提前发现问题进行服务器性能调整前&#xff0c;知道调整什么找出系统的瓶颈在什么地方 监控的资源类别 公开数据 Web、FTP、SSH、数据库等应用服务TCP或UDP端口 私有数据 CPU、内…

互联网Java工程师面试题·微服务篇·第三弹

目录 34、什么是端到端微服务测试&#xff1f; 35、Container 在微服务中的用途是什么&#xff1f; 36、什么是微服务架构中的 DRY&#xff1f; 37、什么是消费者驱动的合同&#xff08;CDC&#xff09;&#xff1f; 38、Web&#xff0c;RESTful API 在微服务中的作用是什…

深度学习 YOLO 实现车牌识别算法 计算机竞赛

文章目录 0 前言1 课题介绍2 算法简介2.1网络架构 3 数据准备4 模型训练5 实现效果5.1 图片识别效果5.2视频识别效果 6 部分关键代码7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于yolov5的深度学习车牌识别系统实现 该项目较…

《QT从基础到进阶·二十二》QGraphicsView显示大量图形项item导致界面卡顿的解决办法

有时候因业务需要&#xff0c;paint函数在界面上绘制了成百上千个图形项Items&#xff0c;导致操作界面的时候有明显的卡顿感&#xff0c;下文会提供一种比较好的解决办法&#xff0c;先来了解下QGraphicsItem的缓存方式。 &#xff08;1&#xff09;setCacheMode(QGraphicsIt…

逐帧动画demo

用这一张图实现一个在跑的猎豹的动画 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X…

20.有效的括号(LeetCode)

思路&#xff1a;用栈的后进先出的特性&#xff0c;来完成题目的要求 因为C有库&#xff0c;可以直接用&#xff0c;而C语言没有&#xff0c;所以我们直接把写好的栈拷贝上来用。 首先&#xff0c;完成框架的搭建 其次&#xff0c;再实现循环内的部分。1.左括号入栈 2.右括…

【计算机网络笔记】IP子网划分与子网掩码

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

vscode launch.json

有时新的服务器进行调试时&#xff0c;需要设置调试的launch.json的结果 然后就可以打开一个launch.json 其内容如下 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid83…

Linux socket编程(2):socket函数介绍及C/S模型代码实现

上一节简单介绍了一下套接字、字节序和地址结构体的概念&#xff0c;算是对socket有一个入门的了解。这一节就实现一个客户端-服务端的代码&#xff0c;从这个例子中来学习socket函数的使用。 文章目录 1 客户端/服务端模型2 套接字函数2.1 socket:创建套接字2.2 bind:绑定套接…

【PC】开发者日志:竞技比赛验证系统强化

各位玩家大家好&#xff01;欢迎收看本期开发者日志。 在11月1日发布的第26赛季第2轮更新公告中&#xff0c;我们提到了有关强化比赛验证系统的内容。想必各位玩家一定会对我们加强验证系统的背景和意图感到好奇&#xff0c;为此我们想通过今天这篇反作弊开发者日志来向大家更详…

Python高级语法----使用Python进行模式匹配与元组解包

文章目录 1. 模式匹配的新特性2. 高级元组解包技巧3. 数据类的匹配与应用1. 模式匹配的新特性 Python自3.10版本起引入了结构化模式匹配的新特性,这是一种强大的工具,允许开发者用更清晰、更直观的方式处理数据结构。模式匹配类似于其他编程语言中的switch-case语句,但它更…

C++字典树算法:找出强数对的最大异或值 II

涉及知识点 数学 字典树 题目 给你一个下标从 0 开始的整数数组 nums 。如果一对整数 x 和 y 满足以下条件&#xff0c;则称其为 强数对 &#xff1a; |x - y| < min(x, y) 你需要从 nums 中选出两个整数&#xff0c;且满足&#xff1a;这两个整数可以形成一个强数对&…