1.1 HTML的感知
问题1:什么是HTML?
问题2:HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?
1.2 小结
问题1:
-
超文本标记语言(Hyper Text Markup Language)
问题2:
-
HTML标签
1.3 [练习 体验]
-
在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:网页体验.html
-
双击这个文件,输入以下代码等内容 → 记得保存!
<p>彦祖pink学前端,一起高薪赚大钱</p>
-
双击网页体验.html ,浏览器会自动打开文件并显示之前输入的内容
1.4 HTML骨架结构
问题1:HTML骨架结构由哪些标签组成?
1.5 小结
问题1:
-
html标签:网页的整体(页面最大的标签,根标签)
-
head标签:网页的头部
-
body标签:网页的身体
-
title标签:网页的标题
1.6 [练习]
-
新建HTML文件→ 命名为:Html骨架结构标签.html
-
输入以下代码
<html> <head> <title>网页标题</title> </head> <body> 键盘敲烂,月薪过万. </body> </html>
3 双击文件使用浏览器看效果
1.7 开发工具基本操作(VScode)
前端开发神器:VS Code → 速度快、体积小
VS Code使用前要求:
-
VScode 软件安装完毕
-
Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
-
open in browser 直接打开浏览器插件安装完毕
VS Code基本的快捷键:
-
快速生成标签:英文 + tab
-
保存文件:ctrl + s • 注意1:写完文件之后务必需要保存文件,否则网页无变化 • 注意2:可以设置自动保存省去每次保存的麻烦
-
快速查看网页效果:右击 → Open in Default Browser • 快捷键:alt + b • 注意:必须安装了open in browser 插件
-
快速生成结构标签:! + tab • 注意1:!必须是英文的,中文!无效 • 注意2:必须保证当前文件后缀名是.html,否则无效 • VS Code自动生成的骨架多了其他标签,之后会介绍