html5新增内容

最新推荐文章于 2024-04-12 09:00:00 发布

辣条小哥哥

最新推荐文章于 2024-04-12 09:00:00 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/weixin_44090040/article/details/116492571

版权

1. html5语义化标签

头部 header

导航区 nav

主体部分 main

小模块 section

边栏框 aside

正文框 article

尾部区域 footer

优势：

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。
IE8不兼容h5新标签可以使用 html5shiv.js 兼容

<!-- css HACK 做条件判断 选择性引入 -->
    <!-- [if lte IE 8]>
    <script src="./html5shiv.js"></script>    
<![endif]-->

2. 自定义属性

h5新增自定义属性的界定

自定义属性前面加 data-

dataset 获取元素所有自定义属性

取值时去掉data- 如果有多个单词那么去掉data-和其他单词之间的- 转成驼峰命名法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="box" class="one" data-user-name="张三" data-height="160cm" 
		 data-weight="60kg" data-gender="男"></div>
	</body>
	<script>
		var box = document.getElementById('box');
		console.log(box.dataset)
		console.log(box.dataset.userName)
		console.log(box.dataset.height)
		// 设置自定义属性
		box.dataset["userName"] = "lisi";
		console.log(box.dataset.userName)
	</script>
</html>

在这里插入图片描述
3. 新增表单类型

<!-- 颜色输入框 -->
<input type="color">

<!-- 专门用来输入email 必须时email格式数据 -->
<!-- 在提交时 会自动验证 是不是email -->
<!-- 设置required 属性 就是必须填 提交时 如果为空就自动验证 进行提示 -->
<input type="email" required>

<!-- 输入网址 -->
<input type="url">

<!-- 电话号码 在移动端 会弹出九宫格数字键盘 -->
<input type="tel">

<!-- 在pc端 只是比text框多了一个x 在移动端 输入内容后 键盘右下角的换行键会变成搜索或放大镜 -->
<input type="search">

<!-- 专门输入日期的 -->
<input type="datetime-local">

<!-- 滑块 -->
<input type="range">

4. localStorage 本地存储

// 本地存储是以键值对的形式来存储的
localStorage.setItem("name", "zhangsan");

var name = localStorage.getItem("name");
// 删除数据     一条一条删

localStorage.removeItem("name");

// 清空数据
localStorage.clear();

localStorage 存储特点：

1.如果把数据存储在localStorage里除非手动删除否则他就会一直存在(关闭浏览器电脑重启等等都不会删除)

2.数据的本地存储是按照不同网站来存储的(不同域名)

3.本地存储数据只能存储字符串

对于复杂数据类型先使用JSON.stringify方法把复杂数据转换成json字符串

获取时使用JSON.parse将其转换回来进行还原

var obj1 = {
    name : "lucy",
    age : 18
}
var json = JSON.stringify(obj1)		// {"name":"lucy","age":18}

JSON.parse(localStorage.getItem("obj1"))	// {name: "lucy", age: 18}

5. sessionStorage 临时存储

 用法跟localStorage 一样

 sessionStorage.setItem();

 sessionStorage.getItem();

 sessionStorage.removeItem();

 sessionStorage.clear();

sessionStorage 与 localStorage 区别

生命周期不一样 localStorage是永久存储 sessionStorage是会话级存储页面关闭就删除

6. classList 操作类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="box" class="one" data-user-name="张三" 
		 data-height="160cm" data-weight="60kg" data-gender="男"></div>
	</body>
	<script>
		var box = document.getElementById('box');
		console.log(box.classList)
		box.classList.add("border");
		box.classList.remove("border");
		// 判断元素没有这个类 有就去掉 没有就加上
		box.classList.toggle("border")
		// 使用contains方法  返回时是true 或者false
		var res = box.classList.contains("yellow")
		//有两个参数
		//参数一:是需要被替换掉的那个类名
		//参数二:是需要被替换上去的类名
		box.classList.replace("green","red")
	</script>
</html>

在这里插入图片描述
7. 选择器相关
伪类选择器：
:link 没有访问过的链接

:hover 鼠标悬停时

:active 鼠标点击时

:visited 点击过后

四种伪类选择器都是以:开头而且都是用于a标签

hover适用于所有元素

伪元素选择器

伪元素默认是行内元素而且要使用伪元素必须要有content属性

::after ::before

/* 清除浮动 */
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    zoom : 1; // 兼容ie8
}

:nth-child(n) 匹配第n个子元素

参数可选 even 偶数 odd 奇数

nth-child() 不是只是找到第n个子元素还是必须满足在父元素中也是第几个子元素

nth-of-type() 也是用来找到第几个子元素并不要求在父元素中也是第几个子元素

8. 多媒体标签

video视频标签

可以在video标签里面设置source标签给视频播放指定多个播放原

播放时会从第一个播放源依次往下找不能播放就继续往下找可以播放的

后面的所有播放源忽略掉(注意这里的source不会覆盖)

	<video controls>
        <source src="">
        <source src="">
        <!-- 对于不认识video标签的浏览器 会按照行内元素解析 可以给提示语 -->
        您的浏览器版本过低 建议升级
    </video>

可以加属性

src 指定视频路径

以下的属性都不需要加属性 只需要属性名即可

controls 显示控件 播放暂停 进度条

autoplay 自动播放 谷歌不允许自动播放 如果需要就将视频静音

muted 静音

loop 循环播放

audio音频标签使用方法类似

辣条小哥哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html5新增内容

1. html5语义化标签头部 header导航区 nav主体部分 main小模块 section边栏框 aside正文框 article尾部区域 footer优势：代码结构清晰，方便阅读，有利于团队合作开发。方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。有利于搜索引擎优化（SEO）。IE8不兼容h5新标签可以使用 html5shiv.js 兼容 <!-- [if
复制链接

扫一扫