关于HTML的知识点速览

小菜菜要逆袭
231 阅读2分钟

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。

今天的主角是HTML,快来康康今天有哪些知识点吧！

♥解说一个页面的基本组成

<!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">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
​

①、<!DOCTYPE >：文档类型声明标签，作用是告诉浏览器用哪种HTML版本来显示网页。html为HTML5版本。

②、lang="en"：用来定义当前文档显示的语言，zh-CN定义语言为中文。

③、<meta charset="UTF-8">：通过meta标签charset属性来规定HTML文档应该使用那种字符编码。

♥HTML5新增特性

  • 语义特性，如<header>、<article>、<footer>、<nav>、<aside>、<section>等

  • 表单新增type属性值，email、te、number、search、range、time、date

  • 表单新增属性：placeholder(提示文本)、autofocus(自动获取焦点)、pattern(正则表达式)

    autocomplete:自动完成 on：打开 off：关闭 有两个前提：1、必须成功提交，提交过才会记录；2、当前标签必须有name属性

  • 表单新增元素<dataList>,和select差不多的效果，但是可以输入，与一个input绑定起来，input的list属性值等于datalist的id属性值。

  • 表单新增事件：oninput():当绑定元素内容发生改变时触发；onkeyup():每一个键弹起时触发

  • 全屏操作的主要方法和特性

    • requestFullScreen()：开启全屏显示，不同浏览器前要加不同的前缀，chorme:webkit,firefox:moz,ie:ms,opera:o
    • cancelFullScreen()：退出全屏显示
    • fullScreenElement：是否是全屏状态

  • FileReader

  • 拖拽接口，如果想拖拽元素，必须将该元素添加一个draggable="true"，图片和超链接默认可以拖拽，学习拖拽，主要是学习拖拽事件

    应用于被拖拽的元素

    • ondrug：整个拖拽过程都会被调用
    • ondrugstart：当拖拽开始时被调用
    • ondrugleave：当鼠标离开拖拽元素是被调用
    • ondrugend：当拖拽结束时调用

    应用于目标元素的事件

    • ondrugenter：当拖拽元素进入时调用
    • ondrugover：当停留在目标元素上时调用
    • ondrop：挡在目标元素上松开鼠标时调用
    • ondrugleave：当鼠标离开目标元素上时调用

  • 本地存储特性，如sessionStorage、localStorage

  • 网页多媒体，<video>

  • 二维、三维

  • 特效(过渡、动画)

♥sessionStorage和localStorage

sessionStorage只要不关闭浏览器，数据一直存在，在同一个窗口(页面)下数据都可以共享，以键值对的形式存储。

  • sessionStorage.setItem(key, value)：存储数据
  • sessionStorage.getItem(key)：获取数据
  • sessionStorage.removeItem(key)：删除数据
  • sessionStorage.clear(): 删除所有数据

localStorage永久有效，关闭浏览器数据依然存在，除非手动删除，可以多窗口(页面)共享，以键值对的形式存储使用

  • localStorage.setItem(key, value)：存储数据
  • localStorage.getItem(key)：获取数据
  • localStorage.removeItem(key)：删除数据
  • localStorage.clear(): 删除所有数据

复习了一下H5，记录了一些知识点，不全面还请多多包涵~

别卷了~ 洗洗睡吧 886

avatar
文章
阅读
粉丝