Document

菜鸟教程-HTML总结

2024-09-23
dfer
86
html 前端 CSDN

一.HTML简介与注意事项

HTML（超文本标记语言），是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。HTML文档也叫做 web 页面
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML(准通用标记语言）。HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！

二.HTML下载与使用

Visual Studio Code - Code Editing. Redefined

使用网站下载VS code ，

，首先点击小方块按钮，搜索“Chinese”使用汉化插件，，下载“live preview”可以在编译过程中，右键空白地方，选择“show preview”，显示运行结果。

AI的使用

1.安装与智能补全

搜索“Fitten Code”进行下载安装，登录后输入一段代码，Fitten Code 就会为您自动补全代码，按下 Tab 键接受所有补全建议，按下 Ctrl+→ 键(mac系统为Command+→)接收单个词补全建议。

2.AI问答

用户可通过点击左上角工具栏中的Fitten Code – 开始对话或者使用快捷键Ctrl+Alt+C(mac系统为Control+Option+C)打开对话窗口进行对话，当用户选中代码段再进行对话时，Fitten Code 会自动引用用户所选中的代码段，此时可直接针对该代码段进行问询等操作：

3.生成代码

可在左侧 Fitten Code 工具栏中选择 "Fitten Code - 生成代码" 或者使用快捷键 Ctrl+Alt+G (mac系统为Control+Option+G)

，点击这个按钮，在输入框内输入指令，便可以生成代码，也可以使用对话生成代码。

4、代码翻译

编辑代码功能可以实现不同语言之间的转换，如Python语法转换成C++语法等。选中需要进行编辑的代码段，右键选择 "Fitten Code – 编辑代码" 或点击左侧工具栏中的 "Fitten Code – 编辑代码" 或者使用快捷键 Ctrl+Alt+E (mac系统为Control+Option+E)

也可以在Chat界面实现：选中需要进行编辑的代码段，右键选择 "Fitten Code – 开始聊天" 或点击左侧工具栏中的 "Fitten Code – 开始聊天" 或者使用快捷键 Ctrl+Alt+C,

5、生成注释

先选中需要生成注释的代码段，然后右键选择 "Fitten Code – 生成注释"

6、解释代码

选中代码段然后右键选择 "Fitten Code – 解释代码" 进行解释

7、生成测试

通过选中代码段后右键选择 "Fitten Code – 生成单元测试" 来实现

8、检查bug

选中对应代码段，然后右键选择 "Fitten Code查找Bug"

9、编辑代码

用户点击 "Apply" 后即可应用变更。通过选中代码段右键选择 "Fitten Code – 编辑代码" 或在左上角工具栏点击 "Fitten Code – 编辑代码"，如下图所示：

随后，用户可在输入框中输入指示，Fitten Code 会新建一个窗口对比显示更改前和更改后的内容，用户可通过点击 "Apply" 应用更改

10、无法连接外网

点击左下角⚙按钮，再点击设置：然后在设置页面点击右上角 "打开设置(JSON)":

最后只需在在弹出的 settings.json 文件中添加"remote.extensionKind": { "FittenTech.Fitten-Code": ["ui"] }

三.HTML基础

1.HTML 标题

通过<h1> - <h6> 标签来定义的

例如

2.HTML 段落

段落是通过标签 <p> 来定义的

3.HTML 链接

链接是通过标签 <a> 来定义的

在 href 属性中指定链接的地址。

4.HTML 图像

图像是通过标签 <img> 来定义的.

四.HTML元素

HTML语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

Ps:标签写法要用小写

四.HTML属性

属性是 HTML 元素提供的附加信息。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

属性是 HTML 元素提供的附加信息。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

HTML 标题

标签	描述
<html>	定义 HTML 文档
<body>	定义文档的主体
<h1> - <h6>	定义 HTML 标题
<hr>	定义水平
<!--...-->	定义注释

HTML 段落

段落是通过 <p> 标签定义的。

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

HTML 文本格式化

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML "计算机输出" 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

HTML 链接语法

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。

title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。

rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

Border用来设置边框

设置在当前页面，跳转到指定位置

设置跳出框架

创建电子邮件链接

发送电子邮件2

Target属性：

使用 target 属性，你可以定义被链接的文档在何处显示

例如：<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

这行会在新窗口打开文档

target属性问题

target="_blank":在新窗口中浏览新的页面。

target="_self":在同一个窗口打开新的页面。

target="_parent":在父窗口中打开新的页面。（页面中使用框架才有用）

target="_top" :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

Id属性：

id 属性可用于创建一个 HTML 文档书签

创建电子邮件参数：

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

注：多个邮件地址用 ; 隔开，空格用 %20 代替。

HTML <head>

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

HTML <link> 元素

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 标签- 使用实例

为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容<meta name="description" content="免费 Web & 编程教程">

定义网页作者:<meta name="author" content="Runoob">

每30秒钟刷新当前页面: <meta http-equiv="refresh" content="30">

HTML <script> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML 样式- CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

显示出如何改变段落的颜色和左外边距

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<h2 style="background-color:red;">这是一个标题</h2>

<p style="background-color:green;">这是一个段落。</p>

</body>

HTML 样式实例 - 字体, 字体颜色，字体大小

使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

<p>这是一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。可以在<head> 部分通过 <style>标签定义内部样式表:

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

</head>

HTML 样式标签

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

HTML 图像

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

例如：<img src="boat.gif" alt="Big Boat">

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

例如：<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

HTML 表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如：

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

其中<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

HTML 表格和边框属性

例如：

<tr>

</tr>

</table>

HTML 表格表头

例如：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

表格三要素 table、tr、td 缺一不可。

<table> 标签常用属性：

border="1" 表格边框的宽度

bordercolor="#fff" 表格边框的颜色

cellspacing="5" 单元格之间的间距

width="500" 表格的总宽度

height="100" 表格的总高度

align="right" 表格整体对齐方式 (参数有 left、center、right)

bgcolor="#fff" 表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff" 行的颜色

align="right" 行内文字的水平对齐方式 (参数有left、center、right)

valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)

<td>、<th> 标签的常用属性

width="500" 单元格的宽度，设置后对当前一列的单元格都有影响

height="100" 单元格的高度，设置后对当前一行的单元格都有影响

bgcolor="fff" 单元格的背景色

align="right" 单元格文字的水平对齐方式 (参数left、center、right)

rowspan="3" 合并垂直水平方向的单元

格表格结构语义标签：

1.<table>：表格根元素。
2.<thead>：表格头。
3.<tbody>：表格体。
4.<tfoot>：表格尾，一般可忽略该结构。
5.<tr>：表格行。

表格内容标签：

1.<th>：表头单元格。
2.<td>：表体单元格。

跨列：colspan

跨行：rowspan

单元格内边距：cellpadding

单元格外边距：cellspacing

col 和 colgroup 用于便捷定义表格指定列的样式。

colspan="3" 合并水平方向单元格

valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)

HTML 列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

ul是unordered lists的缩写 (无序列表)

li是list item的缩写（列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写（导航列表）

tr是table row的缩写（表格中的一行）

th是table header cell的缩写（表格中的表头）

td是table data cell的缩写（表格中的一个单元格）

HTML <div> 和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

HTML 内联元素

内联元素在显示时通常不会以新行开始。

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

当涉及到 <div> 和 <span> 的区别时，以下几点是值得进一步明确的：

块级元素 vs. 行内元素：

<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

默认样式和布局：

<div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
<span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。

嵌套关系：

<div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。
<span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。

总之，<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

HTML 布局

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML<br>

CSS<br>

JavaScript</div>

内容在这里</div>

版权 © 123456.com</div>

</div>

</body>

</html>

运行结果如下：

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<tr>

<h1>主要的网页标题</h1>

</td>

</tr>

<tr>

HTML<br>

CSS<br>

JavaScript

</td>

内容在这里</td>

</tr>

<tr>

版权 © 123456.com</td>

</tr>

</table>

</body>

</html>

运行结果如下：

HTML 布局 - 有用的提示

使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板

HTML 布局标签

标签	描述
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。

HTML 表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<br>

<br>

<br>

<label for="subscribe">订阅推送信息</label>

<br>

</select>

<br>

</form>

以下实例创建了一个表单，包含两个输入框：

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form> 标签来创建表单:

<form>

input 元素

</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型。

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

运行结果如下：

密码字段

密码字段通过标签 <input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项

<input type="radio" name="sex" value="female">女

</form>

运行结果如下：

复选框（Checkboxes

<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项：

<form>

<input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>

<input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车

