HTML基础
HTML 与浏览器基础
掌握网页基本组成
网站：在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页：网站中的一“页”，通常是 HTML 格式的文件，要通过浏览器来阅读。
网页是构成网站的基本元素，通常的网站以.htm 或.html 后缀结尾，俗称为 HTML 文件。
网页的形成：前端人员开发代码 → 浏览器显示代码（解析、渲染）→ 生成最后的 Web 页面
HTML 是什么
HTML 是超文本标记语言（Hyper Text Markup Language）
属于标记语言，非编程语言。
超文本的含义：1、超越文本限制；2、超级链接文本。
常用浏览器
浏览器是网页显示、运行的平台。常用的浏览器有 IE(Edge)、FireFox、Chrome、Safari 和 Opera。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
Chrome 内核：Blink，属于 WebKit 的分支。国内一般浏览器都会采用 WebKit/Blink 内核。
由于浏览器内核的差异性，显示原生 html 会有所差异：
从服务器接收的数据会存放在一个临时的文件夹。接收我们缓存的数据(chrome://version/)
临时文件夹作用：第二次访问同一个网站速度会变快，因为第一次浏览的时候，大部分文件已经缓存在本地。
Web标准的三大组成部分
Web标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
为什么需要 Web 标准
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一之外，还有以下优点：
让 Web 的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。
三大部分组成包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构：用于对网页元素进行整理和分类，现阶段主要学的是 HTML。
表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS。
行为：网页模型的定义以及交互的编写，现阶段主要学的是 Javascript。
Web标准提出的最佳体验方案：结构、表现、行为相分离。
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 Javascript 文件中。
构成理解：结构=身体、表现=外观装饰、行为=行为动作。三者中结构最重要。
HTML 标签
元素、标签与属性
元素：HTML 元素就是构成 HTML 文件的基本对象。
标签：标记 HTML 元素。
属性：为 HTML 元素提供各种附加信息，总是以键值对的形式出现，属性总是在 HTML 元素的开始标签中进行定义。
标签书写注意规范
①HTML 标签是由尖括号包围的关键词，例如<html />。
②HTML 标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签。
③ 有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。
④ 双标签关系可以分为两类：包含关系和并列关系。
包含：
<head>
<title></title>
<head>
并列：
<head></head>
<body></body>
HTML 骨架标签
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。HTML 页面也被称为 HTML 文档。
HTML 页面也被称为 HTML 文档。
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML 标签 | 页面中最大的标签，我们称为 根标签 |
<head></head> | 文档头部 | 注意在 head 标签中我们必须要设置的标签是 title |
<title></title> | 文档标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档主体 | 元素包含文档的所有内容，页面内容基本都放到 body 里面 |
额外内容：开发工具（建议使用VsCode）
掌握文件新建、保存，插件安装。HTML 基础结构标签快捷输入键: !
Open in Default Browser (Alt + B)
Ctrl +/Ctrl – 放大缩小视图
插件安装：
| 插件 | 作用 |
|---|---|
| Chinese（Simplified）Language Pack for VS Code | 中文（简体）语言包 |
| Open in Browser | 右击选择浏览器打开 html 文件 |
| JS-CSS-HTML Formatter | 每次保存，都会自动格式化 js css 和 html 代码 |
| Auto Rename Tag | 自动重命名配对的 HTML/XML 标签 |
| CSS Peek | 样式追踪 |
根标签、头部标签、标题标签、主体标签的关系
1.<!DOCTYPE>文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种 HTML 版本来显示网页。
<!DOCTYPE html> 代码含义：当前页面采取的是 HTML5 版本来显示网页。
注意：
<!DOCTYPE>声明位于文档中的最前面位置，处于</html>标签之前。<!DOCTYPE>不是一个 HTML 标签，是文档类型声明标签。
2.<html lang>语言种类（全局属性）
用于定义当前文档显示的语言。
en 英语; zh-CN 中文
实际文档显示与语言定义之间非强制关系。该属性对浏览器起提示作用，告诉浏览器这个页面采取某种语言来显示。
3.<meta charset>字符集
<head>标签内，通过标签的 charset 属性规定 HTML 文档使用的字符编码。
常用值：GB2312 BIG5 GBK UTF-8，UTF-8也被称为万国码，最常用的字符编码。
以上三类代码 VSCode 自动生成，不需要重写。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
4.标题标签<h1> - <h6>（重要）
HTML 提供了 6 个等级的网页标题，<h1>-<h6>。一个标题独占一行，加了标题标签的文字加粗，字号变大。
标题一共六级选，
文字加粗一行显。
由大到小依次减，
从重到轻随之变。
语法规范书写后，
具体效果刷新见。
5.段落和换行标签（重要）
<p>标签用于定义段落，可以将整个网页分为若干个段落。
特点：1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有空隙。
<br>单标签，用于某段文本强制换行显示。
特点：1、单标签。2、简单地开始新一行，不插入段落的间距。
6.文本格式化标签
标签语义：突出重要性。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签 语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签 语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签 语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签 语义更强烈 |
7.<div>和<span>标签
<div>和<span>没有语义，是装内容的一个盒子。
特点：1、<div>标签用来布局，但是一行只能放一个<div>。大盒子
2、<span>标签用来布局 ，一行上可以放多个<span>。小盒子
8.<sup>和<sub>标签
<sup></sup>上标文本标签
<sub></sub>下标文本标签
9.注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，HTML 中的注释以””结束。
<!—注释语句 --> 快捷键 Ctrl + /
注释标签里面的内容是给程序员看的，这个代码时不执行不显示到页面中的。
超链接标签<a>
<a>用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式
<a href=”跳转目标” target=”目标窗口的弹出方式”> 文本或图像 </a>
href:用于指定链接目标的 url 地址，必须属性。当为标签应用 href 属性时，它就具有了超链接功能。
target:用于指定链接页面的打开方式，其中_self 为默认值，_blank 为在新窗口中打开方式。
链接的分类
外部链接。例如
<a href="https://www.baidu.com">百度</a>内部链接。网站内部页面之间的相互链接，直接链接内部页面名称。
空链接：如果当时没有确定链接目标时，
<a href="#"> 首页</a>。下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：点击链接后，可以快速定位到页面中的某个位置。
锚点：
<a href=”#abc”> xxx</a>目标：
<a id=”abc”> xxxx</a>
图片标签<img>
<img>标签用于定义 HTML 页面中的图像。
<img src=”图像URL”/>
src 是<img>标签的必须属性，用于制定图像文件的路径和文件名。
其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像路径无效时的代替文字 |
| title | 文本 | 提示文本，鼠标放到图像上的提示文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像的边框粗细 |
width 和 height，修改其中一个像素值，另一个等比例缩放。
alt 替换文本；title 提示文本。
图像标签注意点：
图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对，即 key=”value”的格式，属性=”属性值”。
相对路径的三种形式
目录文件夹和根目录（目录文件夹第一层）
相对路径：以引用文件所在位置为参考基础，建立出的目录路径。
绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | . | 图像文件位于 HTML 文件同一级 如<img src="baidu.gif" /> |
| 下一级路径 | / | 图像文件位于 HTML 文件下一级 如<img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 图像文件位于 HTML 文件上一级 如<img src="../baidu.gif" /> |
表格标签
表格是实际开发中非常常用的标签：
表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示得非常的规整，可读性非常好。特别是后台展示数据的时候， 能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
小总结：表格不是用来布局页面的，而是用来展示数据的。
表格的基本语法
<table><table>是用于定义表格的标签。
<tr><tr>标签用于定义表格中的行，必须嵌套在<table><table>标签中。
<td><td>用于定义表格中的单元格，必须嵌套在<tr><tr>标签中。
字母 td 指表格是数据 table data，即数据单元格的内容。
一般表头单元格位于表格的首行/首列，文本内容加粗居中显示。
<th>标签表示 HTML 表格的表头部分(table head 缩写)。
提醒：表格标签这部分属性我们实际开发不常用，后面通过CSS设置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
一般默认 cellpadding 和 cellspacing 设置为 0；表格浏览器中对齐 align。
style属性：style=" border-collapse: collapse"，表示将相邻边框合并。不写该属性，则默认值是 separate 不合并边框。
表格结构标签
使用场景：因为表格可能很长，为了更好表示表格语义，可以将表格分割为表格头部和表格主体两大部分。
合并单元格
- 合并单元格方式
跨行合并 rowspan=”合并单元格的个数”
跨列合并 colspan=”合并单元格的个数”
- 目标单元格
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
- 合并单元格的步骤
先确定是跨行还是跨列合并。
找到目标单元格，写上合并方式=合并的单元格数量。
删除多余的单元格。
列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，布局更加自由和方便。
列表分类：无序列表、有序列表、自定义列表。
无序列表（重点）
<ul>标签表示 HTML 页面中项目的无序列表，列表项使用<li>标签定义。
无序列表的各个列表项之间没有顺序级别之分，是并列的。
ul 中只能嵌套 li，直接在
<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li></li>之间相当于一个容器，可以容纳所有元素。无序列表会带有自己的样式属性，实际使用时，使用 CSS 设置。
属性 type: disc 实心圆 square 实心方块 circle 空心圆,更改无序列表前面的点。
有序列表（理解）
<ol>标签用于定义有序列表，列表排序以数字显示，并且使用<li>标签来定义列表项。
ol 中只能嵌套 li，直接在
<ol></ol>标签中输入其他标签或文字的做法是不被允许的。属性 type：阿拉伯数字、罗马数字、英文字母大小写，start: 起始的数字项。
自定义列表
自定义列表常用语对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
<dl></dl>里面只能包含<dt><dd>。dt 和 dd 个数没有限制，经常是一个 dt 对应多个 dd。
表单标签
表单需求：收集用户信息，跟用户进行交互，收集资料。
HTML中完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3 个部分构成。
<form>标签
用于定义表单域，实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
暂时不用表单域提交数据，写上 form 标签即可。
method: post 加密提交 get 明文提交
表单控件（表单元素）
表单元素是允许用户在表单中输入或者选择的内容控件。
input 输入表单元素（单标签）
- type 属性
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过Javascript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，按文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
- input 其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- radio&checkbox
性别表单控件 radio 必须有相同的名字 name 才能多选一。checkbox 同理。
设置 checked 属性之后，页面打开默认选中按这个按钮。
maxlength 是用户在表单元素输入的最大字符数，一般较少使用。
<label>标签
<label>标签为 input 元素定义标注（标签）。
<label>用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用于增加用户体验。
<label for="abc">xxx</label>
<input type="text" name="123" id="abc">
- select 下拉表单元素
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
<select>中至少包含一对<option>。在
<option>中定义 selected = “selected”，当前项即为默认选中项。
- textarea 文本域元素
使用场景：当用户输入内容较多的情况下，需要使用<textarea>标签。
该标签用于定义多行文本输入的控件。
通过
<textarea>标签可以轻松地创建多行文本输入框。cols=”每行中的字符数”,rows=”显示的行数”，实际开发中用 CSS 来改变大小。
写在最后：学会查阅文档