视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 01-25
超文本标记语言
HTML HyperText Markup Language
- 描述网页的一种语言
- 不是编程语言，而是一种标记语言。
- 标记语言是一套标记标签(markup tag)
超文本的2层含义
- 可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
- 可以从一个文件跳转至另一个文件，与世界各地主机的文件连接（超链接文本）
常用浏览器
IE, Edge, Firefox,
Chrome, Safari, Opera
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
WEB标准
Web标准 是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有其他优点...
例如：IE显示字体是16px，Chrome显示字体是8px，同样的内容在不同浏览器显示大小不同，造成体验不友好。遵循标准（统一为12px），用户体验会更好。
Web标准的构成
主要包括结构Structure, 表现 preentation, 行为behavior。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
结构写到HTML中，表现写到CSS中，行为写到JavaScript中。
HTML基本结构标签
VScode 快捷键
alt + B: Open In Default Browser
alt + 加号键/减号键：增加/缩小字体
VScode插件
HTML代码解析
<!DOCTYPE>文档类型声明，作用就是告诉浏览器采用哪种HTML版本来显示网页。
<!DOCTYPE html>
1. 当前页面采取HTML5版本来显示网页
2. 必须写在第一行
3. 不是HTML内容，是文档类型声明标签
<meta charset="UTF-8"/>
UTF-8 被称为万国码，基本包含了全世界所有国家需要用的字符。不用写成UTF8或者utf8，统一写成UTF-8。
HTML标签
标签语义：让页面结构清晰明了，指明该标签的用途。
标题
<h1>标题标签</h1>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小一次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
<p></p>段落标签
用于定义段落，将网页分成若干个段落。
文本在某个段落中会根据浏览器窗口大小自动换行。
段落与段落之间保有空隙。
<br/> 换行标签 （break的缩写）
单个标签
开始新的一行，不同于段落标签，段落间不会插入垂直距离。
<span>标签
没有语义，只是盒子，用来装内容。
span意为跨度、跨距。
一行可以放多个span，小盒子。
<div>标签
没有语义，只是盒子，用来装内容。
div是divison的缩写，表示分割、分区
一行只能放一个div，大盒子。
<div>abc</div>123
显示：
abc
123 <img /> 单标签
<img src="url"/>
src是<img>标签的必须属性，指定图像文件的路径和文件名。
alt 图片无法显示时，替换文字。
<img src="111" alt="我是pink老师">
<img src="111" alt="我是pink老师" title="我是pink老师思密达">
相对路径
绝对路径