☀️前端基础—【HTML⚡】
文章目录（PS：觉得不错请点赞收藏支持一下）
一、认识 Web
1.1 认识网页
- 解释说明: 网页主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频等。
如下图所示就是一个网页:
网页的背后是一行一行代码写出来的
1.2 浏览器(显示代码)
-
解释说明: 浏览器是网页显示、运行的平台。
-
常用的浏览器有: IE、火狐(Firefox)、谷歌(Chrome)、Safari(苹果自带浏览器)和Opera浏览器等(我们平时称为五大浏览器)。
-
常见浏览器内核
解释说明: 浏览器内核(Rendering Engine)，中文翻译很多，如：排版引擎、解释引擎、渲染引擎，现在统一流行称为浏览器内核。
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 Firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手 Chrome Safari webkit 很多人错误的把 webkit 叫做 Chrome 内核，Chrome 内核早已不是了 Chrome Chromium/Bink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心)，内置于 Chrome 浏览器之中，Blink 其实是 WebKit 的分支，大部分国产浏览器最新版都采用 Blink 内核，二次开发 Opera blink 跟随着 Chrome 用 blink 内核 -
1.3 Web 标准
-
解释说明: Web 标准不是某一个标准，而是由 W3C 组织(W3C 万维网联盟是国际最著名的标准化组织)和其他标准化组织制定的一系列标准的集合。
-
构成
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
| 标准 | 说明 |
|---|---|
| 结构(Structure) | 结构用于对网页元素进行整理和分类，主要学的是 HTML |
| 表现(Presentation) | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要学的是 CSS |
| 行为(Behavior) | 行为是指网页模型的定义及交互的编写，主要学的是 Javascript |
优点
- 让 Web 的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
二、HTML 初识
2.1 概念
- HTML 指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言(markup language)
- 标记语言是一套标记标签(markup tag)
所谓超文本，指两层含义
- 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制)。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级连接文本)。
2.2 HTML 骨架标签
- HTML 有自己的语言语法骨架格式
<html>
<head>
<title></title>
</head>
<body></body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，为 根标签 |
<head></head> | 文档的头部 | 注意在 head 标签中我们必须要设置的标签是 title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到 body 里面的 |
注意：HTMl 标签名、类名、标签属性和大部分属性值统一用小写，不推荐使用大写。
2.3 HTML 元素标签分类
- 常规元素(双标签)
格式:
<标签名> 内容 </标签名>
比如:
<body></body>
说明:
1. 该语法中 <标签名> 表示该标签的作用开始，一般称为"开始标签(start tag)","</标签名>"表示该标签的作用结束，一般称为"结束标签(end tag)"。
2. 和开始标签相比，结束标签只是在前面加了一个关闭符"/"。
- 空元素(单标签)
格式:
<标签名/>
比如:
<br /> 表示换行
说明:
1. 空元素 用单标签来表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭。
2.4 HTML 标签关系
- 嵌套关系(父子关系)
比如:
<head>
<title></title>
</head>
- 并列关系(兄弟关系)
比如:
<head></head>
<body></body>
注意:
- 两个标签之间的关系如果是嵌套关系，子元素最好缩进一个 tab 键的身位(一个tab是4个空格)
- 如果是并列关系，最好上下对齐
2.5 文档类型 <!DOCTYPE>
- 用法
<!DOCTYPE html>
- 作用
声明位于文档中的最前面的位置，处于标签之前，此标签告知浏览器文档使用哪种 HTML 或 XHTML 规范，也就是告诉浏览器按照 HTML5 规范解析页面。
2.6 页面语言 lang
最常见的2个:
1. en 定义语言为英语
2. zh-CN 定义语言为中文
举例:
<html lang="en"> 指定html 语言种类
注意:
考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
2.7 字符集
-
字符集(Character set)是多个字符的集合
-
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字
举例:
<meta chaset="UTF-8" />
utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312
1. gb2312 简单中文 包括 6763 个汉字 GUO BIAO
2. BIG5 繁体中文 港澳台等用
3. GBK 包含全部中文字符，是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312
4. UTF-8 则基本包含全世界所有国家需要用到的字符
2.8 HTML 标签的语义化
-
什么意思呢？
答: 指的是标签的含义
优点:
1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很多的解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好的搜索引擎优化
三、HTML 常用标签
HTML 语言呢，主要学的是结构，认识标签是干什么的就可以了，添加样式什么的我们主要用 CSS 语言
3.1 排版标签
-
解释说明: 排版标签主要和 css 搭配使用，显示网页结构的标签，是网页布局最常用的标签。
-
标题标签
h
说明:
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML 提供了 6个等级的标题，即标题标签语义: 作为标题使用，并且依据重要性递减。
格式:
<h1> 一级标题 标题内容 </h1>
<h2> 二级标题 标题内容 </h2>
<h3> 三级标题 标题内容 </h3>
<h4> 四级标题 标题内容 </h4>
<h5> 五级标题 标题内容 </h5>
<h6> 六级标题 标题内容 </h6>
注意:
一行只能放一个标题
效果如下:
- 段落标签
p
说明:
单词全拼: paragraph
作用:
1. 把文本分割为若干段落
2. 文本会在一个段落中根据浏览器窗口大小自动换行
格式:
<p></p>
- 水平线标签
hr
说明:
单词全拼: horizontal
它是一个单标签
作用:
1. 创建一个横跨网页的水平线
2. 将段落与段落之间隔开
3. 使文档结构清晰，层次分明
格式:
<hr />
效果如下:
- 换行标签
br
说明:
单词全拼: break 中文意思是 打断，换行
它是一个单标签
作用: 强制换行
<br />
div和span标签
说明:
单词全拼:
division 中文意思是 分割，分区
span 就是全拼 中文意思是 跨度，跨距，范围
作用：
1. div 和 span 标签是我们网页布局主要的 2个盒子
注意:
1. div 标签 一行只能放一个 div
2. span 标签 一行上可以放好多个 span
3.2 文本格式化标签
- 解释说明：开发网页时，有时需要为文字设置粗体、斜体、下划线和删除线效果，文本格式化标签呢就是用来显示这些的。
| 标签 | 显示效果 |
|---|---|
<b></b>和<strong></strong> | 文字以 粗体 方式显示(XHTML推荐使用strong) |
<i></i>和<em></em> | 文字以 斜体 方式显示(XHTML推荐使用em) |
<s></s>和<del><del> | 文字以 |
<u></u>和<ins></ins> | 文字以 加下划线 方式显示(XHTML推荐使用ins) |
3.3 标签属性
说明:
1. 制作网页时，如果想让HTML标签提供更多的信息，就设置属性
2. 所谓属性就是外在特性，就是一种事物的特点
格式:
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
举例:
一个手机，它的颜色是黑色的，尺寸是 8寸
<手机 颜色="黑色" 尺寸="8寸"> </手机>
3.4 图像标签 img
说明:
单词全拼: image 中文意思是 图像
作用: 插入图片
格式:
<img src="图像URL" width="属性值" height="属性值" />
注意:
1. 该语法中 src 属性用于指定图像文件的路径和文件名，它是img 标签的必需属性
2. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
3. 属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开
4. 采取 键值对 的格式 key="value" 的格式
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图片不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
| height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
3.5 链接标签
说明:
1. 单词全拼: anchor 中文意思是 锚
2. 若创建超链接，只需用标签把文字包起来就好
格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意:
1. 外部链接 需要以下这种方式: https://www.baidu.com/
2. 内部链接 直接写内部页面名称即可，比如: <a href="index.html"></a>
3. 如果要定义空链接需这样写，<a href="#"></a>
4. 还可以给网页中各种网页元素添加超链接，如:图像、表格、音频、视频,最常见的就是文本超链接了。
3.6 注释标签
说明:
注释内容不会显示在浏览器窗口中，但是它也会被存储在用户的计算机内存地址中，查看源码时可以看到
作用:
1. 注释是给人看，目的是为了更好的理解这部分的代码是干什么的
2. 一般用于简单的描述，如某些状态描述、属性描述等
格式:
<!-- 注释内容 -->
快捷键: ctrl + / 或者 ctrl + shift + /
注意:
推荐 注释内容位于需要注释代码的上面，单独占一行
3.7 路径
说明:
1. 实际工作中，我们的文件不能随便乱放，否则很难寻找，因此我们需要一个文件夹来管理
2. 目录文件夹；就是普通文件夹，存放我们做页面所需的相关文件和素材，如: html文件，图片等等。
3. 根目录；打开目录文件夹第一层就是根目录，当我们做的页面需要的图片非常多时，通常我们会新建一个文件夹来存放它们，这时插入图片时就需要采用“路径”的方式来获取图片文件的位置
4. 路径分为 相对路径和绝对路径两种
- 相对路径
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件的名称即可，如 <img src="小可爱.jpg"> | |
| 下一级路径 | / | 图像文件位于 HTML 文件同级文件夹下，假如图像文件存在 imgs 文件夹下，需这样写 <img src="imgs/小可爱.jpg"> |
| 上一级路径 | ../ | 在文件名之前加入 ../，如果是上两级，使用../../，以此类推，如<img src="../小可爱.jpg"> |
- 绝对路径
说明:绝对路径以 Web 站点根目录为参考基础的目录路径
格式:
"D:Web\imgs\小可爱.jpg" 或者完整的网络地址，例如: "https://imgtu.com/i/5paY5D"
注意:
它的写法，符号 \ 并不是相对路径的 /
四、表格 table
作用:
1. 常见显示、展示表格式数据
2. 可以让数据显示的规整，可读性好
4.1 创建表格
说明:
1. 主要由 table、tr、td这三对标签组成，它们是创建表格的核心，缺一不可
2. table 用于定义一个表格标签
tr标签 用于定义表格中的行，必须嵌套在 table 标签中
td(单词全拼:table data) 中文意思是数据单元格的内容，用来定义表格中的单元格，必须嵌套在 tr 标签中
3. 总结一下，一个完整的表格由表格标签(table)，行标签(tr)，单元格标签(td)组成，没有列的标签，我自己理解是把第一行的 单元格标签 看成表格中的列数。
格式:
<!-- boder 是一个属性，意思的表格的边框是1像素，默认是0像素(无边框) -->
<table border="1px">
<!-- 第一行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第二行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第三行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
效果如下:
4.2 表格属性
作用：
表格的属性主要用来设置表格的样式
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框(默认boder="0"无边框) | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
如图所示:
4.3 表头单元格标签 th
作用: 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
格式:
<table border="1px">
<!-- 第一行 表头 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第四行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>
效果图:
4.4 表格标题 caption
说明:
1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上
2. caption 标签必须紧随 table 标签之后
格式:
<table border="1px">
<!-- 表格标题 -->
<caption>信息表</caption>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>
效果如下:
4.5 合并单元格
说明:
1. 两种方式
1) 跨行合并: rowspan="合并单元格的个数"
2) 跨列合并: colspan="合并单元格的个数"
2. 顺序
1) 按照 先上后下 先左后右 的顺序
3. 三步曲
1) 先确定是跨行还是跨列合并
2) 根据 先上后下 先左后右 的原则找到目标单元格，然后写上 合并方式 还有要合并的单元格数量
3) 删除多余的单元格
格式:
<table border="1px" width="300px" height="100px">
<!-- 第一行 -->
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<!-- 第二行 -->
<tr>
<td colspan="2"></td>
</tr>
<!-- 第三行 -->
<tr>
<td></td>
<td></td>
</tr>
</table>
效果如下:
4.6 表格划分结构
说明:
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成了三个部分，分别是题头、正文、脚注，这样可以功能更好的分清表格结构
1) thead: 用于定义表格的头部，用来方标题之类的东西，内部必须拥有标签
2) tbody: 用于定义表格的主体，放数据本体
3) 放表格的脚注之类
格式:
<table border="1px">
<!-- 表格标题 -->
<thead>
<caption>信息表</caption>
</thead>
<tbody>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</tbody>
</table>
注意:
以上标签都是放到 table 标签中，脚注一般用的不多，就不示例了
效果呢还是一样，没变化
五、列表标签
5.1 认识列表
1. 什么是列表？
答: 前面介绍了表格是用来显示数据的，那么列表就是用来布局的，因为非常整齐和自由
2. 概述: 容器里面装载着结构，样式一致的文字或图表的一种形式就是列表
3. 特点: 列表最大的特点就是整齐、整洁、有序，可组合自由度高。
5.2 无序列表 ul
说明: 无序列表的各个列表项之间没有顺序级别之分，是并列的
格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:
1. <ul> 标签中只能嵌套 <li>，直接在 <ul> 标签中输入其他标签或者文字，这种做法是不允许的
2. <li>与</li>之间相当于一个容器，可以容纳所有元素
3. 无序列表会带有自己的样式属性
效果如下:
5.3 有序列表
说明: 有序列表即为有排列顺序的列表，各个列表项按照一定的顺序排列定义
格式:
<ol>
<li>我是老大</li>
<li>我是老二</li>
<li>我是老三</li>
</ol>
效果如下:
5.4 自定义列表
说明: 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
格式:
<dl>
<dt>我的兴趣爱好</dt>
<dd>游戏</dd>
<dd>乒乓球</dd>
<dd>追剧</dd>
<dt>我喜欢的明星</dt>
<dd>胡歌</dd>
<dd>刘德华</dd>
<dd>自己</dd>
</dl>
效果如下:
5.5 总结
| 标签名 | 定义 | 说明 |
|---|---|---|
ul | 无序列表标签 | 里面只能包含 li 没有顺序 |
ol | 有序列表标签 | 里面只能包含 li 有顺序 |
dl | 自定义列表 | 里面有 2个 兄弟，dt 和 dd |
六、表单标签
1. 表单标签是什么？
答: 我们注册QQ号时往每个选项中填入信息时，每个选项就是用表单标签来做的
2. 说明
1) 表单目的是为了收集用户信息
2) 一个完整的表单通常由表单控件(也叫表单元素)、提示信息和表单域3个部分构成
3) 表单控件包含了具体的表单功能项，分别有单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
4) 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
5) 表单域: 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据无法传送到后台服务器
6.1 input 控件
说明:
1. input 输入的意思
2. 它是一个单标签
3. 它有很多属性
格式:
<input type="属性值" value="你好">
只举例了一些常用的属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选按钮 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | input 控件中的默认文本值 |
| size | 正整数 | input 控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
- type 属性
说明:
1. 这个属性通过改变值，可以决定属于哪种 input 表单
2. 比如 type="text" 就表示 文本框 可以做 用户名，昵称 等
3. 比如 type="password" 就是表示 密码框，用户输入的内容是不可见的
举例:
用户名: <input type="text" />
密 码: <input type="password" />
- value 属性 值
说明:
value 意思是显示默认的文本值
打开网页页面时默认显示指定的文字
举例:
用户名: <input type="text" value="请输入用户名" />
- name 属性
说明:
1. name 意思是表单的名字
2. 主要用于区别不同的表单
3. radio 单选按钮属性，这两者经常搭配，因为 radio 如果是一组，必须命名相同的名字，否则就变成多选了
举例:
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
效果如下:
- checked 属性
说明:
表示定义默认状态
举例:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
打开页面时它就会默认先选中了男，就不放图了，和上图一样，只不过上图那个是我打开页面之后选中的
6.2 label 标签
说明:
用于绑定一个表单元素，当点击 label 标签时，被绑定的表单元素就会获得输入焦点
也就是说，点击 label 标签里面的文字时，光标会定位到指定的表单里面
两种写法
1. 用 label 标签直接把 input 表单包起来
<label>用户名:<input type="text" value="请输入用户名"/></label>
2. 用 label 的 for 属性规定与哪个表单元素绑定，for 属性值需要与 表单元素的 id 属性值一样
<label for="name1">用户名:</label>
<input type="text" value="请输入用户名" id="name1"/>
6.3 textarea 控件(文本域)
作用:
通过 textarea 控件可以轻松的创建多行文本输入框
格式:
<textarea>文本内容</textarea>
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
<input type="text" /> | 文本框 | 只能显示一行文本 | 单标签，通过 value 显示默认值 | 用户名、昵称、密码 |
textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
6.4 select 下拉列表
说明:
当有多个选项让用户选择时，就使用 select 控件
优点: 节约空间
格式:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
1. <select> 中至少包含一对 option
2. 在 <option> 中定义 selected="selected"时，当前项即为默认选中项
效果如下:
6.5 form 表单域
说明:
1. 用于定义表单域，收集和传递用户信息， form 中的所有内容都会被提交给服务器
格式:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
注意:
每个表单都应该有自己表单域
常用属性:
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式，值为 get 或 post |
许久不更了，还望多支持😊
