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 相关知识可以访问 这里

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

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

相关文章

node插件MongoDB(四)—— 库mongoose 的个性话读取(字段筛选、数据排序、数据截取)(四)

文章目录 一、字段筛选二、数据排序三、数据截取1. skip 跳过2. limit 限定![在这里插入图片描述](https://img-blog.csdnimg.cn/c7067b1984ee4c6686f8bbe07cae9176.png) 一、字段筛选 字段筛选&#xff1a;只读取指定的数据&#xff0c;比如集合&#xff08;表&#xff09;中有…

如何在电脑和手机设备上编辑只读 PDF

我们大多数人更喜欢以 PDF 格式共享和查看文件&#xff0c;因为它更专业、更便携。但是&#xff0c;通常情况下您被拒绝访问除查看之外的内容编辑、复制或评论。如果您希望更好地控制您的 PDF 或更灵活地编辑它&#xff0c;请弄清楚为什么您的 PDF 是只读的&#xff0c;然后使用…

微信小程序:仅前端实现对象数组的模糊查询

效果 核心代码 //对数组进行过滤&#xff0c;返回数组中每一想满足name值包括变量query的 let result array.filter(item > { return item.name.includes(query); }); 完整代码 wxml <input type"text" placeholder"请输入名称" placeholder-styl…

基因检测技术的发展与创新:安全文件数据传输的重要作用

基因是生命的密码&#xff0c;它决定了我们的身体特征、健康状况、疾病风险等。随着基因检测技术的高速发展&#xff0c;我们可以通过对基因进行测序、分析和解读&#xff0c;更深入地认识自己&#xff0c;预防和治疗各种遗传性疾病&#xff0c;甚至实现个性化医疗和精准健康管…

Mysql基本知识

1.SQL分类 DDL【data definition language】 数据定义语言&#xff0c;用来维护存储数据的结构 代表指令: create, drop, alter DML【data manipulation language】 数据操纵语言&#xff0c;用来对数据进行操作 代表指令&#xff1a; insert&#xff0c;delete&#xff0c;up…

LLM大语言模型(典型ChatGPT)入门指南

文章目录 一、基础概念学习篇1.1 langchain视频学习笔记1.2 Finetune LLM视频学习笔记 二、实践篇2.1 预先下载模型&#xff1a;2.2 LangChain2.3 Colab demo2.3 text-generation-webui 三、国内项目实践langchain-chatchat 一、基础概念学习篇 1.1 langchain视频学习笔记 lan…

【设计原则篇】聊聊开闭原则

开闭原则 其实就是对修改关闭&#xff0c;对拓展开放。 是什么 OCP&#xff08;Open/Closed Principle&#xff09;- 开闭原则。关于开发封闭原则&#xff0c;其核心的思想是&#xff1a;模块是可扩展的&#xff0c;而不可修改的。也就是说&#xff0c;对扩展是开放的&#xf…

【现场问题】datax中write部分为Oracle的时候插入clolb类型字段,插入的数据为string且长度过场问题

datax的Oraclewriter 报错显示查询报错展示查找datax中的数据插入模块 报错显示 occurred during batching: ORA-01704: string literal too long 查询报错展示 基本上查到的都是这样的&#xff0c;所以锁定是clob的字段类型的问题&#xff0c;而且是只有Oracle出问题&#…

<MySQL> MySQL中查询(retrieve)数据的基础操作

目录 一、查询&#xff08;retrieve&#xff09; 1.1 查询数据的方式概述 二、全列查询 2.1 语法 2.2 操作演示 2.3 全列查询需要慎重使用 三、指定列查询 3.1 语法 3.2 操作演示 四、表达式查询 4.1 语法 4.2 操作演示 4.3 null 参与表达式计算 4.3 表达式查询存…

创建maven的 java web项目

创建maven的 java web项目 创建出来的项目样子 再添加java和resources文件夹 一定要如图有文件夹下有图标才代表被IDEA识别&#xff0c;不让是不行的 没有的话在File——ProjectStructure中进行设置

【Python Opencv】Opencv画图形

文章目录 前言一、画图形1.1 画线1.2 画矩形1.3 画圆1.4 画椭圆1.5 添加文本 总结 前言 在计算机视觉和图像处理中&#xff0c;OpenCV不仅可以处理图像和视频&#xff0c;还提供了一组功能强大的工具&#xff0c;用于在图像上绘制各种形状和图形。这些功能使得我们能够在图像上…

Mysql数据库 15.SQL语言 索引

一、索引的介绍 数据库是用来存储数据&#xff0c;在互联网应用中数据库中存储的数据可能会很多&#xff08;大数据&#xff09;&#xff0c;数据表中数据的查询速度会随着数据量的增长逐渐缓慢&#xff0c;从而导致用户请求的速度变慢——用户体验变差 索引&#xff0c;就是…