h5标签入门
时间:2022-06-08
本文章向大家介绍h5标签入门,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
可能你已经觉得自己熟悉并学会了使用大部分h5标签,但是对于h5标签你可能还是陌生的,或者不知道如何在一个正确的场景下使用。h5典型的语义化标签有:header footer article section nav aside 。
h5特性
- 对浏览器进行了规范,统一的doc声明 , 保证一份文档可以适用于任何版本,避免了不同浏览器对代码的支持性差异。
- 文档结构不明确,之前都是div布局,新增了许多结构标签。为语义化提供了基础。
- web应用强大,提供各样的api支持 富web应用,比如画布canvas,webgl,video,audio等。
注意事项
- 省略引号:当值不包括特殊值 比如单引号 双引号 大于小于 空格等 引号可以省略。
- 不写表示true 的:checked
h5标签的分类
- html5新增的标签一共有30个,为方便记忆,分为以下4类:
- 文本控制:3个
<bdi> <wbr> <mark>
- 结构标签:6个
<header> <nav> <article> <section> <aside> <footer>
- 组合使用:9个
<figure><figcaption> <details><summary> <ruby><rt><rp> <dialog> <datalist>
- 定义内容:12个
<audio> <video> <canvas> <command> <embed> <keygen>
<meter> <output> <progress> <track> <source> <time>
h5标签详细说明:
一 结构标签
新增的结构元素:
1.header:整个页面的标题 页面中文章的标题部分 引导和导航作用 ==页面或者内容区块的标题 也可以是表格 搜索表单的头 2.nav:连接导航的部分 导航的容器 ==侧边栏导航==页内导航 几个组成部分的导航==翻页操作 3.article: 页面中一块与上下文不关的独立内容 一篇文章 ;插件也可以 ==复杂特殊内容的section == 4.section :页面中的一个内容区块,表示文档结构 ==内容进行分块 最好是有标题的部分 5.aside :主体内容之外的相关内容==附属信息部分 6.footer; 内容区块的脚注 包含作者等底部信息 不限制使用一个 但是也不能过多
二 定义内容
- 音频视频 video audio embed
- 画布canvas
- 组合使用: figure:一段独立的流内容 figcaption 标题 datalist 可选的数据列表 datagrid 可选数据列表 树形的显示 dl dt 术语列表 menu 菜单列表 show close 显示与隐藏的
- 其他,语义标签 main: 网页中的主要内容,每个页面当中只能有一个 address 地址信息 文档维护信息 电子邮箱 地址等 mark 突出显示的元素 progress 进程 运行的程度 meter 度量衡 最大最小值 规定范围内的数量值 value min max low high optimun time 日期或者时间 pubdate 发布日期 区分发布日期的 ruby 注释 rt 字符的解释 iframe 安全性增强 command 命令 比如按钮 details 细节 summary 页面增强的元素 output 脚本的输出 source 媒介的源头 dialog 对话 默认隐藏的
三 其他
wbr换行 等不常用。 filedset 用于定义自定义表单 尤其数据区域 legend 用于定义标题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计模式~命令模式
- 基于DelayQueue实现的带失效时间的缓存
- 基于AQS实现的简单的Semaphore
- 图解:基于B+树索引结构,MySQL可以这么优化
- Android开发笔记:Retrofit + OkHttp3 + coroutines + LiveData打造一款网络请求框架
- Nginx安装与使用
- 基于Redis实现分布式锁
- 通过简单代码示例了解七大软件设计原则
- Flink在新浪微博的在线机器学习和实时数据分析
- Nginx + Keepalived使用文档
- 22+ 高频实用的 JavaScript 片段 (2020年)
- 文件上传C:fakepath解决方案
- Asp.net web api部署在某些服务器上老是404
- Spring解决循环依赖的思路
- Spring中Bean的创建流程