HTML5的学习-CSDN博客

本文链接：https://blog.csdn.net/qq_35112578/article/details/127404151

HTML5

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

HTML5
前言
一、变化：新增标签
二、语意化的好处
三、html5新增标签的坏处：ie9以下的浏览器不兼容
- 1、解决方法：引入文件：html5shiv.js
- 2、做移动端的项目，必须要加入meta 强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放
四、新增input type属性值
五、HBuilderX 手机及电脑真机测试
六、常用新属性
7、本地存储
总结

前言

这里开始记录HTML5的学习笔记

一、变化：新增标签

标签	语义
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）
figcaption	定义 figure 元素的标题
footer	定义 section 或 document 的页脚
header	定义了文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡。仅用于已知最大和最小值的度量
nav	定义运行中的进度（进程）
progress	定义任何类型的任务的进度
ruby	定义 ruby 注释（中文注音或字符）
rt	定义字符（中文注音或字符）的解释或发音
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

    <header></header>
    <footer></footer>
    <nav></nav>
    <section></section>

二、语意化的好处

1.有利于seo，爬虫抓取

2.方便团队开发和维护，可读性强

2.方便其他设备解析（移动设备）

三、html5新增标签的坏处：ie9以下的浏览器不兼容

1、解决方法：引入文件：html5shiv.js

文件地址如下：
https://download.csdn.net/download/qq_35112578/86781995

2、做移动端的项目，必须要加入meta 强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

四、新增input type属性值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0",
    minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>HTML5的input type属性</title>
  </head>
  <body>
<!-- email:必须输入“@邮箱后缀” -->
    <form action="" for="email">
      email: <input type="email" name="" id="email" />
      <input type="submit" value="提交email" />
    </form><hr>

<!-- tel:移动端会显示纯数字键盘 -->
    <form action="" for="tel">
      tel: <input type="tel" name="" id="tel" />
      <input type="submit" value="提交tel" />
    </form><hr>

<!-- url:必须输入“http://” -->
    <form action="" for="url">
      url: <input type="url" name="" id="url" />
      <input type="submit" value="提交url" />
    </form><hr>

<!-- number:必须输入数字 -->
    <form action="" for="number">
      number: <input type="number" name="" id="number" />
      <input type="submit" value="提交number" />
    </form><hr>

<!-- search:和text类似，提供了清空按钮 -->
    <form action="" for="search">
      search: <input type="search" name="" id="search" />
      <input type="submit" value="提交search" />
    </form><hr>

<!-- range: -->
    <form action="" for="range">
      range: <input type="range" name="" id="range" />
      <input type="submit" value="提交range" />
    </form><hr>

<!-- time: -->
    <form action="" for="time">
      time: <input type="time" name="" id="time" />
      <input type="submit" value="提交time" />
    </form><hr>

<!-- date: -->
    <form action="" for="date">
      date: <input type="date" name="" id="date" />
      <input type="submit" value="提交date" />
    </form><hr>

<!-- datetime: -->
    <form action="" for="date">
      datetime: <input type="datetime" name="" id="datetime" />
      <input type="submit" value="提交datetime" />
    </form><hr>

<!-- month: -->
    <form action="" for="month">
      month: <input type="month" name="" id="month" />
      <input type="submit" value="提交month" />
    </form><hr>

<!-- week: -->
    <form action="" for="week">
      week: <input type="week" name="" id="week" />
      <input type="submit" value="提交week" />
    </form><hr>
  </body>
</html>

五、HBuilderX 手机及电脑真机测试

标题5.1手机电脑连接同一个WIFI

标题5.2手机通过数据线连接电脑

标题5.3电脑及手机下载iTools 或iTunes 或华为手机助手或360手机助手等

标题5.3.1 苹果：未受信任》设置》通用》设备管理

标题5.3.2 安卓：系统设置》关于手机》三击基带版本进入开发中模式

标题5.4右键》新建》项目》5+app》运行》运行到手机或模拟器

标题5.5手机自动安装一个APP

六、常用新属性

6.1 placeholder 占位符

在这里插入图片描述

        <style>
			/* 改变占位符placeholder的样式 */
			#ph::-webkit-input-placeholder {
				color: red;
			}
		</style>


<!-- placeholder :占位符 -->
		<form action="" for='ph'>
			<input type="text" placeholder="我是占位符" id='ph'>
			<input type="submit">
		</form>

6.2 autofocus input元素自动获得焦点

在这里插入图片描述

<!-- autofocus:自动获得焦点-->
		<form action="" for='search'>
			<input type="search" id='search' autofocus>
			<input type="submit">
		</form>

6.3 multiple :多文件上传

在这里插入图片描述

<!-- multiple:多文件上传-->
		<form action="" for='file'>
			<input type="file" id='file' multiple>
			<input type="submit">
		</form>
		<hr>

6.4 autocomplete :自动完成功能

有两个属性值，on和off,on表示记录已经输入的值，必须有提交按钮，并且表单必须有名字

6.5 required :必填项

如果此项不填会提示内容不能为空

6.6 autocapitalize:首字母自动大写

"off"属性表示首字母不大写

html<!-- 首字母是否大写：autocapitalize, "off"表示不大写 -->
		<form action="" for='text'>
			<input type="text" id='text' autocapitalize="off">
			<input type="submit">
		</form>
		<hr>

6.7 video/audio 标签

在这里插入图片描述

7、本地存储

7.1 localStorage ：关闭页面，数据不消失

7.1.1 增加

      localStorage.setItem("name1", "zhangsan")
      localStorage.name2 = "lisi"
      localStorage["name3"]="wangwu"

7.1.2 读取、获取

      //   读取、获得 值
    let name1=localStorage.getItem("name1")
    console.log(name1);

    let name2=localStorage.name2
    console.log(name2);

    let name3=localStorage["name3"]
    console.log(name3);

运行结果如下：
在这里插入图片描述

7.1.3 删除

7.1.3.1 removeItem（key）：指定删除

// 指定删除 remove
    localStorage.removeItem("name1")

7.1.3.2 clear() 全部删除

// 全部删除 clear()
localStorage.clear()

7.2 sessionStorage ：关闭页面，数据消失

7.2.1 增加

      sessionStorage.setItem("name1", "zhangsan")
      sessionStorage.name2 = "lisi"
      sessionStorage["name3"]="wangwu"

7.2.2 读取、获取值

      //   读取、获得 值
    let name1=sessionStorage.getItem("name1")
    console.log(name1);

    let name2=sessionStorage.name2
    console.log(name2);

    let name3=sessionStorage["name3"]
    console.log(name3);

7.2.3 删除

7.2.3.1 removeItem（key）：指定删除

// 指定删除 remove
    sessionStorage.removeItem("name1")

7.2.3.2 clear() 全部删除

// 全部删除 clear()
sessionStorage.clear()

7.3 value值的转化

7.3.1 字符串转回原有格式：JSON.parse()

//   value值的转化
    localStorage.setItem('a',999)
    console.log('a转化前：'+ typeof localStorage.getItem('a'));
    console.log('a转化后：'+ typeof JSON.parse(localStorage.getItem('a')) );