HTML5
程序员文章站
2022-03-29 17:16:34
1、定义： DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 声明必须是 HTML 文档的第一行，位于 标签之前。 2、作用： 声明文 ......
HTML5入门（一）
HTML5中的新特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 新的特殊内容元素，比如 article、footer、header、nav、section
- •新的表单控件，比如 calendar、date、time、email、url、search
DOM初步了解
DOM：Document Object Model 文档 对象 模型
1：一个页面就是一个文档，就是一个对象
2：页面中所有的标签都叫元素，都叫元素，也叫节点，对象
3：形成一个树形结构图，简称DOM树
HTML5的基本语义元素
| 标签 | 描述 |
|---|---|
| Header | 定义了文档的头部区域 |
| footer | 定义 section 或 document 的页脚 |
| nav | 定义导航链接的部分 |
| article | 定义页面独立的内容区域 |
| aside | 定义页面的侧边栏内容 |
| section | 定义文档中的节（section、区段 |
| hgroup | 群组标题 |
<body>
<header>
<hground>
<h1></h1>
</hground>
</header>
<main>
<section>
<hground>
<nav>
</nav>
</hground>
</section>
<aside>
<h2> </h2>
</aside>
<footer>
<hground>
</hground>
</footer>
<main/>
<script type="text/javascript">
</script>
</body>
HTML5的新增DOM操作的方法
DOM中提供了一些方法（API）
<script type="text/javascript">
document.getElementById();//获取id属性的值
document.getElementsByTagName();//获取相同标签名字的元素放于一个数组中
document.getElementsByClassName();//获取相同类样式相同的元素放在一个数组中---H5中
document.getElementsByName();//获取相同name属性相同的元素放于一个数组中
</script>
需要注意标签和name属性相同的获取方式是不同的
HTML5中新增的API
//H5中新增的
var divObj=document.querySelector("#dv");//获取选择器
console.log(divObj);
var pObjs=document.querySelectorAll("p");//获取多个选择器的数组
console.log(pObjs);
console.log(divObj.classList);//获取div中所有的类样式
divObj.classList.add("five");//新增一个类样式
divObj.classList.remove("two");//移除一个类样式
console.log(divObj.classList.contains("three"));//判断是否包含样式
document.querySelector("#btn").onclick=function(){
divObj.classList.toggle("five");
}
HTML5自定义属性的操作
data开头
data-属性名字
获取自定义属性
console.log(获取div.name)是获取不到
对象.dataset.属性名
document.querySelector("#btn").onclick=function(){
divObj.classList.toggle("five");
}
console.log(divObj.dataset);
for(var key in divObj.dataset){
console.log(key+"======"+divObj.dataset[key]);
}
console.log(divObj.dataset.age);
设置自定义属性
获取div.setAttribute(“属性名”，“属性值”)
还有更简便的方式
对象.dataset[“属性名字”]=“值”
对象.dataset.属性名字=“值”;
divObj.dataset.bb="sjdh";
divObj.dataset.myFace="好帅";//驼峰式命名换-表示
HTML5中的可编辑属性
页面中的div可以直接进行编辑
<div contenteditable="true">
可以编辑
</div>
HTML5提出的本地存储机制——sessionStorage和localStroage
相同点
- 都是浏览器Document的对象
- 都特定于页面的协议
- 方法
- 使用方法一样
| 属性方法 | 说明 |
|---|---|
| 对象.setItem(key,value); | 保存数据到本地，将value保存到key |
| 对象.getItem(key) | 从本地获取数据，找到key对应的value值 |
| 对象.removeItem(key) | 删除本地的一个对应的key的值对 |
| 对象.clear() | 清楚所有保存的数据 |
| 对象.length() | 返回key/value列表的长度 |
不同点
- 存储在 localStorage 的数据可以长期保留
- 存储在sessionStorage的当页面被关闭或者结束时，数据会被清除
- localStorage 中的键值对总是以字符串的形式存储。(需要JSON进行转化)
| 操作 | 属性方法 |
|---|---|
| JSON对象->JSON字符串 | JSON.stringify(对象) |
| JSON字符串->JSON对象 | JSON.parse(JSON字符串) |
本文地址：https://blog.csdn.net/weixin_45511236/article/details/107512226