走进前端

Luuuuuuzhu

2024-04-14 帮助1人

第一周前端预习

一.走进前端

二.vscode插件安装

三.认识浏览器

四.Giteet提交

一.走进前端

1.前端是什么？“前端”又称“客户端开发”，通俗来讲，可以说是在浏览器或移动设备上被人所看到的地方，都可以由“前端”的人们来开发。前端的开发也有着不同的分工，包含着不同的技术，如HTML,css，JavaScript等，而下面则会进行详细介绍而目前也多用vscode来进行网页的设计与开发。

2.技术的具体细分

1）.HTML——负责网页架构

HTML表示超文本标记语言（Haper Text Markup Language），即HTML是一个包含标记的文本文件。

HTML的结构：

<title>title of page</title><标题信息>

</head><头部结束>

这是第一次预习！

</body><正文结束>

</html><文本结束>

（未用注释格式）

我们运行后即可看到如下的页面

学新通

HTML文本

文本中有标签，

如：<font></font>用于改变字体，字号和文字颜色；

<b></b>用来给文字加粗；

<u></u>用于增加下划线；

其余还有很多的标签，

如<h1></h1>表示一级标题；

<p></p>表示分段；

<br>表示换行；

<div></div>表示独立分块；

注意：<br>没有结束的>

HTML图片

<hr>用于在页面上添加横线，width和color用来控制颜色和长度

<img>用于添加图片，src用来表示相对路径与绝对路径学新通

HTML链接

<a></a>用于超链接

HTML表格

<table></table>总标签，可包含多行多列

<tr></tr>行

<td></td>列

2）css-——网页样式表与美化

CSS（Cascading Style Sheet）为层叠样式表，是一组样式设定的规则，用于控制页面的外观样式

css语法

学新通

选择器：要修饰的对象

属性名：修饰对象属性

属性值：样式的取值

学新通

css的应用方式：内部样式，行内样式，外部样式

内部样式：在页面头部利用style标签定义当前页面中选择器

行内样式：嵌入样式

外部样式：使用.css文件定义，再利用link标签或@import指令引入

link标签

@import指令导入外部样式文件

<style>

@import "路径";

@import url(路径）

</style>

css选择器

基础选择器：标签选择器，类选择器，ID选择器

复杂选择器：复合选择器，组合选择器，嵌套选择器，伪类选择器，伪元素选择器

JavaScript——负责网页行为

JavaScript包括ECMAScript，DOM，BOM

（这里只是写了一个大纲，内容还不太会/(ㄒoㄒ)/~~😟）

1.1）行内式JS

可使用单引号

2）内嵌式JS

可写到<script>标签中

3）外部JS（使用代码量较大）

2.JS基本语法

1）注释

单行注释，多行注释

2）输入输出语句

3）变量

变量初始化，特殊情况及命名规范

4）数据类型

二.vscode的安装与简单使用

前端开发vscode需要IDE（集成开发环境），目前主流有：Visual Studio Code，Sublime，Atom，WebStorm，HBuilder五个

首先呢我们可以在官网下载

学新通

安装中常见：

1）简体中文包

2）安装位置（可以选D盘吧，C盘或许会满捏）

open in brower通过编辑器直接打开默认浏览器

Live Server开启本地服务器

Auto Rename Tag自动修改

carbon-now-sh可生成代码图片

当然我们也可以从中下载字体，去寻找更多的功能~~

三.浏览器的简单介绍

学新通

1）谷歌浏览器

2）Edge浏览器

3）火狐浏览器

4）Safari浏览器

5）Opera浏览器

四.Giteet提交

总结

经过这次预习，也让我的思路更加清晰，但是也意识到了自己身上许多的不足，今后也会努力提升自己掌握更多知识。期待明天的授课~~

这篇好文章是转载于：学新通技术网

走进前端

一.走进前端

二.vscode的安装与简单使用

三.浏览器的简单介绍

四.Giteet提交

总结

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开