前端学习-day1
什么是前端
现在是一个大前端时代,简单来说,大前端就是所有前端的统称,比如网站、小程序、Android、iOS、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。
第一个前端程序
<html>
<head>
<title>我的网页</title>
</head>
<body>
Hello,我的第一个网页
</body>
</html>
注意事项
1 文件后缀名以 .html 结尾
2 在编写代码的过程中, <> 必须是英文状态下编写
前端工具的选择与安装
-
浏览器 :谷歌浏览器(简洁大方,打开响应速度快)
-
开发者工具:VSCode(打开速度快,使用方便)
VSCode开发者工具快捷键
- 代码格式化: Shift+Alt+F
- 向上或向下移动一行: Alt+Up 或 Alt+Down
- 快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down
- 快速保存: Ctrl + S
- 快速查找: Ctrl + F
- 快速替换: Ctrl + H
HTML5简介与基础骨架
- HTML5简介
HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以 .html
结尾
HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如: <html>
标签有两种表现形式:
1 双标签,例如: <html></html>
2 单标签,例如: <img>
- HTML5的DOCTYPE声明
DOCTYPE
是 document type (文档类型) 的缩写。<!DOCTYPE html >
是H5的声明位于文档的最前面,处于标签之前。
他是网页必备的组成部分,避免浏览器的怪异模式。 - HTML5基本骨架
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>
- html标签
定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点。 - head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 - body标签
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和
列表等等。) - title标签
1 可定义文档的标题。
2 它显示在浏览器窗口的标题栏或状态栏上。
<title>
标签是<head>
标签中唯一必须要求包含的东西,就是说写head一定要写title
3<title>
的增加有利于SEO优化(SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求) - meta标签
meta
标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"
是说当前使用的是utf-8
编码格式,在开发中我们经常会看到utf-8
,或是gbk
,这些都是编码格式,通常使用utf-8
。
HTML注释
<!-- 这是一段注释 -->
<!-- 这里的内容不会被浏览器显示 -->
在开始标签中有一个叹号,但是结束标签中没有