Web前端 ---入门教学

简介: ​一、前言(1)什么是前端?网站、小程序、web-app(2)开发语言?html:网页显示的内容css:网页显示内容的属性JavaScript:网页显示内容的逻辑(3)编译器vscode:百度搜索vscode、直接download、眼睛闭起来next(4)简单插件的安装:侧边栏的第五个:扩展商店chinese:中文open in browser:在浏览器中打开网页生效:重启编译器(5)创建第一个网站=多个网页=多个html文件a、新建一个空白的文件夹,拖拽入vscode之中b、点击【新建文件】,输入文件名,后缀是【.html】,点击回

一、前言

(1)什么是前端?

网站、小程序、web-app

(2)开发语言?

html:网页显示的内容

css:网页显示内容的属性

JavaScript:网页显示内容的逻辑

(3)编译器

vscode:百度搜索vscode、直接download、眼睛闭起来next

(4)简单插件的安装:侧边栏的第五个:扩展商店

chinese:中文

open in browser:在浏览器中打开网页

生效:重启编译器

(5)创建第一个网站=多个网页=多个html文件

a、新建一个空白的文件夹,拖拽入vscode之中

b、点击【新建文件】,输入文件名,后缀是【.html】,点击回车

(6)快捷键

ctrl+c 、 ctrl+v :复制粘贴

ctrl+s :保存

ctrl+r :刷新

英文感叹号! :快速生成一个标准网页格式

image.gif编辑

 

二、常用html标签

HTML:超文本标记(标签)语言

格式:所有html标签都是一个矩阵

           <标签 属性1=值1 属性2=值2....>内容</标签>

(1)div:容器标签

A、作为容器分割整个网页(分割思想:开发一个网页的时候,原则是尽可能的将网页切割成我们能够解决的最小单元)

B、宽度占据网页的一整行,高度会由内容自动撑大

如果我们手动指定了div的高度,那么默认就会失效,高度为固定高度

C、写文字

(2)a:跳转标签

A、href:跳转链接

(3)img:图片标签

A、src:图片路径

三、css的编写

会写word,就会写html

A、给上标签添加属性【class选择器】,设置一个值x ,x帮我们选中了这个标签

B、找到head标签,添加style标签,在style里面书写css 【如果已经有style,不需要重复创建】

C、格式:

               选择器名{

                    属性1:值1;

            属性2:值2;

            .......

               }

D、html与css的连接:class选择器使用【点语法】

(2)常用的css属性

color:文字颜色

font-size:文字尺寸

px:像素

text-decoration:文字装饰 :下划线underline、横线line-through、无none

&nbsp; 网页的空格

height:标签高度

相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
25 0
|
2天前
|
存储 前端开发 JavaScript
WEB前端开发中如何实现大文件上传?
WEB前端开发中如何实现大文件上传?
19 3
WEB前端开发中如何实现大文件上传?
|
1天前
|
前端开发 API 云计算
探索现代Web开发中的微前端架构
【10月更文挑战第4天】在快速发展的软件开发领域,微前端架构(Micro Frontends)逐渐成为构建大型、复杂前端应用的热门选择。本文深入探讨微前端架构的概念、优势及其实现方式。微前端架构将应用分解为独立模块,每个模块可由不同团队独立开发、测试和部署,从而提高开发效率和应用的可维护性。其优势包括独立性、技术多样性、可扩展性和灵活性。实现微前端架构需定义边界、选择通信机制、构建基础框架、开发独立模块并进行集成与测试。现代Web开发中,常用方法包括使用Web Components、模块化CSS、状态管理和服务端渲染等。随着云计算和微服务架构的普及,微前端架构预计在未来几年内持续增长。
|
4天前
|
缓存 前端开发 JavaScript
前端技术趋势:探索现代Web开发的新领域
【10月更文挑战第1天】前端技术趋势:探索现代Web开发的新领域
17 4
|
4天前
|
前端开发 JavaScript API
前端开发趋势与实践:拥抱Web Components
前端开发趋势与实践:拥抱Web Components
17 4
|
4天前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
14 3
|
4天前
|
前端开发 JavaScript 安全
前端开发趋势与实践:构建现代Web应用的探索
【10月更文挑战第1天】前端开发趋势与实践:构建现代Web应用的探索
13 2
|
5天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
5天前
|
缓存 前端开发 JavaScript
构建高性能Web应用:优化前端性能的策略
构建高性能Web应用:优化前端性能的策略
|
8天前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。