html重点知识总结

html重点知识

一直在网上看过许多不同的前端资料，但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解，所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结（顺序或许有点乱），如果之后发现有不足再来补充，我相信输出才是最好的输入！！！

H5新增内容

语义化标签：

h5新增了一系列语义化标签，他们本质上和一般的div标签没有区别，但是在语义上有不同。
- header：专门指页面的顶部区域
- footer：专门指页面的底部区域
- sidebar：指页面的侧边
- nav：指页面的导航栏
- article：指文章的内容
- section：指文档的一部分
语义化的优点：
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

媒体化标签：

音频标签audio
视频标签video

表单标签：

form标签：用于用户要向服务器提交内容
有很多不同的表单类型：类似于email，data，color，number。
表单属性：用于控制用户上传东西的限制，例如require表示该元素必须提交，placeholder表示一些用于提示的填充词

进度条(progress)&度量器

h5新增的用于展示进度的标签
value：规定当前度量值
max：表示当前任务的总进度

DOM查询操作

复制代码

doucment.querySelect()
doucment.querySelectAll()
//二者都是用来通过标签或类来实现DOM元素的查找

Web存储操作

localStorge：本地存储，不会因浏览器关闭而删除
sessionStorge：会话存储，会因浏览器关闭而删除
二者的存储容量都不会太大，大约5MB左右

Drag api

用来处理拖动相关（比如实现文件拖动上传）
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

从上至下对html元素进行一些简单介绍

复制代码

一个完整的html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础 HTML 页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            text-align: center;
        }
    </style>
    <script>
    	...
    <script/>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个基础的 HTML 页面示例。</p>
</body>
</html>

所有html页面的标准开头
用于告知浏览器该以一种怎样的文档定义类型来解析该文档
一般是使用标准模式来解析，标准模式一般指W3C定义的h5格式
如果没有这行代码，浏览器会使用混杂模式来解析文档
混杂模式依旧保留在浏览器的目的是为了兼容一些在W3C标准制定前就已经存在的网页。

< html >

包裹整个文件的标签，可以表示该页面是使用什么语言的，en-英语，zh-Cn-中文

< head >

用来存放一些css或js资源以及meta标签
title标签是head里唯一一个必须的标签

< meta >

meta标签由name和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等。
常见的meta标签
- charset：用来描述文档的编码类型
- keyword：页面关键词
- description：页面描述
- refresh：页面重定向和刷新
- viewpoint：移动端适配

< title >

该页面的标题
seo优化（浏览器检索优化）中比较重要的三个标签（tdk）
- title
- keyword
- description

< style >

用于引进css样式资源
可以在标签内写，也可以直接从外部引进

< script >

引进js脚本资源
由于引进脚本资源一般会阻碍页面的加载，所以该标签一般也可以放在< body >标签后面
该资源可以使用两种常见的异步引进方式（不会影响页面的加载）
- async：下载的时候不会阻塞，执行的时候会阻塞，下载完立刻执行，顺序不定
- defer：下载和执行都不会阻塞，执行部分再 HTML 解析完成后开始，按代码顺序执行

< body >

加载页面，该代码同时可以被用户在浏览器上看到