码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • HTML5教程


    HTML5读书笔记

    jack

    2023.10.24

    来源:HTML5 Canvas | 菜鸟教程

    常识:

    HTML5 是下一代 HTML 标准。

    HTML , HTML 4.01的上一个版本诞生于 1999 年

    用于声明下面代码是H5;

    浏览器支持

    你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。

    现代的浏览器都支持 HTML5

    HTML5

    HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

    使用 JavaScript 来绘制图像

    使用 style 属性来添加边框:

    Canvas 坐标:左上角是00;

    可以画线段,圆,字符,渐变,图像,

    HTML5 SVG

    SVG 定义为可缩放矢量图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。

    把 SVG 直接嵌入 HTML 页面。

    SVG 是一种使用 XML 描述 2D 图形的语言。

    Canvas 通过 JavaScript 来绘制 2D 图形。

    HTML5 MathML

    HTML5 可以在文档中使用 MathML 元素,对应的标签是 ... 。

    MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。

    HTML5 拖放(Drag 和 Drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分。

    HTML5 Geolocation(地理定位)

    HTML5 Geolocation API 用于获得用户的地理位置。

    HTML5 Video(视频)

    HTML5 规定了一种通过 video 元素来包含视频的标准方法。

    HTML5 和 元素同样拥有方法、属性和事件。

    和 元素的方法、属性和事件可以使用JavaScript进行控制.

    HTML5 Audio(音频)

    HTML5 提供了播放音频文件的标准。

    HTML5 规定了在网页上嵌入音频元素的标准,即使用 元素。

    HTML5 新的 Input 类型

    HTML5 表单元素

    : 元素规定输入域的选项列表。

    : 元素的作用是提供一种验证用户的可靠方法。 元素的作用是提供一种验证用户的可靠方法。

    标签规定用于表单的密钥对生成器字段。

    当提交表单时,会生成两个键,一个是私钥,一个公钥。

    私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

    元素用于不同类型的输出,比如计算或脚本输出:

    HTML5 新的表单属性

    HTML5 的

    和 标签添加了几个新属性.

    新属性:

    autocomplete: autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

    novalidate: novalidate 是一个布尔(true 或 false)属性。

    novalidate 属性是 HTML 表单元素的一个布尔属性,用于设置浏览器不对表单进行验证。

    新属性:

    autocomplete

    autofocus: autofocus 属性是一个布尔属性。

    autofocus 属性规定在页面加载时,域自动地获得焦点。

    form: form 属性规定输入域所属的一个或多个表单。

    formaction: The formaction 属性用于描述表单提交的URL地址.

    formenctype: formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

    formmethod: formmethod 属性定义了表单提交的方式。

    formnovalidate

    formtarget

    height 与 width

    list: list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

    min 与 max

    multiple: multiple 属性是一个 boolean 属性.

    pattern (regexp): pattern 属性描述了一个正则表达式用于验证 元素的值。

    placeholder: placeholder 属性提供一种提示(hint),描述输入域所期待的值。

    required: required 属性是一个 boolean 属性.

    step: step 属性为输入域规定合法的数字间隔。

    HTML5 语义元素

    语义= 意义

    语义元素 = 有意义的元素

    无语义 元素实例:

    和 - 无需考虑内容.

    语义元素实例: ,

    , and - 清楚的定义了它的内容.

    标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    标签定义独立的内容。.

    标签定义导航链接的部分。

    标签定义页面主区域内容之外的内容(比如侧边栏)。

    元素描述了文档的头部区域

    元素描述了文档的底部区域.

    标签规定独立的流内容(图像、图表、照片、代码等等)。

    HTML5 Web 存储

    HTML5 web 存储,一个比 cookie 更好的本地存储方式。

    客户端存储数据的两个对象为:

    localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

    sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

    HTML5 Web SQL 数据库

    openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

    transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

    executeSql:这个方法用于执行实际的 SQL 查询。

    HTML5 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

    指定该页面需要进行缓存操作。

    ...

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:

    CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

    NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

    FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

    一旦应用被缓存,它就会保持缓存直到发生下列情况:

    用户清空浏览器缓存

    manifest 文件被修改(参阅下面的提示)

    由程序来更新应用缓存

    HTML5 Web Workers

    web worker 是运行在后台的 JavaScript,不会影响页面的性能。

    HTML5 服务器发送事件(Server-Sent Events)

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

    Server-Sent 事件 - 单向消息传递

    Server-Sent 事件指的是网页自动获取来自服务器的更新。

    EventSource 对象用于接收服务器发送事件通知:

    HTML5 WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

  • 相关阅读:
    .NET如何快速比较两个byte数组是否相等
    40 个 SpringBoot 常用注解:让生产力爆表!
    机器翻译目前广泛应用于文档翻译以及硬件翻译
    Java 开发工程师 面试题(一)
    风口浪尖,不想失业?你得学会接口自动化测试才能站稳脚步...
    shell脚本
    opengl制作天空盒
    rman异机恢复的异常处理
    Web渗透_扫描工具Burpsuite
    关于网络协议的若干问题(五)
  • 原文地址:https://blog.csdn.net/BTUJACK/article/details/134049964
    • 最新文章
    • 攻防演习之三天拿下官网站群
      数据安全治理学习——前期安全规划和安全管理体系建设
      企业安全 | 企业内一次钓鱼演练准备过程
      内网渗透测试 | Kerberos协议及其部分攻击手法
      0day的产生 | 不懂代码的"代码审计"
      安装scrcpy-client模块av模块异常,环境问题解决方案
      leetcode hot100【LeetCode 279. 完全平方数】java实现
      OpenWrt下安装Mosquitto
      AnatoMask论文汇总
      【AI日记】24.11.01 LangChain、openai api和github copilot
    • 热门文章
    • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
      奉劝各位学弟学妹们,该打造你的技术影响力了!
      五年了,我在 CSDN 的两个一百万。
      Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
      面试官都震惊,你这网络基础可以啊!
      你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
      心情不好的时候,用 Python 画棵樱花树送给自己吧
      通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
      13 万字 C 语言从入门到精通保姆级教程2021 年版
      10行代码集2000张美女图,Python爬虫120例,再上征途
    Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
    正则表达式工具 cron表达式工具 密码生成工具

    京公网安备 11010502049817号