视频资源: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
浏览器内核
浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
![](https://i-blog.csdnimg.cn/blog_migrate/a3dc6895c52e37dffee29df779deac22.png)
WEB标准
Web标准 是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有其他优点...
例如:IE显示字体是16px,Chrome显示字体是8px,同样的内容在不同浏览器显示大小不同,造成体验不友好。遵循标准(统一为12px),用户体验会更好。
Web标准的构成
主要包括结构Structure, 表现 preentation, 行为behavior。
![](https://i-blog.csdnimg.cn/blog_migrate/64a6de6164745e9f58509f1e6f73eb0f.png)
Web标准提出的最佳体验方案:结构、样式、行为相分离。
结构写到HTML中,表现写到CSS中,行为写到JavaScript中。
![](https://i-blog.csdnimg.cn/blog_migrate/9c6fff7fa2424c144ca442b08849c87f.png)
HTML基本结构标签
![](https://i-blog.csdnimg.cn/blog_migrate/7b1694f41d0ad2f4a6805b1ba803c8d3.png)
VScode 快捷键
alt + B: Open In Default Browser
alt + 加号键/减号键:增加/缩小字体
VScode插件
![](https://i-blog.csdnimg.cn/blog_migrate/739b7e59ae5e6f9279654d893d74d9ea.png)
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老师">
![](https://i-blog.csdnimg.cn/blog_migrate/3f4b073772916d46bf8f65be0138e027.png)
<img src="111" alt="我是pink老师" title="我是pink老师思密达">
![](https://i-blog.csdnimg.cn/blog_migrate/46e93ff51d1ad1fe1b38d80370c9a380.png)
![](https://i-blog.csdnimg.cn/blog_migrate/629d77b9d8c14cd47d7031972579691b.png)
相对路径
![](https://i-blog.csdnimg.cn/blog_migrate/e3ac66a0a622a2bc7d56db24c538aa20.png)
绝对路径
目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。(网络上的绝对地址,地址固定。)