初学MWA(Modern Web App）那些事-2-Basic HTML & CSS
目录
- 初学MWA(Modern Web App）那些事-2-Basic HTML & CSS
- 前言
- 一、本节学习目标
- 二、HTML基础内容
- 2.1关键元素
- 2.4 Scripts
- 三、CSS 基础内容
- 3.1 级联样式表-用于设置网页样式和布局
- 3.2 CSS规则语法：
- 3.3 CSS 框模型
- 3.4 CSS 定位
- 3.5 CSS 文本样式和颜色
- 四、VScode：使用*Open with Live Server*
- 总结
前言
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。【赠人玫瑰，手留余香】欢迎各位小伙伴关注、赞赞、留言和收藏。
