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

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

[初学MWA(Modern Web App）那些事-2-Basic HTML & CSS](#初学MWA(Modern Web App）那些事-2-Basic HTML & CSS)
前言
一、本节学习目标
二、HTML基础内容
- 2.1关键元素
- [2.4 Scripts](#2.4 Scripts)
[三、CSS 基础内容](#三、CSS 基础内容)
- [3.1 级联样式表-用于设置网页样式和布局](#3.1 级联样式表-用于设置网页样式和布局)
- [3.2 CSS规则语法：](#3.2 CSS规则语法：)
- [3.3 CSS 框模型](#3.3 CSS 框模型)
- [3.4 CSS 定位](#3.4 CSS 定位)
- [3.5 CSS 文本样式和颜色](#3.5 CSS 文本样式和颜色)
[四、VScode：使用*Open with Live Server*](#四、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文件的路径名 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d6b8e8f5b37b40eaabf7dfeeb71194b8.png) ## 2.2 新建文档在VSCode中输入"**！**"后，按回车键即可 ! ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ddf0353eab7840088c9649a32895a866.png) ## 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：设置元素内部的空格