目录

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

学习参考资料如下：

HTML教程

HTML实例

HTML标签参考手册

HTML简介

  • HTML 是用来描述网页的一种标记语言（不是编程语言）——超文本标记语言（HyperText Markup Language）。
  • 标记语言是一套标记标签 (markup tag)，HTML使用标记标签来描述网页。
  • HTML 文档包含了HTML 标签及文本内容，也叫做web 页面。

HTML实例

一个简单的HTML实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>实例(runoob.com)</title>

</head>

<body>

<h1>标题</h1>

<p>段落</p>

</body>

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

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，需要在头部将字符声明为 UTF-8 或 GBK。

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)：

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 标签对大小写不敏感：<P> 等同于 <p> ，许多网站都使用大写的 HTML 标签，推荐推荐使用小写，未来 (X)HTML 版本中会强制使用小写。

HTML元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素），HTML 文档由相互嵌套的 HTML 元素构成。

没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，<br> （定义换行）就是没有关闭标签的空元素。

在开始标签中添加斜杠，比如 <br/> ，是关闭空元素的正确方法， <br> 也可以但不推荐。

HTML 属性

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

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"

提示：属性和属性值对大小写不敏感，推荐使用小写属性。

适用于大多数 HTML 元素的属性如下：

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

完整的HTML属性列表 HTML 标签参考手册，更多标准属性说明 HTML 标准属性参考手册。

HTML网页结构

下面是一个可视化的HTML页面结构：



注：只有 <body> 区域 (白色部分) 才会在浏览器中显示。

<!DOCTYPE> 声明

<!DOCTYPE> 声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

查看完整网页声明类型 DOCTYPE 参考手册。

HTML 基础

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落

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

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

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

HTML 链接

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

<a href="https://www.runoob.com">这是一个链接</a>

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

注：href是Hypertext Reference 的缩写，表示超文本引用，用来建立当前元素和文档之间的链接。

HTML 图像

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

<img loading="lazy" src="/images/logo.png" width="258" height="39" />

html 相对路径的写法：

  • ./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
  • ../：代表文件所在的父级目录
  • ../../：代表文件所在的父级目录的父级目录
  • /：代表文件所在的根目录

标题、水平线、注释

标题（Heading）是通过** <h1&#62 - <h6&#62 标签进行定义的，<h1&#62 定义最大的标题， <h6&#62 定义最小的标题，1到6号标题与1到6号字体逆序对应**（如1号字体对应6号标题）。

** <hr> **标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解，浏览器会忽略注释。

一个带水平线、注释、标题的例子：

<!--这是一个注释，注释在浏览器中不会显示-->

<h1>这是1号标题</h1>

<font size="6">这是6号字体文本</font>

<p>hr 标签定义水平线：</p>

<hr />

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

<h2>这是2号标题</h2>

<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>

<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>

<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>

<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>

<font size="1">这是1号字体文本</font>

注意：浏览器会自动地在标题的前后添加空行。

确保将 HTML 标题 标签只用于标题（不是为了生成粗体或大号的文本），搜索引擎使用标题为您的网页的结构和内容编制索引。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

段落、换行

HTML 可以将文档分割为若干段落，段落是通过<p> 标签定义的，不推荐省略结束标签，未来的 HTML 版本中不允许省略结束标签。

如果希望在不产生一个新段落的情况下进行换行（新行），请使用<br>标签，<br /> 元素是一个空的 HTML 元素，没有结束标签（只能自闭合）。

<p>这个<br>段落<br>演示了分行的效果</p>

注意：浏览器会自动地在段落的前后添加空行，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。

文本格式化

HTML 使用标签 <b>("bold" 粗体) 与 <i>("italic" 斜体) 对输出的文本进行格式。

注：<b> 与<i> 定义粗体或斜体文本，<strong> 或者 <em>意味着要呈现的文本是重要的要突出显示（目前使用粗体、斜体效果，看起来效果相同）。

文本格式化标签

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

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含<sub>下标</sub>

<br />

这个文本包含<sup>上标</sup>	

<p>如何标记<del>删除文本</del>和<ins>插入文本</ins>。</p>

"计算机输出" 标签

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

此例演示如何使用 pre 标签

对空行和    空格

进行控制

</pre>

<code>计算机输出</code>

<br />

<kbd>键盘输入</kbd>

<br />

<tt>打字机文本</tt>

<br />

<samp>计算机代码样本</samp>

<br />

<var>计算机变量</var>

<br />

<p>

