初学MWA(Modern Web App）那些事-2-Basic HTML & CSS

---

---

前言

MWA，即Modern Web App（现代Web应用），是指一类采用了最新Web技术和方法论构建的Web应用。这类应用旨在提供接近原生应用的用户体验，同时利用Web平台的优势，如跨平台兼容性、无需安装、实时更新等特性。
MWA的设计和开发重点在于优化性能、提高响应速度、增强用户交互，并确保应用可以在各种设备和浏览器上运行良好。
MWA的概念体现了Web开发领域的持续进步，旨在提供更高效、更灵活和更用户友好的Web应用。随着技术的发展，MWA的实现方式和最佳实践也在不断演进。

---

一、本节学习目标

• 理解HTML语法
• 理解CSS语法
• 掌握基本定位
• 掌握基本形状
• 掌握基本文本

二、HTML基础内容

2.1关键元素

：声明文档类型和html版本。 ：html文档的根元素。 ＜head＞：包含元信息（标题、字符集、到样式表的链接）。 ＜title＞：设置网页的标题（显示在浏览器选项卡中）。 ＜meta charset＞：定义文档的字符集。 ：包含用户可见的内容（标题、段落、图像）。 ＜style＞：定义CSS内容和/或外部CSS文件的路径名  ## 2.2 新建文档 在VSCode中输入“**！**”后，按回车键即可 !  ## 2.3 HTML 按钮和容器

按钮标签：＜button＞：

• 用于创建可点击按钮
• 可以使用CSS和触发器JavaScript函数进行样式设置
• 可以使用“src”属性链接外部脚本

容器CONTAINERS：用于对齐和打包页面上的元素

• 网格：用于创建复杂的二维布局
  • 允许将项目放置在行和列中
  • 提供对布局结构的精确控制
• Flexbox：用于创建一维布局（行或列）
  • 最适合较小规模的布局，如对齐导航栏中的项目、居中设置内容或在页面中创建响应组件

2.4 Scripts

脚本标签：

• 用于在HTML文档中包含JavaScript
• 可以放置在或部分
• 可以使用“src”属性链接外部脚本
  例：

三、CSS 基础内容

3.1 级联样式表-用于设置网页样式和布局

• 目的：**CSS用于设计和布局网页，使其在视觉上具有吸引力和用户友好性
• 关注点分离：**CSS将内容（HTML）与表示（CSS）分离，允许更清晰、更可维护的代码
• 关系：CSS规则应用于HTML元素以控制其外观
• **结构：**每个CSS规则由一个选择器和一个声明块组成

3.2 CSS规则语法：

• 选择器：指定规则应用于哪些HTML元素，定义要设置样式的HTML元素（层次规则）
  元素选择器：p｛｝
  类选择器：.className｛｝
  ID选择器：#idName｛｝
• 声明块：包含一个或多个用分号分隔的声明
• 声明：由属性和值组成，用冒号分隔
• 属性：定义要设置的元素的样式
  color:设置文本颜色
  font-style：设置字体的大小
  background-color：设置背景颜色
  margin：设置元素外部的间距
  padding：设置元素内部的空格
  

3.3 CSS 框模型

概念：网页上的每个元素都被分配了一个矩形范围箱式模型组件
箱式模型组件：
border：元素的边缘
content：元素的实际内容
margin：边界外的空间
padding：内容和边框之间的空格

3.4 CSS 定位

CSS启用（4）种在网页上定位项目的主要方法。
**属性：**顶部、右侧、底部和左侧
**绝对：**将元素锚定在网页上的特定X、Y位置；可以根据窗口的大小进行剪裁。
固定：元素相对于视口定位。即使页面滚动，它也会保持在屏幕上的同一位置。
**相对：**相对于HTML文档（网页）中的顺序定位。
**STICKY：**根据网页的滚动位置在“相对”和“固定”定位之间切换。行为类似于“相对”，直到达到定义的滚动位置，然后“固定”在该位置。

3.5 CSS 文本样式和颜色

文本属性：

• font-family：指定字体名称
• font size：指定字体高度
• font-weight：指定字体粗细
• 文本对齐：指定对齐方式（左、中、右）
  颜色属性
• color: 设置文本颜色
• background-color: 背景颜色、 设置元素形状的背景颜色
• Color Values：命名颜色（“蓝色”）、十六进制值、RGB值
  

四、VScode：使用Open with Live Server

创建网页（应用程序）的有效方法是使用“Open with Live Server”直接从VSCode（记得要安装Live Server插件）启动web浏览器。


Web浏览器检查窗口：

• 按F12功能键，可以打开检查窗口。
  

---

总结

以上就是今天分享的关于MWA的基础内容，主要介绍了HTML & CSS基本内容 。后续会再深入研究学习MWA。【赠人玫瑰，手留余香】欢迎各位小伙伴关注、赞赞、留言和收藏。