前端学习记录 1：HTML 基础知识点归纳

叁歲伎倆 2023-02-17 06:18 2阅读 0赞

HTML 的全称为 HyperText Markup Language，即超文本标记语言，最初是用于描述文档而设计。从定义可以看出 HTML 的一些组成部分

元素是 HTML 的基本要素，元素有两种写法，一种是带内容的，一种是不带内容的

属性则为元素提供了更多的相关信息

**[web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）][web]**

元素可分为块级元素和行内元素。

块级元素 div 示例

内联元素 span 示例

## 语义 ##

HTML 的每个元素或者属性都有特定的含义，我们称之为语义。例如，ol 元素代表有序列表，lang 属性则代表内容的语言。

这些定义好的元素，可以让文档在不同的上下文中（比如浏览器和搜索引擎处理文档时）呈现出一致性。同时，也为文档处理器提供一些额外的信息，这对于一些辅助设备而言 (比如电子阅读器）是非常有用的。

## 具有良好语义的文档 ##

<header>
      <img src="logo.png" alt="Favorite books logo">
    </header>
    <main>
      <h1>Favorite books</h1>
      <p>These are a few of my favorite books.</p>
      <h2>The Belgariad</h2>
      <p>Five books by David and Leigh Eddings.</p>
      <h2>The Hitchhiker’s Guide to the Galaxy</h2>
      <p>A trilogy of five books by Douglas Adams.</p>
    </main>

使用类可以实现同样的展示效果，但是对于文档处理器而言，将捕获不到任何有关语义的信息。

<div class="header">
       <img src="logo.png" alt="Favorite books logo">
    </div>
    <div class="main">
       <span class="largeHeading">Favorite books</span>
       <p>These are a few of my favorite books.</p>
       <span class="smallHeading">The Belgariad</span>
       <p>Five books by David and Leigh Eddings.</p>
       <span class="smallHeading">The Hitchhiker’s Guide to the Galaxy</span>
       <p>A trilogy of five books by Douglas Adams.</p>
    </div>

## 扩展机制 ##

此外，HTML 还存在大量的扩展机制，可以安全的添加语义

使用 class 属性来扩展元素

使用 data-\*= 属性来包含数据，这些数据不会被浏览器处理，同时可被脚本处理

使用 meta 标签来扩展页面的元数据

使用 rel='' 指定当前文档与被链接文档的关系

使用 <script type=""> 来嵌入原始的数据，以便被服务端脚本进一步处理

使用 JavaScript 原型来扩展 Api

## 文档对象 ##

每个 HTML 文档都可以对应一个 Document 对象。

可以通过 document 来访问该对象

console.log(window.document);
    console.log(document);
    console.log(document.head)
    console.log(document.body)

## 访问文档的一些元数据 ##

document.referrer // 返回载入当前文档的文档的 URL
    document.referrer // 设置或返回与当前文档有关的所有 cookie
    document.domain // 返回当前文档的域
    ducument.lastModified // 返回文档被最后修改的日期和时间
    document.title // 返回当前文档的标题
    document.url // 返回当前文档的 URL

## 无障碍网页应用技术 ##

HTML 5 的可访问性还没有达到残疾人士可以进行无障碍阅读的地步。因此，WAI-ARIA，Web Accessibility Initiative-Accessible Rich Internet Applications，致力于解决残疾用户的可访问性功能。

根据 ARIA 的规范描述，可在 HTML 元素中使用 ARIA role 属性以及 aria-\* 属性。

例如，视觉上不显示用户名三个字，但是读屏软件会在焦点落到该输入框时读出

[web]: https://blog.csdn.net/lin123_00/article/details/105777795