HTML：
师承b站pink老师【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】
HTML概述
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，用浏览器即可对HTML文件进行读取和显示。
1.1 什么是 HTML?
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言: HyperText Markup Language
-
HTML 不是一种编程语言，而是一种标记语言
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
-
HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
1.2 HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
-
HTML 标签通常是成对出现的，比如 和
-
标签对中的第一个标签是开始标签，第二个标签是结束标签（结束标签里面一般有一个/）
<标签> 内容
1.3 Web浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
HTML 语法规范
2.1 基本语法
-
HTML 文档的的后缀名必须是.html 或.htm，浏览器的作用是读取HTML 文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML 文件了。
-
html标签是用<>尖括号括起来的的关键词
-
html标签是通常是成对出现的例如 (第一个是开始标签第二个是结束标签) '双标签'
-
有些特殊的标只能是单个标签（极少情况）例如
'单标签'
-
标签关系：包含和并列
包含和 和并列2.2 HTML基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
html标签 文档的头部文档的标题 文档的主体
2.3 文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
//文档声明标签 告诉浏览器使用哪种HTML版本来显示网页 当前页面采取的是HTML5版本来显示网页.
-
声明位于文档中的最前面的位置，处于 标签之前
-
不是一个HTML 标签，它就是文档类型声明标签
2.4 lang语言种类
用来定义当前文档显示的语言。
-
en定义语言为英语
-
zh-CN定义语言为中文
-
简单来说,定义为en 就是英文网页, 定义为zh-CN 就是中文网页其实
-
对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
//lang:语言种类 "en"是英文即该网页是英文网页,"zh-CN"是中文即该网页是中文网页(用zh-CN好一点)
2.5 字符集编码
字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在
标签内，可以通过 标签的charset属性来规定HTML 文档应该使用哪种字符编码//字符集编码(一般用UTF-8否则容易乱码)
-
charset常用的值有：GB2312 、BIG5 、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
-
上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8"，不要写成 "utf8" 或"UTF8"
2.6 快捷键的使用
在vscode里上面的东西统统不用手敲！如果我们需要生成页面骨架结构。输入! 按下Tab键即可Document 2.7 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“”结束。
快捷键：Ctrl + /
2.8 特殊字符
在HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。
HTML常用标签
3.1 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 标题（Heading）是通过
-
标签来定义的。
标题标签 标题标签
标题标签共6级
标题标签独占一行
文字加粗
大小依次递减
xhy
3.2 段落标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，段落标签用于定义段落，它可以将整个网页分为若干个段落
这是一个段落。
这是另外一个段落。
3.3 换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
3.4 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。标签语义: 突出重要性, 比普通文字更重要
文本格式化标签 这个文本是加粗的
这个文本是加粗的
这个文本是斜体的
这个文本是斜体的
我是删除线
我是删除线
我是下划线
我是下划线
这个文本包含 下标
这个文本包含 上标
3.5 div和span标签
和 标签是没有语义的，它们就是一个盒子，用来装内容的。
-
标签用来布局，但是现在一行只能放一个。大盒子
-
标签用来布局，一行上可以多个 。小盒子
div和span标签 我是一个div标签我一人独占一行 我是一个div标签我一人独占一行 哈登 库里 杜兰特
3.6 图像标签
在 HTML 标签中，
标签用于定义 HTML 页面中的图像。
src 是
标签的必须属性，它用于指定图像文件的路径和文件名。
其他属性：
图像标签 图像标签的使用：
alt 替换文本 图像显示不出来的时候用文字替换
title 提示文本 鼠标放到图像上，提示的文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像的边框(一般不会用这里的属性来设置 会用css来设置)
图片路径(绝对路径) 文件绝对路径
图片路径(绝对路径) 网络绝对路径
3.7 超链接标签
在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面。
-
超链接标签的语法格式：
文本或图像
-
链接的分类
超链接标签 1、外部链接
文本或图像 腾讯体育（当前窗口打开）
虎扑体育2、内部链接：网站内部页面之间的相互链接
06-文本格式化标签3、空链接 #
nba4、下载链接：地址链接的是 文件.exe或者.zip等压缩包形式
下载文件5、网页元素的链接
6、锚点链接 见此页面
点击此处查看锚点链接表格标签
表格标签主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
每个表格均有若干行（由
标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（ ）用于定义列的标题。 -
tr：tr 是 table row 的缩写，表示表格的一行。
-
td：td 是 table data 的缩写，表示表格的数据单元格。
-
th：th 是 table header的缩写，表示表格的表头单元格。
元素表示整个表格，它包含两个主要部分： 和 。
-
用于定义表格的标题部分: 在 中，使用
元素定义列的标题，以下实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。 - 用于定义表格的主体部分: 在 中，使用
元素定义行，并在每行中使用 元素定义单元格数据，以下实例中有两行数据，每行包含三个单元格 列标题1 列标题2 列标题3 行1，列1 行1，列2 行1，列3 行2，列1 行2，列2 行2，列3 列表标签
表格是用来显示数据的，那么列表就是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
5.1 无序列表
- 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
- 标签定义。
无序列表 喜欢的球星
- 詹姆斯-哈登
- 斯蒂芬-库里
- 杜兰特
- 詹姆斯
- 约基奇
- 欧文
5.2 有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在 HTML 标签中，
- 标签用于定义有序列表，列表排序以数字来显示，并且使用
- 标签来定义列表项。
有序列表（实际应用较少了解） 球队排行榜
- 骑士
- 雷霆
- 凯尔特人
5.3 自定义列表
在 HTML 标签中，
- 标签用于定义描述列表（或定义列表），该标签会与
- 标签（定义项目/名字）和
- 标签（描述每一个项目/名字）一起使用。
自定义列表 - 球员
- 詹姆斯-哈登
- 斯蒂芬-库里
- 杜兰特
- 球队
- 快船
- 勇士
- 太阳
表单标签
在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成
6.1 表单域
表单域是一个包含表单元素的区域
在HTML标签中，
-
密码框（password）
-
单选按钮（radio）
-
复选框（checkbox）
-
提交按钮（submit）
-
重置按钮（reset）
-
文件域（file）
综合应用:
表单 用户名：
密码：
手机号：
性别：男 女
爱好：唱 跳 rap 篮球
上传头像：
6.2.2 select 下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表
-
在
select下拉表单元素 
6.2.3 textarea 表单元素
当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，
相关阅读
【PythonStock（39）】Python全栈股票系统：给股票系统升级到3.0使用vue+element做前端展示，修复各种BUG，整个工程项目调整拆分前后端，合并master
2025-04-2616 人在看
前端小知识：??= 操作符，更简洁的默认值处理方式
2025-04-2621 人在看
vscod:无法读取 chrome-error://chromewebdata/ 的源映射: Unexpected 503 response from chrome-error://chromeweb
2025-04-2617 人在看
若依修改前端路径，域名+admin访问的方法
2025-04-2615 人在看
- 用于定义表格的主体部分: 在 中，使用
-
-
-
-
-
-
-
-
-
-
-