前情提要
今天是字节青训营打卡的第三天，本文主要围绕 什么是前端，前端包含的技术栈，前端应该关注哪些方面， html的语义化 这四个部分进行阐述
什么是前端
前端（Front-end）在软件开发领域中通常指的是用户可以直接看到并与之交互的界面部分。在网站或应用程序的上下文中，前端是指运行在用户设备上的代码，这些代码负责呈现内容、处理用户输入以及与后端进行通信。
前端包含的技术栈
1. 基础技术
- HTML (HyperText Markup Language) ：用于构建网页结构的基础语言。
- CSS (Cascading Style Sheets) ：用于描述HTML元素如何显示的样式表。
- JavaScript：一种编程语言，可以为网站添加动态功能，如响应用户操作、更新网页内容等。
2. 前端框架和库
- React.js：由Facebook维护的一个用于构建用户界面的JavaScript库。
- Vue.js：一个轻量级的、易于学习的前端框架。
- Angular：由Google维护的全功能前端框架。
- Ember.js：一个用于创建可扩展的单页Web应用的框架。
- Svelte：一个轻量级的框架，编译时将框架逻辑转换为高效的JavaScript代码。
3. 移动开发
- React Native：一个用于开发原生移动应用的框架，使用React编写。
- Ionic：一个用于开发混合移动应用的框架，支持Angular、React和Vue。
- Flutter：一个由Google开发的UI工具包，用于构建跨平台移动应用。
前端应该关注哪些方面
设计方面
- 功能：确保应用或网站能够满足业务需求，实现预期的功能。
- 美观：页面设计应具有吸引力，符合目标用户的审美标准。
- 无障碍：设计应考虑所有用户群体的需求，特别是残障人士，确保所有人都能方便地使用。
- 安全：采取措施防止各种安全漏洞，保护用户数据的安全。
- 性能：优化页面加载速度和响应速度，确保流畅的用户体验。
- 兼容性：确保应用或网站在多种设备和浏览器上都能正常工作。
- 用户体验：这是非常重要的一个方面，包括但不限于导航直观、交互自然、反馈及时等。
前端的边界
前端不仅仅是关于页面的视觉表现，还涉及与后端的交互、用户体验的提升、性能优化等多个方面。前端技术栈广泛，涵盖从静态页面到复杂Web应用的各种技术：
- Node.js：使JavaScript成为服务器端语言，扩展了前端开发的边界。
- Electron：允许使用Web技术（HTML, CSS, JavaScript）开发跨平台桌面应用。
- React Native：利用React框架开发原生移动应用。
- Web RTC：实现实时通信，支持音视频通话等功能。
- WebGL：在Web上实现3D图形渲染。
- Web Assembly：允许在Web上执行接近原生速度的代码。
html的语义化
html基本语法
基础元素
-
标题：
<h1>到<h6>，其中<h1>是最高级别的标题。 -
列表：
- 有序列表：
<ol>，项目前带有编号。 - 无序列表：
<ul>，项目前带有圆点。 - 定义列表：
<dl>，由术语<dt>和定义<dd>组成。<dt>和<dd>是多对多关系，可以一个<dt>对多个<dd>，也可以一个<dd>对多个<dt>。
- 有序列表：
链接
- 链接：
<a href="链接URL">链接的文字描述</a>，用于创建超链接。
多媒体渲染
- 图片：
<img src="图片路径" alt="如果图片加载失败，显示的文字描述" /> - 视频：
<video src="视频路径" controls></video> - 音频：
<audio src="音频路径" controls></audio>
表单类控件
- 文本输入：
<input type="text" placeholder="提示信息" /> - 滑动条：
<input type="range" /> - 数字输入：
<input type="number" min="最小值" max="最大值" /> - 日期选择：
<input type="date" min="最小日期" max="最大日期" /> - 复选框：
<input type="checkbox" /> - 单选按钮：
<input type="radio" /> - 下拉列表：
<select><option>选项</option></select> - 数据列表：
<input list="列表ID" /> <datalist id="列表ID"><option>选项</option></datalist>
引用和强调
-
块级引用：
<blockquote cite="引用来源URL"></blockquote> -
短引用：
<cite>引用内容</cite>，通常用于书籍、文章标题。 -
行内引用：
<q>引用内容</q>，自动添加双引号。 -
代码引用：
<code>代码内容</code>，用于展示代码片段。 -
多行代码：
<pre><code>多行代码内容</code></pre>，保留代码格式。 -
强调：
- 强调：
<strong>强调内容</strong>，显示为粗体。 - 语气强调：
<em>语气强调内容</em>，显示为斜体。
- 强调：
表格标签
- 表格：
<table> - 表格的行：
<tr> - 表格的列：
<td> - 表头：
<th> - 表格的标题：
<caption> - 表格的主体：
<tbody> - 表格的头部：
<thead>
<table>
<caption>示例表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>设计师</td>
</tr>
</tbody>
</table>
什么是语义化以及为啥要语义化
HTML语义化是指在编写HTML时，使用正确的标签来表达内容的意义，而不是仅仅为了视觉效果。这样做有许多好处，不仅提升了代码的可读性和可维护性，还能带来更好的用户体验和搜索引擎优化。
1. 改善可读性和可维护性
- 可读性：代码更清晰，容易理解。
- 可维护性：修改和扩展页面更方便。
2. 提升SEO（搜索引擎优化）
- 搜索引擎友好：更容易被搜索引擎理解和索引。
- 元数据：提供更多结构信息，有助于提高排名。
3. 增强可访问性
- 辅助技术：屏幕阅读器等辅助工具更容易解析内容。
- 键盘导航：更好的键盘可访问性。
4. 改善用户体验
- 一致的体验：用户更容易理解页面结构和功能。
- 默认样式：减少CSS工作量，页面在无样式情况下也能正常显示。
5. 促进代码重用
- 模块化：更容易重用和组合组件。
- 组件化：支持现代前端框架的组件化开发。
6. 减少CSS和JavaScript的复杂性
- 减少CSS工作量：语义化标签有默认样式。
- 减少JavaScript工作量：语义化标签有内置行为。
7. 未来的兼容性和扩展性
- 向前兼容：更容易与未来标准和技术兼容。
- 扩展性：更容易扩展和升级页面。
