【前端与HTML|青训营】

用户2208637075624
38 阅读9分钟

前言

这是我参与「第五届青训营 」笔记创作活动的第1天，在本次课堂上我们学习了前端与HTML，做此笔记。

一、本堂课重点内容

  • 前端概览

  1. 什么是前端
  2. 前端的技术栈
  3. 前端的边界
  4. 前端的关注

  • HTML

  1. HTML的简介
  2. 常用标签
  3. HTML语义化

二、详细知识点介绍

  • 前端概览

什么是前端

  • 解决GUI人机交互问题
  • 跨终端 （PC|移动浏览器、客户端|小程序、VR、AR等）
  • web技术栈

前端的技术栈

前端技术栈通常包括：HTML（内容）、CSS（样式）、JavaScript（行为）、浏览器渲染引擎、框架和库（如React，Angular，Vue.js等）、CSS预处理器（如Sass，Less）、构建工具（如Webpack，Gulp）、前端工程化工具（如Babel, ESLint等）。

前端的边界

前端的边界是指前端开发的范围，这个范围可能会因具体的项目和团队而有所不同。

  • Node.js是一个基于JavaScript的运行环境，可以用来在服务器端运行JavaScript代码。它使用V8引擎，并且提供了许多与文件系统、网络和数据库等相关的API。
  • ELECTRON 是一个框架，可以让开发者使用JavaScript、HTML和CSS来开发跨平台桌面应用程序。它是由Github开发的，并且用于构建Github Desktop和微软的Visual Studio Code等软件。
  • React Native是一个用于构建移动应用程序的框架，由Facebook开发。它使用JavaScript和React框架，可以让开发者使用相同的代码在iOS和Android上运行应用。React Native将JavaScript代码编译成原生代码，实现与原生应用类似的性能。
  • WEBGL是一个JavaScript API，可以在浏览器中渲染3D图形。它基于OpenGL ES，可以在网页上渲染高级的3D图形和动画。
  • WebAssembly(简称WASM)是一种低级的字节码，可以在网页上运行。它是一种新的技术，可以让开发者使用其他语言（如C、C++）来编写网页应用。它可以使网页应用变得更快，并且可以在网页上运行更复杂的应用。
  • WEBRTC是一种在网页浏览器上进行实时音视频通信的技术。它提供了许多API，可以进行视频会议、文件共享和语音聊天等功能。

前端边界可能会因项目和团队而异Node.js,ELECTRON,WEBGL,WEBRTC,WASM等技术可能会在前端项目中作为辅助工具使用。

前端的关注

前端开发人员通常会关注以下几个方面：

  • 用户体验：前端开发人员需要确保网页或应用程序的布局、样式和交互效果能够提供良好的用户体验。
  • 性能优化：前端开发人员需要确保网页或应用程序加载和运行的速度尽可能快，并且能够在各种设备上流畅运行。
  • 浏览器兼容性：前端开发人员需要确保网页或应用程序能够在各种浏览器上正常运行，并且能够适应不同的屏幕尺寸。
  • 安全性：前端开发人员需要确保网页或应用程序能够保护用户数据和防止安全漏洞。
  • 响应式设计：前端开发人员需要确保网页或应用程序能够在各种设备上正常显示，并且能够适应不同的屏幕尺寸。
  • 移动端优化：前端开发人员需要确保网页或应用程序能够在移动设备上正常运行，并且能够适应不同的屏幕尺寸。
  • 新技术的掌握: 前端领域技术更新换代非常快，前端开发人员需要不断学习新技术

  • HTML

HTML的简介

HTML（Hypertext Markup Language）是一种用于创建网页的标准语言。它使用标签来定义文档的结构和内容。HTML文档是由一系列标签组成的，这些标签可以用来定义文档的标题、段落、列表、链接、图像等元素。

HTML标签由尖括号包裹的关键字组成。例如，是文档的根标签，是文档的头部标签，是文档的主体标签。

HTML文档通常与CSS（Cascading Style Sheets）和JavaScript配合使用。CSS用来控制文档的样式，JavaScript用来添加交互效果。

HTML最新版本是HTML5，它添加了许多新的标签和功能，如支持多媒体元素（如音频和视频）、本地存储和地理定位等。

  • DOM树

DOM（文档对象模型）是一种对 HTML 和 XML 文档进行访问和操作的标准方式。它把整个文档看作一个树形结构，每个元素都是树上的一个节点。这种树形结构被称为DOM树。每个节点都有一些属性和方法，可以通过JavaScript来操作这些属性和方法，来改变文档的结构，样式和内容。DOM树的根节点是文档对象（document object），它包含整个文档的所有元素。每个元素都是一个节点，有自己的属性和子节点。子节点可能是元素、文本或注释。

通过遍历DOM树，可以访问文档中的任何元素，并对其进行操作。常用的遍历方法包括：getElementById，getElementsByTagName和getElementsByClassName。

