前端与HTML | 青训营

Aenn
191 阅读8分钟

前端与HTML | 青训营

一、什么是前端

前端是指网页或应用程序中用户直接与之交互的部分，也称为前端开发或客户端开发。它主要涉及构建用户界面，使用户可以在浏览器或移动设备中与网站或应用程序进行交互。前端开发通常包括使用HTML、CSS和JavaScript等技术来创建用户界面和交互功能。

二、前应该关注哪些方面

前端开发者在设计和开发前端应用时，应该关注以下几个方面，以确保应用的质量和用户体验：

  1. 美观（Aesthetics）： 美观是指界面设计的吸引力和视觉效果。一个漂亮的界面能够吸引用户，并增加用户对应用的好感度。在设计阶段，考虑颜色、布局、图标、图片等，以创造出令人愉悦的用户界面。
  2. 功能（Functionality）： 应用的功能是前端开发的核心，确保应用能够按照预期进行各种操作和任务。前端开发人员需要确保应用的各项功能都能正确实现，并且用户能够顺利完成所需的操作。
  3. 安全（Security）： 前端安全至关重要，特别是对于涉及用户敏感信息或与后端交互的应用。防范常见的安全漏洞，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF），以及确保数据的传输和存储是加密和安全的。
  4. 兼容（Compatibility）： 应用在不同的浏览器和设备上都应该正常运行，无论是在桌面还是移动设备上。确保应用在主流浏览器（如Chrome、Firefox、Safari、Edge等）上的兼容性，以及在不同屏幕尺寸和操作系统上的良好表现。
  5. 性能（Performance）： 优化前端应用的性能对于提供快速加载和响应时间至关重要。优化文件大小、使用缓存、延迟加载图片和脚本等方法可以提高应用的性能，减少用户等待时间。
  6. 体验（User Experience）： 用户体验是前端开发的关键目标之一。确保应用的界面易于导航、操作流畅，并提供直观的用户反馈。优化用户的交互体验，使用户能够轻松地完成任务，减少用户的学习曲线。
  7. 无障碍（Accessibility）： 无障碍性是指确保应用对于所有用户，包括视觉障碍、听觉障碍和身体障碍的用户，都能够获得相同的信息和功能。使用语义化的HTML标签、提供适当的ARIA属性，以及测试屏幕阅读器和键盘导航等，以确保应用的无障碍性。

三、前端的边界

  1. 前端技术的边界： 前端技术包括HTML、CSS和JavaScript等，它们是构建网页和应用程序界面的核心技术。前端的边界意味着这些技术所能涵盖的范围，例如，HTML负责页面结构，CSS负责样式和布局，JavaScript负责交互和动态效果。
  2. 前端与后端的边界： 在Web开发中，通常有前端和后端两部分。前端负责展示数据和用户界面，而后端负责处理业务逻辑和数据存储。前端与后端之间的边界是通过API（应用程序编程接口）来连接的，前端通过API向后端发送请求，并接收后端返回的数据。
  3. 前端与设计的边界： 在开发过程中，前端开发人员与设计师密切合作，将设计图转化为实际的网页或应用程序界面。前端的边界在于将设计中的元素、样式和交互效果准确地实现到前端技术中。
  4. 前端与用户的边界： 前端是用户直接与之交互的界面，所以前端与用户之间的边界在于用户体验的质量。好的前端设计能够提供友好、响应迅速且易于使用的用户界面。

四、开发环境

1. 浏览器： 在前端开发中，浏览器是一个非常重要的工具，因为前端代码主要在浏览器中运行和呈现。不同的浏览器可能会稍有差异，因此通常需要在多个主流浏览器中进行测试，以确保在各种环境下都能正常运行。

常见的用于前端开发的浏览器有：

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge

这些浏览器通常都提供强大的开发者工具，包括元素检查、调试器、性能分析等功能，以帮助开发人员调试和优化前端代码。

2. 代码编辑器： 代码编辑器是前端开发中的核心工具，用于编写、编辑和管理前端代码文件。虽然有许多代码编辑器可供选择，但以下是一些常用的前端代码编辑器：

  • Visual Studio Code：由Microsoft开发的免费开源代码编辑器，功能强大，支持丰富的插件扩展，是前端开发者的首选之一。
  • Sublime Text：一款轻量级、快速的代码编辑器，也是许多开发者喜欢的选择。
  • Atom：由GitHub开发的免费开源代码编辑器，具有可定制性强和丰富的社区插件。
  • WebStorm：JetBrains公司开发的付费IDE，提供丰富的JavaScript和前端开发功能，适用于专业开发者。

五、HTML是什么

HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建和表示网页内容的标记语言。它是构建Web页面的基础，用于描述页面的结构和内容，使浏览器能够正确地显示文本、图像、多媒体、链接等元素，并为网页提供超链接和交互功能。

六、DOM树

DOM（Document Object Model）树是HTML文档的一种逻辑结构表示，它是由HTML文档中的各个元素（标签）、属性和文本组成的层次化树状结构。DOM树将HTML文档转换为一组节点对象，每个节点代表文档中的一个元素或文本。

DOM树的结构如下：

  • 文档节点（Document Node）： DOM树的最上层是文档节点，它代表整个HTML文档。文档节点是DOM树的根节点。
  • 元素节点（Element Node）： 元素节点代表HTML文档中的各个元素，例如<html>、<head>、<body>等。元素节点可以包含其他元素节点或文本节点，形成了树状结构。
  • 属性节点（Attribute Node）： 属性节点包含在元素节点中，代表元素的属性。例如，<a href="https://www.example.com">中的href属性就是一个属性节点。
  • 文本节点（Text Node）： 文本节点代表HTML文档中的文本内容。例如，<p>这是一个段落。</p>中的"这是一个段落。"就是一个文本节点。

DOM树的层次结构表示了HTML文档中元素之间的包含和嵌套关系。每个节点都有对应的关联信息，比如父节点、子节点和兄弟节点等。通过DOM树，浏览器能够理解HTML文档的结构和内容，并根据DOM树来正确地渲染页面，实现用户在浏览器中看到的网页效果。

通过JavaScript，可以通过DOM树来操作网页内容，例如添加、修改或删除元素，改变样式，添加事件处理等，以实现与用户的交互和动态效果。DOM树在前端开发中是非常重要的概念，开发者可以利用它来与网页的结构和内容进行交互。例如，当用户点击"点击添加元素"按钮时，JavaScript会在内容容器<div id="content">中动态地添加一个新的段落元素<p>，并设置该段落元素的文本内容为"这是动态添加的段落。每次点击按钮，都会添加一个新的段落元素，实现了与用户的交互和动态效果。

<!DOCTYPE html>
<html>
<head>
    <title>动态添加元素示例</title>
</head>
<body>
    <button id="addButton">点击添加元素</button>
    <div id="content"></div>
</body>
<script>
	// 在页面加载完成后执行以下代码
    document.addEventListener('DOMContentLoaded', function() {
        // 获取按钮元素和内容容器元素
        const addButton = document.getElementById('addButton');
        const contentDiv = document.getElementById('content');

        // 给按钮添加点击事件处理函数
        addButton.addEventListener('click', function() {
            // 创建一个新的段落元素
            const newParagraph = document.createElement('p');

            // 设置段落元素的文本内容
            newParagraph.textContent = '这是动态添加的段落。';

            // 将新的段落元素添加到内容容器中
            contentDiv.appendChild(newParagraph);
        });
    });
</script>
</html>

DOM树.png

七、HTML语法

HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。它由一系列标签（Tags）组成，每个标签由尖括号 < > 包围，用于标记文本的不同部分，并告诉浏览器如何显示这些内容。HTML一些常见语法规则如下：

  1. 元素标签： HTML文档由一系列元素标签组成，每个标签用于描述文档中的不同部分。一个元素标签通常由开始标签和结束标签组成，例如<tag>内容</tag>。开始标签包含了标签的名称，结束标签在标签名称前加上斜杠 /。
  2. 元素内容： 元素标签的内容是指标签之间的文本或其他元素。
  3. 空元素： 有些标签没有内容，这些标签称为空元素。空元素只有一个开始标签，没有结束标签。
  4. 属性： 元素标签可以拥有属性，属性提供了有关元素更多的信息。属性以键值对的形式出现在开始标签中，如<tag attribute="value">。
  5. 注释
<!DOCTYPE html> <!-- 文档类型声明 -->
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <!-- 网页内容 -->  //注释
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个简单的HTML示例。</p>
    <img src="image.jpg" alt="图片">
    <br> <!-- 换行 -->  
    <a href="https://www.example.com">访问示例网站</a>
</body>
</html>

八、语义化

1.语义化是什么：

HTML中元素、属性及属性值都拥有某些含义

开发者应该遵循语义来编写HTML：例如

有序列表用ol；无序列表用ul

lang属性表示内容所使用的语言

2.如何做到语义化：

了解每个标签和属性的含义

思考什么标签最适合描述这个内容

不使用可视化工具生成代码

3.语义化的好处：

代码的可读性

可维护性

搜索引擎优化

提升无障碍性

avatar
文章
阅读
粉丝