一，课前前序知识
1.认识两位先驱：图灵 和 冯诺依曼
2.计算机基础：计算机由硬件和软件组成，软件分为系统软件和应用软件
3.CS架构和BS架构：
应用软件分为CS架构和BS架构
C/S架构特点：需要安装，偶尔更新，不跨平台
B/S架构特点：无需安装，无需更新，可跨平台
前端工程师主要开发B/S架构的应用
4.浏览器相关知识：
浏览器的内核：内核是浏览器的核心，用于处理浏览器所得到的各种资源
5.网页相关概念：
网页具备结构，表现，行为
结构：HTML
表现：CSS
行为：JavaScript
二，正式学习HTML
HTML全称：HyperText Markup Language
译为：超文本标记语言
超文本：暂且理解为“超级的文本”，和普通文本比，内容更丰富
标记：文本要变成超文本，就需要用到各种标记符号
语言：每一个标记的写法、读音、使用规则，构成标记语言
HTML发展史：
准备工作：
1.安装chrome浏览器
2.安装VSCode
3.安装Live Server 插件
1.可以更加方便的打开网页
2.打开网页的方式更贴近项目上线
3.代码出现改动后，可以自动刷新
4.根据自己的情况，去配置一下VSCode的自动保存
注意1：务必使用VSCode打开的是文件夹，否则LiveServer插件无法正常工作！
注意2：打开的网页必须是标准的HTML结构，否则无法自动刷新！
1.HTML初体验
1.第一步：鼠标右键 = > 新建＝>文本文档 = > 输入以下内容，并保存
<marquee>尚硅谷，让天下没有难学的技术！</marquee>
2.第二步：修改后缀为.html，然后双击打开即可
这里的后缀名，使用，htm也可以，但推荐使用更标准的.html
3.程序员写的叫源代码，要交给浏览器进行渲染。
4.借助浏览器看网页的源代码，具体操作：
在网页空白处：鼠标右键 = > 查看网页源代码
2.HTML标签
1.标签又称元素，是HTML的基本组成单位
2.标签分为：双标签与单标签（绝大多数都是双标签）
3.标签名不区分大小写，但推荐小写，因为小写更规范
4. 双标签：
5.单标签：
6.标签之间的关系：并列关系、嵌套关系，可以使用tab键进行缩进：
<marquee>
尚硅谷，让天下没有难学的技术！
<input>
</marquee>
3.HTML标签属性
1.用于给标签提供附加信息。
2.可以写在：起始标签或单标签中，形式如下：
3.有些特殊的属性，没有属性名，只有属性值，例如：
<input disabled>
4.注意点：
1.不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）
2.属性名、属性值不能乱写，都是W3C规定好的
3.属性名、属性值，都不区分大小写，但推荐小写
4.双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
5.标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">
4.HTML基本结构
1.在网页中，如何查看某段结构的具体代码？一一点击鼠标右键，选择“检查”
2.【检查】和【查看网页源代码】的区别：
【查看网页源代码】看到的是：程序员编写的源代码
【检查】看到的是：经过浏览器“处理”后的源代码
备注：日常开发中，【检查】用的最多
3.网页的基本结构如下：
1.想要呈现在网页中的内容写在body标签中。
2.head标签中的内容不会出现在网页中。
3.head标签中的title标签可以指定网页的标题。
4.图示：
5、代码：
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
5.HTML注释
1.特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2.作用：对代码进行解释和说明
3.写法：
<！--下面的文字只能滚动一次-->
<marquee1oop="1">尚硅谷</marquee>
<！--下面的文字可以无限滚动-->
<marquee>尚硅谷123</marquee>
4.注释不可以嵌套，以下这么写是错的。（反例）
<! --
我是一段注释
<！-- 我是一段注释 -->
-->
6.HTML文档声明
1．作用：告诉浏览器当前网页的版本。
2.写法：
旧写法：要依网页所用的HTML版本而定，写法有很多。
参考：W3C官网-文档声明
新写法：一切都变得简单了！W3C推荐使用HTML5的写法
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
3.注意：文档声明，必须在网页的第一行，且在html标签的外侧。
7.HTML字符编码
1，计算机对数据的操作：
存储时，对数据进行：编码。
读取时，对数据进行：解码。
2．编码、解码，会遵循一定的规范一一字符集
3.字符集有很多中，常见的有（了解）：
1.ASCII：大写字母、小写字母、数字、一些符号，共计128个
2.ISO8859-1：在ASCII基础上，扩充了一些希腊字符等，共计是256个
3.GB2312：继续扩充，收录了6763个常用汉字、682个字符
4.GBK：收录了的汉字和符号达到20000+，支持繁体中文
5.UTF-8：包含世界上所有语言的：所有文字与符号一一很常用
4.使用原则：
原则1：存储时，务必采用合适的字符编码，否则：无法存储，数据会丢失
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码，否则：数据错乱(乱码)
5．总结：
平时编写代码时，统一采用UTF-8编码（最稳妥），为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码
<head>
<meta charset="UTF-8"/>
8.HTML设置语言
1.主要作用：
让浏览器显示对应的翻译提示
有利于搜索引擎优化
2..具体写法：
<html lang="zh-CN">
9.HTML标准结构
HTML标准结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta_charset="UTF-8">
<title>我是一个标题</title>
</head>
<body>
</body>
</html>
输入！，随后回车即可快速生成标准结构
配置VScode的内置插件emmet，可以对生成结构的属件进行定制
在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标
10.开发者文档
W3c官网：www.w3c.org
W3School：www.w3school.com.cn
MDN：developer.mozilla.org——平时用的最多
11.HTML排版标签
1.h1最好写一个，h2~h6能适当多写
2.h1~h6不能互相嵌套，例如：h1标签中最好不要写h2标签了
3.p标签很特殊！它里面不能有：h1~h6、p、div标签
12.HTML语义化标签
概念：用特定的标签，去表达特定的含义
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）
优势：
代码结构清晰可读性强
有利于SEO（搜索引擎优化）
方便设备解析（如屏幕阅读器、盲人阅读器等）
13.块级元素与行内元素
1.块级元素：
独占一行（排版标签都是块级元素）
2.行内元素：
不独占一行（目前只学了：input，稍后会学习更多）
3.使用规则：
1.块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）
2.行内元素中能写行内元素，但不能写块级元素
3.一些特殊的规则：
h1~h6不能互相嵌套。
p中不要写块级元素。
我们以后还会学到一些特殊的规则，但不会很多。
14.常用的文本标签
1.用于包裹：词汇、短语等
2.通常写在排版标签里面
3.排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
4.文本标签通常都是行内元素
常用的：
15.不常用的文本标签
1.这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）
2.blockquote与address是块级元素，其他的文本标签，都是行内元素。
3，有些语义感不强的标签，我们很少使用，例如：
small、b、u、q、blockquote
4.HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些
h1~h6、p、div、em、 strong、span
16.HTML图片标签
1.像素（px）是一种单位，学到CSS时，我们会详细讲解
2.尽量不同时修改图片的宽和高，可能会造成比例失调
3.暂且认为img是行内元素（学到CSS时，会认识一个新的元素分类，目前咱们只知道：块、行内）
4.alt属性的作用：
搜索引擎通过alt属性，得知图片的内容。一一最主要的作用
当图片无法展示时候，有些浏览器会呈现a1t属性的值
盲人阅读器会朗读alt属性的值
练习：
效果图：
