html5 初步了解

news2024/10/6 0:35:06

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.coloradmin.cn/o/1204979.html

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

相关文章

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

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

(只需三步)虚拟机上vm的ubuntu不能联上网怎么办

第一步&#xff1a;重启虚拟网络适配器 第二步&#xff1a;删掉网络适配器&#xff0c;重新添加 第三步&#xff1a;重启虚拟机网络服务器 sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service network-manager start 再打…

【机器学习基础】机器学习入门(2)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a;【机器学习基础】机器学习入门&#xff08;1&#xff09; &#x1f4a1;…

【算法|动态规划 | 区间dp No.1】AcWing 282. 石子合并

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【AcWing算法提高学习专栏】【手撕算法系列专栏】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&a…

数据结构--图解单链表

学习链表最重要的就是会画图&#xff0c;尤其是要理解链表的逻辑结构和物理结构&#xff0c;理解链表的底层原理才能使用的如鱼得水。 希望这篇文章可以帮助各位&#xff0c;记得关注收藏哦&#xff1b;若发现问题希望私信博主&#xff0c;十分感谢。 当然学习链表是需要大家对…

【PWN · heap | unlink | free_hook】[SUCTF 2018 招新赛]unlink

在前期学习了unlink后&#xff0c;今天翻NSSCTF找到一道名为unlink的题目&#xff0c;尝试不看wp做。过程很顺利&#xff01; 前言 题目对于知识点unlink还是非常裸的&#xff0c;很直接&#xff0c;思路很清晰。 一、题目 二、思路浅析 通过对该程序的反编译&#xff0c;我们…

AGV与AMR的区别

如今&#xff0c;市面上最受关注的两类工业移动机器人分别是AGV和AMR。但大众对于两者的区别还是不甚了解&#xff0c;因此小编将通过这篇文章为大家详细解释。 一、概念阐述 【AGV 】 AGV (Automated Guided Vehicle) 即自动导引运输车&#xff0c;可指基于各种定位导航技术…

第二章:main 方法

系列文章目录 文章目录 系列文章目录前言一、main 方法总结 前言 main方法详解。 一、main 方法 //main方法的形式 public static void main(String[] args){}解释main方法main方法被虚拟机调用Java虚拟机需要调用类的main()方法&#xff0c;所以该方法的访问权限必须是publi…

C++类中的const使用

目录 一&#xff0c;const成员函数 1&#xff0c;const成员函数的语法 2&#xff0c;相同限定符之间的调用 3&#xff0c;不同限定符对象与函数的调用 4&#xff0c;不同限定符函数之间的调用 一&#xff0c;const成员函数 1&#xff0c;const成员函数的语法 将const修饰…

关于MySQL优化的思考二【性能分析工具、优化原则】

在实际的工作中&#xff0c;我们不免需要对SQL预计进行分析和优化&#xff0c;今天我们就来一起看下相关内容&#xff1a; SQL性能分析 SQL优化原则 1 SQL性能分析 对SQL进行性能分析&#xff0c;主要有&#xff1a; 查看慢SQL 通过profile详情查看 explain执行计划 1.1…

2023年【广东省安全员B证第四批(项目负责人)】考试及广东省安全员B证第四批(项目负责人)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 广东省安全员B证第四批&#xff08;项目负责人&#xff09;考试考前必练&#xff01;安全生产模拟考试一点通每个月更新广东省安全员B证第四批&#xff08;项目负责人&#xff09;试题及解析题目及答案&#xff01;多…

Redhat7设置国内可用yum源

问题&#xff1a; 因为最近安装了redhat7&#xff0c;在使用的时候提示系统未注册订阅&#xff0c;无法使用官方的yum源进行安装软件。为此&#xff0c;我使用centos7国内的yum源替换redhat的官方的yum源实现软件安装。 “This system is not registered with an entitlement …

iOS:何为空指针和野指针

一&#xff1a;什么是空指针和野指针 1、空指针 ①.没有存储任何内存地址的指针就成为空指针&#xff08;NULL指针&#xff09; ②.空指针就是被赋值为0的指针&#xff0c;在没有被具体初始化之前&#xff0c;其值为0. //以下都是空指针&#xff0c;eg: Person *p1 NULL; …

CSDN每日一题学习训练——Java版(数据流的中位数、乘积最大子数组、旋转链表)

版本说明 当前版本号[20231113]。 版本修改说明20231113初版 目录 文章目录 版本说明目录数据流的中位数题目解题思路代码思路参考代码 乘积最大子数组题目解题思路代码思路参考代码 旋转链表题目解题思路代码思路参考代码 数据流的中位数 题目 中位数是有序列表中间的数。…

SPSS时间序列模型预测

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

Leetcode刷题详解——解数独

1. 题目链接&#xff1a;37. 解数独 2. 题目描述&#xff1a; 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能…

Vue基础之组件通信(二)

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…

ROS基础—话题通信的执行

1、打开终端启动roscore 2、手动添加命令到.bashrc Ⅰ.切换到home目录下&#xff0c;按Ctrlh显示隐藏的文件夹&#xff0c;找到并打开./bashrc。 Ⅱ.在./bashrc最后一行添加命令: # xxx是你工作空间的名称 source ~/xxx/devel/setup.bash 之后保存.bashrc文件即可。 这样子…

IMU识别实验鼠的运动轨迹

临床前通常要做小鼠行为试验。然而&#xff0c;研究人员在观察和分析其行为和反应上往往需要耗费大量时间。针对这种情况&#xff0c;结合目前IMU的飞速发展&#xff0c;香港的研究员们构思了一种基于惯性测量单元&#xff08;IMU&#xff09;的传感器&#xff0c;用于捕获实验…

保姆级vue-pdf的使用过程

第一步 引入vue-pdf npm install --save vue-pdf 第二步 按照需求我们慢慢进行 01.给你一个pdf文件的url&#xff0c;需要在页面渲染 代码 <template><div><pdfref"pdf":src"url"></pdf></div> </template> <…