-
HTML5的学习
HTML5
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录
前言
这里开始记录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
- 2
- 3
- 4
二、语意化的好处
1.有利于seo，爬虫抓取
2.方便团队开发和维护，可读性强
2.方便其他设备解析（移动设备）
三、html5新增标签的坏处：ie9以下的浏览器不兼容
1、解决方法：引入文件：html5shiv.js
文件地址如下：
https://download.csdn.net/download/qq_35112578/867819952、做移动端的项目，必须要加入meta 强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">- 1
四、新增input type属性值
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>HTML5的input type属性title> head> <body> <form action="" for="email"> email: <input type="email" name="" id="email" /> <input type="submit" value="提交email" /> form><hr> <form action="" for="tel"> tel: <input type="tel" name="" id="tel" /> <input type="submit" value="提交tel" /> form><hr> <form action="" for="url"> url: <input type="url" name="" id="url" /> <input type="submit" value="提交url" /> form><hr> <form action="" for="number"> number: <input type="number" name="" id="number" /> <input type="submit" value="提交number" /> form><hr> <form action="" for="search"> search: <input type="search" name="" id="search" /> <input type="submit" value="提交search" /> form><hr> <form action="" for="range"> range: <input type="range" name="" id="range" /> <input type="submit" value="提交range" /> form><hr> <form action="" for="time"> time: <input type="time" name="" id="time" /> <input type="submit" value="提交time" /> form><hr> <form action="" for="date"> date: <input type="date" name="" id="date" /> <input type="submit" value="提交date" /> form><hr> <form action="" for="date"> datetime: <input type="datetime" name="" id="datetime" /> <input type="submit" value="提交datetime" /> form><hr> <form action="" for="month"> month: <input type="month" name="" id="month" /> <input type="submit" value="提交month" /> form><hr> <form action="" for="week"> week: <input type="week" name="" id="week" /> <input type="submit" value="提交week" /> form><hr> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
五、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> <form action="" for='ph'> <input type="text" placeholder="我是占位符" id='ph'> <input type="submit"> form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
6.2 autofocus input元素自动获得焦点
<form action="" for='search'> <input type="search" id='search' autofocus> <input type="submit"> form>- 1
- 2
- 3
- 4
- 5
6.3 multiple :多文件上传
<form action="" for='file'> <input type="file" id='file' multiple> <input type="submit"> form> <hr>- 1
- 2
- 3
- 4
- 5
- 6
6.4 autocomplete :自动完成功能
有两个属性值，on和off,on表示记录已经输入的值，必须有提交按钮，并且表单必须有名字
6.5 required :必填项
如果此项不填会提示内容不能为空
6.6 autocapitalize:首字母自动大写
"off"属性表示首字母不大写
html
- 1
- 2
- 3
- 4
- 5
- 6
6.7 video/audio 标签
7、本地存储
7.1 localStorage ：关闭页面，数据不消失
7.1.1 增加
localStorage.setItem("name1", "zhangsan") localStorage.name2 = "lisi" localStorage["name3"]="wangwu"- 1
- 2
- 3
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);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
运行结果如下：
7.1.3 删除
7.1.3.1 removeItem（key）： 指定删除
// 指定删除 remove localStorage.removeItem("name1")- 1
- 2
7.1.3.2 clear() 全部删除
// 全部删除 clear() localStorage.clear()- 1
- 2
7.2 sessionStorage ：关闭页面，数据消失
7.2.1 增加
sessionStorage.setItem("name1", "zhangsan") sessionStorage.name2 = "lisi" sessionStorage["name3"]="wangwu"- 1
- 2
- 3
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);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
7.2.3 删除
7.2.3.1 removeItem（key）： 指定删除
// 指定删除 remove sessionStorage.removeItem("name1")- 1
- 2
7.2.3.2 clear() 全部删除
// 全部删除 clear() sessionStorage.clear()- 1
- 2
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')) );- 1
- 2
- 3
- 4
总结
以上就是今日学习的HTML5的新内容。
-
相关阅读:
C#学习笔记--数据结构、泛型、委托事件等进阶知识点
JAVA代码视频转GIF（亲测有效）
剑指 Offer II 064. 神奇的字典
程序员35岁之后有什么出路？
神奇的卡尔曼滤波，行人追踪的福音
矩阵理论——Gerschgorin定理，以及用python绘制Gerschgorin圆盘动图
【MySql密码爆破脚本】用于其他爆破工具无法使用的情况下
[Codeforces] number theory (R1600) Part.9
计算机网络(第五弹) --- Socket 套接字详细介绍及套接字通信流程和编程的具体实现
Android automotive车载开发（5）-----系统架构
- 原文地址：https://blog.csdn.net/qq_35112578/article/details/127404151
- 最新文章
-
沪漂五周年了：我越来越迷茫了
Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
MySQL-Seconds_behind_master的精度误差
[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
Agent OS ：五种驯服不确定性的范式
PortSwigger SQL注入LAB11
数据库即时编译JIT
[Begin]AI Learn Data Day 0
深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU