一、网页界面的基础认知
①网页由哪些组成：音频、视频、超链接、图片、文字
②我们看到的网页背后的本质是：（右击查看网页源代码）前端程序员写的代码
③前端的代码是通过什么软件转换成用户眼中的页面的：通过浏览器转化（解析和渲染）成用户看到的网页
④常见的五大浏览器：IE，火狐（Firefox），谷歌（Chrome），Safari浏览器（苹果系统自带的），欧朋（opera）
渲染引擎不同（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
⑤web标准：结构：HTML（页面元素），表现：CSS（页面样式），行为：JavaScript（页面交互的动态效果）
二、HTML
2.1HTML的概念
①HTML中文译名：超文本标记语言
②网页的建立：文本文档txt改后缀为html变网页
③HTML通过HTML标签编写相应的网页界面
2.2HTML的骨架结构标签
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>2.3编写HTML的软件安装
2.3.1使用vscode软件
优点：体积小，打开速度快，插件多，联想功能好用
安装链接：Download Visual Studio Code - Mac, Linux, Windows
安装好vscode后安装两个插件：①Chinese，②open in browser（方便直接在浏览器打开）
如图：我这个是已经汉化了的，按图步骤搜索这两个插件，图片只展示了Chinese怎么安装，open in browser插件安装同理。
2.3.2 vs code的基本快捷键（非常好用）
①快速生成标签：英文＋tab键
②保存文件：ctrl+s，点击文件勾选自动保存免得忘记保存
③快速查看网页效果：右击→Open in Default Browser（必须安装了open in browser插件）
快捷键：alt+b
④快速生成结构标签：!+tab（!必须是英文，必须保证文件名后缀为html）
⑤注释快捷键：Ctrl+/
2.4标签的构成
常见的标签由两部分构成，称为双标签，少数标签由一部分构成，称为单标签
2.5HTML标签的属性
①标签上可以同时存在多个属性
②标签与属性，属性与属性之间以空格隔开
<a href=""></a>
<img src="" alt="">2.6HTML标签间的关系
①父子关系：
<head>
<title>
</title>
</head>②兄弟关系：
<title>
</title>
</head>
<body>
</body>2.7HTML标签的学习
-
排版标签
1.1标题标签
<body>
<!-- 特点见网页页面情况 -->
<h1>1级标题</h1>
<!-- h1标签开发中用于特定场景，如:新闻稿的标题，网页的logo部分 -->
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>1.2段落标签
<body>
<!-- 段落之间存在间隙，独占一行 -->
<h1>前端开发</h1>
<p>前端开发是创建web......</p>
<p>前端开发从网页......</p>
<p>前端开发跟随移动互联网......</p>
</body>1.3换行标签
<br>（在哪个内容的结尾处加这个标签，结尾处开始强制换行）
1.4水平线标签<hr>