首页 > 其他分享 >HTML5新标签

HTML5新标签

时间:2023-01-31 11:26:46浏览次数:45  
标签:行内 定义 标记 标签 value 内容 HTML5

   最近在学习Vue的基础知识, 发现有关H5的新内容不是很熟悉, 再次整理一下


1.头部标签 <header >

<header > </header>

 

2. 导航标签<nav>

<nav>导航</nav>

 

3.主要内容标签<main>

<main></main>

特点:

高版本浏览器兼容
main能包含别的标签
只能在文中出现一次,且只能当别人的父元素

4.内容标签 <article>

<article></article>

 

文章段落, 和段落p相似

5.<section>定义文档某个区域

<section> 节</section>

 


6.<aside>侧边栏标签

<aside>侧边栏</aside>

 

7.<footer>脚注标签

<footer>脚注 </footer>

 

块级标签02
1.<details>关于查看详情出现与隐藏的情况

<details>
<summary>标题</summary>
</details>

 

2. <figure>标签规定独立的流内容(图像、图表、照片、代码等等)

<figure>
<img src="img/01.jpg" >
<figcaption>
图片标题
</figcaption>
</figure>

 

行内块元素标签
1.进度条<progress>

<progress value="20" min="1" max="100"></progress>

 

value表示进度值
max表示最大进度值
min表示最小进度值
行内块元素,可以定义宽和高
双标记标签
ie浏览器9以及以下不认识这个标签

2. 度量衡<meter>

<meter value="72" min="1" max="100" low="60" high="80"> </meter>

low 低 低于这个值的value还是原来的颜色
high 高 高于这个值的value是红色
在这两个值中间的value是黄色
不加不变颜色
Value 如果标签内没有数字,那么标量的实际值就是0

IE就不支持这个啦
标签中的内容可以不包含任何数字,这时最大值会被认为是1;

 

行内标签
1. <time> 标签定义公历的时间(24 小时制)或日期

我们早上<time>12:00</time>上课
今年的<time datetime="2022-2-14 00:00:00">情人节</time>我是一个人过

 


如果不是具体时间就加上datetime
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。


2.标记标签<mark>

今年的<time datetime="2022-2-14 00:00:00">情人节</time>我是<mark>一个人</mark>过

 


template

<template>标记将其内容从客户端隐藏起来。

<template>标记内的内容将不会呈现。

 

标签:行内,定义,标记,标签,value,内容,HTML5
From: https://www.cnblogs.com/xingxia/p/html5.html

相关文章

  • git tag标签操作
    标签与分支的区别标签是当前分支上的一个标记,其实道理和commit的commit-sha1有些相似,其实就是给当前的版本做个标记,以便回退到此版本。如果使用commit-sha1,大家都记......
  • HTML5实现动态视频背景
    HTML5实现动态视频背景html代码<videoid="v1"autoplayloopmuted><sourcesrc="https://wallpaperm-mp4.duba.com/scene/preview_video/97ba6b60662ab4f31ef0......
  • HTML5 前端大文件上传
    ​ 之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上......
  • HTML5
    新增的标签语义化标签header头部标签nav导航标签article内容标签section定义文档的某个区域aside侧边栏标签footer尾部标签上面的标签都是语义化标签,没有......
  • django 自定义模板标签
    故事的背景比较复杂,框架用的django,后台用的simpleui,当我在往前端嵌入echarts的时候发现自定义标签返回的list里面的单引号进行了自动转义,变成了&#39; 具体可以参考:ht......
  • php代码:判断一个html字符串标签不闭合(没有结束标记)
    来源代码记录一个php的html标签自动闭合的函数代码<?phpfunctionfix_html_tags($input,$single_tags=array()){$result=null;$stack=array();//标......
  • Dedecms织梦TAG中文标签改成英文+数字地址的方法
    最近发现一些关于织梦的很多问题,特别是最新版本的织梦还不如老板的稳定好用,最大的问题就是织梦官方给出的新版本默认的TAG标签是中文的,所以很多人没注意到这一点,中文标签路......
  • 封面标签选择图片
    基本代码<el-form-itemlabel="文章封面"><!--用来显示封面的图片--><imgsrc="../../../assets/images/cover.jpg"......
  • html5 二进制文件操作基础
    Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到,这些名词里,Blob、ArrayBuffer、File可以归为一类,它们都是数据;而fileReader算是一种工具,用来读取数据......
  • vscode 利用正则 搜索标签 tags (?=.*关键字1)(?=.*关键字2).*
    vscode利用正则搜索标签(?=.关键字1)(?=.关键字2).*这里关键词是可以多个并且不按照顺序搜索的,就是写起来需要(?=.关键字)最后.结尾我是不是需要制作一个转换的小......