HTML5课堂入门笔记（完）
HTML5入门笔记
一、网页设计中 的软件的安装设置
1、typroa—笔记本工具（方便记录说明文档，图片等内容）
减号加空格可出现此点
文件名：由 基本文件名.扩展名（扩展名来确定这个文件的打开方式）
打开扩展名的操作如图所示：
1、打开我的电脑 或者此电脑
2、点击查看，将文件扩展名选中
3、则，文件后面则会显示扩展名
2、greenshot—截图工具
设置
1、将安装的greenshot中点击右击选中preferences
2、如图操作：
3、如图所示：
4、如图：
5、设置完成，在之后的截屏，直接使用快捷键 ALT+Q就可以了。
3、sublime—网页设置的开发工具
在安装好软件后，通常有的电脑的软件会出现 显示不出汉子的现象
如图：
那么如何设置成有字体的状态呢？
- 第一：打开你的sublime软件，点击Preferences
- 第二：选择设置 - 默认，则会出现很多代码，如图：
第三步，在该处查找第275行的代码块，并将引用处替换为 dpi_scale: ，如图所示。
二、HTML的文档结构
1、基本结构
1.1简介
- HTML标记名是由尖括号包围的关键词名，例如
<html>,通常这些标记通常是成对出现的,例如:<html><html>;- 以
<html>作为主标签包含<head>标头和<body>主体内容; - 标头部分提供网页相关信息,包括标题、文档类型、字符编码等摘要信息;
- 主体内容则展示网页需要显示的所有信息;
- 合理的缩进;签名部分通常不区分大小写且常用小写形式。
- 以
1.2开发工具：
记事本（notepad）,sublime ,notepad++,Dreamweaver,VScode,webstorm等
sublime的使用：
第一：打开sublime
在文档中按下Ctrl键加N键以创建新文件，并按Ctrl键加S键完成保存操作。 请确保指定正确的扩展名（建议选择.html或.htm文件类型），否则可能导致无法正常显示网页内容。
当输入根标签或头部标签时会感到比较麻烦。因此建议采用Tab键来进行快速操作。比如，在输入HTML标签时（如：rootTag），如果正确地输入正确的标签名称并按Tab键就会自动生成相应的代码。
第三：将代码输入完后，课进行在浏览器中打开,进行 验证。
代码：
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
welcome to html!
</body>
</html>
代码解释案例：
为操作简便起见，在Sublime Text中执行以下操作：首先创建一个名为project的专门文件夹；然后在此项目文件夹内分别添加三个子文件夹：分别是用于存储编写的代码（code目录下）、用于存放文档（document目录下）以及用于放置图片（image目录内）。这样一来不仅能够方便地打开及查看所需的文件与图片还能使工作流程更加条理化。
将生成好的project文件夹导入到Sublime中进行操作，并能实现更加便捷的操作体验。
1.3浏览器
- 常见的浏览器包括IE（微软）、Chrome（谷歌）、Firefox、Safari（苹果）；
- 浏览器的主要功能是读取HTML文件，并以网页形式展示内容。
- 在网页展示时，这些标签被用来解释和呈现内容。
2标签
2.1标签的组成
一个完整的html标签的组成：
<标签名 属性名="属性值">内容</标签名>
属性值要用双撇号括起来，一般用双撇号（双撇号就是英文的双引号）
代码：
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor="yellow" text="red">
标签的组成
</body>
</html>
代码解释案例：
2.2标签的分类
根据标签是否关闭，分为：关闭型和非关闭型
关闭型：有开始标签，有结束标签，即标签成对出现
<html></html>
<head></head>
<title>标题</title>
<body>主体<body>
<h1>一级标题</h1>
<h1>...<h6>
代码解释非关闭型：只有开始标签，没有结束标签
<meta>
<br>
<hr>
代码解释根据标签是否独占一行，分为：块级标签和行级标签
- 块级标签：显示为块状，独占一行
<h1>大家好</h1>
<h1>一级标题<h1>
...
<h6>六级标题<h6>
<hr>
代码解释- 行级标签：在行内显示，可以与其他文本 内容在同一行显示
<span></span>
代码解释代码：
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor="yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标题</h2>
<hr>
<h5>五级标题</h5>
咪咪 <br> 佛佛
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
代码解释案例：
2.3注释
注释内容通常不会出现在浏览器界面中，并且其主要作用是作为对html代码中的各种元素进行标记和解释。然而，在访问源代码文件时则可以获取到这些相关信息。
<!--注释--> 注释的快捷键是：Ctrl+/
代码解释如图：
2.4 实体字符
实体字符也称为特殊字符，用于显示一些特殊符号：如< > & 空格等
语法：
语法格式：& + 实体字符的名称;
常用的实体字符：
< < 小于号 less than
> > 大于号 great than
两个小于号和大于号，就构成了书名号
空格 space 在html中对于连续的空白字符（空格、缩进、换 行等），在浏览器中显示时，只能显示一个空格。
& & 与
" " 英文状态下的双引号 也可以直接打双引号，浏览器中可以显示。
© 版权符号 copyright
® 注册符号 register
× 关闭符号
代码解释请注意：关键字符 必须严格按照大写字母与小写字母之分区分，并且对大、小写字母的敏感度非常高。如果出现大、小写字母书写错误，则无法正确显示内容。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 这是我们的第一个html的注释 -->
html从入门到精通
<hr>
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用<表示<小于号
<hr>
"HTML语言" 或者 "HTML语言"
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&；<br>
&aMp; 实体字符名称是区分大小写，大小写敏感
</body>
</html>
代码解释案例：
2.5文档类型
在HTML文档的第一行，使用来声明html文档的类型；
主要功能在于指示网页使用的HTML文档类型。简单来说，它用于指定网页所使用的HTML版本标准。
目前基本都使用的是html5，
快速出现构架的方法：
1、输入：html:5然后再按Tab键 或者输入！再按tab
如图：
或者
最后都可以生成：
2、输入：html:4s然后再按Tab键
如图：
生成：
由于第二中特别麻烦，所以现在大多数都用的是第一个。
三、常用标签
1.基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 属于非关闭性标签 |
| p | 段落标签 | 属于关闭性标签，属于块状标签，前后的段落之间有明显的距离 |
| h1.h2…h6 | 标题标签 | 按照h1到h6逐渐表小，属于块级标签，并且文本会加粗显示 |
| pre | 预格式化标签 | 保留编码时的格式 |
| div | 分区标签 | 常用作容器来使用，一般用于页面布局划分，块级标签 |
| span | 范围标签 | 默认情况没有任何效果，一般用来设置行类的格式 |
| ol、li | 有序列表 | 有顺序的项目列表 |
| ul、li | 无序列表 | 无顺序的项目列表 |
| dl、dt、dd | 定义列表 | 对术语、图片进行描述和定义的列表 |
| hr | 水平线标签 | 属于非关闭性标签，属于块级标签 |
| img | 图像标签 | 属于非关闭性标签，属于块级标签 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello<br>html
<p>
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<p>
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
</body>
</html>
代码解释案例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
HTML从入门到精通
学员：张杰
</pre>
<hr>
<div style="width:400px;height: 100px;background:red">导航部分</div>
<div style="width:400px;height: 500px;background:yellow">正文部分</div>
<div style="width:400px;height: 100px;background:blue">版权部分</div>
<hr>
iphone XR,不要8888,不要1888,只要<span style="font-size:50px;color:red">98元</span>
</body>
</html>
代码解释案例：
1.1有序列表
ol：ordered list
li：list item
默认情况下，使用阿拉伯数字，从1开始标记，可以通过属性进行修改。
type属性：用于指定列表项目前的符号标记，并支持以下几种取值：数值1（默认）、字母a或A、以及罗马数字i或I。
2、start属性：是设置起始值，值必须是一个数字
1.2无序列表
ul：unordered list
li：list item
默认使用时为 实心圆作为服务好标记，可以通过属性进行修改。
type 属性：用于指定列表项前的样式符号，默认显示为 none（无显示）。其可能取值包括：disc（实心圆）、circle（空心圆）、square（正方形）以及 none（不显示符号）。
1.3定义列表
dl：definition list
dt：definition title
dd：definition description
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type="1" start="5">
<li>吃鸡</li>
<li>王者荣耀</li>
<li>LOL</li>
<li>WOW</li>
</ol>
<hr>
<h3>可爱的学生们</h3>
<ul type="disc">
<li>张三</li>
<li>学委</li>
<li>团支书</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>它是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd>
<dd>可以分为PC端和移动端</dd>
<dt>HTML</dt>
<dd>是一种用来制作网页的标记语音</dd>
<dt>JAVA</dt>
<dd>是一种跨平台编辑语言</dd>
</dl>
</body>
</html>
代码解释案例：
1.4水平线标签
hr：horizontal
常用的属性：
color颜色
两种写法：
第一种：
1、颜色名称：如 red、green、blue、white、pink、orange等
第2点：十六进制RGB采用红绿蓝三原色，并以#RRGGBB格式表示。每个颜色通道的取值范围是0至255，并转换为十六进制表示时为00至FF。
3、eg：如何去写？： #FF0000 红色、#00FF00 绿色、#0000FF 蓝色、#000000 黑色、#FFFFFF 白色、#CCCCCC 灰色、#FF7300 橙色
第二种：
1、size：粗细、数值
2、width：宽度
同样有两种写法：
(1)、像素：绝对值（固定值）
(2)、百分比：相对值，相对于该标签所在的父容器的宽度的百分比
3、align对齐
取值：center默认 left right
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#00FF00">
<hr size="9px" color="yellow">
<hr color="red" width="400px">
<hr color="blue" width="50%" size="10">
<div style="width:600px;height:300px;background:#cccccc">
<hr color="red" width="50%" align="left">
</div>
</body>
</html>
代码解释案例：
1.5图像标签
img：image
常见的图片格式：.jpg .png .gif .bmp
常见属性：
src：source指定图片的路径（来源），必选参数
1、如果图片与html源代码在同一个文件夹中，可以直接书写图片的名称；
通常情况下，在存储时会将多个图像存储在一个单独的文件夹中,例如The folder named project\image. 此时,请确保在每个图像文件名称的前面 prepended 上相应的文件系统路径或完整的文件夹名。
路径的分类：
相对路径 ；
1、表示： ./当前路径 ；
2、…/当前位置的上一级文件夹 ；
3、提示：…/image
alt：当图片无法正常显示时提示的信息 ；
title：当鼠标停留在图片上时显示的提示信息；
width/height：
1、设置图片的宽度和高度 ；
2、默认情况下原始尺寸显示 ；
3、如果只设置其中一个，则另一个按比例自动缩放 ；
4、如果同时设置宽和高，可能会导致图片变形
5、有两种写法：
(1)、像素：绝对值（固定值）
(2)、百分比：相对值，相对于该标签所在的父容器的宽度的百分比
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
<hr>
<img src="../img/mac.jpg" width="400px" height="100px">
<hr>
<img src="../img/mac.jpg" width="50%">
<hr>
<div style="width:800px;height:800px;background: red;">
<img src="../img/mac.jpg" width="50%">
</div>
</body>
</html>
代码解释案例：
2.其他标签
| 标签 | 含义 | 说明 |
|---|---|---|
| i | 斜体 | italic |
| em | 强调的内容 | 在浏览器中显示时一般为斜体 |
| address | 地址 | 在浏览器中显示时一般为斜体，属于块级标签 |
| b | 加粗 | bold |
| strong | 强调的内容 | 在浏览器中显示时一般为加粗现象 |
| del | 删除线 | delete |
| ins | 下划线 | |
| sub | 下标 | |
| sup | 上标 | |
| bdo | 设置文本的方向 | 通过属性dir=“ltr”(left to right) “rtl”(right to left)从 右到左 |
| abbr | 设置文字缩写 | 通过title属性设置当前鼠标停留在文字上时显示的 提示信息（span标签也可以实现） |
| small | 相对于当前其他文本的字号减 小一号 | |
| big | 相对于当前基他文本的字号增 大一号 |
我们要说这些标签呐？ 是为了更好地语义化
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i> HTML!
<hr>
welcome <em>to</em> HTML!
<hr>
welcome to <address>上海市南京东路</address>
<hr>
HTML从<b>入门</b>到精通!
<br>
HTML从<strong>入门</strong>到精通!
<hr>
原价：<del>188元</del>，优惠价，<span style="font-size:40px;color:red">98元</span>
<br>
主讲人:<ins>Hector</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sup>3</sup>8
<hr>
<bdo dir="rtl">welcome to html!</bdo>
<br>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyper Text Language">HTML</abbr>
<hr>
<span title="Hyper Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
</body>
</html>
代码解释案例：
3.头部标签
meta定义网页的摘要信息，如字符编码，关键字、描述、作者等信息；
title定义网页的标题；
style定义内部的CSS样式 ；
link引用外部的CSS样式 ；
script定义或引用脚本 ；
base定义基础路径 。
请解释什么是基础路径？即基于当前页面文件所在位置的标准相对路径。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 SEO 网站优化 -->
<meta name="keywords" content="IT教育,Java开发,WEB前端,Python,Andorid开发....">
<!-- 设置网页的描述 -->
<meta name="description" content="做专业的IT教育....">
<!-- 设置网站的作者 -->
<meta name="author" content="Hector">
<!-- 设置网站的跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->
<title>Document</title>
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS样式 -->
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本 -->
<!--<script>
alert("哈哈");
</script>-->
<!-- 定义基础路径 -->
<base href="../img/">
</head>
<body>
IT交易，全国计算机等级考试-Hector
<img src="heihei.gif" alt="">
<hr>
<img src="qq.jpg" alt="">
</body>
</html>
代码解释案例：
详细的头部标签使用，在之后的笔记中会有
4.标签的嵌套
一个标签中嵌套另外一个标签
标签不能乱嵌套，如以下标签的嵌套是错误的
按照代码的解释来看, 蓝色应该包含在绿色内部; 但由于标签嵌套错误, 在浏览器中未能正确显示.
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
hello
</div>
</p>
代码解释
正确的标签嵌套应该是：
<div style="width:200px;height:200px;background:red">
<p style="width:50px;height:50px;background:green">
hello
</p>
</div>
代码解释在浏览器中的现实应该是红色里包含绿色。如图：
浏览器渲染后显示的页面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
如何打开：
1、在页面中右键单击–>检查/审查元素/查看元素
2、按F12
如图：
常用工具：
Elements：从浏览器的角度来看页面，浏览器渲染页面时的结构 ；
console：控制台，显示各种警告和错误信息；
network：该系统能够检索并展示浏览器发送请求以获取所需资源的详细列表，包括所有即将下载的文件及其所需时间，并分别计算出带宽消耗时间和下载所需时间。
如图：当console正确的形式的显示
若是错误的信息的话，console里面会进行提示。如图：
如图：network在浏览器中的显示
面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
如何打开：
1、在页面中右键单击–>检查/审查元素/查看元素
2、按F12
如图：
四、超链接
1.简介
使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转
当鼠标移动超链接文本上时，鼠标箭头会变成一只小手
超链接有三种类型：
- 普通链接和网页间连接主要用于引导访问其他相关网页。
- 锚链表用于指向指定网页上的固定位置。
- 功能超链负责执行特定任务如发送电子邮件或下载文件。
2.基本用法
使用 <a>标签创建超链接
语法格式：
<a href="链接地址" target="链接打开的位置">链接文本或图像</a>
代码解释常见属性:
href链接地址或路径:链接地址
href链接地址或路径:链接地址
_self自身，当前，默认值
_blank空白、新的页面
_parent父层框架
_top顶层框架 自定义
代码解释路径分类：
相对路径
相对于当页面所在的路径为参照,不是以根开始的
./ 当前路径
…/ 表示上级路径
绝对路径:
以根开始的路径
[file:///D:/software/b.html](file:///D:/software/b.html)
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target="_blank">百度</a>
<hr>
<a href="d:/software/b.html" target="_blank">b</a>
<br>
<a href="./c.html">c</a>
<hr>
<a href="../d.html">d</a>
<hr>
<a href="../../f.html">f</a>
</body>
</html>
代码解释案例：
3.锚链接
3.1简介
点击链接后跳转到页面的指定位置（锚点anchor）
锚链接的分类
- 页面内的锚链接
- 页面间的锚链接
3.2 页面内的锚链
步骤：
1、定义锚点（标记）
<a name="锚点名称">目标位置</a>
代码解释2、链接锚点
<a href="#锚点名称">链接文本</a>
代码解释代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">简介</a></li>
<li><a href="#second">HTML版本</a></li>
<li><a href="#three">特点</a></li>
<li><a href="#four">编辑方式</a></li>
<li><a href="#five">整体结构</a></li>
<li><a href="#six">相关要求</a></li>
</ol>
<p>
<a name="first">简介</a>
</p>
<P>
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</p>
<p>
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
</p>
<p>HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br>
③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
④HTML 4.0：1997年12月18日，W3C推荐标准。<br>
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br>
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
</p>
<p><a name="three">特点</a></p>
<p>
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p><a name="four">编辑方式</a></p>
<p>
HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7]
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7]
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
</p>
<p><a name="five">整体结构</a></p>
<p>
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10]
标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
</p>
<p><a name="six">相关要求</a></p>
<p>
在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9]
文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9]
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9]
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9]
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9]
HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
</p>
</body>
</html>
代码解释案例：
3.3页面间的锚链接
<a href="目标页面#锚点名称">链接文本</a>
代码解释页面间的锚链接类似于在另一处只需将锚链接点配置得当即可方便地导航至所需内容的位置。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="锚链接.html#first">简介</a></li>
<li><a href="锚链接.html#second">HTML版本</a></li>
<li><a href="锚链接.html#three">特点</a></li>
<li><a href="锚链接.html#four">编辑方式</a></li>
<li><a href="锚链接.html#five">整体结构</a></li>
<li><a href="锚链接.html#six">相关要求</a></li>
</ol>
</body>
</html>
代码解释案例：
4.功能链
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../img/heihei.gif">点击此处下载图片</a>
<hr>
<a href="mailto:3013750538@qq.com">联系我们</a>
</body>
</html>
代码解释案例：
5.URL （此处内容了解便可）
5.1简介
URL：Uniform Resource Location, 统一资源定位器用于确定资源所处的位置，在网络中常见的是网络地址
1、https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male
2、https://www.w3school.com.cn/html/html_quotation_elements.asp
3、file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html
4、http://www.sxgjpx.net/
5、ftp://10.255.254.253/
代码解释5.2组成
1、https://www.w3school.com.cn/html5/index.asp
2、http://www.sxgjpx.net
3、file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html
4、ftp://10.255.254.253/
5、https://www.baidu.com/img/bd_logo1.png
代码解释一个完整的URL由8个部分组成：
协议：prococol 如
1、http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocol
2、https:更加安全的协议 SSL安全套接子层
- 文件传输协议（FTP），用于通过网络远程访问服务器上的文件，并支持对文件进行上传与下载操作...
4、file:文件协议，用来访问本地文件
主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254
端口：port位于主机名的后面，使用冒号进行分隔
1、各类网络协议采用不同的传输端口号作为通信基础。其中：
- http采用80号传输端口；
- https采用443号传输端口；
- ftp则采用20号和21号传输端口。
若当前配置未指定任何传输参数，则系统将自动忽略传输参数。
;
2、需明确配置目标服务器IP地址及具体连接所使用的传输参数：
如配置目标服务器IP地址为59.49.32.213并选择传输参数7070号，则连接 URL 为 http://59.49.32.213:7070
路径：path目标文件所在的路径结构，如:https://www.bilibili.com/video/av93425449//
资源resource要访问的目标文件，如bd_logo1.png
查询字符串：query string 也称为参数
在资源后面使用?开头的一组名称/值
名称和值之间以=分隔，多个表达式之间用&分隔，如:?name=tom&age=2&sex=male
锚点anchor，在资源后面使用#开头的文本，如#6
身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com
五、表格
1.简介
表格遵循着一个规则的行列结构；每个表格由多行构成；每一行包含多个单元格。
table、row、column
2.基本结构
2.1 table标签
用来定义表格
常用属性：
- 边框样式,预设值设置为0
- 宽度/高度参数
- 对齐选项包括左对齐、居中对齐以及右对齐三种方式
- 边框颜色设置
- 背景颜色定义
- 背景图片指定
- 单元格间距设定为2像素
- 单元格边距设置为10像素
2.2 tr标签
用来定义行:table row
常用的属性：
- horizontal alignment method default value left
*居中显示（右侧）和垂直方向的对齐方式 default top middle bottom
*background-color default background color
*background-image default background image
2.3 td标签
用来定义单元格：table data
常用属性:align valign bgcolor background
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px">
<tr align="right" valign="top">
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="center" valign="middle" bgcolor="blue">
<td>hello</td>
<td bgcolor="yellow" valign="bottom">hello</td>
<td>hello</td>
</tr>
<tr valign="bottom" background="../../img/heihei.gif">
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</body>
</html>
代码解释案例：
3.合并单元格
合并单元格也称为表格的跨行和跨列
两个属性:
rowspan
设置单元格所跨的行数,如rowspan=“2” 表示跨越2行
colspan
设置单元格所跨的列数,如clospan=“4” 表示跨越4列
步骤：
- 为跨越同一行或列的单元格设置rowspan或colspan属性。
- 必须移除被跨越的单元格中的内容。
- 注意：必须确保每一行的实际列数相同；否则可能导致表格结构混乱。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td{hello$}*4)*4 -->
<table border="1" width="500px" height="300px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>
代码解释案例：
4.高级标签
4.1 caption标签
表格的标题标签
4.2 thead标签
表格的头部table head
4.3th标签
表格的头部标题table head title
一般在thead中，设置头部标题，替代td标签，与td的区别，加粗和居中对齐
4.4 tbody标签
表格的主体 table body
4.5 tfoot标签
表格的底部table foot
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="600px" height="300px" align="center">
<caption><h2>学生基本信息表</h2></caption>
<thead bgcolor="cyan">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody bgcolor="#cccccc">
<tr>
<td>1001</td>
<td>阿牛</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>阿花</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>1003</td>
<td>张三</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1004</td>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
<tfoot bgcolor="yellow" align="center">
<tr>
<td width="25%">总计人数</td>
<td colspan="3">4</td>
</tr>
</tfoot>
</table>
</body>
</html>
代码解释案例：
六、表单
1.简介
表单是一个包含若干表单元素的区域，用于回去不同类型东东用记信息
表单元素是指支持用户在表单中填写信息的各种元素，常见的类型有文本框用于显示或编辑文字内容、密码框用于设置密码、单选按钮用于选择单一选项等等。这些元素包括但不限于文本框、密码框、单选按钮、复选框、下拉按钮以及列表等不同的功能模块。
2.表单结构
2.1表单的语法
<form acition="" method="">
多个表单元素
</form>
代码解释2.2form标签
用来定义表单，可以包含多个表单元素
常用属性：
data被提交至processing程序中。其中，默认情况下该程序将当前页面作为处理对象，并采用查询字符串的形式进行数据传递。（此处暂可略过）
method提交数据的方式，取值：get（默认）、post
get和post的区别：
get：以查询字符串形式提交，在地址栏中能够看到，长度有限制，不安全
post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全
enctype：指数据编码方式的一种设置项。其可选取值包括application/x-www-form-urlencoded（一种将参数编码到URL中的方式）和multipart/form-data（一种用于文件传输的方案）。目前无需深入理解即可。
3.表单元素
大部分表单元素都借助标签来进行定义；以type属性为基础进行分类配置。
<input type="表单元素的类型" name="名称" value="默认值" size="宽度">
代码解释| 表单元素的类型 | 含义 | 说明 |
|---|---|---|
| text | 单行文本框 | 省略时默认就是text |
| password | 密码框 | 输入时以点号显示，安全 |
| redio | 单选按钮 | 只能选择其中一个 |
| checkbox | 复选框 | 可以同时选择多个 |
| submit | 提交按钮 | 提交表单数据 |
| reset | 重置按钮 | 重置表单元素的初始值 |
| image | 图像按钮 | 可以使用图片作为按钮 |
| button | 普通按钮 | 默认情况下无功能 |
| file | 文件选择器 | 选择要上传的文件 |
| hidden | 隐藏域 | 在页面上不显示，但是会提交，可以用来存储数据 |
3.1单行文本框
常用属性：
- name属性：字段名至关重要，在未指定name的情况下，默认情况下表单元素的数据将无法提交
- value属性：当用户未提供数据时，默认状态下文本框中会显示预设的默认值
- size文本框显示宽度：该属性决定了文本框的横向显示范围
- maxlength最大字符数，默认情况下则表示无限制：此字段用于限定输入的最大字符数量，默认状态下则表示无限制
- readonly：仅读字段（readonly=“readonly”）可简写为readonly仅需键入字段名即可实现禁用状态
- disabled：不可用字段（disabled）同样可简化为disbleddisble仅需键入字段名即可实现完全禁止状态
该系统的readonly功能设置会导致数据被提交到远程服务器；而disabled状态下的数据则不会被提交到远程服务器
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="usr_name" value="张杰" size="4" maxlength="4">
<br>
密码：<input type="password" name="pwd" size="9" maxlength="6">
<br>
年龄：<input type="text" name="age" disabled>
<br>
<input type="submit">
</form>
</body>
</html>
代码解释案例：
3.2单选按钮
常用属性
- name：名称字段，在配置时要求所有radio的name属性一致，则能确保互斥性（单选）
- value：值
- 检查状态分为两种情况：选项被勾选和未勾选出；当选项被勾定时，则设置checked="checked"
3.3 复选框
常用属性与radio类似
3.4 文件选择器
常用属性：
name属性：名称
accept设置可以选择的文件类型，用来限制上传文件的类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型：
* 纯文本：text/plain text/heml text/xml
* 图像：image/png image/gif image/jpeg代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="multipart/form-data">
用户名：<input type="text" name="usrname" value="张杰">
<br>
密 码：<input type="password" name="pwd">
<br>
年 龄：<input type="text" name="age" value="18" enabled>
<br>
性 别：<input type="radio" name="sex" value="male" checked>
<img src="../../img/male.gif" alt="">
<input type="radio" name="sex" value="female">
<img src="../../img/female.gif" alt="">
<br>
爱 好：
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
<br>
头 像：
<input type="file" name="head" accept="image/jpeg">
<input type="hidden" name="usr_id" value="9528">
<hr>
<input type="submit">
<input type="reset">
<hr>
<input type="image" src="../../img/submit.gif">
<input type="image" src="../../img/reset.gif">
<hr>
<input type="button" value="普通按钮">
</form>
</body>
</html>
代码解释案例：
4.特殊表单元素
| 表单元素 | 含义 | 说明 |
|---|---|---|
| select | 下拉列表 | |
| option | 列表选项 | |
| optgroup | 选项组 | 用来对option分组 |
| textarea | 文本域/多行文本框 | 用于创建一个多行文本框，会保留编码的格式 |
4.1 下拉列表
select 常用属性：
- 名称属性*
- 大小：下拉列表中可显示的选项数量*
- 多选模式：允许多个选项被展示*
option常用属性：
- value选项值
- selected设置默认选中的项
optgroup常用属性：
- table分组的标题
4.2 文本域
常用属性：
- name：名称
- rows行数
- cols列数
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
学历
<select name="degree">
<option value="0">--请选择学历--</option>
<option value="dazhuan">大专</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">硕士</option>
</select>
<br>
城市：
<select name="">
<optgroup label="山西省">
<option value="taiyuan">太原</option>
<option value="datong">大同</option>
<option value="changzhi">长治</option>
</optgroup>
<optgroup label="山东省">
<option value="jinan">济南</option>
<option value="qingdao">青岛</option>
<option value="nanjing">南京</option>
</optgroup>
<optgroup label="江苏省">
<option value="rizhao">日照</option>
<option value="yangzhou">杨洲</option>
<option value="xuzhou">徐州</option>
</optgroup>
</select>
<br>
个人简介：
<textarea name="intrduce" ></textarea>
<br>
服务协议：
<textarea name="intrduce" rows="10" cols="20" eadonly>
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
</textarea>
<hr>
<input type="submit">
</form>
</body>
</html>
代码解释案例：
5、其他表单元素
5.1 label标签
为表单元素添加标签，在选择label标签中的文本时会自动切换到与其关联的表单元素。
常见属性：
- for必须将该属性值设置为 与之相关联的表单元素 的id属性值 相同
注意：几乎所有的HTML标签都有id属性，且id属性值必须是唯一的
5.2button 标签
也表示按钮，与input按钮类似
语法：
<button type="按钮类型">按钮文本或图像</button>
代码解释常用属性：
- type按钮的类型：取值submit（默认）、reset、button
5.3fieldset和legend标签
fieldset标签：对表单元素进行分组
legend标签：对分组进行添加标题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<label for="name">用户名：</label>
<input type="text" name="usrname" id="name">
<br>
<label for="email">邮 箱：</label>
<input type="text" name="email" id="email">
<hr>
</fieldset>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="../../img/submit.gif">
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button><img src="../../img/submit.gif" alt=""></button>
<hr>
<fieldset>
<legend>学院信息</legend>
学号：<input type="text" name="stuID"><br>
学校：<input type="text" name="stuSchool"><br>
专业：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>
代码解释案例：
七、内嵌框架
1、简介
通过iframe可以在一个网页中引用另一个网页的内容或功能，并实现代码在不同网页间的共享与复用。从而使得应用具有极强的灵活性。
2、基本语法
语法：
<iframe src=""></iframe>
代码解释常用属性;
src 引用来源
宽度和高度的大小（像素或百分比）
是否显示边框（1表示显示）
滚动条的显示情况（默认自适应）
名称用于标识框架名称
3、在框架中打开超链接
<iframe name="hello"></iframe>
<a href="链接地址" target="hello">链接的文本或图像</a>
代码解释代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="7.2 top.html" width="100%" height="200" frameborder="0" scrolling="auto"></iframe>
<h3>主体部分</h3>
<hr>
<a href="1.表格.html" target="hello">1.html</a>
<a href="2.合并单元格.html" target="hello">2.html</a>
<iframe src="./7.1 foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>
代码解释foot的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>底部和版权</p>
</body>
</html>
代码解释topd 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</body>
</html>
代码解释案例：
八、HTML简介
1、发展
W3C于1992年12月发布了HTML4.0.1标准
W3C于2014年10月发布了HTML5标准
2、特点：
- 移除了不再流行的字体和居中等常用类（仅用于表现页面布局）。
- 加入了意义更加明确的导航栏（header）、页脚（footer）和辅助空间（aside）。
- 添加了功能相关的多媒体控制组件（如audio和video用于多媒体播放）。
- 增加了一些表单控件（如email接收电子邮件地址），提升了用户体验。
- 在线编辑器可以在浏览器中绘制图表（使用Canvas），无需Flash插件。
- 新增了本地存储功能以提高数据持久性。
3、兼容性
如何知道浏览器是否支持HTML5？通过关于HTML5的兼容性来确定
可通过一个网站来查看：http://caniuse.com
提供了各浏览器版本对HTML2和CSS3规范的支持度
九、HTML5新增内容
1、结构相关标签
用来构建网页层级安排并决定内容展示顺序，在视觉呈现上主要依赖于CSS规范以确保统一风格
用于搭建网页层级安排并决定内容展示顺序，在视觉呈现上主要依赖于CSS规范以确保统一风格
用于构建网页布局结构并决定内容显示位置及关系，在视觉呈现上主要依赖于CSS规范以确保统一风格
用于规划网页层级关系及内容排列顺序，并依靠基础CSS实现统一美观的视觉效果
主要是为网页布局规划层次关系及显示顺序，并未涉及复杂的样表设计需求
在进行页面布局时主要关注元素排列顺序及层次关系，并依靠基础CSS实现统一美观的视觉效果
- article作为一个独立的部分被定义为一个完整的文档内容。
- section被视为文档的基本结构单元即章节与段落的具体划分。
- header包含页面顶部的主要标识符即页眉与文章标题。
- footer则位于页面底部包含页脚与重要的注释信息。
- aside用以组织非主文内容的一个附加部分。
- figure用作展示图像内容的一个视觉元素区域。
- figcaption给定图片区域内的图像设置明确标题的作用即作为视觉参考工具。
- nav用作指引用户快速定位不同内容位置的一个导航系统模块。
结构标签只是表明各部分的角色，并无实际外观样式，与普通的div相同
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>标题</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>脚注</footer>
</article>
<aside>广告</aside>
<br>
<figure>
<figcaption>log标题</figcaption>
<img src="../../img/google.png" alt="">
<img src="../../img/facebook.png" alt="">
</figure>
<nav>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
代码解释案例：
2、语义相关的标签
2.1 mark标签
标注，用来突出显示文本，默认添加黄色背景
2.2 time标签
定义日期和时间，便于搜索引擎智能查找
2.3 details和 summary标签
默认情况下展示summary中的内容；单击后则会展示details中的内容；注：并非所有浏览器都兼容；而Chrome和Opera浏览器支持；而Firefox和IE浏览器则不被支持。
2.4 meter标签
计数仪，表示度量
常用属性：
- 最大值被设定为一个较大的数值，默认情况下设为1。
- 最小化参数初始化时被设置为零。
- 当前变量代表系统中的数值参数。
- 高阈限设定用于区分高阶指标。
- 低阈限用于评估较低水平的关键指标。
- 最佳参考点用于衡量系统性能的标准。
规则：
如果optimum大于high，则表示值越大越好
当value大于high时为绿色
当value在low与high之间时为黄色
当value小于low时为红色
如果optimum小于low，则表示值越小越好
当value小于low时为绿色
当value在low与high之间时为黄色
当value大于high时为红色
当optimum介于low和high之间，则表示值在low和high之间好
当value在low与high之间时显示绿色，否则显示黄色
2.5 progress标签
进度条，表示运行中的进度
常用属性：
- value定义当前值
- max定义完成的值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcom <mark>to</mark> html!
<hr>
我在<time datetime="2020年3月14日">情人节</time>有个会!
<hr>
<details>
<summary>HTML简介</summary>
<p>HTML是一门用来制作网页的标签语言</p>
<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
<hr>
<!-- 上面 的为什么只有两个颜色？ 应该是 optimum 的值在high与low之间，所以颜色只有两个-->
<progress value="20" max="50"></progress>
</body>
</html>
代码解释案例：
3.表单相关
3.1 新增表单元素
新增以下type类型：
- 邮件地址接收方
- 网页链接接收方
- 电话号码接收方（仅适用于移动设备）
- 搜索输入框
- 数字输入字段/滑块控制（包含min,max,step属性）
- 日期时间选择器（兼容性问题）
- 颜色拾取框
作用：
- 具有格式校验的功能
- 可以与移动设备的键盘相关联
3.2新增表单属性
form标签的属性：
- 该字段是否用于启用表单的自动完成功能？其设置为on（默认情况下）或off（关闭）。
- 在提交时不会执行验证操作。然而，在通常情况下（即使用了non-validated设置），系统会执行表单校验。
3.3 新增表单元素的属性
新增表单元素属性：input/select/textarea等
- placeholder提示信息字段
- 是否必填标志：required
- 是否启用自动生成字段值：autocomplete
- 初始焦点分配设置：autofocus
- 数据验证配置：pattern（通过正则表达式 RegExp 进行数据验证）
- 是否支持下拉选择功能：list
- 配置外部绑定属性以实现指定表单关联：form
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <form action="" autocomplete="off" novalidate></form> -->
<form action="" autocomplete="on" id="myform">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<br>
<label for="home">个人主页</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keyword">关键字</label>
<input type="serch" name="keyword" id="keyword">
<br>
<label for="num">数字</label>
<input type="number" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期</label>
<input type="month" name="birthday" id="brirthday">
<br>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="username">用户名</label>
<input type="text" name="name" id="username" placeholder="请输入用户名" required onautocomplete="off" autofocus>
<br>
<label for="age">年龄：</label>
<input type="text" name="age" id="age" pattern="\d{1,2}">
<!-- 年龄只能输入1-2位的数字 -->
<br>
<label for="city">城市</label>
<input type="text" name="city" id="city" list="cityList">
<datalist id="cityList">
<option value="1">北京</option>
<option value="2">南京</option>
<option value="3">上海</option>
<option value="4">天津</option>
</datalist>
</form>
<hr>
<input type="submit" form="myform">
</body>
</html>
代码解释案例：
4、多媒体标签
4.1audio标签
在页面中插入音频，不同的浏览器对音频格式的支持不一样
audio常用属性：
- 音频文件的获取来源
- 控制面板的状态被设定为默认关闭状态
- 自动播放功能默认未启用
- 循环播放功能是否存在
- 静音功能是否存在
- 预加载设置包括三种情况：全无、仅自动处理以及仅提取元数据；若启用自动播放功能，则此设置将失效。
支持通过指定source标签来集成；输入多个音频文件地址；浏览器将自动识别并优先加载第一个可用的音频文件。
4.2 video标签
在网页中嵌入视频内容时，请注意不同浏览器对视频格式的兼容性可能存在差异
- widht/height视频播放器的宽度/高度
- poster在视频加载前显示的图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> -->
<audio controls>
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的浏览器不支持audio标签，请更换浏览器
</audio>
<video src="../../video/volcan.mp4" controls="600px" poster="../../img/p1.jpg"></video>
</body>
</html>
代码解释案例：
链接：https://pan.baidu.com/s/15OgJJBaVraGJB1tQwxbcug
提取码：zj6z