前端基础01 -- html知识汇总
前言：网页构成
前端的网页构成三要素：html、css、js
1. html概述：
* HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。
* HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。
* HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。
简单说：
html是超文本标签语言，程序运行之后负责内容显示、负责网页上有什么显示什么。
比如网页上放一张图片，放一段文字，放一个按钮，都需要使用html标签语言来完成。
一个页面文件一般以html结尾，还可能是htm，php，aspx，jsp等
html文件示例
我们可以在pycarm中新建一个html文件（new -> HTML File），看看效果~
文件新建后，会默认带入html格式
pychram文件上，会自动显示pycahrm、和我电脑上安装的浏览器图标：
写一个简单的html文件并执行
我们删掉上面文件中自带的默认html格式，写一个简单的程序并执行
如下：
<h1>hello, i am html file </h1>执行html文件的三种方式：
● 在pycharm直接运行代码
● 在py文件中，直接点击右侧的浏览器图标
● 或者在文件夹中找到该py文件 -> 右键打开方式，选择电脑上的任意浏览器
效果如下：
浏览器是html的解释器，负责显示
即便电脑没有网络依然可以直接显示内容，就相当于浏览器打开的是一个本地文件
html文件注释的格式
在html文件中，注释与pycharm有所不同，默认的注释格式如下：
单行注释：/* 内容 */
多行注释：<!-- 内容 -->
2. html文件结构：
为什么要了解html的文件结构？
如果我们像上面一样，把html文件的内容，换成中文，并执行后会怎么样呢？
<h1>hello, 我叫王小明 </h1>
可以看到，文件被执行后，浏览器显示的hell后面的中文，变成了乱码
所以，我们需要遵循html的标准文件结构：
●`<!DOCTYPE html>` 告诉浏览器使用什么样的`html`或者`xhtml`来解析`html`文档。
目前基本是html比较通用，所以就无脑的写上html万无一失。
●`<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 `HTML `文档，在它们之间是文档的头部`<head>`和主体`<body>`。
● <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
● `<title></title>`定义网页标题，在浏览器标题栏显示。
● `<meta charset="UTF-8"> ` 声明编码方式用utf8。
● `<body></body>`之间的文本是可见的网页主体内容，可以有很多个body。
3. html标签语法：
标签的两种形式：
闭合标签：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
★ 属性为键值对，可以写若干个属性，多个属性以空格作为分隔
★ 闭合标签有文本内容
自闭合标签：<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
★ 属性为键值对，可以写若干个属性，多个属性以空格作为分隔
★ 自闭合标签没有文本
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签示例</title>
</head>
<body>
</body>
<h1>小明</h1> #闭合标签，有</h1>结尾
<h1>帅哥</h1>
<img src = ""> #自闭合标签
</html>> 1、HTML标签是由尖括号包围的特定关键词（不能自己随意指定）
>
> 2、标签分为闭合和自闭合两种标签
>
> 3、HTML不区分大小写
>
> 4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性；但有些标签必须带属性，例如src，必须写一个图片源
>
> 5、标签可以嵌套,但是不可以交叉嵌套
标签的分类汇总：
标签分为以下两类
❶ 块级标签(block)：特点如下
● 独占一行
● 可设置长宽
★ 块级标签有：h1~h6、<p></p>、<div></div>
❷ 内联标签(inline)：特点如下
● 不独占一行，按内容占比
● 不可设置长宽
★ 内联标签有：<b></b>、<strong></strong>、<i></i>、<em></em>、特殊符号、<span></span>
HTML-标签-关键词汇总：
关键词：表示特定含义的一个英语单词
☛ 文字性内容：h1，h2，h3，h4，h5，a，p
☛ 链接：href
☛ 落/块：div，section，nav
☛ 表格内容：tb(表格)，li(表格的一行)，ul(表格的一格)
☛ 图片/音视频：img(图片)，audio(声音)，video(音频）
☛ 表单：form(表单)，input(输入框)，select(选择框)，option(选择框)
html基本标签
(1) 标题标签
标题标签，类似word里的标题级数，h1~h6都属于标题标签
<h1></h1>：表示1级标题，最黑最粗的
<h2></h2>：表示2级标题，粗度次之
以此类推，可根据需要选择；
每个h标签都是一个块级标签，独占一行
示例如下：
(2) 换行标签：
我们在编写html文件时，无论有多少个空格、换多少行
执行后，浏览器都只会默认显示一个空格，如下：
so，当我们想要展示出换行效果怎么办呢？
这时候，就需要用到换行标签：<br>即break的简称，效果如下：
(3) 段落标签：
像写作文一样，我们需要分段落展示一首诗，让每行的间隙不那么紧凑
这时候就可以加上段落标签：<p>内容</p>
<p></p>标签也属于块级标签，不仅可以换行，还能时行与行的间隙变大，如下：
(4) 文本格式化标签：
加粗效果
比如：像word中，我们经常会把某些字进行加粗设置
html中也可以进行内容加粗，可以使用：<b></b>、<strong></strong>
它们都属于内联标签，只加粗、不换行
效果如下：
倾斜效果
比如：像word中，我们经常会把某些字进行倾斜设置
html中也可以进行倾斜加粗，可以使用：<i></i>、<em></em>
它们都属于内联标签，只倾斜、不换行
效果如下：
★★标签嵌套：
如果我们想要让内容呈现出又粗又斜，怎么办呢？
此时，就可以进行标签嵌套：
可以在p标签里嵌套i标签，也可以返过来，效果是一样的：
标签嵌套的规则
● 块级标签：可以嵌套块级标签，也可以嵌套内联标签
● 内联标签：只能嵌套内联标签
大部分情况如上
● 特殊情况：p标签例外
(5) 特殊符号：
html中特殊符号非常多，可自行百度查询
上面了解到，html中无论多少个空格，呈现的效果都只会有一个空格
那么，如果我们就想要显示5个空格，怎么办？
加空格：可以使用&bnsp; 几个空格写几个&bnsp;
注册符：可以使用®
效果如下：
html常用标签
(1) 超链接--a标签：
超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接（<a>标签），是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
例如：我们指定href的值为百度的网址，浏览器中就会显示“百度”两个字，并且带下划线
当我们在浏览器中点击“百度”，浏览器就会自动帮我们访问百度，它会覆盖原来的窗口：
a标签属性
❶ href属性：
● href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是网络连接，也可以是本地连接。
>
● 网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。
>
● 本地链接跳转指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。
>
●如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。❷ title属性： 链接的提示信息
❸ target _blank：在新建窗口中打开网页
一个简单的超链接实例：
a标签中，除了href，还可以添加其他属性
例如：加上target属性，这样就在浏览器中就不会覆盖原有窗口
(2) img标签：
img标签属性
❶ src属性：
● 指定图像的URL地址，是英文source的简写，表示引入资源。
● src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
● 如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。>
❷ alt属性：
● 指定图像无法显示时的替换文本。
● 当图像显示错误时，在图像位置上显示alt的值。
● 就是谷歌浏览器中，引入图像失败后，显示了替换文本。
● alt属性一般 作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性。
>
❸ width属性： 指定引入图片的显示宽度。
❹ height属性：指定引入图片的显示高度。
❺ border属性：指定引入图片的边框宽度，默认为0。
❻ title属性：悬浮图片上的提示文字。
远程添加img
当我们想要浏览器中展示一个图片的时候，就需要用到img标签
例如：我找到一张小黄人图片，将图片地址放在src里，打开html文件后即会显示该图片：
还可以再img标签中，添加尺寸设置：
如height：设置高、width：设置宽度
本地上传添加img
上面的img示例都是从服务器上远程拿到的，为了避免网上图片下架找不到，我们运行乘除后也无法显示，我们还可以从本地上传。
最简单的方式，我们将图片下载下来，把图片与要执行的py文件放在同一个路径下，直接写入图片名即可：
属性alt的作用：当图片地址错误的时候，可以添加报错提示
例如：我把小黄人的地址，少写一个字符，并设定alt提示为“not found”，效果如下：
a标签与img的嵌套：
举个栗子：
我们想要点击小黄人图片的时候，让它跳转到京东
那么只需要在上面的img标签外层加上a标签，并且指定href为京东的url即可：
(3) 列表标签：
前端列表标签分为两种：
❶ ul：(unorder list)无序列表
展示的效果是：有一个间隔+实心圆+空格
❷ ol：(order list)有序列表
展示的效果是：每一行内容前有1个索引
li：(list item)表示列表元素，不论是ul还是ol都必须结合li使用，li也不能单独使用
两种列表效果如下：
(4) tabel表格：
在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。
●`<table>`和`</table>`表示一个表格的开始和结束。一组`<table>...</table>`表示一个表格。
>
● border用于设置整个表格的边框宽度，默认为0，表示不显示边框。
>
● `<tr>`和`</tr>`表示表格中的一行的开始和结束。一组`<tr>...</tr>`，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
>
● `<td>`和`</td>`表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。
**table属性
| 属性 | 值 | 描述 |
| width |
px、% | 规定表格的宽度 |
| height |
px、% | 规定表格的高度 |
| align (http://www.w3school.com.cn/tags/att_table_align.asp) |
left、center、right | 规定表格相对周围元素的对齐方式 |
| bgcolor (http://www.w3school.com.cn/tags/att_table_bgcolor.asp) |
rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色 |
| background | url | 规定表格的背景图片 |
| border (http://www.w3school.com.cn/tags/att_table_border.asp) |
px | 规定表格边框的宽度 |
| cellpadding (http://www.w3school.com.cn/tags/att_table_cellpadding.asp) |
px、% | 规定单元格边框与其内容之间的空白 |
| cellspacing (http://www.w3school.com.cn/tags/att_table_cellspacing.asp) |
规定单元格之间的空隙 |
**td属性**
表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。
| 属性 | 值 | 描述 |
| width |
px、% | 规定表格的宽度 |
| height |
px、% | 规定表格的高度 |
| align (http://www.w3school.com.cn/tags/att_table_align.asp) |
left、center、right | 规定表格相对周围元素的对齐方式 |
| valign |
top、middle、bottom | 规定单元格内容的垂直对齐方式 |
| bgcolor (http://www.w3school.com.cn/tags/att_table_bgcolor.asp) |
rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色 |
| background |
url | 规定单元格的背景图片 |
| rowspan | number | 规定单元格合并的行数 |
| colspan | number | 规定单元格合并的列数 |
简单的tabel表格示例
想要展示单元格合并效果，只需要在其中一行td标签中加上rowspan属性即可：
当然，在实际前端开发过程中，有封装好的方法，可以让表格呈现的更好看，比如CSS
★★★(5) form表单：
表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁。
表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。
当用户输入好数据后，提交时就可以携带表单数据提交到服务器端。
表单的基本组成
一个表单元素有三个基本组成部分：
* 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
>
* 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
>
* 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
简单的form表单示例
比如，我们想写一个登陆页面，以form表单形式呈现
以下是加上常用的一些input属性，模拟一个表单注册页面：
在客户端点击“提交”时，是浏览器帮我们按照http协议的格式，将字符串组装键值对：
例如：
input标签中，将{user:输入的小明}组成键值对
input标签中，将{pwd:输入的123}组成键值对
input标签中，将复选框以&组成2个键值对
以post/get请求发给指定的服务器（代码中的ip:端口号） ，服务器验证后返回更新提交页面
常用的下拉框：<selcet><option>
form标签属性
| 属性 | 值 | 描述 |
| action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
| method | 默认值：post、get | 表单数据的提交方法 |
| target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
| enctype | 默认值]：application/x-www-form-urlencoded | 用于文件上传 |
| text/plain | 用于纯文本数据发送 | 表单提交数据时的编码方式 |
★★★(6) div标签
div标签概述
iv是"division"的缩写，意为分割或划分。它是一个通用的块级元素，常用于将网页内容划分为独立的部分或容器，使得页面更加有组织和结构化。
基本上网页的标签中div占比90%以上，使用非常高频。
div属于块级标签。
div标签的使用
#包裹在body里面：
<div>好好学习，天天向上！</div>
div标签的用途
div的用途多种多样，以下是几个常见的用途：
● 布局控制：通过使用div，你可以将网页内容划分为不同的区块，使得更容易进行布局控制。比如，将网页分为页头、侧边栏、内容区域和页脚，可以用不同的div来组织这些部分，并对每个部分进行样式设置。
>
● 样式控制：使用div可以为一组相关的元素应用相同的样式规则。通过给div设置class或id属性，你可以在CSS中选择这些div，并对其内部的元素进行样式设置。这种组织结构能够提高样式的复用性和可维护性。
>
● JavaScript操作：使用div可以更方便地对一组元素进行JavaScript操作。通过选择特定的div，你可以获取或改变其内部的元素，或者为这些元素添加事件处理程序，实现丰富的交互功能。
F12标签/元素查找快捷键
打开开发者工具 -> 元素(element)中，你会发现有一堆密密麻麻的前端代码，如何找到我们想要的东西呢？
>
例如：我们想找到百度首页的input输入框
在元素(element) -> 点击左上角的小箭头 ->只需要滑动网页，它就会自动帮我们定位到对应的input代码行，可以看到有浅灰色标识，同时输入框中也有阴影及标签名显示。
(7) span标签
span标签属于内联标签，没有任何样式
使用效果如下：
