走进前端

目录


第一周前端预习

一.走进前端

二.vscode插件安装

三.认识浏览器

四.Giteet提交

一.走进前端

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

2.技术的具体细分

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

HTML表示超文本标记语言(Haper Text Markup Language),即HTML是一个包含标记的文本文件。

HTML的结构

<html><这里是开始哦>

<head><这里可以加入关键字>

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

</head><头部结束>

<body><正文开始>

这是第一次预习!

</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标签

<link rel="stylesheet" type="text/css"herf="路径“>

@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提交

 

 

 

总结

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值