HTML 基础
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 基础相关的知识，希望对你有一定的参考价值。
1、html 简介
W3C（World Wide Web Consortium），W3C 组织，万维网联盟，这个组织制订网页标准。W3C 标准不是一个标准，而是一系列的标准的集合，包含三部分的标准：结构标准，表现标准和动作标准，与结构标准对应的是 HTML，与表现标准对应的是 CSS，与动作标准对应的是 javascript。
HTML 指的是超文本标记语言：Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页。HTML 文档包含了HTML 标签及文本内容。HTML文档也叫做 web 页面。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签通常是成对出现的，比如 <p> 和 </p>。标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如：<p> 我是一个段落。</p> 。
浏览器用于读取 HTML 文件，并将其作为网页显示，他并不是直接显示的 HTML 标签，但是可以使用标签来决定如何展现 HTML 页面的内容给用户。
2、HTML 标签
HTML 文档由 HTML 元素定义。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。
HTML 文档由嵌套的 HTML 元素构成：<html><head><body><p>我是一个段落。</p></body></head></html>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例</title> 6 </head> 7 <body> 8 <p style="color:red">我是一个段落。</p> 9 </body> 10 </html>
属性是 HTML 元素提供的附加信息。HTML 元素可以设置属性。属性可以在元素中添加附加信息 about an element（关于一个元素）。属性一般描述于开始标签。属性总是以名称/值对的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号。
适用于大多数 HTML 元素的属性：
①：id 定义元素的唯一 id
②：class 为 html 元素定义一个或多个类名(classname)
③：style 规定元素的行内样式（inline style 内联样式）
④：title 描述了元素的额外信息 (作为工具条使用)
(1)、基础标签
HTML5 声明：<!DOCTYPE html>。声明有助于浏览器正确显示网页，也是在告诉浏览器这是一个 HTML5 的网页。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，<!DOCTYPE> 标签没有结束标签，声明不区分大小写。
<html> 标签告知浏览器这是一个 HTML 文档。<html> 标签是 HTML 文档中最外层的元素，也是文档的根元素，但是不包含 doctype 元素，也就是声明 <!DOCTYPE html>，doctype 元素必须位于 html 元素之前。<html> 标签是所有其他 HTML 元素的容器。HTML5 中，增加了一个新属性：manifest，值为 URL 用于定义一个 URL，在这个 URL 上描述了文档的缓存信息。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts)，样式文件(CSS)，及各种 meta 信息。可以添加在头部区域的元素标签有 7 个: <title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。
<meta>标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他Web服务。注意：<meta> 通常位于 <head> 区域内，在 HTML 中 <meta> 标签没有结束标签。
元数据（Metadata）是数据的数据信息。<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但会被浏览器解析。注意： 元数据通常以 名称/值 对出现。注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，HTML5： <meta charset="UTF-8">。
<meta> 标签使用实例：
1 定义编码格式：<meta charset="UTF-8"> 2 为搜索引擎定义关键词：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 3 为网页定义描述内容：<meta name="description" content="HTML基础"> 4 定义网页作者：<meta name="author" content="Mr mo">。 5 每30秒中刷新当前页面：<meta http-equiv="refresh" content="30"> 6 常用的针对移动网页优化过 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
上面实例最后一项代码解析：
width：控制 viewport(可视区) 的大小，可以是指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale/minimum-scale：允许用户缩放到的最大/最小比例。
user-scalable：用户是否可以手动缩放。
<title> 标签定义HTML文档的标题。使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。使用 <base> 定义页面中所有链接默认的链接目标地址。
<title> 标签在所有 HTML 文档中是必需的。<title>元素：
①：定义浏览器工具栏中的标题。
②：提供页面被添加到收藏夹时的标题。
③：显示在搜索引擎结果中的页面标题。
注意：一个 HTML 文档中不能有一个以上的 <title> 元素。提示：如果你遗漏了 <title> 标签，文档作为 HTML 是无效的。<title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时，显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候，一定要简短，有说明性，采用关键词，与页面内容相关。
<style> 标签定义了 HTML 文档的样式信息。在 <style> 元素中，你可以规定在浏览器中如何呈现 HTML 文档，每个 HTML 文档能包含多个 <style> 标签。注释：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。"scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。 如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。在 HTML5 中可以不定义类型(type)属性，默认值为 "text/css"。如需链接外部样式表，就使用 <link> 标签。<style>定义文本样式。<link> 定义资源引用地址。
<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。
JavaScript 使 HTML 页面具有更强的动态和交互性。HTML 脚本标签 <script> 用于定义客户端脚本。<noscript> 标签定义了不支持脚本浏览器输出的文本，对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。
<script> 标签定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更改。注意：如果使用 "src" 属性，则 <script> 元素必须是空的。
有多种执行外部脚本的方法：
①：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）。
② ：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行。
③：如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。
在 HTML5 中 "type" 属性是可选的。src 属性规定外部脚本的 URL。"async" 属性是 HTML5 中的新属性，用于规定异步执行脚本(仅适用于外部脚本)。defer 属性用于规定当页面已完成解析后，执行脚本(仅适用于外部脚本)。charset 属性用于规定在脚本中使用的字符编码(仅适用于外部脚本)。defer值defer描述：规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。
引用外部脚本的语法：<script language="javascript" type="text/javascript" src="URL"></script> 。其中的 src="RUL" 中填写同级目录下的外部脚本文件名。
注意：
①：外部脚本文件可以是任意扩展名，浏览器会根据 <script> 标签中的 type 属性值和 language 属性值，判断使用哪种解析器来解析外部脚本文件。通常开发者会将 JavaScript 外部脚本的扩展名写为.js。
②：在外部脚本文件中，只能包含脚本语言代码，不能包含其他代码(如HTML代码等)，也不能包含 <script>标签，因为 <script>元素属于 HTML 语言中的元素。
③：在引用外部脚本文件时，<script> 标签与 </script> 标签之间不能有其他代码，包括脚本语言代码。
④：虽然在引用外部脚本文件时，<script> 标签与 </script>标签之间不能有其他代码，但 </script> 标签也不能被省略。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript> 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。<noscript> 标签用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器。提示：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。在 HTML4.01 中，<noscript> 标签只允许插入到 <body> 元素中，而在 HTML5 中，<noscript> 标签可以插入到 <head> 和 <body> 区域中。
<body> 标签定义文档的主体。<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。在 HTML 4.01 中，所有 body 元素的"呈现属性" 已废弃。在 HTML 5 中，删除了所有 body 元素的"呈现属性"，可以使用样式定义。
HTML 标题是通过 <h1> - <h6> 标签来定义的。<h1> 定义最大的标题，<h6> 定义最小的标题。要确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
HTML 段落是通过 <p> 标签来定义的，HTML 可以将文档分割为若干段落，浏览器会自动地在段落的前后添加空行。<p> 元素是块级元素，该元素会自动在其前后创建一些空白。如果希望在不产生一个新段落的情况下进行换行，就使用 <br/> 标签。我们无法确定 HTML 被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果，对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。每个段落前空 2 个字，可用 CSS 样式定义：<p style="text-indent:2em"></p>。
<br/> 标签插入一个简单的换行符。没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，<br/> 就是一个空元素，所有空元素都必须被关闭 <br/>。提示：在写地址信息或者写诗词时 <br/> 标签非常有用。注意： 请使用 <br/> 标签来输入空行，而不是分割段落。
<hr/> 标签在 HTML 页面中创建水平线，用于分隔内容。<hr/> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线，该元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。在 HTML5 中，<hr/> 定义内容中的主题变化，并显示为一条水平线，而在 HTML 4.01 中，<hr/> 标签仅仅显示为一条水平线。可使用 CSS 来为 <hr/> 元素定义样式。
HTML 注释 <!-- 这是一个注释 --> 。 注释标签用来在源文档中插入注释，注释不会在浏览器中显示。可以使用注释对你的代码进行解释，这样做有助于在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作，这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。
(2)、样式标签
<article> (H5) 标签定义一个文章区域。<article> 标签定义独立的内容，他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论。
<aside> (H5) 标签定义页面的侧边栏内容。<aside> 标签定义 <article> 标签外的内容，<aside> 的内容应该与附近的内容相关。提示：<aside> 的的内容可用作文章的侧栏。
<section> (H5) 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<header> (H5) 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，你可以定义多个 <header> 元素。注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
<footer> (H5) 标签定义 <section> 或 document 的页脚,，也就是用于定义文档或者文档的一部分区域的页脚。<footer> 元素应该包含它所包含的元素的信息，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个 <footer> 元素。提示：假如你使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address> 标签。
<hgroup> (H5) 标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
<details> (H5) 标签规定了用户可见的或者隐藏的需求的补充细节。<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的，除非设置了 open 属性。提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。属性 open 值用于规定 details 是否可见。
<summary> (H5) 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。注意：<summary> 元素应该是 <details> 元素的第一个子元素。
<dialog> (H5) 标签定义一个对话框、确认框或窗口。open 属性规定 dialog 元素是有效的，用户可以与它进行交互。
95、HTML <div> 和<span>。HTML 可以通过 <div> 和 <span>将元素组合起来。
95.1、<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。提示：<div> 元素经常与 CSS 一起使用，用来布局网页。注释：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，你可以通过使用 CSS 改变这种情况。在 HTML 4.01 中，align 属性 已废弃。HTML5 中不支持 align 属性。HTML5 中不支持 align 属性。
95.2、<span> 标签用于对文档中的行内元素进行组合。<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。提示：被 <span> 元素包含的文本，你可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
96、HTML 区块元素。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table>。
97、HTML 内联元素。内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>。
98、HTML <div> 元素。HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
99、HTML <span> 与元素。HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
100、HTML 分组标签：<div> 标签定义了文档的区域，块级 (block-level)。<span> 标签用来组合文档中的行内元素， 内联元素(inline)。
(3)、格式标签
<wbr> (H5) (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。提示：如果单词太长，或者担心浏览器会在错误的位置换行，那么就可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机），他的作用就是告诉浏览器在这个标记处可以断行，但只是建议而不是必定会在此处断行，因为要根据整行文字长度而定，因此只要在连续的文本中间适当的插入若干 <wbr> 标签就能解决断行问题。
<meter> (H5) 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。注意： <meter> 不能作为一个进度条来使用， 进度条请使用 <progress> 标签。
<progress> (H5) 标签定义运行中的任务进度（进程）。提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。
<time> (H5) 标签定义公历的时间(24 小时制)或日期，时间和时区偏移是可选的，在该元素的内容中未指定日期或时间时，使用该属性。该元素能够以浏览器可读的方式对日期和时间进行编码，比如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。datetim e属性规定日期/时间。另一种方式，则是由元素的内容给定日期/时间，该属性在所有浏览器中不会渲染任何特殊的效果。
<mark> (H5) 标签定义带有记号的文本，请在需要突出显示文本时使用 <mark> 标签。
HTML 使用 <b> 与 <i> 标签对输出的文本进行格式定义， 如：b粗体 或 i斜体。通常标签 <strong> 替换加粗标签 <b> 来使用，<em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体，不过，未来浏览器可能会支持更好的渲染效果。
<b> 标签定义粗体的文本。注意：根据 HTML5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML5 规范声明：标题应该用 <h1> - <h6> 标签表示，被强调的文本应该用 <em> 标签表示，重要的文本应该用 <strong> 标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。提示：也可以使用 CSS 的 "font-weight" 属性设置粗体文本。
<i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。<i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用时，就使用 <i> 元素。其他语义的元素如下：<em> 元素定义被强调的文本，<strong> 元素定义重要的文本，<mark> 元素定义被标记的/高亮显示的文本，<cite> 元素定义作品的标题，<dfn> 元素定义一个定义项目。在 HTML 4.01 中，<i> 标签呈现斜体的文本，然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本。
<strong> 标签是一个短语标签，用来定义计算机程序的样本重要的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS，这样可能会取得更丰富的效果。所有短语标签：<em> 呈现为被强调的文本，<strong> 定义重要的文本，<dfn> 定义一个定义项目，<code> 定义计算机代码文本，<samp> 定义样本文本。<var> 定义变量，可以将此标签与 <pre> 及 <code> 标签配合使用。在 HTML 4.01 中，<strong> 标签定义加粗的被强调的文本，而在 HTML5 中，<strong> 标签定义重要的文本。
<em> 标签是一个短语标签，用来呈现为被强调的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果。
<dfn> 标签是一个短语标签，用来定义一个定义项目。<code> 标签是一个短语标签，用来定义计算机代码文本。<samp> 标签是一个短语标签，用来定义计算机程序的样本文本。<var> 标签是一个短语标签，用来定义变量。提示：我们并不反对使用这些标签，但是如果你只是为了达到某种视觉效果而使用这些标签的话，我们建议你使用 CSS ，这样可能会取得更丰富的效果。
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。注意：人名不属于作品的标题。在 HTML 4.01 中，<cite> 标签定义一个引用，而在 HTML5 中，<cite> 标签定义作品的标题。
<big> 标签定义大号文本，HTML5 不再支持，可以使用 CSS 代替。
<small> 标签定义小号文本，主要用于定义小型文本和旁注。
<pre> 标签定义预格式文本，也就是在 HTML 代码中的文本编写什么样，就会在 HTML 页面显示什么样，对空行和空格可进行控制，也就是被包围在 <pre> 标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。
<bdo> 标签定义文本方向。bdo 指的是 bidi 覆盖(Bi-Directional Override)，用来覆盖默认的文本方向。<p><bdo dir="rtl">我会反着显示。</bdo></p> dir 为 <bdo>标签的属性，rtl 是值，定义反向显示，该属性另一个值是 ltr，是默认值，文本方向是正常显示的。
<bdi> (H5) 标签允许设置一段文本，使其脱离其父元素的文本方向设置。bdi 指的是 bidi 隔离（Bi-directional Isolation）。在发布用户评论或其他你无法完全控制的内容时，该标签很有用。
<q> 标签定义短的引用。浏览器经常会在这种引用的周围插入引号，该元素有一个属性 cite，值为 URL 用于规定引用的源 URL。提示：请使用 <blockquote> 来标记摘自另一个源的块引用。
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。该元素也有一个属性 cite，值为 URL 用于规定引用的来源。提示：如果标记是不需要段落分隔的短引用，请使用 <q>。在 HTML 4.01 中，<blockquote> 标签定义一段长引用，而在 HTML5 中，<blockquote> 标签定义摘自另一个源的块引用。
<del> 标签定义被删除文字。<ins> 标签定义被插入文本。提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正，浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。<del> 和 <ins> 拥有相同的两个属性：cite 和 datetime，cite 的值都为 URL ，<del> 的 cite 属性规定一个文档的 URL，该文档解释了文本被删除的原因，<ins> 的 cite 属性规定一个文档的 URL，该文档解释了文本被插入的原因。datetime 的值表示为：YYYY-MM-DDThh:mm:ssTZD，<del> 规定文本被删除/被插入的日期和时间。
<s> 标签对那些不正确、不准确或者没有用的文本进行标识。<s> 标签不应该用来定义替换的或者删除的文本，如果要定义替换的或者删除的文本，请使用 <del> 和 <ins> 标签。在 HTML 4.01 中，<s> 标签已被废弃，并且被用来给文本加删除线，而 HTML5 重新定义了 <s> 标签，现在是被用来定义那些不再正确的文本。
<u> 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。在 HTML 中，<u> 元素已废弃，原被用来定义下划线，而在 HTML5 中重新定义了 <u> 元素。提示：请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。注意：HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。
<sup> 标签定义上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。
<sub> 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。
<abbr> 标签定义缩写。当把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。<abbr> 标签用来表示一个缩写词或者首字母缩略词。通过对缩写词语进行标记，就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
<address> 标签定义文档作者或拥有者的联系信息。如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息，如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。<address> 元素的文本通常呈现为斜体，大多数浏览器会在该元素的前后添加换行，或可用 <br/> 换行显示。不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。<address> 元素通常被包含在 <footer> 元素的其他信息中。
(4)、链接标签
<a> 标签定义超链接，用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性，它指定链接的目标。如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。通常在当前浏览器窗口中显示被链接页面，除非规定了其他 Target 属性。可以使用 CSS 来改变链接的样式。
HTML 使用超级链接与网络上的另一个文档相连，几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当你把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在 <a> 标签中使用 href 属性来描述链接的地址，默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带上下划线；点击链接时，链接显示为红色并带上下划线。<a href="url">跳转</a> "链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接。使用 Target 属性，可以定义被链接的文档在何处显示。
<a> 标签的 target 属性。target="_blank" 定义在新窗口显示目标网页。target="_self" 定义在当前窗体打开目标网页，此为默认值，这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。target="_top" 定义在当前窗体打开链接，并替换当前的整个窗体(框架页)。假如你的页面被固定在框架之内，可用 _top 值跳出框架。用 top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。框架网页中在上部窗口中显示目标网页。target="_parent" 这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集，如果这个引用是在窗口或者在顶级框架中，那么它与目标 self 等效，框架网页中当前整个窗口位置显示目标网页。
去掉超链接的下划线，并定义颜色（默认定义为黑色），应用：a{color:#000;text-decoration:none}。定义鼠标移动到超链接上的颜色，a:hover{color:red}。
图像超链接：<a href="http://www.baidu.com"><img src="images/1.jpg"></a>。
本文本链接：<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>。相对路径，如htef="/abc/",代表本站内超文本。
HTML 链接的 id 属性。也可用class，id 是代表唯一的，而 class 是一个集，也就是所有 class 名称一样的都可被定义。id 属性可用于创建在一个 HTML 文档书签标记。用 id 命名那么这个书签就是唯一的。在 HTML 文档中插入ID：<a id="tips">超链接</a>。在 HTML 文档中创建一个链接到 "超链接(id="tips"）"：<a href="#tips">跳转</a>。或者，从另一个页面创建一个链接到 "超链接(id="tips"）部分"：<a href="index.html#tips">点我跳转</a>。
电子邮件链接：<a href="mailto:[email protected]">电子邮件</a>。当前系统需要安装 EMAIL 客户端程序才能使用，可用 火狐/IE 测试，会跳转链接到一个邮件。
<base> 标签定义页面中所有链接的默认地址或默认目标。该标签作为 HTML 文档中所有的链接标签的默认链接。在 HTML 中，<base> 标签没有结束标签，且为为元信息标签。在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部，而且 <base> 标签需要排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。<base target="_blank"> 可定义页面中所有的超链接都从新窗口打开，如其中有不需要在新窗口打开的，可在 <a> 标签内自行定义：<a href="url" target="_self">链接</a>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例</title> 6 <base href="http://www.demo.com/images/" target="_blank"> 7 </head> 8 <body> 9 <img src="images.gif"><br/> 10 <a href="http://www.demo.com">跳转</a> 11 </body> 12 </html>
上面代码中，图像是默认链接的 demo.com 中一张名为 images 的图片，点击超链接跳转到该网站，并且在新窗口打开目标页面。
<nav> (H5) 标签定义导航链接的部分，并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域，在不同设备上(手机或者PC)可以制定导航链接是否显示，以适应不同屏幕的需求。
(5)、图像标签
HTML 图像是通过<img> 标签来定义的。图像的名称和尺寸是以属性的形式提供的，添加动态图片和添加静态图片格式是一样的，只是图像文件格式可能会有所不同。注意：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img> 标签，可以给图像添加到另一个文档的链接。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。在 HTML 中，<img> 标签没有结束标签。
<img src="images/head.gif" width="90" height="90" alt="替代文本" title="图片描述">
<img> 标签有两个必需的属性：src 和 alt。 要在页面上显示图像，就需要使用源属性(src)，src 指 "source（来源）"，源属性的值是图像的 URL 地址，URL 指存储图像的位置。如果从另一个文件夹中添加图像，需要选择图片的路径：<img src="D/images/logo.jpg">。如果从另一个网站中添加图像，需要选择网站图片的路径，假如名为 "head.gif" 的图像位于 www.demo.com 的 images 目录中，那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性值为 text 用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
注意：title 属性用于把鼠标移动到图片上时显示文字信息，只有在重要的图片或者网站标志 LOGO 上加此属性。width 和 height 属性用于设置图像的高度与宽度。属性值默认单位为像素:px。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。注意：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件，加载图片是需要时间的，在加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
ismap 属性是一个布尔属性，可直接使用，用于将图像规定为服务器端图像映射，图像映射指的是带有可点击区域的图像。usemap 属性值为 #mapname 用于将图像定义为客户器端图像映射。HTML5 中增加了一个 新属性 crossorigin 值为 anonymous、use-credentials 用于设置图像的跨域属性。
在文字中插入图像，需要使用 CSS 定义，图像需要与文字底部对齐则定义为：.img{vertical-align:bottom}，如果这里不设置的话图像会与文字底部会有一点距离。图像需要与文字中间对齐则设置为：.img{vertical-align:middle}。图像需要与文字顶部对齐则设置为-：.img{vertical-align:top}。
vertical-align 这个属性的默认值是 baseline（基线）,插入的 img 元素会放置在父元素的基线上，由于图片撑起了高度，所以文字下移。其实并不是文字下移，而是图像的高度与文字不同，就像鹤立鸡群。vertical-align 是“垂直的”+“对齐”的意思，用于设置元素的垂直排列的，多用在表格中，用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐，所有浏览器都支持 vertical-align 属性。
它的值比较多：
baseline：基线，默认值。元素放置在父元素的基线上。
sub：垂直对齐文本的下标。
sup：垂直对齐文本的上标。
top：把元素的顶端与行中最高元素的顶端对齐。
text-top：把元素的顶端与父元素字体的顶端对齐。
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
text-bottom：将支持valign特性的对象的文本与对象底端对齐。
length：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。
percentage(%)：用百分比指定由基线算起的偏移量。可以为负值，基线对于百分数来说就是 0%。
vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值，这会使元素降低而不是升高。在表格单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。valign 用来定义表格的对齐方式，valign 代表行的垂直对齐方式，(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))。valign 可以通俗的理解为上中下，而和 align 的区别是： align 为左中右，用于设置文本的对齐方式，text-align:center 居中，text-align:left 居左，text-align:right 居右。
定义图像在文字中的位置也可以将底外边距设置为负值，强行设置，假如图像的高度为 90px，则可定义为：.img1{margin-bottom:-45px;}，也就是图像距离底部缩进45个像素。像素不同可以定义其处在不同的位置，但是这样设置会增加本行的高度。不建议这样定义，但可用在特殊地方。
<map> 标签定义图像地图。<area> 标签定义图像地图中的可点击区域。可用于创建图像映射，使其带有可供点击区域的图像地图，其中的每个区域都是一个超级链接。
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器)，所以应同时向 <map> 添加 id 和 name 属性。注意: 在 HTML5 中, 如果 id 属性在 <map> 标签中指定, 则必须同样指定 name 属性。name 属性值为 mapname 为 image-map 规定的名称，必需的属性。
<area> 标签定义图像映射内部的区域。注意：<area> 元素永远嵌套在 <map> 元素内部。提示： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。在 HTML 中，<area> 标签没有结束标签。
<area> 标签属性，href 属性规定区域的目标 URL。alt 属性规定区域的替代文本，如果使用 href 属性，则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为(default（默认）、circle、rect、poly) 规定区域的形状。target 属性规定在何处打开目标 URL。media 属性值为 media query 规定目标 URL 是为何种媒介/设备优化的，默认为：all。在 HTML5 中增加了一个新属性 rel 值为 (alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag) 以上是关于HTML 基础的主要内容，如果未能解决你的问题，请参考以下文章