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

相关文章
|
2天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
5天前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
|
5天前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
5天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
22 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
5天前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
33 0
|
5天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
30 0
|
5天前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
27 0
|
5天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
33 0
|
5天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。