<b>注释：</b>这些标签常用于显示计算机/编程代码。

</p>

引文、引用、标签定义

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

链接、target、id

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

链接语法

HTML使用标签 <a> 来设置超文本链接，href 属性描述了链接的目标，代码类似这样：

<a href="url">链接文本</a>

<!--图片链接-->

<a href="//www.xxxx.com/html/html-tutorixxxxal.html">

<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>

target 属性

使用 target 属性可以定义被链接的文档在何处显示，下面的这行会在新窗口打开文档：

<a href="https://www.cnblogs.com/" target="_blank" rel="noopener noreferrer">访问博客园</a>

target属性值如下：

值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

id 属性

id属性可用于创建在一个HTML文档书签标记，书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.cnblogs.com/html/html-links.html#tips">

访问有用的提示部分</a>

注释： 请始终将正斜杠添加到子文件夹，否则会向服务器产生两次 HTTP 请求。

图片链接

<p>创建图片链接:

<a href="https://www.cnblogs.com/">

<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:

<a href="https://www.cnblogs.com/">

<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

head-title、base、link、style、meta

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

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

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

注：<script>标签用于加载脚本文件，如： JavaScript。

title元素

<title> 标签定义了不同文档的标题，在 HTML/XHTML 文档中是必须的：

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

<meta charset="utf-8">

<link rel="shortcut icon" href="图片url">

<title>文档标题</title>

</head>

注：<title>元素不仅可以显示文本，也可以在左侧显示logo等图片，将<link>标签放入<head>里即可。

base元素

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

<head>

<base href="https://www.cnblogs.com/images/" target="_blank">

</head>

link元素

<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

style元素

<style> 标签定义了HTML文档的样式文件引用地址，元素中也可以直接添加样式来渲染 HTML 文档:

<head>

<style type="text/css">

body {background-color:yellow}

p {color:blue}

</style>

</head>

meta元素

meta标签描述了一些基本的元数据，元数据也不显示在页面上，但会被浏览器解析。

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

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

<meta> 一般放置于 <head> 区域。

为搜索引擎定义关键词:

<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">

样式-CSS

**CSS (Cascading Style Sheets) **用于渲染HTML元素标签的样式：

<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors

<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>

</div>

<div style="color:#000000;">and more...</div>

</div>

</body>

如何使用CSS

CSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的，可以通过以下方式添加到HTML中:

  • 内联样式-在HTML元素中使用"style" 属性
  • 内部样式表-在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用-使用外部 CSS 文件（最好的方式）

内联样式

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

以下实例显示出如何改变段落的颜色和左外边距：

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

样式实例 - 背景颜色

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

<body style="background-color:yellow;">

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

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

</body>

注：早期背景色属性（background-color）是使用 bgcolor 属性定义。

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

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

<h1 style="font-family:verdana;">一个标题</h1>

<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

注：现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。

样式实例 - 文本对齐方式

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

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

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

注：文本对齐属性 text-align 取代了旧标签 <center> 。

内部样式表

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

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部样式表

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

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

图像-img标签

在 HTML 中，图像由<img> 标签定义，<img&#62 是空标签——只包含属性，并且没有闭合标签。

<p>

一个图像:

<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>

一个动图:

<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>

注意插入动图的语法和静态图的语法是一样的。</p>

注意: 慎用图片，使用时注意插入页面图像的路径。

源属性（src）

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

<img src="url" alt="some_text">

URL 指存储图像的位置，浏览器将图像显示在文档中图像标签出现的地方。

Alt属性

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

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

在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像的height（高度） 与 width（宽度）

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素:

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

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

创建图像映射

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接（带图像的链接参考链接标签）：

<p>点击图片，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

该段代码中的shape指的是点击区域的形状，coords指的是链接区域在图片中的坐标（像素为单位）。

表格-table

表格由 <table> 标签来定义，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>



注：如果不定义边框属性border，表格将不显示边框。

表格结构语义标签：

  • <table>：表格根元素。
  • <thead>：表格头。
  • <tbody>：表格体。
  • <tfoot>：表格尾，一般可忽略该结构。
  • <tr>：表格行。

表格内容标签：

  • <th>：表头单元格，大多数浏览器会把表头显示为粗体居中的文本。
  • <td>：表体单元格。

跨列：colspan

跨行：rowspan

单元格内边距：cellpadding

单元格外边距：cellspacing

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

<table border="1">

  <colgroup>

    <col span="2" style="background-color:red">

    <col style="background-color:yellow">

  </colgroup>

  <tr>

    <th>ISBN</th>

    <th>Title</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>3476896</td>

    <td>My first HTML</td>

    <td>$53</td>

  </tr>

  <tr>

    <td>5869207</td>

    <td>My first CSS</td>

    <td>$49</td>

  </tr>

</table>

有序ol、无序ul和自定义dl列表

HTML 支持有序、无序和定义列表:

  • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记（可通过CSS控制标记的样式，如style="list-style-type:circle"）。
  • 有序列表也是一列项目，列表项目使用数字进行标记（可通过ol的type属性设置标记为字母、罗马数字等类型）。
  • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。

列表标签：

标签 描述
<ol> 定义有序列表，ol是ordered lists的缩写
<ul> 定义无序列表，ul是unordered lists的缩写
<li> 定义列表项，li是list item的缩写
<dl> 定义自定义列表 ，dl是definition lists的缩写
<dt> 自定义列表项目，dt是definition term的缩写
<dd> 定义自定列表项的描述，dd是definition description的缩写 
<h4>无序列表:</h4>

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

<h4>有序列表:</h4>

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

<h4>自定义列表:</h4>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

区块-div、span

大多数 HTML 元素被定义为块级元素或内联元素：

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束），如：h1, p, ul, table。
  • 内联元素在显示时通常不会以新行开始，如：b，td, a, img。

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

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

<div> 元素：

  • <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
  • <div> 元素没有特定的含义，浏览器会在其前后显示折行。
  • 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
  • <div> 元素的另一个常见的用途是文档布局。

<span> 元素：

  • <span> 元素是内联元素，可用作文本的容器。
  • <span> 元素也没有特定的含义。
  • 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

布局-div、table

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

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

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）。

使用div元素

div 元素是用于分组 HTML 元素的块级元素，下面使用 div 元素来创建多列布局：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Demo</title>

</head>

<body>

	<div id="maxname" style="width:500px;">

      <div id="hname" style="background-color:#666FFF;">

        <h1 style="margin-bottom:0;text-align:center;">Div布局实例</h1>

      </div>

      <div id="menu" style="background-color:#FFFFFF;height:200px;width:100px;float:left;">

          菜单<br/>

          num1<br/>

          num2<br/>

          num3

      </div>

      <div id="content" style="background-color:#FFFF00;height:200px;width:300px;float:left;">

        中间内容

      </div>

      <div id="right" style="background-color:#000000;color:#FFFFFF;height:200px;width:100px;float:right;">

          信息内容

      </div>

      <div id="bool" style="background-color:#F0F8FF;clear:both;text-align:center;">

        提示信息

      </div>

  </div>

</body>

</html>

使用table元素

使用table标签是创建布局的一种简单的方式，下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>Dome</title> 

</head>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#666FFF;">

<h1 style="text-align:center;">主要的网页标题</h1>

</td>

</tr>

<tr>

<td style="background-color:#FFFFFF;width:100px;vertical-align:top;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript

</td>

<td style="background-color:#FFFF00;height:200px;width:400px;vertical-align:top;">

内容在这里</td>

</tr>

<tr>

<td colspan="2" style="background-color:#F0F8FF;text-align:center;">

提示信息</td>

</tr>

</table>

</body>

</html>

表单和输入

HTML 表单用于收集不同类型的用户输入。

表单

表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表等。

表单本身并不可见，表单使用表单标签 <form> 来设置:

<form>

.

input 元素

.

</form>

输入元素

多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型如下：

  • 文本域（Text Fields）-通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域（默认宽度是 20 个字符）。
  • 密码字段-通过标签 来定义，密码字段字符不会明文显示，而是以星号或圆点替代。
  • 单选按钮（Radio Buttons）- 标签定义了表单单选框选项。
  • 复选框（Checkboxes）- 定义了复选框， 用户需要从若干给定的选择中选取一个或若干选项。
  • 提交按钮(Submit Button)- 定义了提交按钮，当用户单击确认按钮时，表单的内容会被传送到另一个文件（表单的动作属性定义了目的文件的文件名），这个文件通常会对接收到的输入数据进行相关的处理。

常用输入类型

<form name="input" action="html_form_action.php" method="get">

	<!--文本域-->

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

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

	<!--密码字段-->

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

	<!--单选按钮-->

	<input type="radio" name="sex" value="male">Male<br>

	<input type="radio" name="sex" value="female">Female<br>

	<!--复选框-->

	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

	<input type="checkbox" name="vehicle" value="Car">I have a car<br>

	<!--提交按钮：点击确认按钮，输入数据会传送到 "html_form_action.php" 的页面-->

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

	<input type="submit" value="Submit"><br>

	<!--下拉列表：带有预选值-->

	<select name="cars">

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

		<option value="saab">Saab</option>

		<option value="fiat" selected>Fiat</option>

		<option value="audi">Audi</option>

	</select>

	<!--按钮-->

	<input type="button" value="Hello world!">

</form>

<!--带边框表单-->

<form action="">

	<fieldset>

		<legend>Personal information:</legend>

		Name: <input type="text" size="30"><br>

		E-mail: <input type="text" size="30"><br>

		Date of birth: <input type="text" size="10">

	</fieldset>

</form>

表单标签

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

框架-iframe

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面，iframe语法(该URL指向不同的网页):

<iframe src="URL"></iframe>

设置高度与宽度：height 和 width 属性用来定义iframe标签的高度与宽度，属性默认以像素为单位, 但是可以指定其按比例显示 (如："80%")。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

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

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

显示目标链接页面：iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

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

注： 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。

颜色

HTML 颜色由红色、绿色、蓝色混合而成，由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。三种颜色 红、绿、蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

一系列 216 种 Web 安全色作为 Web 标准被建议使用，当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

RGBA：意思是（Red-Green-Blue-Alpha），它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

<p style="background-color:rgb(255,255,0)">

通过 rbg 值设置背景颜色

</p>

<p style="background-color:rgba(255,255,0,0.25)">

通过 rbg 值设置背景颜色

</p>

<p style="background-color:rgba(255,255,0,0.5)">

通过 rbg 值设置背景颜色

</p>

<p style="background-color:rgba(255,255,0,0.75)">

通过 rbg 值设置背景颜色

</p>

颜色名：颜色名参考：https://www.runoob.com/html/html-colornames.html

颜色值：颜色值参考：https://www.runoob.com/html/html-colorvalues.html

脚本-script、noscript

<script>标签：

  • <script> 标签用于定义客户端脚本，比如 JavaScript。
  • <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
  • JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript>标签：

  • <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
  • <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
  • 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。
<script>

document.write("Hello World!")

</script>

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript的使用示例：

<p>JavaScript 能够直接写入 HTML 输出流中：</p>

<script>

document.write("<h1>这是一个标题</h1>");

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

</script>

<p id="demo1">JavaScript 可以触发事件，就像按钮点击：</p>

<script>

function myFunction1()

{

	document.getElementById("demo1").innerHTML="Hello JavaScript!";

}

</script>

<button type="button" onclick="myFunction1()">点我</button>

<p id="demo2">JavaScript 能改变 HTML 元素的样式：</p>

<script>

function myFunction2()

{

	x=document.getElementById("demo2") // 找到元素

	x.style.color="#ff0000";          // 改变样式

}

</script>

<button type="button" onclick="myFunction2()">点击这里</button>

字符实体

html 不区分大小写，但实体字符对大小写敏感。

标签 描述
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)
显示结果 描述 实体名称 实体编号
空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos; (IE不支持) '
￠ 分 &cent; ¢
£ 镑 &pound; £
¥ 人民币/日元 &yen; ¥
€ 欧元 &euro; €
§ 小节 &sect; §
版权 &copy; ©
注册商标 &reg; ®
商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

完整的HTML实体参考：https://www.runoob.com/tags/ref-entities.html

媒体-音频(Audio)、视频（Video）

<embed>标签定义外部（非 HTML）内容的容器，作用是在 HTML 页面中嵌入多媒体元素。

<audio> 标签定义了一个音频，<video> 标签定义了一个视频或者影片。

最好的 HTML 解决方法，下面的例子使用了两个不同的音频格式、 4 种不同的视频格式，如果失败代码将回退尝试 embed 元素：

<audio controls height="100" width="100">

  <source src="horse.mp3" type="audio/mpeg">

  <source src="horse.ogg" type="audio/ogg">

  <embed height="50" width="100" src="horse.mp3">

</audio>

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.webm" type="video/webm">

  <object data="movie.mp4" width="320" height="240">

    <embed src="movie.swf" width="320" height="240">

  </object>

</video>

