《前端与HTML》笔记 ｜ 青训营

你在江南以南
71 阅读8分钟

一. 前端

前端是指解决GUI（Graphical User Interface）的人机交互问题的领域。无论是在个人电脑上还是手机上，无论是应用程序还是小程序，甚至在虚拟现实（VR）中，前端工程师使用Web技术来解决多端交互问题。

二. 前端技术栈

前端技术栈主要由三个基本技术组成：

  1. HTML（Hypertext Markup Language）：负责定义页面的结构和内容，是Web页面的基础。
  2. CSS（Cascading Style Sheets）：负责设置页面的样式，如布局、颜色、字体等，用于美化网页。
  3. JS（JavaScript）：负责定义网页的行为，实现与用户的交互逻辑，使页面具有动态性。

这三者都在浏览器中运行，浏览器通过HTTP协议与服务器通信，从而将网页内容呈现给用户。

三. 前端关注方面

  1. 产品功能：了解产品有哪些功能，解决什么问题，能否满足用户需求。
  2. 界面美观：设计出美观、直观的用户界面，以提供良好的用户体验。
  3. 无障碍性：确保特殊需求用户（如视力障碍者）也能正常使用网页，提供无障碍的使用体验。
  4. 数据安全：保证用户数据的安全，采取必要的措施防止信息泄露和攻击。
  5. 性能优化：确保网页加载速度快，动画流畅，提升用户体验。
  6. 跨平台兼容：要确保做出的网页在各大平台上都能正常运行和展示。

前端在用户对产品的直观感受方面起着至关重要的作用。为了做出优秀的产品，前端工程师应该不断学习各种相关领域的知识。

四. 前端的边界

随着技术的不断发展，前端的应用范围已经不再局限于制作传统的Web网页。现在的前端工程师可以在以下领域应用前端技术：

  1. 使用Node.js构建服务器应用：前端技术也可以用于后端开发，利用Node.js可以构建服务器端应用。
  2. 使用Electron开发客户端应用：Electron是一个跨平台的桌面应用开发框架，允许使用前端技术开发原生客户端应用程序。
  3. 使用WebRTC进行P2P传输：WebRTC是一种用于实时音视频通信的Web技术，可以在浏览器中实现点对点（P2P）传输。
  4. 使用WebGL开发3D游戏：WebGL是基于OpenGL的Web图形库，可用于在浏览器中开发3D游戏和图形应用。

前端作为互联网行业中发展迅速的领域，技术更新迭代速度非常快。只有不断学习和跟上时代的发展，前端工程师才能保持竞争力。

五. 开发环境

前端开发需要使用多种工具和环境来进行开发和调试：

  1. 浏览器：主流浏览器如Chrome、Firefox、Safari等都可以用于调试和预览开发的网页。
  2. 编辑器：常用的前端代码编辑器包括Visual Studio Code、Vim、WebStorm等，它们提供代码高亮、代码补全等功能，提高开发效率。

六. HTML简介

HTML全名为超文本标记语言（Hypertext Markup Language），它不仅包含文本内容，还可以包括图片、链接、表格等更丰富的元素。

HTML使用标签来表示不同的内容，例如使用<h1>标签表示标题，我们还可以在标签上添加属性，例如<img src="photo.png">，其中src为属性名，photo.png为属性值。

HTML的第一行通常为<!doctype html>，用于标识页面的HTML版本。HTML的根标签是<html>，所有元素都需要包含在这个标签中。<html>标签内部通常包含<head>和<body>两个标签，其中<head>用于存放各类元数据，<body>用于存放向用户展示的内容。

七. HTML语法

在编写HTML时，有一些常用的语法规则需要遵守：

  1. 标签属性推荐小写：HTML中的标签和属性推荐使用小写字母，虽然对于浏览器来说不区分大小写，但使用小写有助于代码的可读性和一致性。
  2. 空标签可以不闭合：有一些HTML标签是空标签，如<br>、<hr>等，它们不需要闭合。
  3. 属性值使用双引号包裹：在标签的属性中，属性值通常用双引号括起来，例如<img src="photo.png">。
  4. 某些属性值可以忽略：一些属性值可以省略，例如required、readonly等，具体取决于实际需求。 八. HTML标签

8.1 标题

HTML提供了六个级别的标题，分别是<h1>到<h6>，标题级别由大到小逐渐减小，其中<h1>表示最高级的标题。

示例：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<!-- 依次类推 -->

8.2 列表

HTML提供了有序列表和无序列表两种类型。

有序列表使用<ol>标签，无序列表使用<ul>标签，它们的子元素都是列表项，使用<li>标签表示。

示例：

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
</ul>

<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
  <li>有序列表项3</li>
</ol>

另外还有一种定义列表，使用<dl>标签，其中<dt>代表父类，<dd>代表子类。

示例：

