打开方式 直接把文件(要写代码的文件)拖拽到vscode中 点击--文件菜单--打开文件 点击--文件菜单--打开文件夹 如果要打开多个文件夹在vscode中,直接把多个文件夹分别拖拽带vscode中即可(会打开多个vcsode) 如果要打开多个文件在vscode中,直接把多个文件分别拖拽带vscode中即可 (只会打开一个vcsode) 2.新建文件、文件夹 1.在vscode中创建文件、文件夹 选中文件或者文件夹要建立的文件(大白话:我新建的文件要建在谁得里面) 2.在文件资源管理器中新建文件、文件夹 直接在桌面打开你的文件,直接在桌面新建文件、文件夹 或者在vscode中选中你要新建文件的文件夹,右击,选--在文件资源管理器中显示--点击选中的文件夹进去,进行新建文件或新建文件夹 如果文件或者文件夹建错位置了,点住你的文件进行拖拽,拖拽到正确的位置即可 3.文件名构成 文件名+后缀名 后缀名:文件的格式 html文件: 文件名字+.html 1-复习.html mp3文件: 文件名+.mp3 稻香.mp3 mp4文件: 文件名+.mp4 奇迹-笨小孩.mp4 记事本文件: 文件名+.txt 账单.txt 图片文件: 文件名+.jpg png gif webp css文件: 文件名+.css js文件: 文件名+.js
2、html结构
打开html结构的两种方式
1.输入英文状态下的! 回车
2.输入html:5 回车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
网页的标题
有助于打开多个页面的时候,快速辨别页面
也可以作为书签名称
怎么打开书签
浏览器的右上角有...,点击进去,找到书签即可
-->
<title>Document</title>
</head>
<body>
网页的主体内容,网页中所有的内容都是写在body中
</body>
</html>
3、html介绍
1. html的注释
html的注释 ctrl+/
对代码起解释说明作用
不会出现在网页中
注意: 注释里面不能套注释
错误语法:
<!--
<!-- -->
-->
2. 前端的三个组成部分
1. html 超文本标记语言 结构部分 刚出生的小鸟
2. css 层叠/级联样式表 表现层 长出五颜六色的羽毛
3. js 脚本语言 行为层 具有飞行能力 用户与浏览器的交互
3. 浏览器的开发者模式
快捷键 F12
在浏览器页面右击--检查
4. 查看网页源代码
在浏览器页面右击--查看网页源代码
5. 标签分为单标签和双标签
单标签:只有开始标签 只有一个标签 例如: <meta charset="UTF-8">
也可以写成:<meta charset="UTF-8" />
双标签:开始和结束标签 有两个标签 例如: <title></title>
<title> 开始标签
</title> 结束标签 在标签前加一个/
内容写在开始标签和结束标签中间
6. 兄弟关系 -- 并列关系
head标签与body标签
嵌套关系 -- 父子关系
html标签与head标签
html标签是父元素
head标签 是子元素
7.div标签
双标签
块级标签
可以嵌套(包着)任何标签
此时:div1的父元素是body标签
目前大家随意用div标签
特点:
1.宽度在没有设置的情况下,默认跟父元素的宽度一样
2.高度在没有设置的情况下,高度由内容撑开
3.垂直布局(从上往下),独立成行(独占一行)
可以用来划分页面区块,里面可以嵌套任何标签
搭建网页结构的基本标签
<!-- div并列关系 -->
<!-- 大哥跟二哥是兄弟关系---并列关系 -->
<div>大哥</div>
<div>二哥</div>
<!-- 嵌套关系 得包着 -->
<!-- 父亲与儿子和女儿是嵌套关系 -->
<div>
父亲
<div>儿子</div>
<div>女儿</div>
</div>
<!-- 儿子与女儿是并列关系 -->
<!-- 二级嵌套 -->
<!--
父亲包着儿子
儿子包着孙子
此时:父亲与孙子也是嵌套关系
-->
<div>
父亲
<div>
儿子
<div>
孙子
</div>
</div>
</div>
<!-- 注意:嵌套关系不一定是父子关系 -->
8.标题标签
块级标签
h1-h6
h1-h6标题中,文字大小依次减小,重要程度也依次减弱
注意:在一个页面中,h1标题标题标签只能有一个,h2-h6标签可以有多个
特点:
1.宽度在没有设置的情况下,默认跟父元素的宽度一样
2.高度在没有设置的情况下,高度由内容撑开
3.垂直布局(从上往下),独立成行(独占一行)
4.自带外间距(两个盒子之间的距离)
5.自带加粗效果
应用场景:
1.文章的标题,或者某个章节的标题
2.logo(公司的logo一般都用h1标签包着,加重权重)
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>