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
  • 三、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.****img.cn/direct/d6b8e8f5b37b40eaabf7dfeeb71194b8.png) ## 2.2 新建文档 在VSCode中输入“**!**”后,按回车键即可 ! ![在这里插入图片描述](https://i-blog.****img.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:**根据网页的滚动位置在“相对”和“固定”定位之间切换。行为类似于“相对”,直到达到定义的滚动位置,然后“固定”在该位置。
在这里插入图片描述

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。【赠人玫瑰,手留余香】欢迎各位小伙伴关注、赞赞、留言和收藏。

上一篇:深入剖析 Scikit-learn 中的 LogisticRegression:参数调优指南


下一篇:CV11_模型部署pytorch转ONNX