HTML教程
纠错   06 Jun 2025

HTML教程

  • 参考

    https://www.runoob.com/html/html-tutorial.html

  • 简介
    • 网页结构

      • 只有<body>区域才会在浏览器中显示

      • <!DOCTYPE>声明
        • 声明为HTML5文档
        • 不区分大小写
        • 不同完整网页声明类型查看DOCTYPE参考手册（https://www.runoob.com/tags/tag-doctype.html）
      • 中文编码
        • 后面加<meta charset=“UTF-8”>
  • 编辑器：VScode
    • 文件保存.htm和.html都可以
    • 在默认浏览器中打开需要安装open in browser扩展
  • AI 编程助手
    • Fitten Code
  • 元素
    • 开始标签/起始标签（opening tag）和结束标签/闭合标签（closing tag）
    • 元素语法
      • 某些 HTML 元素具有空内容（empty content）
      • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
    • HTML空元素
      • 例子：
        是没有关闭标签的空元素

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

        空元素要在开始标签中添加斜杠，如

    • HTML标签对大小写不敏感，推荐使用小写
  • 属性

    • 属性总是以名称/值对的形式出现

      eg. name=“value”

    • HTML常用引用属性值
      • 属性值始终被包含在引号中

      • 常用双引号，单引号也行

        属性值本身含有双引号，那必须用单引号 eg. name=’John “ShotGun” Nelson’

    • 大小写不敏感

      WWW推荐小写

    • HTML属性参考手册

      这是适用于大多数HTML元素的属性

      • 完整的属性列表

        https://www.runoob.com/tags/html-reference.htmlhttps://www.runoob.com/tags/html-reference.html

  • 标题
    • 标题

      • 通过<h1> - <h6>进行定义

        浏览器会自动在标题前后添加空行

    • 水平线

      • 标签在html页面中创建水平线

      • 可用于分割内容
    • 注释
  • 段落
    • 段落

      • 段落

      • 浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
      • 在未来的 HTML 版本中，不允许省略结束标签
    • 折行


      • ：在不产生新段落的情况下换行

        没有结束标签

    • html输出提醒
      • 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
      • 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
  • 文本格式化
    • 标签
      • 粗体
      • 斜体

      • 通常用替换来使用，来替换使用

        或者 意味着你要呈现的文本是重要的，所以要突出显示。 现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

    • 实例
      • 预格式文本 
        • 标签可以固定格式（包括空格和换行）
                
  ![](https://document-image.mubu.com/document_image/30CF66A1AD1B48551716194660.jpg)
      • 计算机输出

        • 页面中显示编程代码

      • 地址
        • 添加一个超链接

        • <a href=www.whatever.balabala”>aaa</a>

      • 缩写和首字母缩写

        • 和，大体格式和超链接那个相同

      • 文字方向

        （这个好玩）

        • <bdo dir=“rt1”>balabala</bdo>

      • 块引用

        • 代码

          Life is what happens when you're busy making other plans.

          — John Lennon

          If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.

          — J.K. Rowling, Harry Potter and the Goblet of Fire

          In his famous quote, Einstein said: E=mc²

        • 结果

      • 删除字和插入字效果

        • My favorite color is blue red!

        • 删除
        • underline
  • 链接
    • 格式
      • 默认情况下，链接将以以下形式出现在浏览器中：
        • 一个未访问过的链接显示为蓝色字体并带有下划线。
        • 访问过的链接显示为紫色并带有下划线。
        • 点击链接时，链接显示为红色并带有下划线。
        • 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
    • 语法
      • （锚）元素
        • href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

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

          还有一个_top（跳出框架）。 不知道什么意思。

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

          访问菜鸟教程!

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

      • 链接文本

        “链接文本”不必一定为文本，也可以是图片或其他html元素

        • 文本链接

          访问菜鸟教程 显示为：访问菜鸟教程

        • 图像链接

          示例图片

        • 锚点链接

          跳转到第二部分

          • 在同一页面内创建内部链接

            这个我知道，相当于把# section作为一个链接用，同时在section2的地方放一个锚点

        • 下载链接

          下载文档

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

        • 实例

          我明白了，有“id”的地方是书签，类似于页面最下方的“译者注”什么的

        • 注意

          • 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”https://www.runoob.com/html/”。

            就是说链接的最后应该是“/”

  • 头部
      • 在这个元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
      • 可以添加的元素标签：, <style>, <meta />, <link />, <script>, <noscript> 和 <base /></noscript></script></style>
      • 定义了浏览器工具栏的标题
      • 当网页添加到收藏夹时，显示在收藏夹中的标题
      • 显示在搜索引擎结果页面的标题

      • 实例

          <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>文档标题</title>
  </head>
  <body>
  文档内容......
  </body>
  </html>

      • 定义了文档与外部资源的关系

        引入其他文档？

      • 通常用于链接到样式表

      • 实例

          <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
      • 定义了HTML文档的样式文件引用地址
      • 也可以在

      • 实例

          <head>
  <style type="text/css">
  body {
  background-color:yellow;
  }
  p {
  color:blue
  }
  </style>
  </head>
      • 信息
        • 描述了一些基本的元数据
          • 元数据不显示在页面上，但会被浏览器解析
          • 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务
        • 用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据
        • 一般放置于<head>区域
      • 使用实例

        • 编码格式

          <meta charset=“utf-8”>

        • 为搜索引擎定义关键词

        • 为网页定义描述内容

        • 定义网页作者

        • 每30秒钟刷新当前页面

      • 用于加载脚本文件
  • CSS
    • 实例
    • 如何添加
      • 内联样式- 在HTML元素中使用”style” 属性
        • 特殊的样式需要应用到个别元素时
        • 在相关的标签中使用
        • 实例
          • 改变段落颜色和左外边距
            • 颜色：color
            • 外边距：margin-left/right

            • 实例

              这是一个段落。

          • 背景颜色
            • 背景色属性：background-color

            • 实例

                <body style="background-color:yellow;">
  <h2 style="background-color:red;">这是一个标题</h2>
  <p style="background-color:green;">这是一个段落。</p>
  </body>
            • 早期背景色属性使用bgcolor属性定义
          • 字体样式
            • 字体：font- family
            • 字体颜色：color
            • 字体大小：font-size

            • 实例

                <h1 style="font-family:verdana;">一个标题</h1>
  <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
          • 文本对齐方式
            • 文字对齐属性：text-align

            • 实例

                <h1 style="text-align:center;">居中对齐的标题</h1>
  <p>这是一个段落。</p>
            • 文本对齐属性 text-align取代了旧标签
      • 内部样式表 -在HTML文档头部 <head> 区域使用
        • 单个文件需要特别样式

        • 在<head>部分通过

            <head>
  <style type="text/css">
  body {background-color:yellow;}
  p {color:blue;}
  </style>
  </head>
      • 外部引用 - 使用外部 CSS 文件（最好方式）
        • 样式需要被应用到很多页面时
        • 可以通过更改一个文件来改变整个站点的外观

        • 实例

            <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  • 图像
    • 图像标签（）和源属性（Src）
      • 是空标签，只包含属性，没有闭合标签
      • 源属性src指“source”，值为图像的URL地址
      • 语法
        • some_text
        • url指存储图像的位置
      • 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
    • Alt属性
      • alt属性用来为图像定义一串预备的可替换的文本
      • 语法
        • Big Boat
      • 在浏览器无法载入图像时，替换文本属性告诉读者失去的信息
    • 图像的高度与宽度
      • 高度：height
      • 宽度：width
      • 属性值默认为像素
      • 语法
        • Pulpit rock
    • 提示
      • 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
    • 实例

      • 排列图片

          <h4>默认对齐的图像 (align="bottom"):</h4>
  <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>
  <h4>图片使用 align="middle":</h4>
  <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>
  <h4>图片使用 align="top":</h4>
  <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

      • 浮动图像

          <p>
  <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
  </p>
  <p>
  <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
  </p>
      • 设置图片链接 

          <p>创建图片链接:
  <a href="http://www.runoob.com/html/html-tutorial.html">
  <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
  <p>无边框的图片链接:
  <a href="http://www.runoob.com/html/html-tutorial.html">
  <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

      • 创建图像映射：创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接

        （其中点击不同区域会跳转到不同图片）

          <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指链接区域在图片中的坐标（像素为单位）
  另外：
  1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
  <area shape="rect" coords="x1,y1,x2,y2" href=url>
  2、圆形：(圆心坐标为(X1,y1)，半径为r)
  <area shape="circle" coords="x1,y1,r" href=url>
  3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
  <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
  • 表格
    • 语法
      • 由<table>标签来定义

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

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

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

        套娃？

      • 实例

        • 代码

            <table>
  <thead>
  <tr>
  <th>列标题1</th>
  <th>列标题2</th>
  <th>列标题3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>行1，列1</td>
  <td>行1，列2</td>
  <td>行1，列3</td>
  </tr>
  <tr>
  <td>行2，列1</td>
  <td>行2，列2</td>
  <td>行2，列3</td>
  </tr>
  </tbody>
  </table>
        • 包含两个主要部分和 有点像网页 - 用于定义表格的标题部分: 在 中，使用 用于定义表格的主体部分: 在 中，使用 元素定义行，并在每行中使用
          元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。 -
          元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
        • HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题）
          • 可用于在表格的底部定义摘要、统计信息等内容
          • 可用于为整个表格定义标题
    • 表格和边框属性
      • 不定义边框属性则不显示边框

      • border属性用来显示边框

        Row 1, cell 1 Row 1, cell 2
    • 表头

      • 表格的表头使用 <th> 标签进行定义

          <table border="1">
  <tr>
  <th>Header 1</th>
  <th>Header 2</th>
  </tr>
  <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>
    • 实例
      • 带有标题的表格

        • 效果

        • 代码

            <table border="1">
  <caption>Monthly savings</caption>
  <tr>
  <th>Month</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>January</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>February</td>
  <td>$50</td>
  </tr>
  </table>
      • 跨行或跨列的表格

        • 效果

        • 代码：使用colspan和rowspan属性

            <h4>单元格跨两列:</h4>
  <table border="1">
  <tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
  </tr>
  <tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
  </tr>
  </table>
  <h4>单元格跨两行:</h4>
  <table border="1">
  <tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
  </tr>
  <tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
  </tr>
  <tr>
  <td>555 77 855</td>
  </tr>
  </table>
      • 表格内的标签

        • 效果

        • 代码

            <table border="1">
  <tr>
  <td>
  <p>这是一个段落</p>
  <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
  <table border="1">
  <tr>
  <td>A</td>
  <td>B</td>
  </tr>
  <tr>
  <td>C</td>
  <td>D</td>
  </tr>
  </table>
   </td>
  </tr>
  <tr>
  <td>这个单元格包含一个列表
  <ul>
  <li>apples</li>
  <li>bananas</li>
  <li>pineapples</li>
  </ul>
   </td>
  <td>HELLO</td>
  </tr>
  </table>
      • 单元格边距

        • 效果

        • 代码：使用cellpadding属性

            <h4>没有单元格边距:</h4>
  <table border="1">
  <tr>
  <td>First</td>
  <td>Row</td>
  </tr>
  <tr>
  <td>Second</td>
  <td>Row</td>
  </tr>
  </table>
  <h4>有单元格边距:</h4>
  <table border="1"
  cellpadding="10">
  <tr>
  <td>First</td>
  <td>Row</td>
  </tr>
  <tr>
  <td>Second</td>
  <td>Row</td>
  </tr>
  </table>
      • 单元格间距

        • 效果

        • 代码：使用cellspacing属性

            <h4>没有单元格间距:</h4>
  <table border="1">
  <tr>
  <td>First</td>
  <td>Row</td>
  </tr>
  <tr>
  <td>Second</td>
  <td>Row</td>
  </tr>
  </table>
  <h4>单元格间距="0":</h4>
  <table border="1" cellspacing="0">
  <tr>
  <td>First</td>
  <td>Row</td>
  </tr>
  <tr>
  <td>Second</td>
  <td>Row</td>
  </tr>
  </table>
  <h4>单元格间距="10":</h4>
  <table border="1" cellspacing="10">
  <tr>
  <td>First</td>
  <td>Row</td>
  </tr>
  <tr>
  <td>Second</td>
  <td>Row</td>
  </tr>
  </table>
  • 列表
    • 无序列表
      • 使用<ul>标签
      • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

      • 语法

          <ul>
  <li>Coffee</li>
  <li>Milk</li>
  </ul>
    • 有序列表
      • 有序列表始于<ol>标签，每个列表项始于<li>标签

      • 语法

          <ol>
  <li>Coffee</li>
  <li>Milk</li>
  </ol>
    • 自定义列表
      • 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

      • 语法

          <dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
  </dl>
    • 提示
      • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
    • 实例
      • 不同类型的无序列表

        • 效果

        • 代码：用CSS定义style

            <p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
  <h4>圆点列表：</h4>
  <ul style="list-style-type:disc">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ul>
  <h4>圆圈列表：</h4>
  <ul style="list-style-type:circle">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ul>
  <h4>正方形列表：</h4>
  <ul style="list-style-type:square">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ul>
      • 不同类型的有序列表

        • 效果

        • 代码：用type属性；默认是编号列表

            <h4>编号列表：</h4>
  <ol>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ol>
  <h4>大写字母列表：</h4>
  <ol type="A">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ol>
  <h4>小写字母列表：</h4>
  <ol type="a">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ol>
  <h4>罗马数字列表：</h4>
  <ol type="I">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ol>
  <h4>小写罗马数字列表：</h4>
  <ol type="i">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
  </ol>
      • 嵌套列表

        • 其一

            <h4>嵌套列表：</h4>
  <ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
  <li>Black tea</li>
  <li>Green tea</li>
  </ul>
  </li>
  <li>Milk</li>
  </ul>

        • 其二

            <h4>嵌套列表：</h4>
  <ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
  <li>Black tea</li>
  <li>Green tea
  <ul>
  <li>China</li>
  <li>Africa</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>Milk</li>
  </ul>
  • 区块
    • 区块元素
      • 大多数 HTML 元素被定义为块级元素或内联元素
      • 块级元素在浏览器显示时，通常会以新行来开始（和结束）
      • 实例: <h1>, <p>, <ul>, <table>
    • 内联元素
      • 内联元素在显示时通常不会以新行开始
      • 实例: , <td>, ,
    • 元素
      • 块级元素，可用于组合其他HTML元素的容器
      • 没有特定含义
      • 浏览器会在起前后显示折行
      • 用法
        • 如果与CSS一起用，可用于队打得内容块设置样式属性

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

          看不懂，先记住

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

        • 代码

            <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>菜鸟教程([runoob.com](http://runoob.com/))</title>
  </head>
  <body>
  <div id="container" style="width:500px">
  <div id="header" style="background-color:#FFA500;">
  <h1 style="margin-bottom:0;">主要的网页标题</h1></div>
  <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
  <b>菜单</b><br>
  HTML<br>
  CSS<br>
  JavaScript</div>
  <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
  内容在这里</div>
  <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
  版权 © [runoob.com](http://runoob.com/)</div>
  </div>
  </body>
  </html>

        • 效果

    • 使用表格
      • 实例

        • 代码

            <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>菜鸟教程([runoob.com](http://runoob.com/))</title>
  </head>
  <body>
  <table width="500" border="0">
  <tr>
  <td colspan="2" style="background-color:#FFA500;">
  <h1>主要的网页标题</h1>
  </td>
  </tr>
  <tr>
  <td style="background-color:#FFD700;width:100px;">
  <b>菜单</b><br>
  HTML<br>
  CSS<br>
  JavaScript
  </td>
  <td style="background-color:#eeeeee;height:200px;width:400px;">
  内容在这里</td>
  </tr>
  <tr>
  <td colspan="2" style="background-color:#FFA500;text-align:center;">
  版权 © [runoob.com](http://runoob.com/)</td>
  </tr>
  </table>
  </body>
  </html>

        • 效果

          用表格做有边框

  • 表单
    • 概述
      • 用于收集用户的输入信息
      • 表单表示文档中的一个区域，包含交互控件，将用户收集到的信息发送到Web服务器
      • 通常包含各种输入字段、复选框、单选按钮、下拉列表等元素
    • 常用标签
        • 用于创建表单
        • action属性定义了表单数据提交的目标URL
        • method属性定义了提交数据的HTTP方法
        • 用于为表单元素添加标签
        • 创建文本输入框、密码框、单选按钮、复选框
        • type属性定义输入框类型

          • 文本域（Text Fields）

              <input type="text">
  <form>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
  </form>
            • 当用户要在表单中键入字母、数字等内容时，就会用到文本域
            • 表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是20个字符。

          • 密码字段

              <input type="password">
  <form>
  Password: <input type="password" name="pwd">
  </form>
            • 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代

          • 单选按钮（Radio Buttons）

              <input type="radio">
  <form action="">
  <input type="radio" name="sex" value="male">男<br>
  <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">
  <form name="input" action="html_form_action.php" method="get">
  Username: <input type="text" name="user">
  <input type="submit" value="Submit">
  </form>
            • 当用户单击确认按钮时，表单的内容会被传送到服务器

            • 表单的动作属性 action 定义了服务端的文件名

              上例中输入数据会传送到 html_form_action.php 文件 ：连接到数据库咯

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

              • 实例

                  <!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
  <form>
  <label>Name:
  <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
  </form>
  <!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
  <form method="post">
  <label>Name:
  <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
  </form>
  <!-- 表单使用 fieldset, legend, 和 label 标签 -->
  <form method="post">
  <fieldset>
  <legend>Title</legend>
  <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
  </form>
        • id属性用于关联
        • name属性用于标识表单字段

          • 预选的下拉列表

              <form action="">
  <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>
  </form>
  用于指定默认选项
    • 实例
      • 整体的

        • 代码（这个好玩）

            <form action="/" method="post">
  <!-- 文本输入框 -->
  <label for="name">用户名:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <!-- 密码输入框 -->
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <!-- 单选按钮 -->
  <label>性别:</label>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
  <br>
  <!-- 复选框 -->
  <input type="checkbox" id="subscribe" name="subscribe" checked>
  <label for="subscribe">订阅推送信息</label>
  <br>
  <!-- 下拉列表 -->
  <label for="country">国家:</label>
  <select id="country" name="country">
  <option value="cn">CN</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
  </select>
  <br>
  <!-- 提交按钮 -->
  <input type="submit" value="提交">
  </form>

        • 效果

          顺提，使得密码输入显示为*号（隐藏密码）

      • 创建按钮

        • 代码

            <form action="">
  <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>
      • 带有输入框和确认按钮的表单

        • 代码

            First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>

        • 效果

          填入预填内容

      • 从表单发送电子邮件

        • 代码

            <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
  Name:<br>
  <input type="text" name="name" value="your name"><br>
  E-mail:<br>
  <input type="text" name="mail" value="your email"><br>
  Comment:<br>
  <input type="text" name="comment" value="your comment" size="50"><br><br>
  <input type="submit" value="发送">
  <input type="reset" value="重置">
  </form>

        • 效果

  • 框架

    • 通过使用框架，可以在同一个浏览器窗口显示不止一个页面

      类似于推送中的“滑动查看更多”功能

    • 语法

      • <iframe src=“URL”></iframe>
      • 设置高度和宽度

        • height和width属性

            <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
      • 移除边框
        • frameborder属性用于定义iframe表示是否显示边框

        • 设置属性值为“0”移除边框

            <iframe src="demo_iframe.htm" frameborder="0"></iframe>
      • 显示目标链接页面

        • 实例

            <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
  <p><a href="[https://www.runoob.com](https://www.runoob.com/)" target="iframe_a" rel="noopener">[RUNOOB.COM](http://runoob.com/)</a></p>
  • 颜色&颜色名/值
    • 颜色
      • 十六进制符号
      • 红绿蓝
      • 每种颜色最小值是0（HEX：# 00），最大是255（HEX：#FF）
      • 三个值一样时显示为白——灰——黑（取决于值的大小）
      • 216跨平台web安全色
    • 颜色名/值
      • 141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）
      • 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色
      • 详见

        • 通过名称（英文）排序

          https://www.runoob.com/html/html-colornames.html

        • 通过HEX的颜色值排序

          https://www.runoob.com/html/html-colorvalues.html

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

      • 实例

          <script>
  document.write("Hello World!");
  </script>

      • 提供无法使用脚本时的替代内容

        比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时

      • 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素
      • 只有在浏览器不支持脚本或者禁用脚本时，才会显示

      • 实例

          <script>
  document.write("Hello World!")
  </script>
  <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
    • 实例
      • 事件响应

        • 代码

            <h1>我的第一个 JavaScript </h1>
  <p id="demo">
  JavaScript 可以触发事件，就像按钮点击。</p>
  <script>
  function myFunction()
  {
  document.getElementById("demo").innerHTML="Hello JavaScript!";
  }
  </script>

        • 效果

      • 处理HTML样式

        • 代码

            <h1>我的第一段 JavaScript</h1>
  <p id="demo">
  JavaScript 能改变 HTML 元素的样式。
  </p>
  <script>
  function myFunction()
  {
  x=document.getElementById("demo") // 找到元素
  x.style.color="#ff0000"; // 改变样式
  }
  </script>
  <button type="button" onclick="myFunction()">点击这里</button>

        • 效果

          一点就变红

  • 字符实体
    • 实体
      • HTML中某些字符是预留的
      • 不能使用小于号(<)和大于号(>)
      • 如果希望正确显示预留字符，必须在源代码中使用字符实体（character entities）

      • 字符实体类似：&entity_name; 或 &#entity_number;

        例如显示小于号： < 或 < 或 <

      • 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
    • 不间断空格（Non-breaking Space）
      •  

      • 浏览器总是会截短 HTML 页面中的空格。

        如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。

      • 如需在页面中增加空格的数量，您需要使用   字符实体。
    • 结合音标符
      • 发音符号是加到字母上的一个”glyph(字形)”。
      • 一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
      • 变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
      • 变音符号可以与字母、数字字符的组合来使用。
    • 常用字符实体

      • 常用

      • 注：大小写敏感！

    • 更多查看：HTML实体参考手册

      https://www.runoob.com/tags/ref-entities.html

  • 统一资源定位器（URL，Uniform Resource Locators）
    • 语法规则

      • scheme://host.domain:port/path/filename

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

    • 常见的URL Scheme

    • URL字符编码

      • 只能使用ASCII字符集

        https://www.runoob.com/tags/html-ascii.html

      • 使用“%”其后跟随两位的HEX数来替换非ASCII字符
      • URL不能包含空格，URL编码通常用+来替换空格

      • 编码实例

  • XHTML
    • 什么是？
      • XHTML 指的是可扩展超文本标记语言
      • XHTML 与 HTML 4.01 几乎是相同的
      • XHTML 是更严格更纯净的 HTML 版本
      • XHTML 是以 XML 应用的方式定义的 HTML
      • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
      • XHTML 得到所有主流浏览器的支持
    • 为什么？
      • XML 是一种必须正确标记且格式良好的标记语言
    • 与HTML最重要的区别
      • 文档结构
        • XHTML DOCTYPE 是强制性的
          • 必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）
          • , , , 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>文档标题 文档内容 ```
        • 中的 XML namespace 属性是强制性的
        • 、、 以及 <body> 也是强制性的 </body>
      • 元素语法
        • XHTML 元素必须正确嵌套
        • XHTML 元素必须始终关闭
          • 元素必须有关闭标签

          • 空元素必须包含关闭标签

            分行:
            水平线: <hr /> 图片: Happy face

        • XHTML 元素必须小写
        • XHTML 文档必须有一个根元素
      • 属性语法
        • XHTML 属性必须使用小写
        • XHTML 属性值必须用引号包围
        • XHTML 属性最小化也是禁止的

          • 不允许属性简写

              错误：
  <input checked>
  <input readonly>
  <input disabled>
  <option selected>
  正确：
  <input checked="checked">
  <input readonly="readonly">
  <input disabled="disabled">
  <option selected="selected">
  • 有效信息
    • 速查列表
      • https://www.runoob.com/html/html-quicklist.html
    • 标签简写及全称
      • https://www.runoob.com/html/html-tag-name.html

本作品由 LinchyYu 创作，采用 CC BY-NC-SA 3.0 许可协议 进行许可。

上篇： 7 下篇： SQL教程
Comments