【HTML认知】
HTML认知
- 一、HTML简介
-
- 1.1 网页
-
-
- 1.1.1 什么是网页
- 1.1.2 什么是HTML
- 1.1.3 网页的形成
-
- 1.2 浏览器
-
-
- 1.2.1 常用浏览器
- 1.2.2 浏览器内核
-
- 1.3 Web标准
-
-
- 1.3.1为什么需要Web标准
- 1.3.2Web标准的构成
-
- 二、HTML认知
-
- 2.1 基本语法概述
- 2.2 HTML页面固定结构
- 2.3 网页开发工具
- 2.4 语法规范
-
-
- 2.4.1 HTML的注释
- 2.4.2 HTML 标准骨架
-
- 三、HTML标签学习
-
- 3.1 排版标签
-
-
- 3.1.1 标题标签
- 3.1.2 段落标签
- 3.1.3 换行标签和水平线标签
-
- 3.2 文本格式化标签
- 3.3 媒体标签
-
-
- 3.3.1 图片标签
-
- （1）图片标签的alt属性
- （2）图片标签的title属性
- （3）图片标签的width和height属性
- 3.3.2 路径
-
- (1)绝对路径：
- (2)相对路径：
- 3.3.3 音频标签
- 3.3.4 视频标签
-
- 3.4 链接标签
-
-
- 3.4.1 链接标签的介绍
- 3.4.2 链接标签的target属性
-
一、HTML简介
1.1 网页
1.1.1 什么是网页
网站：利用前端技术制作的网页集合。
网页：构成网站的基本元素，通常是 HTML 格式的文件（.htm 或 .html）必须通过浏览器来阅读。
1.1.2 什么是HTML
超文本：由图片、声音、动画、视频……构成且可以相互链接的文本。
HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签构成的标记语言）。
1.1.3 网页的形成
前端代码开发 ——> 浏览器解析、渲染代码 ——> 呈现 Web 页面。
1.2 浏览器
1.2.1 常用浏览器
PC 端五大浏览器： IE、Chrome、Firefox、Safari、Opera、（目前 IE 已经被 Edge 取代）。
1.2.2 浏览器内核
四大浏览器内核：IE（Trident）、Firefox（Gecko）、Safari（Webkit）、Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）
注：目前国内浏览器一般都采用 Webkit / Blink 内核。
1.3 Web标准
1.3.1为什么需要Web标准
浏览器不同，解析渲染显示的页面效果就有些许差异，通过 Web 标准可以统一浏览器解析显示效果，同时大大减少开发者的工作量（一套代码，多种浏览器平台兼容运行）。
1.3.2Web标准的构成
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
二、HTML认知
2.1 基本语法概述
HTML 标签是由尖括号包围的关键字词，例如：。
HTML 标签通常是成对出现的，例如： 和 ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签，例如：
任何标签都建议不要大写，即便是
标签。
2.2 HTML页面固定结构
网页中的的固定结构是要通过特点的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
|
根标签 | 页面中最大的标签（最基础的标签） |
|
头部标签 | 在 head 标签中我们必须要设置 title 标签 |
|
标题标签 | 页面自己的网页标题 |
|
主体标签 | 包含文档的所有内容 |
2.3 网页开发工具
VS code——速度快，体积小，插件多
2.4 语法规范
2.4.1 HTML的注释
在VS Code中注释的快捷键：ctrl+/ （得按shift左边的那个斜杠，数字键上的不行）
2.4.2 HTML 标准骨架
快捷键为英文字符！加回车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
(1）文档类型声明，告诉浏览器该网页的HTML版本
(2）标识网页使用的语言
-作用：搜索引擎归类+浏览器翻译
-常见语言：zh-CN简体中文/en英文
(3）标识网页使用的字符编码
(4）解决IE兼容性
(5） 宽度=设备宽度，移动端网页开发使用
三、HTML标签学习
3.1 排版标签
3.1.1 标题标签
代码：h系列标签
<!-- ctrl+d 选中修改 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
1~6级标签，重要程度依次递减
3.1.2 段落标签
代码：
<p>我是一段文字</p>
段落之间存在间隙，独占一行
3.1.3 换行标签和水平线标签
代码：
单标签，让文字强制换行
代码：
单标签，在页面中显示一条水平线
3.2 文本格式化标签
代码：加粗内容
| 标签 | 标签 | 说明 |
|---|---|---|
| b | strong | 加粗 |
| u | ins | 下划线 |
| i | em | 倾斜 |
| s | del | 删除 |
两者都可以使用
3.3 媒体标签
3.3.1 图片标签
代码：
<img scr="" alt="" title="">
单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置！
·属性注意点：
1、标签的属性写在开始标签内部
2、标签上可以同时存在多个属性
3、属性之间以空格隔开
4、标签名与属性之间必须以空格隔开
5、属性之间没有顺序之分
（1）图片标签的alt属性
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本
（2）图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
（3）图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.3.2 路径
(1)绝对路径：
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例：D:\day01\images\1.jpg
(2)相对路径：
从当前文件开始出发找目标文件的过程
a、同级目录：当前文件和目标文件在同一目录中
代码步骤：直接写目标文件的名字即可
方法一：
方法二：
b、下级目录：目标文件在下级目录中
代码：
c、上级目录：目标文件在上级目录中
代码：
3.3.3 音频标签
代码：
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplsy | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
音频标签目前支持三种格式：MP3、Wav、Ogg
3.3.4 视频标签
代码：
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
视频标签目前支持三种格式：MP4、WebM、Ogg
3.4 链接标签
3.4.1 链接标签的介绍
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：超链接
当网站开发初期，我们还不知道跳转地址的时候，href的值书写 #（空链接）
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
3.4.2 链接标签的target属性
代码：百度一下
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |