文章目录
五大主流浏览器
网页是由代码通过浏览器渲染而成的，而常用浏览器分为五种：
五大主流浏览器：IE（Edge），FireFox，Chrome，Opera，Safari（苹果）
浏览器内核由渲染引擎和JS引擎两部分组成。
渲染引擎：浏览器中专门对代码进行解析和渲染的部分
内核：Trident(IE)，Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)
国内大多数浏览器采用的是双核驱动(Trident&Webkit或Trident&Blink)
移动端：iphoe/ipad采用的是webkit内核，Android 4.4以下采用的是webkit内核，而4.4以上版本采用的是blink内核。
浏览器内核不同，形成的网页也就不同，为了避免这一现象，故规定了web标准：HTML、css、JavaScript
一.HTML简介
万维网W3C标准中网页分为结构（HTML），表现（css）和行为（JavaScript）三部分。
HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。
1.什么是HTML
HTML的全称为超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
超文本：是一种组织信息的方法，通过超级链接将多种媒介关联起来。
标记：就是标签，用<>包裹的具有一定含义的内容，比如：< head> < /head>
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 < html>
- HTML 标签通常是成对出现的，比如 < p> 和 < /p>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
例如：
<标签>内容</标签>
所有 HTML 文档必须以 <!DOCTYPE> 声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。
3.HTML元素
HTML 元素指的是从开始标签到结束标签的所有代码。
例如：
<h1>一级标题</h1>
4.HTML版本
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
5.web浏览器
Web浏览器（如谷歌浏览器，Edge，Safari 等）用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>欢迎！！</h1>
<p>你好，一起来学习前端吧！</p>
</body>
</html>
6.HTML网页结构
- < !DOCTYPE html> 声明为 HTML5 文档
- < html> 元素是 HTML 页面的根元素
- < head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
- < title> 元素描述了文档的标题
- < body>元素包含了可见的页面内容
- < h1> 元素定义一个大标题
- < p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
7.中文编码
当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。
例如：
<meta charset="UTF-8">
二.HTML基础标签
1.HTML 标题
HTML 标题是通过 < h1 > - < h6 > 标签来定义的。
实例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2.HTML 段落
HTML 段落是通过标签 < p > 来定义的。
实例：
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
3.HTML 链接
HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签，通过它可以实现页面的跳转。
< a href= " " > < /a>
href 表示路径，后面跟的是链接的地址
实例：
<a href = "https://www.baidu.com/">百度一下</a>
此时只需在浏览器中点击 “百度一下” 即可跳转。
4.HTML 图像
HTML 图像是通过 < img > 标签进行定义的。
img是一个单标签，没有结束标签，< img src=" " />
实例：
<img src = "images/1.jpg" alt = "图片路径加载错误" />
参数src为图片的路径，这里可以选择网页图片的地址，或者是本地图片；
参数alt为当图片路径不对加载图片出现错误时显示的内容（可自定义）。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素（px）。
实例：
<img src="baidu.jpg" alt="百度" width="200" height="100">
注意：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
三.HTML元素
1.HTML 元素语法
- HTML 元素以开始标签起始，以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2.嵌套的 HTML 元素
大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。HTML 文档由相互嵌套的 HTML 元素构成。
实例：
<!DOCTYPE html>
<html>
<body>
<p>百度：<a href = "https://www.baidu.com/">百度一下</a></p>
</body>
</html>
可以看到< p >中包含了< a >标签
3.HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
实例：
<p>段落1</p>
<br />
<p>段落2</p>
< br > 就是没有关闭标签的空元素（< br > 标签定义换行）。
在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法。
四.HTML属性
属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
实例：
<a href="https://www.baidu.com/">百度一下</a>
这里的href就是a标签的属性，且是设置在a标签的开始标签里面的。
总结：
1.标签由标签名、标签属性和文本内容三部分组成。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。
-
通用属性：所有标签都具有的属性。
通用属性有：
id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
class：用来给标签取一个类名。
style：用来设置该标签的行内样式。
title：当鼠标已到该标签，所显示的提示内容。
-
自定义标签属性：通常用来传值或用于图片懒加载（未滑到当前页面图片暂时不加载）等方面。
**格式：data-自定义名称
<img data-src=“图片名” alt=“提示文本” / >
< p data-id=“goodsid” >文本内容**
五.HTML区块
HTML 可以通过 < div > 和 < span >将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
1.HTML区块元素
块级元素在浏览器显示时，通常会以新行来开始和结束。
在浏览器中会独占一行，识别宽高，例如< div >标签，相当执行了display：block操作（display： 显示 ；block：块的意思）也叫块级元素。
- 独占一行
- 宽度和高度是可控的，如果没有设置其宽度，将会默认铺满整行
- 其内可以包含块级元素和行级元素。
< div >标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
2.HTML内联元素
内联元素在浏览器显示时通常不会以新行开始。
在浏览器中不会独占一行，且不识别宽高，例如< span >标签，相当执行了display：inline操作（inline：行的意思）也叫行级元素。
- 不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行
- 宽度和高度是不可控的
- 其内只包含行级元素
< span > 用于对文档中的行内元素进行组合。
块级标签转行级标签只需要在样式中设置 display：inline，行级转块级则反之。
3.标签嵌套规则
标签嵌套规则：
1.块元素可以包含块元素和内联元素（也就是行级元素），但行级元素不能包含块元素，它只能包含行级元素；
2.< p >标签内不能放块级元素，能放行级元素，只能在块元素里放< p >标签；
3.有几个特殊块元素只能放行级元素，不能放块级元素，例如：h1,h2,h3,h4,h5,h6,p,dt ;
4.块元素要跟块元素并列，行级元素要跟行级元素并列，不能在一个块元素中块元素与行级元素并列。
六.HTML文本样式
HTML 使用标签 < b >(“bold”) 与 < i >(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签 < strong > 替换加粗标签 < b > 来使用, < em > 替换 < i >标签使用。但是两者的含义不同，< trong > 或者 < em >标签表示呈现的文本是重要的，所以有突出显示的意思。
| 标签 | 作用 |
|---|---|
| < b> | 定义粗体文本 |
| < em> | 定义着重文字 |
| < i> | 定义斜体文字 |
| < small> | 定义小号文字 |
| < strong> | 定义加重语气文本 |
| < sub> | 定义下标 |
| < sup> | 定义上标 |
| < ins> | 定义插入字 |
| < del> | 定义删除字 |
实例：
<body>
<p>定义<b>粗体文本</b></p>
<p>定义<em>着重文本</em></p>
<p>定义<i>斜体文本</i></p>
<p>定义<small>小号文本</small></p>
<p>定义<strong>加重语气文本</strong></p>
<p>定义<sub>下标</sub>H<sub>2</sub>O</p>
<p>定义<sup>上标</sup>2<sup>10</sup></p>
<p>定义<ins>插入字</ins></p>
<p>定义<del>删除字</del></p>
</body>
1.HTML 水平线
< hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例：
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
2.HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
编译器 VScode 中加注释快捷键是 Ctrl + /
实例：
<body>
<!--这是一个注释，注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>
七.HTML链接
实例：
< a href="https://www.baidu.com/">访问百度< /a>
点击这个链接会把用户带到百度的首页。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签< a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
1.a标签的target属性
target 属性定义被链接的文档在何处显示。
实例：
<a href="https://www.baidu.com/" target="_blank" >访问百度!</a>
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口打开 |
| _parent | 在父窗口中打开链接 |
| _self | 默认，在当前页面跳转 |
| _top | 在当前窗口打开链接，并替换当前的整个窗体 |
八.HTML头部信息
一个默认的HTML文件头部信息如下：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
上面包含了 meta 和 title 两个元素，当然html的头部中你还可以插入脚本（scripts）, 样式文件（CSS）以及style，link，base等元素。
1. < meta > 标签
元数据（Metadata）是数据的数据信息。< meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
< meta >标签没有结束标签
实例：
1.1 定义文档字符编码
<meta charset="UTF-8">
1.2 把content属性关联到HTTP头部
<meta http-equiv="X-UA-Compatible" content="IE=edge">
1.3 为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
1.4 为网页定义描述内容
<meta name="description" content="免费 Web & 编程 教程">
另外还可以进行对页面的刷新和定义页面作者等信息。
1.5 页面的刷新
//每30秒刷新页面
<meta http-equiv="refresh" content = "30">
1.6 定义页面作者
<meta name="author" content="hu xiao qi">
2. < title > 标签
< title > 标签定义了不同文档的标题。
< title > 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
实例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端学习</title>
</head>
3. < link > 标签
< link > 标签定义文档与外部资源的关系。
< link > 标签最常见的用途是链接样式表。
注意： 此元素只能存在于 head 部分，不过它可出现任何次数。
实例：
<link rel="stylesheet" type="text/css" href="mystyle.css">
4. < style > 标签
- < style > 标签定义了HTML文档的样式文件引用地址.
- 在< style > 元素中你也可以直接添加样式来渲染 HTML 文档
实例：
<style type="text/css">
body {
background-color:yellow
}
p {
color:blue
}
</style>
5. < base > 标签
定义了页面链接标签的默认链接地址
实例：
<head>
<base href="https://www.baidu.com/" target="_blank">
</head>
<body>
<p><a href="">点击打开百度</a></p>
</body>
这里的< a> 标签链接没有设置路径，所以就默认使用上面< base> 标签里的路径，此时点击一下也会跳转到百度首页
九.HTML表格
表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格 ---- 列（由 < td > 标签定义）。
1.带边框表格的创建
若直接创建表格，那么创建出来的表格是不带边框的，而大多数情况下，我们需要的往往是一个带有边框的表格，那么我们则需要在< table >标签中设置属性 border。
实例：
<body>
<table border="1">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
</body>
2.设置单元格内边距和间距
2.1 设置单元格内边距:cellpadding
单元格内容与其边框之间的距离。
实例:
<body>
<h3>没有单元格边距：</h3>
<table border="1">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
<h3>设置了单元格边距：</h3>
<table border="1" cellpadding="20">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
</body>
2.2 设置单元格间距:cellspacing
单元格之间的距离
实例：
<body>
<h3>没有单元格间距：</h3>
<table border="1">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
<h3>设置单元格间距为0：</h3>
<table border="1" cellspacing="0">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
<h3>设置单元格间距为20：</h3>
<table border="1" cellspacing="20">
<tr>
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td>嬴政</td>
<td>妲己</td>
</tr>
</table>
</body>
2.3 设置表格及单元格的背景
实例：
<body>
<table border="1" bgcolor="green">
<tr bgcolor="yellow">
<td>李白</td>
<td>韩信</td>
</tr>
<tr>
<td bgcolor="red">嬴政</td>
<td>妲己</td>
</tr>
</table>
</body>
4.HTML表格的表头
表格的表头使用 < th > 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
实例：
<body>
<table border="1">
<tr>
<th>英雄名称</th>
<th>英雄类型</th>
</tr>
<tr>
<td>李白</td>
<td>刺客</td>
</tr>
<tr>
<td>妲己</td>
<td>法师</td>
</tr>
</table>
</body>
5.跨行跟跨列
跨行/跨列属性主要用来绘制复杂表格
rowspan:跨行
colspan：跨列
实例：
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>英雄名称</th>
<th colspan="2">技能名称</th>
</tr>
<tr>
<td>李白</td>
<td>青莲剑歌</td>
<td>神来之笔</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>英雄名称</th>
<td>韩信</td>
</tr>
<tr>
<th rowspan="2">技能名称</th>
<td>国士无双</td>
</tr>
<tr>
<td>背水一战</td>
</tr>
</table>
</body>
十.HTML列表
1.有序列表
有序列表是一列项目，列表项目使用数字进行标记。
有序列表是用 < ol > 标签。每个列表项是用 < li > 标签。
注意：（有序、无序、自定义列表都适用）
< ol >标签中只允许包含< li > 标签；
< li > 标签中可包含任意内容。
实例：
<body>
<ol>
<li>李白</li>
<li>韩信</li>
<li>妲己</li>
</ol>
</body>
2.无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表是用 < ul > 标签。每个列表项是用 < li > 标签。
实例：
<body>
<ul>
<li>赵云</li>
<li>澜</li>
<li>镜</li>
</ul>
</body>
3.嵌套列表
有序列表跟无序列表混合着用
实例：
<body>
<ul>
<li>刺客</li>
<ol>
<li>赵云</li>
<li>澜</li>
<li>镜</li>
</ol>
<li>辅助</li>
<ol>
<li>明世隐</li>
<li>太乙真人</li>
<li>瑶</li>
</ol>
</ul>
</body>
4.自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。
实例：
<body>
<dl>
<dt>刺客英雄：</dt>
<dd>李白-青莲剑歌</dd>
<dd>韩信-国士无双</dd>
<dt>法师英雄：</dt>
<dd>妲己-魅力之狐</dd>
<dd>嬴政-王者独尊</dd>
</dl>
</body>
十一.HTML表单
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
1.form 元素
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 < form > 标签来创建表单
1.1 action 属性
action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到指定的网页。
<form action="xxx.html">
实例：
<body>
<form action="提交的网页.html" target="_blank">
<input type="submit" name="点击提交" >
</form>
</body>
1.2 method 属性（get/post）
method 属性规定在提交表单时所用的 HTTP 方法（get/post）。
<form action="提交的网页.html" method="get">
<form action="提交的网页.html" method="post">
get注意事项
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。
注：GET 最适合少量数据的提交。浏览器会设定容量限制。
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
- URL的长度受到限制（2048 个字符）
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据，例如 Google中的查询字符串
post注意事项
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
- 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
- POST 没有大小限制，可用于发送大量数据。
- 带有POST 的表单提交无法添加书签
1.3 target 属性
- target 属性规定提交表单后在何处显示响应
target 属性可设置以下值：
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口打开 |
| _parent | 在父窗口中打开链接 |
| _self | 默认，在当前页面跳转 |
| _top | 在当前窗口打开链接，并替换当前的整个窗体 |
1.4 autocomplete 属性
- autocomplete 属性规定表单是否应打开自动完成功能。启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
1.5 fieldset 组合表单数据
- < fieldset > 元素组合表单中的相关数据
- < legend > 元素为 < fieldset > 元素定义标题。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.biaodan{
margin-right: 500px;
}
</style>
</head>
<body>
<form >
<fieldset class="biaodan">
<legend>登录管理</legend>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<p><input type="submit" name = "点击提交"></p>
</fieldset>
</form>
</body>
</html>
2.input 元素
常见输入类型：
- text（文本输入，常用属性：placeholder（提示文本）、name（命名）、minlength和maxlength（最少/多输入的字符个数）、disabled(失效)、readonly(只读)、value(默认值)、pattern(正则匹配)）
- password（密码字段，常用属性跟text一样）
- submit（提交按钮，用来将表单数据提交到后台。常用属性有：value（按钮的标题）/disabled(失效））
- radio（单选按钮，通常是两项以上。常用属性有：name(分组，同一组内只会有一个被选中，必须要有)/value/checked(选中)/disabled(失效)/readonly(只读)）
- checkbox（复选框，可以用来选择0项、1项或多项。 常用属性有：name/value/checked(默认)/disabled(失效)/readonly(只读)）
- button（按钮， 常用属性有：value（按钮的标题）/disabled(失效））
- reset (重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。 常用属性有：value（按钮的标题）/disabled(失效）)
- file（文件上传按钮，multiple：选中多个文件上传 ）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
<p>文本输入: <input type="text"></p>
<p>密码: <input type="password"></p>
<p>提交按钮: <input type="submit"></p>
<p>单选按钮:</p>
<p><input type="radio">李白</p>
<p><input type="radio">韩信</p>
<p>复选框: </p>
<p><input type="checkbox">澜</p>
<p><input type="checkbox">镜</p>
<p><input type="checkbox">曜</p>
<p>按钮: <input type="button" value="我是一个小按钮"></p>
</form>
</body>
</html>
2.1 number 类型
实例：
<form>
输入数字: <input type="number" min="0" max="5" >
</form>
输入限制
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
2.2 date 类型
实例：
<form>
输入日期：<input type="date" >
</form>
对日期进行限制：
<form>
<p>最大日期：<input type="date" max="2000-01-01"></p>
<p>最小日期：<input type="date" min="2022-06-30"></p>
</form>
2.3 color 类型
实例：
<form>
选择颜色：<input type="color">
</form>
2.4 range 类型
实例：
<form>
选择范围：<input type="range" min="10" max="100" >
</form>
2.5 时间类型（month,week,time,datetime-local）
实例：
<form>
month: <input type="month"><br>
week: <input type="week"><br>
time: <input type="time"><br>
datetime_local: <input type="datetime-local">
</form>
2.6 email 类型
实例：
<form>
email： <input type="email">
</form>
2.7 search 类型（搜索）
常用于搜索框
实例：
<form>
搜索：<input type="search">
</form>
3.select 元素（下拉列表）
< option > 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。可通过添加 selected 属性来定义预定义选项。
- multiple属性：表示可以多选，这时的下拉列表框变成了列表框。
- size：最多显示的行数
实例：
<form>
你要选择的英雄是：
<select name="下拉列表">
<option value="">李白</option>
<option value="">韩信</option>
<option value="" selected>赵云</option>
<option value="">妲己</option>
<option value="">嬴政</option>
</select>
</form>
4.textarea 元素（文本域）
文本域（也可以叫多行文本框），主要用来输入大批量的内容。
常用属性：cols(列数）/rows(行数）/required(必须输入的意思）
实例：
<form>
<textarea rows="20" cols="20">
请输入文字...
</textarea>
</form>
4.1 required 属性
required 属性规定一个文本区域是必需的/必须填写（以提交表单）。
实例：
<form action="已经提交的网页.html">
<textarea rows="4" cols="50" name="comment" required>
</textarea>
<input type="submit">
</form>
5.label 标签
label标签：点击文本也能选中单选框
方法1：使用label标签把文本包裹起来，在表单里添加id属性，在label标签的for属性中设置与表单id属性对应的属性值
方法2：使用label把表单与文本都包裹起来，然后删掉label标签中的for属性
实例：
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label><input type="radio" name="sex">女</label>
6.button 元素
普通按钮，具有提交功能。可以单独使用，不写在form元素中；
如果写在form元素中，有提交功能。
实例：
<form>
<button>我是一个小按钮</button>
</form>
<br/>
<button>我是一个提交按钮</button>
十二.HTML框架
有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架（iframe）
< iframe src=“另一个页面的路径”>< /iframe >
1.iframe设置高度和宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>
</html>
2.iframe去除边框
frameborder 属性用于定义iframe表示是否显示边框。
实例：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
3.常用属性
| 属性 | 定义 |
|---|---|
| name | 框架名 |
| src | 引入的外部html文件 |
| scrolling | 滚动条（yes/no/auto） |
| width | 宽度（%/px） |
| height | 高度（%/px） |
| frameborder | 是否有边框（1/0） |
| marginheight | 框架离顶部和底端的距离（%/px） |
| marginwidth | 框架离左右的距离（%/px） |
十三.HTML脚本
1.HTML的 script 标签
< script > 标签用于定义客户端脚本，比如 JavaScript。< script > 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：
<script>
document.write("Hello World!");
</script>
2.HTML的 noscript 标签
标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，< noscript >元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素，在浏览器禁止使用脚本时，会显示该标签内的内容。
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
十四.字符实体
HTML中预留的字符和一些键盘上找不到的字符必须使用字符实体来替换！
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | 空格符号 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | ' |
| ￠ | 分 | ¢ |
| £ | 镑 | £ |
| ¥ | 人民币/日元 | ¥ |
| € | 欧元 | € |
| § | 小节 | § |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | ™ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
虽然 html 不区分大小写，但实体字符对大小写敏感。
十五.URL
URL(统一资源定位器)是一个网页地址，可以使用网址(例如：www.baidu.com)或者使用IP地址来访问。
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 < a > 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: https://www.baidu.com/html/html-tutorial.html
语法规则:
scheme://host.domain:port/path/filename
说明:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain-定义因特网域名，比如 baidu.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
1.常见的 URL Scheme
| Scheme | 访问 | 作用 |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件 |
2.URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
十六.HTML5 新增元素
1. HTML5中新的语义元素
许多现有网站都包含以下HTML代码： < div id=“nav”>, < div class=“header”>, 或者 < div id=“footer”>, 来指明导航链接, 头部, 以及尾部.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
- < header> ：页首
- < nav> ：导航栏
- < section> ：区块
- < article> ：文章
- < aside> ：侧边栏
- < footer> ：页尾
2.HTML5 Video 标签
Video 标签：视频标签、加载视频。IE9以下的版本不支持。
a)支持的格式
.mp4/.ogg/.webm
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报
实例：
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
3.HTML5 audio 标签
audio 标签：播放音乐或音频。IE9以下的版本不支持。
a)支持的格式
.mp3/.ogg/.wav
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
实例：
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
</body>
3057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
