HTML 笔记
前端是什么？
网页？
将数据以各种方式（如：表格、饼图、柱状图等）呈现给用户，我们就可以称之为前端。
做前端所需要的工具？
notepad、editplus、notepad++、vscode、webstorm等，一般用于前端开发。
前端有那个语言？
html、css、Javascript、vue、react、node.js都是属于前端相关的语言。
HTML介绍
什么是 HTML
HTML 是 Hyper Text Markup Language（超文本标记语言），它可以支持超链接、图片、视频、音乐等元素，然后使用不同的标签来对这些元素进行标记。
这个语言是由一个叫：Tim Berners-Lee(蒂姆·伯纳斯·李)。
HTML 是一种树型结构的文本。它主要包括两个部分：头部和主体。
头部中主要有标记、引入样式、设置文本编码、搜索优的的关键字、以及搜索优化的描述等信息。
主体就是我们可以看到的所有内容，都在这个部分。
HTML的作用
它的作用是用于呈现数据的基石。
HTML发展
①HTML 1.0：在1993年6月作为[互联网工程工作小组]工作草案发布。 [5]
②[HTML 2.01995年1 1月作为[RFC]1866发布，于2000年6月发布之后被宣布已经过时。 [5]
③HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
④HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
⑤[HTML 4.01]（微小改进）：1999年12月24日，W3C推荐标准。 [5]
⑥HTML 5：[HTML5]是公认的下一代Web语言，极大地提升了Web在[富媒体富内容和富应用等方面的能力，被喻为终将改变[移动互联网]的重要推手。
使用HTML
环境安装和配置
要想运行 HTML，只需要有浏览器即可。而我们系统中就自带了浏览器， 所以我们不需要额外的环境。
对于编写 HTML，我们可以使用前面说的工具，我个人习惯使用 webstorm。
在企业中，目前所使用的工具比较多的是两大类：
- vscode，它是微软开发的免费工具
- webstorm，它是 jetbrains 公司开发的收费工具
编写页面
打开工具，编写一个后缀为 .html 的页面，如：index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<body>
^_^大家上午好！
</body>
</html>
页面元素解析：
1. <!doctype html>，它的作用是告诉浏览器，这是一个 html 格式的文档，在解析过程中需要以 HTML 的语法去解析，同时也是告诉浏览器的解析根节点为 html
2. <html> 文件档的根节点，它需要有一个关闭的节点 </html>
3. <meta charset="utf-8">，元数据（描述数据的数据），指定浏览器采用何种编码格式来解析这个文件。常用的编码格式有如下几种：
- ios8859-1，它是欧洲的编码，只支持字母和数字
- gb2312，它是简体中文，一般大陆使用
- gbk，它是繁体（包括简体），一般港台使用
- utf-8，它是国际通用的编码，一般我们现在都是使用这种编码
- utf-16，它是在 utf-8 放不下的时候就采用这种格式。
4. <title>，用于指定这个文档的标题，它会显示在浏览器的标签卡上
5. <head> ，它是用于指定文档头部信息
6. <body>，用于指定文档的主体部分
HTML标签介绍
常用标签
b/strong标签
这个标签是用于加粗文字的，一般用于强调某个部分的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b/strong标签的使用</title>
</head>
<body>
2022年3月23日 <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>
在以后使用中，推荐使用 strong 标签。
i/em 标签
它们的使用是让文字变为斜体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML <em>标记</em>标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>
u标签
它的作用是给文字添加下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>
del删除线
它的使用是给文字添加删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML <del>标签</del> HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>
br换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML <del>标签</del> HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 <br>HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>
p标签 *
这个标签是一个段落标签，它本身就自带了意思距。在这个标签中的文件会独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p标签的使用</title>
</head>
<body>
<p>HTML 不是编程语言，是一种超文本标记语言，用来制作网页的一门语言，由标签组成的，比如：图片标签、链接标签、视频标签...
所谓超文本，有两层含义：</p>
<p>html 可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）</p>
<p>html 可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）</p>
<p>HTML 页面也称为 HTML 文档</p>
<p>HTML 文档的后缀名必须是.html 或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们
HTML 文档里按下多次空格，在网页中只会显示一个空格，并且在 HTML 文档里按下回车键，在网页中也不会进行换行</p>
</body>
</html>
pre 预处理标签
这个标签的作用是书写的内容与显示的样式内容相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pre标签</title>
</head>
<body>
<pre>
静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
</body>
</html>
这个标签一般用于显示源码的。
span标签**
它是一个行内标签，它没有什么特殊的意义，但是在使用中却比较多。一般会接合 css 样式来修饰文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
静夜思版本说明<span>明代版本</span>这是目前流传比较广泛的版本。
</body>
</html>
div标签***
它是一个块状标签，一般用于页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div标签</title>
</head>
<body>
<div class="div2">
div标签是一个块状标签，
一个 div 标签会独占一行，
</div>
<div id="div1">
它没有任意的属性，
但是我们可以给它自定义一个属性，
例如，id、class 等。
</div>
</body>
</html>
sub标签
这个标签的作用是指定下标，一般用于数字方面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sub</title>
</head>
<body>
log<sub>2</sub>
</body>
</html>
sup标签
这个标签的作用是指定上标，一般用于数字方面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sup</title>
</head>
<body>
2<sup>3</sup>=8
</body>
</html>
hr标签
这个标签用于给页面划水平线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hr</title>
</head>
<body>
静夜思
<hr size="5" width="100" align="left">
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</body>
</html>
标签属性说明：
size：用于指定线的粗线，值越大线越粗
width：用于指定线的宽度，值越大越宽
align：用于指定线的对齐方式，有以下三个值：
left：居左对齐
center：居中对齐，它是默认值
right：居右对齐
hn标签
这个标签中的 n 是 1 ~ 6 的数字，一般用于标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hn</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
HTML5中语义标签
这个标签是 HTML5 中定义的新的语义标签，有以下几个：
- header：用于定义页面的顶部
- article：用于表示文章的内容
- section：用于定义内容的分块信息
- nav：用于定义页面的导航部分
- aside：用于定义页面的侧边栏
- footer：用于定义页面的页脚部分
- address：用于定义用户邮件、地址等信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新标签的使用</title>
</head>
<body>
<header>这是头部信息</header>
<nav>首页 | 新闻 | 音乐 | 游戏</nav>
<aside>侧边栏</aside>
<footer>@copyright; 2024</footer>
</body>
</html>
特殊字符
在 HTML 中有很多特殊字符，如下表所示
| 特殊字符 | 转义码 |
|---|---|
| 空格 | |
| < | < |
| > | > |
| 版权 | © |
多媒体标签
img***
这个标签的作用是在页面中引入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<img src="image/5.jpeg" width="200" height="50" border="1" alt="这是图片" title="这是图片">
</body>
</html>
标签属性说明：
src：这个属性非常重要，用于指定图片显示的路径，可以是相对路径，也可以是绝对路径。（简单来说，在 windows 中带了盘符，在 Linux 中以/开头的路径，在链接中以 http:// 开头的就是绝对路径，其他都是相对路径。相对路径的参考点就是这个对象本身。）
width：用于指定图片显示的宽度，如果只指定宽，则高会根据宽度来等比例绽放
height：用于指定图片显示的高度，如果只指定高，则宽度会根据高度来等比例绽放。注意：width和height两个属性不要同时指定。
border：用于指定力图片显示的边框粗细，默认是无边框
alt：是在图片不能正常显示时才会显示这个文字内容
title：用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。
a 标签***
这个标签是用于作链接的标签。
第一种用法：超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_blank">打开百度</a><br>
</body>
</html>
属性说明：
href：这个属性是一个必须属性，用于指定要打开的目标地址
target：链接打开的方式，有以下几个值：
- _blank：在新窗口打开
- _self：在本窗口打开，默认值
- _top：在父窗口打开，一般用于 frame 框架时
- _parent：在父窗口打开，一般用于 frame 框架时
第二种用法：锚点
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
</head>
<body>
<a href="#bottom">底部</a> | <a href="demo2.html#bottom">demo2.html</a>
<img src="image/6.jpeg">
<a name="bottom"></a>
</body>
</html>
demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
</head>
<body>
<a href="demo1.html">demo1.html</a>
<img src="image/7.jpeg">
<a name="bottom"></a>
</body>
</html>
audio 标签
这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls="controls" autoplay="autoplay"></audio>
<audio controls>
<source src="https://www.runoob.com/try/demo_source/horse.mp3">
</audio>
</body>
</html>
标签属性说明：
1. controls：它是用于对播放器进行控制器的，即显示播放器的控制按钮
2. src：用于指定音频文件的路径
3. autoplay：指定是否自动播放
4. loop：指定是否循环播放
video标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay width="200"></video>
<video controls>
<source src="https://www.runoob.com/try/demo_source/movie.mp4">
</video>
</body>
</html>
标签属性说明：
1. src：指定要播放的视频地址，可以是相对路径，也可以是绝对路径。这个标签所支持的视频格式不多，目前只把持 mp4、ogg 两种
2. controls：显示播放控制按钮
3. autoplay：自动播放
4. loop：自动循环
5. width：设置播放器的宽度
6. height：设置播放器的高度
表格标签**
在我们进行数据展示时，很多时候都会用到表格，特殊是在后台进行数据管理时，或者显示列表数据时，就会用表格。
要使用表格就需要用到 table 标签，而表格是由行和列组成。行的标签是 tr，而列的标签是 td 或 th。
基本表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单表格</title>
</head>
<body>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
表格的标签和属性说明：
table：用于绘制表格
tr：用于绘制表格的行
td：用于绘制表格的列（单元格）
width：指定表格的宽度，也可以是 td 的属性
border：指定表格的边框粗细
cellspacing：指定单元格之间的间距
cellpadding：指定单元格边框与单元格中内容的距离
align：用于指定表格对齐方式：
- left：左对齐，默认值
- center：居中对齐
- right：右对齐
align属性可以是 table，也可以是 tr，还可以是 td。如果是 table 的，表示对整个表格有效；如果是 tr 的，表示对当前行有效；如果是 td 的表示只对当前的单元格有效。
带标题的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带标题的表格</title>
</head>
<body>
<!-- 我们画一个三行三列的表格 -->
<table width="200" border="1" cellspacing="0">
<caption>第二个表格</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>hello</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
使用 caption 来指定表格的标题，使用 thead 标签来指定表格的头，tbody 来指定表格数据区，tfoot 指定表格的尾部。
td 和 th 的区别：
- td中的内容是普通格式，而 th 中的内容是加粗的格式
- td中的内容是左对齐，而 th 中的内容是居中对齐
跨行跨列表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行跨列的列表</title>
</head>
<body>
<table width="200" border="1" cellspacing="0">
<tr align="center">
<td colspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center">
<td>5</td>
<td>6</td>
<td>7</td>
<td rowspan="2">8</td>
</tr>
<tr align="center">
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</body>
</html>
相关属性说明：
1. colspan：用于指定要跨多少列，它的值是一个数字
2. rowspan：用于指定要跨多少行，它的值是一个数字
表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格嵌套</title>
</head>
<body>
<table width="150" border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>
<table width="100%" border="1" cellspacing="0">
<tr>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>43</td>
<td>44</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
列表标签***
在 HTML 中，列表标签有以下几种：
- ul
- ol
- dl
ul
它是无序列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul</title>
</head>
<body>
<ul type="circle">
<li>西安</li>
<li>北京</li>
<li>重庆</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</body>
</html>
标签和属性说明：
ul：用于指定无序列表
li：指定列表中的某一项
type：指定无序列表的格式，有以下几个值：（了解）
- disc：实心圆形，默认值
- square：实心方形
- circle：空心圆形
ol
它是有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol</title>
</head>
<body>
<ol type="1">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
<ol type="a">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
<ol type="A">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
<ol type="i">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
</body>
</html>
type属性有以下值：
1. 数字：默认值
2. a：以小写字母 a 开始
3. A：在大写字母 A 开始
4. i：以罗马字开始
dl
它数据列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dl</title>
</head>
<body>
<dl>
<dt>陕西地名</dt>
<dd>西安</dd>
<dd>潼关</dd>
<dd>宝鸡</dd>
</dl>
</body>
</html>
表单标签***
form标签
这个标签是用于表单提交的标签，一般在与用户交互时就会用到 form 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单标签</title>
</head>
<body>
<form name="form1" action="demo1.html" method="post">
<input type="submit" value="提交">
</form>
</body>
</html>
标签属性说明：
name：用于给这个表单取一个唯一的名称，便于后续使用 js 来操作这个表单
action：表单提交的地址
method：表单提交的方式，有以下两个值：
- get：表单以 get 方式提交
- post：表单以 post 方式提交
补充get和post提交的区别：
- get提交的数据会以参数的形式体现在浏览器地址栏中，而 post提交的数据是在请求头中
- get提交方式提交的数据不能超过4k大小，而post提交方式理论上是没有大小限制的
input
这是表单元素中非常重要一组标称，它有很多类型：
- text：最常见的类型，用于提交文本字符串内容
- password：用于提交密码数据
- radio：单选按钮
- checkbox：多选按钮
- submit：提交按钮
- reset：重置按钮
- button：普通按钮
- image：图片按钮
- file：文件上传域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form2表单元素之input的使用</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" placeholder="姓名"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="number" name="age" value="18" placeholder="年龄"><br>
<input type="email" name="email" placeholder="邮箱"><br>
<input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" checked value="女"> 女 <br>
<input type="checkbox" name="love" value="看书" checked> 看书 <input type="checkbox" name="love" checked value="电影"> 电影 <input type="checkbox" name="love" value="游戏"> 游戏<br>
<input type="file" name="file"><br>
<input type="button" name="btn" value="普通按钮"> <br>
<input type="reset" name="reset" value="重置"><br>
<input type="submit" name="submit" value="提交"><br>
<input type="image" src="image/8.jpeg" width="50">
</form>
</body>
</html>
select
select是下拉列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单之下拉列表</title>
</head>
<body>
<form action="" method="post">
<select name="city">
<option>--请选择--</option>
<option value="西安">西安</option>
<option selected value="北京">北京</option>
<option value="上海">上海</option>
</select>
<hr>
<select name="hobby" size="3" multiple>
<option value="看书">看书</option>
<option value="电影">电影</option>
<option value="音乐">音乐</option>
<option value="游戏">游戏</option>
</select>
</form>
</body>
</html>
标签属性说明：
name：表单提交时要获取对应元素值是所需要的属性
value：指定select中每一个子元素的值
size：指定 select 可看到的元素个数，默认值是 1
multiple：表示可以多选
textarea
这个标签是用于输入大文本内容的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单之textarea</title>
</head>
<body>
<form action="" method="post">
<textarea name="content" cols="50" rows="5">内容</textarea>
</form>
</body>
</html>
标签属性说明：
name：用于获取元素值的属性
cols：用于指定文本框的宽度
rows：用于指定文本框的高度
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
