html5新标签

最新推荐文章于 2024-06-24 14:21:19 发布

乔木木木木

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量308

点赞数 1

分类专栏： # html5 文章标签： html

本文链接：https://blog.csdn.net/qq_43005779/article/details/107216109

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html5新标签详解

兼容问题

IE8以下不支持，要想兼容IE8一下可以添加一个html5垫片包，网上大多是google的，但是google被墙所以推荐一个国内的垫片包

<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<![endif]-->

这个放在html的头部中，当版本过低时会自动解释

一、新标签

新标签本质上是一个div标签，只是语义化可以方便阅读

`<nav>`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- html5垫片包 -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body>
		<nav>
			<a href="">hello</a>
			<a href="">world</a>
			<a href="">吴青峰2020演唱会</a>
		</nav>
	</body>
</html>

在这里插入图片描述

效果和<div>没有差别但是标签更加语义化，方便阅读.

`<header>`

一个文档中只有一个header标签

<body>
		<header>
			<div class="container">
				<a href="">乔木</a>
				<nav>
					<a href="">hello</a>
					<a href="">world</a>
					<a href="">吴青峰2020演唱会</a>
				</nav>
			</div>
		</header>
</body>

在这里插入图片描述

这里就可以看出<nav>标签相当于<div>

`<mark>`

<p>元素用于<mark>高亮</mark>文本显示</p>

效果：

元素用于高亮文本显示

`<progress>`

<progress max="100" value="70"></progress>

max表示进度条的最大值，value是当前值

效果：

form中的新元素

datalist

<form action="">
			<!-- 这里list中的值要和datalist中的id相同 -->
			<input type="text" list="mylist">
			<datalist id="mylist">
				<option value="hello1"></option>
				<option value="hello2"></option>
				<option value="hello3"></option>
				<option value="hello4"></option>
				<option value="hello5"></option>
			</datalist>
			<input type="submit" name="" id="" value="确定" />
		</form>

在这里插入图片描述

颜色取色器

<input type="color" name="" />

在这里插入图片描述

自动聚焦：autofocus

<input type="text" autofocus >

formaction

改变提交到的服务器

<input type="submit" name="" id="" value="确定" formaction="https://www.baidu.com"/>

其他的常用h5新标签

header：头部标签

footer：脚部标签

nav：导航

section：区域标签

aside：侧边栏

二、h5新属性

contenteditable：规定是否可以编辑元素的内容

data-*嵌入自定义的数据

draggable：规定元素是否可以拖动，链接和图片默认可拖动，经常用它来实现拖放操作

hidden：规定属性进行隐藏

contenteditable

<a href="" data-name='helloworld' id="qiao">乔木</a>

在js中通过dataset获取这个自定义的name数据：

<script type="text/javascript">
			let n=document.getElementById('qiao')
			console.log(n.dataset.name)
		</script>

draggable

<a href="" draggable="false">hello</a>

hidden

<a href="" hidden="true">吴青峰2020演唱会</a>

.log(n.dataset.name)


### draggable

```html
<a href="" draggable="false">hello</a>

hidden

<a href="" hidden="true">吴青峰2020演唱会</a>

当不写参数时默认为true，这里的参数一般是在js中获取这个元素，设定他是否隐藏时去设定的

乔木木木木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录