<dl>
  <dt>水果</dt>
  <dd>苹果</dd>
  <dd>鸭梨</dd>
  <dt>蔬菜</dt>
  <dd>西蓝花</dd>
  <dd>番茄酱</dd>
</dl>

浏览器中展示结果如下：

水果

  • 苹果
  • 鸭梨

蔬菜

  • 西蓝花
  • 番茄酱

8.3 链接

链接是连接到其他页面或资源的元素。在HTML中，使用<a>标签来创建链接，其中最重要的属性是href，用于指定链接跳转到的地址。

示例：

<a href="https://baidu.com" target="_blank">百度</a>

target="_blank"表示在点击链接时会在新的标签页中打开链接，而不会覆盖当前页面。

8.4 媒体属性

HTML中可以嵌入多媒体内容，常用的媒体标签有：

  • <img>：用于显示图片，通过src属性指定图片的路径。
  • <audio>：用于嵌入音频文件，通过src属性指定音频文件的路径，可以添加controls属性让浏览器显示音频播放控件。
  • <video>：用于嵌入视频文件，通过src属性指定视频文件的路径，同样可以添加controls属性显示视频播放控件。

示例：

<img src="photo.png" alt="图片">

<audio src="music.mp3" controls>
  您的浏览器不支持音频标签
</audio>

<video src="video.mp4" controls>
  您的浏览器不支持视频标签
</video>

8.5 输入

HTML提供了多种输入标签，用于与用户交互，常用的输入类型有：

  • <input>：用于接收用户输入，可以通过type属性指定输入类型，默认为文本输入框。
  • <textarea>：用于接收多行文本输入。
  • <select>：用于创建下拉选择框，可以包含多个<option>标签作为选项。

示例：

<input type="text" placeholder="请输入文本">

<textarea rows="4" cols="50" placeholder="请输入多行文本"></textarea>

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

另外，如果想让输入框有关键词提示，可以使用list属性，配合<datalist>元素来实现。

示例：

<input list="options">
<datalist id="options">
  <option value="选项1">
  <option value="选项2">
  <option value="选项3">
</datalist>

8.6 文本表示标签

HTML提供了一些标签用于特殊文本的表示，如引用、代码、加粗、斜体等。

  • <blockquote>：表示长引用，使用cite属性指定引用源。
  • <q>：表示短引用，常用于引用内联的短语或句子。
  • <code>：表示代码引用，通常用于展示计算机代码。
  • <pre>：表示预格式化文本，通常用于展示多行代码或保留空格格式。
  • <strong>：用于加粗文本，表示语气的强调。
  • <em>：用于斜体文本，用于重读和强调。

示例：

<blockquote cite="https://example.com">
  这是一段长引用的内容
</blockquote>

<p><q>这是一段短引用的内容</q></p>

<code>console.log("Hello, world!");</code>

<pre>
  function add(a, b) {
    return a + b;
  }
</pre>

<p><strong>这是加粗的文本</strong></p>

<p><em>这是斜体的文本</em></p>

九. 语义化

语义化是指在编写HTML时，使用恰当的标签和属性来表达文档结构和内容的含义，从而提高网页的可读性、可维护性、可访问性和搜索引擎优化。

9.1 语义化的好处

  • 提高代码可读性：使用语义化的标签和属性，使代码更易于阅读和理解。
  • 提高可维护性：语义化的代码更具有结构化，便于日后的维护和修改。
  • 有利于搜索引擎优化：搜索引擎更容易理解和索引语义化的内容，提高网站的搜索排名。
  • 提升无障碍性：语义化的标签有助于屏幕阅读器等辅助技术理解网页内容，提供更好的无障碍体验。

9.2 语义化的原则

  • 传递内容，而不是样式：HTML应该关注内容的结构和含义，样式应该由CSS来控制。

9.3 如何做到语义化？

  • 了解标签和属性的含义：学习HTML标准中各个标签和属性的含义和用途。
  • 思考什么标签最适合描述内容：根据内容的含义选择合适的标签，避免滥用<div>等无语义标签。
  • 不使用可视化工具生成代码：避免使用可视化工具自动生成的HTML代码，手动编写更容易实现语义化。

十. 使用HTML

HTML是Web开发中最基础的技术之一，几乎所有的网站和Web应用都使用HTML来构建页面结构和内容。无论是大型互联网公司、个人博客，还是电子商务平台，都离不开HTML。

总结：

前端是解决GUI人机交互问题的领域，使用HTML、CSS、JS等技术构建多端交互界面。前端技术栈包括HTML、CSS和JS，通过浏览器与服务器通信。

前端开发需要关注产品功能、界面美观、无障碍性、数据安全、性能优化和跨平台兼容等方面。了解语义化HTML的好处和原则，用途广泛的HTML标签和属性可以划分内容、表示文本和媒体内容。

HTML作为Web开发的基础，被各行各业广泛使用，保持不断学习和适应技术更新是前端工程师的重要任务。

avatar
文章
阅读
粉丝