Dreamweaver基础教程：学习HTML的更多相关文章

  1. .Net程序员之Python基础教程学习----列表和元组 [First Day]

    一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所 ...

  2. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  3. Python基础教程学习笔记：第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  4. SpringCloud基础教程学习记录

    这个学习记录是学习自翟永超前辈的SpringCloud的基础教程. 自己写这个教程的目的主要是在于,想要更凝练总结一些其中的一些实用点,顺便做个汇总,这样自己在复习查看的时候更加方便,也能顺着自己的思 ...

  5. jascript基础教程学习总结(2)

    摘自:javascript基础教程 用链接对用户进行重定向: js001.html 这个HTML页面基于链接对用户进行重定向 <!DOCTYPE html PUBLIC "-//W3C ...

  6. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. 【学习笔记】Python基础教程学习笔记

    教程视频网盘共享:http://pan.baidu.com/s/1hrTrR5E 03-python基础.if判断 print 输出数据 print("hahahah")----- ...

  8. .Net程序员之Python基础教程学习----函数和异常处理[Fifth Day]

       今天主要记录,Python中函数的使用以及异常处理. 一.函数:    1.函数的创建以及调用. def Add(val1,val2): return val1+val2; print Add( ...

  9. .Net程序员之Python基础教程学习----判断条件与循环[Fourth Day]

        今天学习Python的判断条件与循环操作. 一. 布尔变量: 在学习判断条件之前必须的了解bool变量,在Python中bool变量与C语言比较类似,与.net差别比较大,其中下面集中情况需要 ...

  10. .Net程序员之Python基础教程学习----字典的使用 [Third Day]

      今天学习了字典的使用, 所谓的字典其实就是键值对数据, 一个字典里面有唯一的Key对应一个value,Key是唯一的,Value不唯一. 在.net添加相同的Key会报错,在Python,若出现相 ...

随机推荐

  1. 驱动开发：DKOM 实现进程隐藏

    DKOM 就是直接内核对象操作技术,我们所有的操作都会被系统记录在内存中,而驱动进程隐藏的做旧就是操作进程的EPROCESS结构与线程的ETHREAD结构.链表,要实现进程的隐藏我们只需要将某个进程中 ...

  2. 驱动开发：内核MDL读写进程内存

    MDL内存读写是最常用的一种读写模式,通常需要附加到指定进程空间内然后调用内存拷贝得到对端内存中的数据,在调用结束后再将其空间释放掉,通过这种方式实现内存读写操作,此种模式的读写操作也是最推荐使用的相 ...

  3. Libevent [补档-2023-08-29]

    libevent的使用 8-1 安装 ​ 自己百度一下,安装它不是特别难,加油!!! 8-2 libevent介绍 ​ 它是一个开源库,用于处理网络和定时器等等事件.它提供了跨平台的API,能够在不同 ...

  4. 使用window.print进行前端打印，批量打印，设置分页，ie、火狐下设置页眉页脚

    window.print() print() 方法用于打印当前窗口的内容.谷歌调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求. 但谷歌貌似不能自定义设置页眉页脚的文字:ie和 ...

  5. PHP使用cookie做浏览历史记录

    /** * @param $article文章详情 * @param int $count记录数 * tp须引入cookie类 */ function addHistory($article,$cou ...

  6. 服了，一个ThreadLocal被问出了花

    分享是最有效的学习方式. 博客:https://blog.ktdaddy.com/ 故事 地铁上,小帅无力地倚靠着杆子,脑子里尽是刚才面试官的夺命连环问,"用过TheadLocal么?Thr ...

  7. CF1842

    A 比两边和的大小即可. B 显然如果一个数拥有的所有二进制位的 \(1\) 被包含在 \(x\) 中,选了一定不会导致不能变成 \(x\):如果有一个 \(1\),\(x\) 对应的位上是 \(0\ ...

  8. 从零开始的react入门教程（九），react context上下文详解，可能有点啰嗦，但很想让你懂

    壹 ❀ 引 我在从零开始的react入门教程(八),redux起源与基础用法一文中,介绍了redux的前辈Flux,以及redux关于单项数据更新的基本用法.我们在前文提到,相对Flux支持多个sto ...

  9. NC20667 数学题

    题目链接 题目 题目描述 最近,华东交通大学ACM训练基地的老阿姨被一个数学问题困扰了很久,她希望你能够帮她解决这个问题. 这个数学问题是这样的,给你一个N,要求你计算 gcd(a,b)表示a和b的最 ...

  10. NC14402 求最大值

    题目链接 题目 题目描述 给出一个序列,你的任务是求每次操作之后序列中 (a[j]-a[i])/(j-i)[1<=i<j<=n]的最大值. 操作次数有Q次,每次操作需要将位子p处的数 ...