前端与HTML | 青训营

阿菇kinoko
71 阅读3分钟

第二课 前端与HTML 笔记

本文相关信息
Author: ma5hr00m
Date: 2023-07-27

前端

前端工程师就使用 Web 技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈

  • JavaScript（行为）
  • CSS（样式）
  • HTML（内容）

前端应该关注哪些方向

  • 功能
  • 美观
  • 无障碍（适用于各种人群）
  • 安全
  • 性能
  • 兼容性（跨端）
  • 体验

前端的边界

前端发展速度飞快，技术更新迭代频繁，需要有持续学习的能力。

  • node.js 开发服务端
  • ……

开发环境

HTML

什么是 HTML

全称为HyperText Markup Language，是一种用于创建网页的标记语言。它被用来结构化网页内容并定义其语义。HTML 使用标记（markup）来描述文档的结构和呈现方式。通过使用不同的 HTML 元素和标签，可以创建标题、段落、列表、链接、图像等各种内容。

以下为一个简单的使用案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>
            一级标题
        </h1>
    </body>
</html>

解析为 DOM 树。

当浏览器加载 HTML 文档时，它会按照 HTML 的语法规则解析文档，并构建出对应的 DOM 树。解析过程包括识别 HTML 标记和属性，并将它们转换为 DOM 节点。

每个 HTML 元素都会被表示为 DOM 树中的一个元素节点（Element Node），它们的层次关系和嵌套关系会被准确地反映在 DOM 树中。例如，`HTML 文档中的 <body> 元素是根元素，它在 DOM 树中对应着一个文档节点（Document Node），而 <body> 元素下的其他元素将作为子节点嵌套在文档节点下。

DOM 树的节点不仅包括元素节点，还包括文本节点、属性节点、注释节点等。文本节点表示 HTML 元素中的文本内容，属性节点表示元素的属性，注释节点表示文档中的注释内容。这些节点在 DOM 树中的位置和层级关系都与它们在 HTML 文档中的位置相对应。

通过 DOM 树，开发者可以使用 JavaScript 或其他编程语言来访问和操作网页的内容和结构。通过 DOM API（Application Programming Interface），我们可以通过选择特定的节点、修改节点的属性、添加、删除和移动节点等操作，实现对网页的动态更新和交互。

语法

  • 标签和属性不区分大小写，推荐小写统一
  • 空标签可以不闭合，如 <img>
  • 属性只推荐使用双引号包裹
  • 某些属性值可以忽略，如 required

常用标签

  • 六级标题

  • 三种列表

    • 有序列表：<ol> & <li>
    • 无序列表：<ul> & <li>
    • 定义列表：<dl> & <dt><dd>

  • 链接

    • target="_blank" 新标签页打开链接

  • 多媒体

    • 图片
    • 视频
    • 音频

  • 输入

    • placeholder=""：默认显示文本值
    • range：滑块
    • number：数字选择
    • date：日历
    • <textarea>：文本框
    • checkbox：复选框
    • radio：单选框
    • <select><option>：下拉列表

  • 文本

    • <blockquote>：长引用
    • <cite>：短引用，常用于作品名称或章节
    • <q>：短引用
    • <code>：代码
    • <pre><code>多行代码
    • <strong> | <em>：粗体

  • 内容划分

    • <header>
    • <nav>
    • <main>
    • <article>
    • <aside>
    • <footer>

语义化

元素、属性、属性值都有着某些含义。

开发者应遵循语义编写 HTML。

HTML 是为了传达内容，而不是为了样式。

avatar
文章
阅读
粉丝