本文详细介绍了如何使用Visual Studio Code(VSCode)打开、新建文件和文件夹，以及HTML的基本结构和常用标签。讲解了HTML注释、前端三大组成部分、浏览器开发者模式、查看网页源代码、标签类型、嵌套关系以及标题标签的用法。同时，通过实例展示了HTML搭建网页结构的基础步骤。
打开方式 直接把文件（要写代码的文件）拖拽到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>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
