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

news2024/9/22 9:53:36

初学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文件的路径名 ![在这里插入图片描述](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：设置元素内部的空格

3.3 CSS 框模型

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

3.4 CSS 定位

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