你不知道的HTML（5）学习心得｜ 青训营笔记

sRecalls
109 阅读6分钟

HTML_DTD

HTML并非图灵完备，他只是一门标记语言

图灵完备（Turing complete）是指一种计算机系统或编程语言具有与图灵机等价的计算能力。也就是说，如果一种计算机系统或编程语言是图灵完备的，那么它可以执行任何图灵机可以执行的计算任务。

标签（元素） ： 由<>包裹

文本： 不带有<> ，如果有需要进行转义，而在放在CDATA中则不需要转义

注释：HTML只有一种标准注释方式

<!-- comments -->

DTD (Document Type Defination) 用来声明文档中可以有哪些标签，每个标签语法特性有哪些，类似语言的语法定义文档

处理信息：目前没有什么大用，可以忽略

HTML全部标签分类

  • 标签分类

    文档型：

      <!DOCTYPE>
  <head>
  <body>

    闭合型

    • 闭合标签

        <p></p>

    • 空标签

        <br>
  <img>
  <input>

    换行型

    • 块级标签

        <div>
  <h1>,<h2,...<h6>

    • 行内标签

       <span>
 <a>

    H5新元素

    • 语义化标签

    • 媒体标签

       <vedio>
 <audio>
 <embed>

    • 表单标签

       <input type="data">
 <input type="color">

    • 功能标签

       <canvas>
 <progress>

文档型：必须具备的标签

闭合型：标签是否闭合

闭合：像</p>这种 就是有反斜杠的

<embed>标签是HTML中用来嵌入外部内容（如多媒体文件）到网页中的标签。通过使用<embed>标签，可以在网页中嵌入各种多媒体内容，例如音频、视频、Flash动画等。

HTML head标签

head

  • title

      标签，全局唯一

  • base

      向页面所有相对URL提供前缀
  全局唯一，不建议使用

  • meta

      通常是约定好的键值对
  例外：charset、http-equiv

  • link

      rel决定类型，href决定引入地址

  • script

      type指定MIME类型
  可内嵌代码，可外链文件

MIME类型是一种在互联网上标识文件类型的标准化方式。MIME类型是通过在HTTP头部中添加Content-Type字段来表示的。MIME类型由两个部分组成：类型(type)和子类型(subtype)，中间用斜杠分隔。例如，HTML文件的MIME类型为"text/html"，JPEG图片的MIME类型为"image/jpeg"。

功能标签 body

HTML中的body功能性标签是用来标识页面内容的主体部分的标签，其中包含了网页的主要内容。以下是一些常见的HTML body功能性标签：

  • <header>：表示页面或页面部分的页眉。
  • <nav>：表示导航链接的部分。
  • <main>：表示页面的主要内容，通常只出现一次。
  • <article>：表示独立的文章或者内容块。
  • <section>：表示文档中的节或者区块。
  • <aside>：表示页面的侧边栏内容。
  • <footer>：表示页面或页面部分的页脚。

这些标签有助于将页面内容分组和组织，使页面结构更加清晰和易于理解。此外，这些标签还可以帮助搜索引擎和其他工具更好地理解网页的结构和内容，提高网页的可访问性和SEO效果。

HTML ARIA

HTML中可以使用ARIA属性来为组件和元素提供附加的语义信息。例如，可以使用ARIA属性来表示一个按钮、一个下拉列表或者一个对话框的角色和状态。以下是一些常见的ARIA属性：

  • role：表示元素的角色或者类型。
  • aria-label：提供元素的文本标签，用于辅助技术读取。
  • aria-describedby：指向一个元素的ID，该元素包含了对当前元素的描述信息。
  • aria-haspopup：表示元素是否有一个弹出菜单或对话框。
  • aria-expanded：表示元素是否展开或折叠。

使用ARIA属性可以帮助开发人员使得Web应用程序更加可访问，从而提高用户体验和可用性。同时，使用ARIA属性还可以使得Web应用程序更容易被搜索引擎爬取和理解，提高SEO效果。

HTML5

HTML5是HTML最新的版本，它提供了许多新的功能和特性

HTML5 语义化标签

  1. 语义化标签：HTML5引入了许多新的语义化标签，如<header>、<nav>、<section>、<article>等，使得开发人员可以更好地组织和描述页面内容。 也便于seo来进行网站的整理

HTML5 表单增强

HTML5为表单提供了许多增强功能，使得Web开发人员可以更容易地创建交互式表单，并提供更好的用户体验。以下是HTML5表单增强的一些主要特性：

  1. 新的表单元素：HTML5引入了一些新的表单元素，如<datalist>、<keygen>、<output>等，可以帮助开发人员更好地处理表单数据。
  2. 表单验证：HTML5新增了一些表单验证属性和API，如required、pattern、checkValidity()等，可以帮助开发人员在客户端验证表单数据的有效性。
  3. 自动填充：HTML5的自动填充功能可以自动填充表单字段，从而提高用户填写表单的效率。
  4. 日期和时间选择器：HTML5新增了<input type="date">、<input type="time">等表单元素，可以帮助用户更方便地选择日期和时间。
  5. 拖放上传：HTML5的拖放上传功能可以允许用户将文件拖拽到表单中进行上传，提高了上传文件的便捷性和用户体验。
  6. 表单进度条：HTML5的表单进度条可以显示表单提交的进度，从而提高用户对表单提交的可见性和可控性。

HTML5 存储

HTML5提供了多种用于在浏览器端存储数据的方式，包括Cookie、Local Storage和Session Storage。

  1. Cookie：Cookie是一种在浏览器和Web服务器之间传递的小型文本文件，可以存储一些用户信息或者其他数据。可以使用JavaScript来创建、读取和删除Cookie，但是每个Cookie的大小限制为4KB左右，且每次请求都会将Cookie发送给服务器，可能会影响性能。
  2. Local Storage：Local Storage是HTML5新增的一种本地存储方式，可以在浏览器端长期存储数据，不会被清除。Local Storage可以存储较大量的数据，每个域名下最多可以存储5MB左右的数据。可以使用JavaScript的localStorage对象来读取和存储数据。
  3. Session Storage：Session Storage与Local Storage类似，但是它的数据只在当前会话窗口中有效，关闭窗口后数据就会被删除。Session Storage可以使用JavaScript的sessionStorage对象来读取和存储数据，也可以像Local Storage一样存储较大量的数据。

Web Worker

Web Worker是HTML5中的一项技术，可以在后台线程中执行JavaScript代码，从而提高Web应用程序的性能和响应速度。Web Worker可以在独立的线程中执行代码，不会阻塞主线程，从而避免了长时间的脚本执行导致页面失去响应的问题。

Web Sockets

Web Sockets是HTML5中的一种技术，可以实现基于TCP协议的双向通信，使得Web应用程序可以实时更新和推送数据。Web Sockets建立在HTTP协议之上，通过HTTP协议的握手过程建立连接，之后客户端和服务器之间可以直接进行双向通信。

Web Sockets可以使用JavaScript的WebSocket对象来创建，需要指定连接的URL和协议等参数。在Web Sockets中，客户端可以发送消息到服务器，也可以接收服务器发送的消息。服务器同样也可以发送消息到客户端，从而实现双向通信。

avatar
文章
阅读
粉丝