1.前端与html笔记 | 青训营

芥末饭团
108 阅读5分钟

一.什么是HTML

HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。它由一系列的标签（tag）组成，每个标签都用尖括号 < > 包围，并以标签名称来标识。

HTML 标签通过指定不同的标签名称和属性来描述网页中的不同元素，如标题、段落、图像、链接等。这些标签可以向浏览器指示如何显示和解释网页内容。

HTML 中的标签通常是成对出现的，包括一个开始标签和一个结束标签，它们之间包含了特定的内容。开始标签和结束标签以及它们之间的内容称为一个 HTML 元素。

  以下是一个简单的 HTML 示例：


<!DOCTYPE html>
<html>
<head>
    <title>代码示例笔记1</title>
</head>

<body>

    <h1>欢迎访问我的网页</h1>
    <h2>第一次笔记</h2>
    <p>希望我继续坚持</p>

    <a href="https://www.csdn.net/">这是一个链接:CSDN官网</a>
    
    <pre>
    <input placeholder="请输入用户名">
    </pre>

    <pre>
    <input type="date" min="=2023-07-27">
    </pre>

    <pre>
    <textarea>Wish you good luck</textarea>
    </pre>

    <img src="D:/Desktop/aa.png" alt="图片">
</body>

</html>

在这个示例中，<!DOCTYPE html> 声明了文档类型为 HTML5，<html> 元素是根元素，定义了整个 HTML 文档的开始和结束，<head> 元素用于定义文档的头部部分，包括网页标题等信息，<body> 元素定义了文档的主体部分，包含了可见的内容，<h1>和<h2> 元素定义了标题，<p> 元素定义了一个段落，<a> 元素定义了一个链接，<textarea>用于创建一个多行文本输入框，可以让用户输入和编辑多行文本内容，<img> 元素定义了一个图像，。  

HTML 的标签和属性非常丰富，可以用于描述网页的各种元素和交互方式。开发人员可以使用 HTML 来构建网页的结构，并通过 CSS（层叠样式表）和 JavaScript（脚本语言）来进一步美化和添加交互效果。

 

二.前端开发要解决的基本问题

  1. 用户界面设计：前端开发需要关注用户界面的设计，包括界面布局、交互方式、颜色、图标等，以提供良好的用户体验。

  2. 页面响应速度：前端开发需要优化页面的加载速度和响应速度，确保用户能够快速地访问和操作页面。

  3. 浏览器兼容性：不同浏览器对前端技术的支持程度不同，前端开发需要考虑兼容不同浏览器的差异，确保页面在各种浏览器上都能正常显示和运行。

  4. 响应式设计：随着移动设备的普及，前端开发需要关注不同屏幕尺寸和分辨率下的页面显示效果，通过响应式设计使页面在各种设备上都能自适应显示。

  5. 数据交互与后端通信：前端开发需要与后端进行数据交互，并通过网络请求获取数据或提交数据。这涉及到数据格式、接口设计、数据验证等方面。

  6. 性能优化：前端开发需要优化页面的性能，包括减少HTTP请求、压缩和合并文件、使用缓存等手段来提高页面的加载速度和响应速度。  

  7. 安全性：前端开发需要考虑网页的安全性，防止恶意攻击和数据泄露，例如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等。

三.前端技术栈

前端技术栈是指一组用于前端开发的技术、工具和框架的集合，用于构建用户界面和实现交互效果。以下是常见的前端技术栈的组成部分：

  1. HTML（HyperText Markup Language）：用于定义网页的结构和内容。

  2. CSS（Cascading Style Sheets）：用于描述网页的样式和布局，控制网页的外观和风格。

  3. JavaScript：一种脚本语言，用于实现网页的交互效果、动态更新和数据处理。

  4. 前端框架：前端框架是一种基于特定的编程语言和模式，提供了封装和抽象的功能，简化了开发复杂的前端应用程序的过程。常见的前端框架包括：

    • React.js：基于组件化开发的JavaScript库，用于构建用户界面。
    • Angular：一个完整的前端开发框架，提供了数据绑定、依赖注入、组件化等功能。
    • Vue.js：一种用于构建用户界面的渐进式 JavaScript 框架，易于学习和使用。
    • Ember.js：一个用于构建复杂 Web 应用程序的框架，提供了数据流、模板和路由等功能。

  5. CSS 预处理器：CSS 预处理器是一种类似于编程语言的工具，扩展了 CSS 的功能，使得编写和管理样式更加高效和灵活。常见的 CSS 预处理器包括：

    • Sass：一种功能强大的 CSS 扩展语言，提供了变量、嵌套规则、混合等功能。
    • Less：另一种流行的 CSS 扩展语言，提供了类似的功能。

  6. 构建工具：构建工具用于自动化和优化前端开发的流程，包括代码的打包、压缩、转换等。常见的构建工具包括：

    • Webpack：一个模块打包工具，用于处理 JavaScript、CSS、图像等资源。
    • Gulp：一个基于任务的构建工具，可以定义和执行各种前端开发任务。

  7. 包管理工具：包管理工具用于管理项目的依赖，方便开发人员安装、更新和卸载前端库和工具。常见的包管理工具包括：

    • npm：Node.js 的包管理工具，用于安装和管理 JavaScript 包。
    • Yarn：Facebook 开发的另一个包管理工具，也用于安装和管理 JavaScript 包。

这些是常见的前端技术栈的组成部分，具体使用哪些技术取决于项目需求、团队偏好和开发人员的技术背景。一个完整的前端技术栈通常涉及多个技术和工具的组合，以满足开发需求并提高开发效率。

avatar
文章
阅读
粉丝