</form>

运行结果如下：

提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

Username: <input type="text" name="user">

</form>

运行结果如下：

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

<form>

<label>Name:

</label>

</form>

<label>Name:

</label>

</form>

<legend>Title</legend>

<label><input type="radio" name="radio"> Select me</label>

</fieldset>

</form>

HTML 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

Tips：

1.<input type="reset">定义重置按钮

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

2. 表单中的单选按钮可以设置以下几个属性：value、name、checked

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中

<form>

<p>你生活在哪个国家？</p>

<input type="radio" name="country" value="the USA">美国

</form>

3. 如何使用隐藏在下拉列表中的默认空白值实现SELECT标记

只需使用禁用和/或隐藏属性：

<form>

<option value="volvo">Volvo</option>

</select>

</form>

selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style="display:none"：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。

HTML 框架

iframe语法:

该URL指向不同的网页

iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

运行结果如下：

iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面目标链接的属性必须使用 iframe 的属性，如下实例:

<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML iframe 标签

标签	说明
<iframe>	定义一个内联的iframe

HTML 颜色

颜色值

颜色(Color)	颜色十六进制(Color HEX)	颜色RGB(Color RGB)
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

设置背景颜色

RGBA—设置颜色透明度

它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

div {

background:rgba(255,0,0,0.5);

}

相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

通常我们为了省略一个 0:

div {

background:rgba(255,0,0,.5);

}

实例：

通过 rbg 值设置背景颜色

</p>

通过 rbg 值设置背景颜色

</p>

通过 rbg 值设置背景颜色

</p>

通过 rbg 值设置背景颜色

</p>

HTML 颜色名

颜色名	HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

HTML 颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

颜色	3位十六进制颜色值	6位十六进制颜色值	RGB
	#000	#000000	rgb(0,0,0)
	#F00	#FF0000	rgb(255,0,0)
	#0F0	#00FF00	rgb(0,255,0)
	#00F	#0000FF	rgb(0,0,255)
	#FF0	#FFFF00	rgb(255,255,0)
	#0FF	#00FFFF	rgb(0,255,255)
	#F0F	#FF00FF	rgb(255,0,255)
	#888	#888888	rgb(136,136,136)
	#FFF	#FFFFFF	rgb(255,255,255)

通过十六进制（Hex）的颜色值排序

颜色名	HEX	Color
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

HTML 脚本

插入脚本：

html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

document.write("Hello World!")

</script>

</body>

</html>

运行结果：

HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

document.write("Hello World!");

</script>

运行结果：

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

document.write("Hello World!")

</script>

运行结果：

JavaScript体验(来自本站javascript教程)

JavaScript实例代码:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name; 或 &#entity_number;

如需显示小于号，我们必须这样写：< 或 < 或 <

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

实体名称英文全称：

lt : less than

gt : greater than

amp : ampersand

quot : quotation

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的 URL Scheme

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL 编码实例

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

HTML 速查列表

HTML 基本文档

<!DOCTYPE html>

<html>

<head>

</head>

<body>

可见文本...

</body>

</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>

<h6>最小的标题</h6>

<p>这是一个段落。</p>

<br> （换行）

<hr> （水平线）

文本格式化（Formatting）

<code>计算机代码</code>

<pre>预格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr> （缩写）

<address> （联系信息）

<bdo> （文字方向）

<blockquote> （从另一个源引用的部分）

<cite> （工作的名称）

<del> （删除的文本）

<ins> （插入的文本）

<sub> （下标文本）

<sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>

图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>

邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

书签：

<a href="#tips">跳到提示部分</a>

图片（Images）

样式/区块（Styles/Sections）

h1 {color:red;}

p {color:blue;}

</style>

<div>文档中的块级元素</div>

<span>文档中的内联元素</span>

无序列表

<ul>

</ul>

有序列表

<ol>

</ol>

定义列表

<dl>

</dl>

表格（Tables）

<tr>

</tr>

<tr>

</tr>

</table>

框架（Iframe）

表单（Forms）

</select>

</form>

实体（Entities）

< 等同于 <

> 等同于 >

HTML 标签简写及全称

标签	英文全称	中文说明
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Bi-Directional Override	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题1到标题6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
small	Small	变小（文本）
span	Span	范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）

上一篇：计算机毕业设计mys

下一篇： 495. 响应式潮流