HTML基础
前端入门
HTML
快捷键
Shift + alt + 下/上箭头 （快速复制一行）
Ctrl + d （选定多个相同的单词）
Ctrl + alt + 上/下箭头 （添加多个光标）
Ctrl + h （全局替换某个单词，注意选择全部替换）
Ctrl + g （快速定位到某一行）
Shift + alt 拖动鼠标 （选择某个区块）
Ctrl + ‘-’/‘+’ （缩小/放大字体或界面）
自定义快捷键：
Vscode——管理——键盘快捷方式
网页
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定的内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它主要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
HTML指的是超文本标记语言，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
超文本两层含义：
可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）。
网页的形成：网页是由网页元素组成的，这些元素利用html标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码——>浏览器显示代码（解析、渲染）——>生成最后的web页面
浏览器
浏览器是网页显示、运行的平台。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。
Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
让Web的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜索引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。
Web标准的构成：
主要包括结构、表现和行为三个方面。
结构（最重要）：用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为：指网页模型的定义及j的编写，现阶段主要学的是JavaScript。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
HTML语法规范
基本语法概述
HTML标签：
是由尖括号包围的关键词。
通常是成对出现的称为双标签。标签中的第一个标签是开始标签，第二个是结束标签。
有些特殊标签必须是单个标签，称为单标签。（<br />）
标签关系
双标签关系：包含关系和并列关系。
包含：<head>
<title></title>
</head>
并列：<head></head>
<body></body>
HTML基本结构标签（骨架标签）：
HTML标签：<htm></html> 页面中最大的标签，根标签
文档的头部：<head></head> 在标签中必须设置title标签
文档的标题：<title></title> 让页面拥有自己的网页标题
文档的主体：<body></body> 元素包含文档的所有内容，页面内容基本都位于其内部
<html>
<head>
<title></title>
</head>
<body></body>
</html>
HTML文档的后缀名必须是 .html或 .htm ，浏览器的作用是读取HTML文档，并以网页形式显示。
网页开发工具
文档类型声明标签
<!DCTYPE> 文档类型声明，作用：告诉浏览器使用哪种HTML版本来显示网页。
语法：<!DCTYPE html> （当前页面采取HTML5版本来显示网页）
注意：
<!DCTYPE>声明位于文档中最前面的位置，处于<html>标签前。
<!DCTYPE>不是一个HTML标签，是文档类型声明标签。
Lang语言种类
用于定义当前文档显示的语言。
En定义语言为英文。
zh-CN为中文。
语法：<html lang= “en”>
字符集
字符集是多个字符的集合。在<head>标签内可通过<meta>标签的charset属性来规定HTML文档应该使用的字符编码。
语法：<meta chrset=”UTF-8” />
UTF-8（万国码）
注意：上面语法必须要写，否则可能引起乱码。一般情况下统一使用“UTF-8”编码，统一写成标准的“UTF-8”。
HTML常用标签
标签语义
根据标签语义，在合适的地方给一个最合理的标签，可让页面结构更清晰。
标题标签<h1> - <h6>（重要）
实例：<h1>我是一级标题</h1>
head的缩写，意为头部、标题。
标签语义：作为标题使用，依据重要性递减。
特点：加了标题的文字会变粗，字号也会依次变大。
一个标题独占一行。
段落和换行标签（重要）
在HTML标签中，<p>标签用于定义段落，可以将整个网页分成若干个段落。
语法：<p>我是一个段落标签</p>
paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才会自动换行。若希望某段文本强制换行显示，需要使用换行标签<br />。
语法：<br />
break的缩写，意为打断、换行。
标签语义：强制换行。
特点：<br />是个单标签。
<br />标签只是简单的开始新的一行，跟段落不同，段落之间会插入一些垂直的间隙。
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
加粗：<strong></strong>或<b></b> 使用<strong>语义更强烈
倾斜：<em></em>或<i></i> 使用<em>语义更强烈
删除线：<del></del>或<s></s> 使用<del>语义更强烈
下划线：<ins></ins>或<u></u> 使用<ins>语义更强烈
<div>和<span>标签
<div>和<span>没有语义，类似于一个装内容的盒子。
语法：<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：<div>标签用来布局，但一行只能放一个（大盒子）
<span>标签用来布局，一行可以多个（小盒子）
图像标签和路径（重点）
图像标签：在HTML标签中，<img>标签用于定义HTML页面中的图像。
语法：<img src=”图像URL” />
image的缩写，意为图像。
src是<img>标签的必须属性，用于指定图像文件的路径和文件名。
图像标签的其他属性：
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本，鼠标放在图像上显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
图像标签属性注意点：
图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key=”value”的格式，属性=”属性值”。
路径：
目录文件夹：普通文件夹，里面存放了做页面所需要的相关素材，如HTML文件、图片等。
目录：打开目录文件夹的第一层。
路径可分为：相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础而建立出的目录路径。
简单来说，图片相对于HTML页面的位置
相对路径分类 符号 说明
同一级路径 无 图像文件位于HTML文件同一级
下一级路径 / 图像文件位于HTML文件下一级
上一级路径 ../ 图像文件位于HTML文件上一级
相对路径是从代码所在文件出发，去寻找目标文件的，这里的上一级、下一级和同一级就是图片相对于HTML页面的位置。
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
超链接标签（重点）
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式：
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
anchor的缩写，意为锚。
两个属性的作用如下：
href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，其具有了超链接的功能。
target：用于指定链接页面的打开方式，_self为默认值，__blank为在新窗口中打开方式。
链接分类：外部链接、内部链接、空链接、下载链接、网页元素链接和锚点链接。
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
空链接：如果当时没有确定链接目标时，<a href=”#”>首页</a>。
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：点击链接，可以快速定位到页面中的某个位置。
在链接文本的href属性中，设置属性值为#名字的形式，如<a href=”#two”>第二季</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id=”two”>第二季介绍</h3>
HTML中的注释和特殊字符
注释
HTML中的注释以“<!-->”开头，以“-->”结束。
语法：<!--注释语句--> 快捷键：ctrl + /
特殊字符
特殊字符 描述 字符的代码
空格符
< 小于号 <
> 大于号 >
& 和号 &
+- 正负号 ±
* 乘号 ×
/ 除号 ÷
2 平方2（上标） ²
3 平方3（上标） ³
表格标签
表格的主要作用：主要用于显示、展示数据。
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<table></table>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr.标签中。
字母td指表格数据，即数据单元格的内容。