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:标签高度

相关文章
|
3月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
415 108
|
3月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
457 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
5月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
72 2
|
5月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
174 1
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
9月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
658 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
9月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
273 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
246 2
Web应用上云经典架构实践教学
|
11月前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
648 7
Spring Boot 入门:简化 Java Web 开发的强大工具
|
12月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
260 6