使用 DOM 树，开发者可以在运行时修改文档的结构，样式和内容。这使得开发者能够创建动态网页，并使用 JavaScript 实现丰富的交互功能。

常用标签

常用的 HTML 标签有：
  • <html>: 文档的根元素，所有其它标签都在其中。
  • <head>: 文档的头部信息，包含了文档标题、元数据和链接到外部资源。
  • <title>: 文档标题，会在浏览器标签页中显示。
  • <body>: 文档的主体内容。
  • <h1> to <h6>: 标题元素，用于定义文档的标题和子标题。
  • <p>: 段落元素，用于定义文本段落。
  • <a>: 链接元素，用于定义超链接。
  • <img>: 图像元素，用于在文档中显示图像。
  • <div>: 用于定义文档的分区或部分。
  • <span>: 用于标记文本的一部分。
  • <ul>: 无序列表元素，用于定义无序列表。
  • <ol>: 有序列表元素，用于定义有序列表。
  • <li>: 列表项元素，用于定义列表中的每一项。
  • <form>: 表单元素，用于创建表单。
  • <input>: 输入字段元素，用于创建各种类型的输入字段。
  • <label>: 标签元素，用于为输入字段定义标签。
  • <select>: 下拉列表元素，用于创建下拉

HTML语义化

HTML语义化是指在编写 HTML 代码时，通过使用语义化的标签来描述文档的结构和语义。这样做的好处是：

  • 更好的可读性和可维护性。语义化的标签能够更好地描述文档的结构和语义，使代码更易于阅读和理解。
  • 更好的SEO。搜索引擎可以更好地识别语义化的标签，从而更好地抓取和理解网页内容。
  • 更好的可访问性。语义化的标签能够更好地提供额外的信息，帮助屏幕阅读器和其它辅助技术理解文档的结构和语义。

常见的语义化标签包括:

  • <header>: 页面头部,可以包含logo、网站名称、导航等
  • <nav>: 导航栏
  • <main>: 主要内容
  • <article>: 完整的独立内容,如文章,博客等
  • <section>: 相关的内容的集合,如文章的章节
  • <aside>: 页面的辅助内容,如侧边栏
  • <footer>: 页面底部

使用语义化标签能够更好地描述文档的结构和语义，使代码更易于阅读和理解，提高了网页的可访问性和SEO。

三、实践练习例子

  • 标题标签<h1> ~ <h6>

    代码
<html>
<head>
    <meta charset="utf-8">  <!-- 定义文档的字符编码-->
    <title>标题标签</title> <!-- 定义文档的标题 -->
</head>
<body>
    <h1>字体排印学</h1> <!-- 定义最大的标题 -->
    <h2>历史</h2>
    <p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
<!--	<p> 标签定义了文档的-->
    <h3>印刷体源流</h3>
    <p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。</p>
    <h2>应用</h2>
    <p>...</p>
</body>
</html>

运行结果

4ed36b3dff6e888702c0c3268ed624b.png

链表标签`

代码

<html>
<head>
    <meta charset="utf-8">  <!-- 定义文档的字符编码-->
    <title>标题标签</title> <!-- 定义文档的标题 -->
</head>
<body>
    <h1>字体排印学</h1> <!-- 定义最大的标题 -->
    <h2>历史</h2>
    <p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
<!--	<p> 标签定义了文档的-->
    <h3>印刷体源流</h3>
    <p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。</p>
    <h2>应用</h2>
    <p>...</p>
</body>
</html>

运行结果

image.png

四、课后个人总结

本节课我们学习了前端概览、HTML。首先，我们了解了前端是什么，它是指网页的客户端部分，主要负责处理浏览器和用户之间的交互。我们还了解了前端的技术栈，包括HTML、CSS、JavaScript、浏览器渲染引擎、框架和库、CSS预处理器、构建工具、前端工程化工具等。

image.png 我们还学习了前端的边界，它与后端和其它环节有着密切的联系，并且还学习了前端的关注点，包括性能优化、用户体验、可访问性、安全等。

接着我们学习了 HTML，首先了解了它的简介，是一种用来描述网页结构和语义的语言。我们还学习了一些常用标签，如<html>、<head>、<title>、<body>、<h1> ~ <h6>、<p>、<a>、<img>、<div>、<ul>、<ol>、<li>、<form>、<input>、<select>等。

最后我们学习了HTML语义化，它是指在编写 HTML 代码时，通过使用语义化的标签来描述文档的结构和语义。这样做的好处是：更好的可读性和可维护性，更好的SEO，更好的可访问性。

总之，本节课我们对前端和HTML有了更深入的了解，了解了前端的定义、技术栈、边界以及关注点。并在学习HTML时了解了常用标签的用法，以及如何使用语义化标签来描述文档的结构和语义。这些知识都是前端开发的基础，将在今后的学习中不断深入和运用。此外，我们还可以通过不断练习和实践来提高我们的前端技能。总而言之，这是一节非常有益的课程，期待继续深入学习前端知识。

avatar
文章
阅读
粉丝