THML
什么是HTML语言？
HTML:超文本标记语言 (Hyper Text Markup Language)，用于描述网页中存在哪些网页元素。
HTML规范的发展
-
1993年HTML1.0标准发布（有互联网工程小组IETF）。
-
1995年—1997年：HTML2/3/4标准发布（由W3C组织进行标准定义），每一个标准都不断完善了html的语法规范。
-
2014年HTML5标准发布（由W3C组织进行标准定义），增加了媒体播放、画图、定位等功能。(W3C介绍见备注**)
-
W3C：万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南。
这都不重要，重要的是W3C可以视作web开发领域的相关部门或有关领导
浏览器内核
HTML文件的基本结构
…****标签标记HTML文档的开始和结束
头部部分：这部分包括标题和其他说明信息 主体部分：这部分包含文本、图像和连接
<!DOCTYPE html><!--声明HTML版本、HTML5 -->
<html><!-- 告诉JVM此文件是一个HTML文件-->
<head> <!-- 存放 样式 JS 或者其他声明的区域 -->
<meta charset="utf-8"> <!-- 声明页面部分的编码格式-->
<title></title> <!-- 声明页面的标题 -->
<style type="text/css"> /* 声明页面样式*/
</style>
<script type="text/javascript"> /*声明页面的JS*/
</script>
</head>
<body> <!-- 编写页面内容部分-->
</body>
</html>
标签的公用属性**：**所有标签都具备的属性。
-
–class：规定当前元素所引用的样式类名称。
-
–id：规定当前元素在网页上的唯一标识，一般在css、js中会根据id检索当前元素。
-
–name：当前元素在文档上的名称，可以重复。
-
–style：规定当前元素的显示样式，取值为css样式表。
-
–title：规定当前元素的标题，类型为文本，可在工具提示中显示。
-
以上是html标准常用的公用属性
注释
-
HTML注释中的内容不会在页面中显示。
-
格式：
-
合理的使用注释可以帮助开发人员理解网页的代码
-
煮是不能嵌套
颜色
在css中可以直接使用颜色的关键字来代表一种颜色
十六进制颜色
- 用的最多的颜色是十六进制符号，一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字
- 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些制定浓度的红绿蓝混合而成的。
- 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F
RGB
-
也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数
-RGB(100%,0%,0%)
-RGB(0,255,0)
-
第一个数表示红色的浓度，第二个数表示绿色浓度，第三个表示蓝色的浓度
RGBA
- RGBA表示一个颜色和RGB类似，只不过比RGBA多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明
- -RGBA（255,100,5,0.5）
基本标签
标题标签
-
语法：
这是标题标签
-
说明：
到
字体大小依次递减
-
作用：
– h1h6都是网页中的标题标签，不同的是，从h1h6重要性越
来越低。
– 标题标签相当于正文的标题，重要性仅次于页面的title。
– 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。
段落标签
- 作用：表示网页中的一个段落。
- 语法：****<P align=“center”>段落标签
- **属性：**align
- **作用：**对齐方式
- 属性值：left， center ，right
换行标签
- **语法：****<**br />
- 作用：换行标签添加至结尾处
分隔标签
- 语法**: <**hr color=“red" size=“5px” width="" align=”” />
- 属性：****Color颜色 sizi大小-单位px（像素值） width宽度 align对齐方式
- 属性值：red， 5px
文本修饰标签
- 语法：****<FONT **size=“2” color=“red” face=“**宋体” >
- 属性：****Color颜色 sizi大小尺寸 face字体
- 作用：设置字体
- 属性值：red， 2
强调标签
- em标签用于表示一段内容中的着重点。
- strong标签用于表示一个内容的重要性。
- 这两个标签可以单独使用，也可以一起使用。
- 通常em显示为斜体，而string显示为粗体
字体标签
- i标签会使文字变成斜体
- b标签回事文字成粗体
- 这两个标签和em和strong类似，但是这两个标签没有语义
- 所以根据HTML5标准，当我们只想设置文本特殊表示，而不需要强调内容时就可以使用i和b标签
small标签
- small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
- 浏览器在显示small标签时会显示一个比父元素小的自豪。
cite标签
- 使用cite标签可以指明对某内容的引用或者参考.列如:戏剧、文章或者图书的标题，歌曲、电影、照片或者雕塑的名称等。
blockquoto标签和q
- blockquote和q表示标记引用的文本
- blockquote用于长引用，q用于短引用
- 在两个标签中还可以使用cite属性来表示引用的地址
sup和sub
- sup和sub用于定义上标和下标
ins和del
- ins表示插入的内容，显示时通常会加上下划线
- del表示产出的内容，显示时通常会加上删除线
details标签
- 定义和用法：details标签用于表示文档或文档某个细节
特殊符号
<!--
<p>标签：
段落标签
闭合
独占一行
-->
<p>标题标签</p>
<!--
h1~h6
字体标签
闭合
字体加粗
会换行（独占一行）
-->
<h1>标题标签1</h1><h1>标题标签2</h1><h2>标题标签</h2><h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<p>文本修饰标签</p>
<!--
<font>标签
文本修饰标签
size：字体大小
color：字体颜色
face：字体样式
闭合
非独占一行
-->
<font size="7" color="hotpink" face="楷体">文本修饰标签</font>
<font size="7" color="aqua" face="楷体">文本修饰标签</font>
<p>段落标签</p>
<p id="p1">段落标签</p>
<p id="p1">段落标签</p>
<p>分割标签</p>
<!--
<hr>标签
分隔标签
非闭合
独占一行
-->
<hr color="#FF0000" size="7" width="500px"/>
<p>超链接标签</p>
<!--
<a>标签
超链接标签
闭合
非独占
-->
<a href="https://www.baidu.com" target="_self">点击进入百度</a>
<a href="https://www.baidu.com" target="_blank">点击进入百度</a>
<p>文字加粗</p>
<!--
<b>标签
文字加粗标签
闭合
非独占
-->
<b>文字加粗</b>
<b>文字加粗</b>
<p>倾斜文字 </p>
<!--
<i>标签
倾斜文字标签
闭合
非独占
-->
<i>倾斜文字 </i>
<i>倾斜文字 </i>
<p>下划线</p>
<!--
<u>标签
下划线标签
闭合
非独占
-->
<u>下划线</u>
<u>下划线</u>
<p>内容中的语气着重点</p>
<!--
<em>标签
着重标签
闭合
非独占
-->
<em>内容中的语气着重点</em>
<em>内容中的语气着重点</em>
<p>内容的重要性</p>
<!--
<strong>标签
强调标签
闭合
非独占
-->
<strong>内容的重要性</strong>
<strong>内容的重要性</strong>
<p>旁注、版权信息 </p>
<!--
<small>标签
旁注、版权信息标签
闭合
非独占
-->
<small>旁注、版权信息 </small>
<small>旁注、版权信息 </small>
<p>cite标签</p>
<!--
<cite>标签
书名标签
闭合
非独占
-->
<cite>《七龙珠》</cite>
<cite>《七龙珠》</cite>
<p>短引用</p>
<!--
<q>标签
短引用标签
闭合
非独占
-->
孔子曰:<q>学而时习之，不亦说乎</q>
<p>上标</p>
<!--
<sup>标签
上标签
闭合
非独占
-->
10<sup>9</sup>
<p>下标</p>
<!--
<sub>标签
上标签
闭合
非独占
-->
H<sub>2</sub>O
<p>插入的内容</p>
<!--
<ins>标签
下划线标签
闭合
非独占
-->
<ins>插入的内容</ins>
<!--
<del>标签
删除线标签
闭合
非独占
-->
<del>删除的内容</del>
<details>
<summary>标题</summary>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</details>
图像标签
-
作用：在网页上显示图片
-
语法：
<IMG src=“images/adv_2.jpg” width=“300“ height=”150“ alt=”明星演唱会开幕” title=“全明星” >
-
属性：
src：指定图像的路径(地址)
title：鼠标悬停至图像上时，提示信息
alt：图像为正常显示时，展示的提示信息
width：图像的宽度，单位是像素(px)
height：图像的高度《单位是像素(px)
align：图像与文本相对位置的调整（center水平居中）
超链接标签
- 作用：访问（链接）到其他网页。
- 超链接的三种状态
- 当连接未访问过时，为蓝色
- 当连接访问过时，为紫色
- 当链接激活时，为红色
- 闭合标签
- 不自动换行
- 常规属性
- href:访问地址
- target：访问方式
<!-- 锚标记-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#" name="top">顶部</a>
<div style="height: 2000px;"></div>
<a href="#top">返回顶部</a>
</body>
</html>
相对路径、绝对路径
- 相对路径：指定相对于当前文件的文件位置。（…/返回上一级）
- 绝对路径 指定从根目录到文件的完整路径。
- 根相对路径 指定从项目根目录到文件的完整路径。
列表标签
项目列表和编号：
有序列表(ol)
属性：type:阿拉伯数字，大小写英文字母，大小写罗马数字
无序列表(ul) 特点：表项开头有小黑点，li独占一行
属性：type：
- circle空心圆圈
- disc实心黑点(默认样式)
- square实心正方形黑点
定义列表(dl)：
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
列表中可以添加文字、图片、音频、视屏，还可以列表中嵌套列表
滚动标签
<marquee> TEXT</marquee>
<!--作用：用于把marquee中的内容进行滚动
属性：direction描述用来进行滚动方向（up、down、lift、rigth）
scrollamount/scrolldelay用来控制滚动的快慢
-->
多媒体标签
音频标签
标签
- 作用：用于输出音频
- 属性：src 音频来源
controls是否显示控制栏
视频标签
标签 用于输出视频
属性：src 视频来源
controls是否显示控制栏
div标签
标签元素的分类：(是否独占一行,是否可以设置宽高)
三种标签可以通过css样式进行相互转换（display）
(block)块状标签：div,p，h1，ul,ol,li,dl,dt,dd,hr,marquee
(inline)行内标签：a,video,audio
(inline-block)行内块标签：img
div标签：用于页面分块，分区
表格 table
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对HTML标签，分别为 table</table、tr</tr、td</td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。
注意：
\1. 中只能嵌套
\2. 标签，他就像一个容器，可以容纳所有的元素
表格属性
表头标签
表头一般位于表格的第一行或第一列。
表格结构（了解）
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
：用于定义表格的头部。必须位于
位于
表格标题
表格的标题： caption
定义和用法
caption 元素定义表格标题。
<table> <caption>我是表格标题</caption></table>
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
合并单元格(难点)
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
总结表格
表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表单标签
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
讲解：
- form ：标签是成对出现的，以开始，以结束。
- action ：浏览者输入的数据被传送到的地方,比如一个JSP页面(save.jsp)。
- method ： 数据传送的方式（get/post）。
<form method="post" action="save.jsp">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息提交不到服务器上）。
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。
3、enctype:属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
语法
<form enctype="value">
属性值
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为 “+” 加号，但不对特殊字符编码。 |
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<input
name=value
type=text|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onxxx=function>
name：设定当前变量名称。
type：决定了输入数据的类型。其选项较多，各项的意义是：
type=text：表示输入单行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器；
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1``、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2``、**cols ：**``多行输入域的**列数**。
3``、**rows ：**``多行输入域的**行数**。
4``、在<textarea></textarea>标签之间可以输入**默认值**。
举例：
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
使用下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
讲解：
1、value：
2、selected=“selected”：
设置**selected=“selected”**属性，则该选项就被默认选中。
使用下拉列表框进行多选
下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。如下代码：
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
使用提交按钮，提交数据
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type``**：只有当type值设置为submit时，按钮才有提交作用**
value``**：**``按钮上显示的文字
**举例**：
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
</form>
使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type``**：只有当type值设置为reset时，按钮才有重置作用**
value``**：**``按钮上显示的文字
**举例**：
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子：
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="index.html" method="get">
<table>
<tr>
<td>文本框</td>
<td>
<input type="text" name="username" value="默认值" size="7"
maxlength="10" placeholder="提示信息" />
</td>
</tr>
<tr>
<td>密码框</td>
<td>
<input type="password" name="pwd" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>单选</td>
<td>
<input type="radio" name="sex" value="nan" id="nan" /><label for="nan">男</label>
<label><input type="radio" name="sex" value="nv"/> 女</label>
</td>
</tr>
<tr>
<td>复选</td>
<td>
<input type="checkbox" name="hobby" value="eat" checked />吃
<input type="checkbox" name="hobby" value="drink" />喝
<input type="checkbox" name="hobby" value="play" />玩
<input type="checkbox" name="hobby" value="sleep" />睡
</td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="month">
<optgroup label="春">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="2">三月</option>
</optgroup>
<optgroup label="夏">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="2">三月</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>多行文本</td>
<td>
<textarea rows="5" cols="5" name="area">自我介绍</textarea>
</td>
</tr>
<tr>
<td>文件</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>隐藏域</td>
<td>
<input type="hidden" value="隐藏" name="hid" />
</td>
</tr>
<tr>
<td>数字/滑块</td>
<td>
<input type="number" name="num" min="0" max="10" step="2" value="0" /><br />
<input type="range" name="range" min="0" max="10" step="2" value="0" />
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" name="email" />
</td>
</tr>
<tr>
<td>URL</td>
<td>
<input type="url" name="url" />
</td>
</tr>
<tr>
<td>搜索</td>
<td>
<input type="search" name="search" />
</td>
</tr>
<tr>
<td>颜色</td>
<td>
<input type="color" name="color" />
</td>
</tr>
<tr>
<td>日期</td>
<td>
<input type="date" name="d" value="2021-10-10" />（日期）<br />
<input type="datetime" name="dt" /> (移动端)<br />
<input type="datetime-local" name="dtl" value="2021-10-10T15:10" />(PC端)
</td>
</tr>
<tr>
<td>按钮</td>
<td>
<input type="submit" value="提交" />
<button type="submit" >提交</button>
<input type="image" src="img/sub.jpg" width="100px" /><br />
<input type="reset" />
<button type="reset" >重置</button><br />
<input type="button" value="按钮" />
<button type="button">按钮</button>
</td>
</tr>
</table>
</form>
</body>
</html>
框架集
<frameset rows="20%,*">
<frame src="top.html" name="top" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="main.html" name="main" />
</frameset>
</frameset>
frameset属性
rows:将页面上下分割
值:"20%,20%," 此示例时将页面上下分成三部分，数值为每部分所占大小， * 标识剩余全部
cols:将页面左右分割
值:"20%,20%," 此示例时将页面左右分成三部分，数值为每部分所占大小， * 标识剩余全部
frame属性
src：引用页面的url
name：当前框架的名字，一般用于超链接的target属性
内嵌框架
<iframe src="b.html" name="frame" width="200px" height="250px" scrolling="no" frameborder="no" ></iframe>
属性
iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
<button type="reset" >重置</button><br />
<input type="button" value="按钮" />
<button type="button">按钮</button>
</td>
</tr>
</table>
</form>
</body>
# 框架集
```html
<frameset rows="20%,*">
<frame src="top.html" name="top" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="main.html" name="main" />
</frameset>
</frameset>
frameset属性
rows:将页面上下分割
值:"20%,20%," 此示例时将页面上下分成三部分，数值为每部分所占大小， * 标识剩余全部
cols:将页面左右分割
值:"20%,20%," 此示例时将页面左右分成三部分，数值为每部分所占大小， * 标识剩余全部
frame属性
src：引用页面的url
name：当前框架的名字，一般用于超链接的target属性
内嵌框架
<iframe src="b.html" name="frame" width="200px" height="250px" scrolling="no" frameborder="no" ></iframe>
属性
iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
