课堂笔记：前端与HTML
一. 前端概述：
前端指的是网页开发的前端部分，涉及用户界面的展示和用户与系统的交互。前端技术栈包括JavaScript（行为）、CSS（样式）和HTML（内容），通过网络协议提交到服务器端。
二. 前端关注的方面：
- 人机互动：关注用户体验，提供友好的界面和交互方式。
- 功能：实现产品需求和功能要求。
- 美观：设计吸引人的页面样式和布局。
- 无障碍：确保页面对于残障人士也具有可访问性。
- 安全：保护用户数据和系统安全。
- 性能：优化页面加载速度和响应时间。
- 兼容性：确保在不同浏览器和设备上的良好兼容性。
三. 前端技术边界：
前端开发可以使用一些跨平台工具和框架来扩展其边界，例如：
-
Node.js：使前端可以使用JavaScript语言开发服务器端代码。
-
Electron：将前端技术用于构建桌面应用程序。
-
React Native：使用React框架开发移动应用。
-
WebGL：在浏览器中实现高性能的3D图形渲染。
-
WebRTC：实现浏览器之间的实时通信。
-
WebAssembly：将其他编程语言编译为Web平台上的字节码，提高性能。
四. 开发环境：
-
浏览器：IE、Chrome、Firefox、Safari等主流浏览器，用于在实际环境中测试和调试网页。
-
编辑器：VSCode、Vim、WebStorm等常用代码编辑工具，提供代码编写和调试功能。
五. HTML简介：
HTML全名为HyperText Markup Language，指的是超文本标记语言。
超文本表示不只包含纯文本，还可以包含图片、链接、表格等元素丰富内容。
HTML使用标签来表示一段内容，例如:<h1>标题</h1>表示一个级别为1的标题。
六. HTML语法：
- 标签属性推荐使用小写字母。
- 空标签可以不闭合。
- 属性值应该使用双引号包裹。
- 某些属性值可以省略。
七. HTML常用标签：
7.1 标题(从<h1>到<h6>)： 用于表示标题级别，依次减小。
7.2 列表:
- 有序列表
<ol>：使用数字或字母进行编号。
2. 无序列表<ul>：使用符号进行项目标记。
示例一：
<ul>
<li>APP</li>
<li>小程序</li>
<li>项目计划书</li>
</ul>
列表<dl>、<dt>、<dd>：用于表示复杂内容的列表结构，例如定义术语和解释之间的关系。
示例二：
<dl>
<dt>术语1</dt>
<dd>解释1</dd>
<dt>术语2</dt>
<dd>解释2</dd>
</dl>
7.3 链接 <a>：用于创建链接，最重要的属性是href，指定跳转到的地址。
7.4 媒体属性：
1. 图片<img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">：使用src属性指定图片地址。
2. 音频<audio>：使用src属性指定音频文件地址，可以通过controls属性显示播放控件。
3. 视频<video>：使用src属性指定视频文件地址，同样可以通过controls属性显示播放控件。
7.5 输入：
1. 输入框<input>：使用type属性指定输入类型，默认为文本类型。可以使用placeholder属性指定未输入时的提示文本。
7.6 文本表示标签：
1. 段落<p>：用于表示一段文本。
2. 标题<h1>到<h6>：用于表示不同级别的标题。
3. 强调<em>：用于标记需要强调的文本。
4. 加粗<strong>：用于表示需要加粗的文本。
7.7 内容划分：
1. 区块<div>：用于将一组相关元素组合在一起，并可以通过CSS进行样式控制。
2. 段落<span>：类似于<div>，但适用于更小的语义化标记。
八. 语义化：
8.1 语义化的好处：提高代码可读性、提高可维护性、有利于搜索引擎优化、提升无障碍性等
8.2 原则：传递内容，而不是样式
8.3 如何做到语义化：
1．了解标签和属性的含义：掌握HTML标签的语义和用途，以便正确选择合适的标签来表示内容。
2．思考什么标签最适合描述这个内容：根据内容的语义选择合适的HTML标签，例如使用<h1>到<h6>表示标题级别。
3．不使用可视化工具生成代码：尽量手动编写HTML代码，而不是依赖可视化编辑器或生成工具，以确保生成的代码更具语义化。
9.使用HTML：
1．开发者：开发者使用HTML来构建网页和Web应用程序。他们使用HTML定义页面的结构、内容和布局，并为页面添加样式和交互行为。
2．浏览器：浏览器解析HTML代码并将其转换为可视化的网页。浏览器负责将HTML中定义的标签和属性翻译成用户可以看到和与之交互的界面。
3．搜索引擎：搜索引擎通过解析和分析HTML页面的内容，提取关键词和信息，以便更好地理解和排名网站。语义化的HTML有助于搜索引擎优化（SEO）。
4．屏幕阅读器：屏幕阅读器是一种辅助技术，用于给盲人和视力受限的人士提供对网页内容的访问。语义化的HTML有助于屏幕阅读器准确地解读和呈现页面内容。
以上是今天的这节课的大概内容，我发现写今天的笔记挺累的（bushi）
PS: 课堂视频：点击这里
