HTML 基础_html/css_WEB-ITnose

1、HTML 简介

　　W3C（World Wide Web Consortium），W3C 组织，万维网联盟，这个组织制订网页标准。W3C 标准不是一个标准，而是一系列的标准的集合，包含三部分的标准：结构标准，表现标准和动作标准，与结构标准对应的是 HTML，与表现标准对应的是 CSS，与动作标准对应的是 JavaScript。

　　HTML 是一种在 Web 上使用的通用标记语言，允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 的关键是标签，其作用是呈现内容。浏览器用于读取 HTML 文件，并将其作为网页显示，他并不是直接显示的 HTML 标签，但是可以使用标签来决定如何展现 HTML 页面的内容给用户。

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

　　HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签通常是成对出现的，比如

和

，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

　　HTML标签 和 HTML元素 通常都是描述同样的意思，但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如：

我是一个段落。

。

2、HTML 标签

　　HTML 文档由 HTML 元素定义。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容，空元素在开始标签中进行关闭，以开始标签的结束而结束，大多数 HTML 元素可拥有属性。

　　HTML 文档由嵌套的 HTML 元素构成：

我是一个段落。

 1  2  3  4      5      6  7  8 
我是一个段落。
 9 10 

　　HTML 元素可以设置属性，属性是 HTML 元素提供的附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号。

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

　　　　①：id　　定义元素的唯一 id
　　　　②：class　　为 html 元素定义一个或多个类名(classname)
　　　　③：style　　规定元素的行内样式（inline style 内联样式）
　　　　④：title　　描述了元素的额外信息 (作为工具条使用)

　　(1)、基础标签

　　HTML5 声明：。声明有助于浏览器正确显示网页，也是在告诉浏览器这是一个 HTML5 的网页。 声明位于文档中的最前面的位置，处于 标签之前， 标签没有结束标签，声明不区分大小写。

　　 标签告知浏览器这是一个 HTML 文档。 标签是 HTML 文档中最外层的元素，也是文档的根元素，但是不包含 doctype 元素，也就是声明 ，doctype 元素必须位于 html 元素之前， 标签是所有其他 HTML 元素的容器。HTML5 中增加了一个新属性：manifest，值为 URL 用于定义一个 URL，在这个 URL 上描述了文档的缓存信息。

　　 与 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体，文档的头部由 标签定义，而主体由 标签定义。

　　 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts)，样式文件(CSS)，及各种 meta 信息。可以添加在头部区域的元素标签有 7 个:

　　标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他Web服务。注意： 通常位于 区域内，在 HTML 中 标签没有结束标签。

　　元数据（Metadata）是数据的数据信息， 标签提供了 HTML 文档的元数据。注意： 元数据通常以 名称/值 对出现。注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：HTML 4.01：，HTML5： 。

　　 标签使用实例：

1 定义编码格式：2 为搜索引擎定义关键词：3 为网页定义描述内容：4 定义网页作者：5 每30秒中刷新当前页面：6 常用的针对移动网页优化过 viewport 的 meta：

　　上面实例最后一项代码解析：

　　width：控制 viewport(可视区) 的大小，可以是指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度，单位为缩放为 100% 时的 CSS 的像素。

　　height：和 width 相对应，指定高度。

　　initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

　　maximum-scale/minimum-scale：允许用户缩放到的最大/最小比例。

　　user-scalable：用户是否可以手动缩放。

　　

　　

　　　　①：定义浏览器工具栏中的标题。

　　　　②：提供页面被添加到收藏夹时的标题。

　　　　③：显示在搜索引擎结果中的页面标题。

　　注意：一个 HTML 文档中不能有一个以上的

　　在 注意：如果没有使用 "scoped" 属性，则每一个 "scoped" 属性是 HTML5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。 如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。在 HTML5 中可以不定义类型（type）属性，默认值为 "text/css"。如需链接外部样式表，就使用 标签。

　　 标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表：。注意： link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。

　　JavaScript 使 HTML 页面具有更强的动态和交互性。HTML 脚本标签

　　JavaScript 最常用于图片操作、表单验证以及内容动态更改。注意：如果使用 "src" 属性，则

　　有多种执行外部脚本的方法：

　　　　①：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）。

　　　　② ：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行。

　　　　③：如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。

　　在 HTML5 中 "type" 属性是可选的。src 属性规定外部脚本的 URL。defer 属性用于规定当页面已完成解析后，执行脚本，仅适用于外部脚本。charset 属性用于规定在脚本中使用的字符编码，仅适用于外部脚本。"async" 属性是 HTML5 中的新属性，用于规定异步执行脚本，仅适用于外部脚本。

　　引用外部脚本的语法： 其中 src="RUL" 中填写同级目录下的外部脚本文件名。

　　注意：

　　　　①：外部脚本文件可以是任意扩展名，通常开发者会将 JavaScript 外部脚本的扩展名写为 script.js。

　　　　②：在外部脚本文件中，只能包含脚本语言代码，不能包含其他代码，如HTML代码等，也不能包含

　　　　③：在引用外部脚本文件时， 标签之间不能有其他代码，包括脚本语言代码。

　　　　④：虽然在引用外部脚本文件时，标签之间不能有其他代码，但 标签也不能被省略。

　　

　　 标签定义文档的主体。 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。在 HTML 4.01 中，所有 body 元素的"呈现属性" 已废弃。在 HTML 5 中，删除了所有 body 元素的"呈现属性"，可以使用样式定义。

　　HTML 标题是通过

-

标签来定义的。

定义最大的标题，

定义最小的标题。要确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

定义重要等级最高的标题。

定义重要等级最低的标题。

　　HTML 段落是通过

标签来定义的，HTML 可以将文档分割为若干段落，浏览器会自动地在段落的前后添加空行。

元素是块级元素，该元素会自动在其前后创建一些空白。如果希望在不产生一个新段落的情况下进行换行，就使用
标签。我们无法确定 HTML 被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果，对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。每个段落前空 2 个字，可用 CSS 样式定义：

　　
标签插入一个简单的换行符。没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，
就是一个空元素，所有空元素都必须被关闭
。在写地址信息或者写诗词时
标签非常有用。注意： 请使用
标签来输入空行，而不是分割段落。

　　

---

标签在 HTML 页面中创建水平线，用于分隔内容。

---

标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线，该元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。在 HTML5 中，

---

定义内容中的主题变化，并显示为一条水平线，而在 HTML 4.01 中，

---

标签仅仅显示为一条水平线。可使用 CSS 来为

---

元素定义样式。

　　HTML 注释 。 注释标签用来在源文档中插入注释，注释不会在浏览器中显示。可以使用注释对你的代码进行解释，这样做有助于在以后的时间对代码的编辑，特别是代码量很大的情况下很有用，也可以在注释内容存储针对程序所定制的信息，在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作，这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。

　　(2)、样式标签

　　

(H5) 标签定义一个文章区域。

标签定义独立的内容，他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

的潜在来源：论坛帖子、博客文章、新闻故事、评论。

　　

(H5) 标签定义页面的侧边栏内容。

标签定义

标签外的内容，

的内容应该与附近的内容相关。

的的内容可用作文章的侧栏。

　　

(H5) 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

　　

(H5) 标签定义文档或者文档的一部分区域的页眉。

元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，你可以定义多个

元素。注意：

标签不能被放在

、

或者另一个

元素内部。

　　

(H5) 标签定义

或 document 的页脚，也就是用于定义文档或者文档的一部分区域的页脚。

元素应该包含它所包含的元素的信息，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个

元素。假如你使用

元素来插入联系信息，应该在

元素内使用

标签。

　　

(H5) 标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，

元素被用来对一系列

-

元素进行分组。

　　

(H5) 标签规定了用户可见的或者隐藏的需求的补充细节。

标签用来供用户开启关闭的交互式控件，任何形式的内容都能被放在

标签里边。

元素的内容对用户是不可见的，除非设置了 open 属性。该标签与

标签配合使用可以为 details 定义标题，标题是可见的，用户点击标题时，会显示出 details。属性 open 用于规定 details 是否可见。

　　

(H5) 标签为

元素定义一个可见的标题，当用户点击标题时会显示出详细信息。注意：

元素应该是

元素的第一个子元素。

　　

(H5) 标签定义一个对话框、确认框或窗口。open 属性规定 dialog 元素是有效的，用户可以与它进行交互。

　　

　　

标签定义 HTML 文档中的一个分隔区块或者一个区域部分，该元素没有特定的含义，他是可用于组合其他 HTML 元素的容器，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

元素是块级元素，所以浏览器会默认在他前后添加一个换行符，如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性，常被用来布局网页。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法，该元素的作用就是用于显示表格化的数据。

　　 标签用于对文档中的行内元素进行组合，该标签没有固定的格式表现，也没有特定的含义，当对它应用样式时，它才会产生视觉上的变化，如果不对 应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式，当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。被 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

　　(3)、格式标签

　　 (H5) (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么就可以使用 元素来添加 Word Break Opportunity（单词换行时机），他的作用就是告诉浏览器在这个标记处可以断行，但只是建议而不是必定会在此处断行，因为要根据整行文字长度而定，因此只要在连续的文本中间适当的插入若干 标签就能解决断行问题。

　　 (H5) 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。注意： 不能作为一个进度条来使用， 进度条请使用 标签。

　　 (H5) 标签定义运行中的任务进度（进程）。请将 标签与 JavaScript 一起使用来显示任务的进度。注意： 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 标签代替。

　　 (H5) 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，在该元素的内容中未指定日期或时间时，使用该属性。该元素能够以浏览器可读的方式对日期和时间进行编码，比如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。datetime 属性规定日期/时间。另一种方式，则是由元素的内容给定日期/时间，该属性在所有浏览器中不会渲染任何特殊的效果。

　　 (H5) 标签定义带有记号的文本，请在需要突出显示文本时使用 标签。

　　HTML 使用 与 标签对输出的文本进行格式定义， 如：b粗体 或 i斜体。通常标签 替换加粗标签 来使用， 替换 标签使用。然而，这些标签的含义是不同的： 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体，不过，未来浏览器可能会支持更好的渲染效果。

　　 标签定义粗体的文本。注意：根据 HTML5 的规范， 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML5 规范声明：标题应该用

-

标签表示，被强调的文本应该用 标签表示，重要的文本应该用 标签表示，被标记的或者高亮显示的文本应该用 标签表示。也可以使用 CSS 的 "font-weight" 属性设置粗体文本。

　　 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用时，就使用 元素。其他语义的元素如下： 元素定义被强调的文本， 元素定义重要的文本， 元素定义被标记的/高亮显示的文本， 元素定义作品的标题， 元素定义一个定义项目。在 HTML 4.01 中， 标签呈现斜体的文本，然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 元素中的文本。

　　 标签是一个短语标签，用来定义计算机程序的样本重要的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS，这样可能会取得更丰富的效果。所有短语标签： 呈现为被强调的文本， 定义重要的文本， 定义一个定义项目， 定义计算机代码文本， 定义样本文本。 定义变量，可以将此标签与

 及  标签配合使用。在 HTML 4.01 中， 标签定义加粗的被强调的文本，而在 HTML5 中， 标签定义重要的文本。

　　 标签是一个短语标签，用来呈现为被强调的文本。注意：并不反对使用这个标签，但是如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果。

　　 标签是一个短语标签，用来定义一个定义项目。 标签是一个短语标签，用来定义计算机代码文本。 标签是一个短语标签，用来定义计算机程序的样本文本。 标签是一个短语标签，用来定义变量。提示：我们并不反对使用这些标签，但是如果你只是为了达到某种视觉效果而使用这些标签的话，我们建议你使用 CSS ，这样可能会取得更丰富的效果。

　　 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。注意：人名不属于作品的标题。在 HTML 4.01 中， 标签定义一个引用，而在 HTML5 中， 标签定义作品的标题。

　　 标签定义大号文本，HTML5 不再支持，可以使用 CSS 代替。

　　 标签定义小号文本，主要用于定义小型文本和旁注。

　　

 标签定义预格式文本，

也就是在 HTML 代码中的文本编写什么样，就会在 HTML 页面显示什么样，对空行和空格可进行控制，也就是被包围在

 标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
 标签的一个常见应用就是用来表示计算机的源代码。

　　 标签定义文本方向。bdo 指的是 bidi 覆盖(Bi-Directional Override)，用来覆盖默认的文本方向。

我会反着显示。

dir 为 标签的属性，rtl 是值，定义反向显示，该属性另一个值是 ltr，是默认值，文本方向是正常显示的。

　　 (H5) 标签允许设置一段文本，使其脱离其父元素的文本方向设置。bdi 指的是 bidi 隔离（Bi-directional Isolation）。在发布用户评论或其他你无法完全控制的内容时，该标签很有用。

　　 标签定义短的引用。浏览器经常会在这种引用的周围插入引号，该元素有一个属性 cite，值为 URL 用于规定引用的源 URL。请使用

来标记摘自另一个源的块引用。

　　

标签定义摘自另一个源的块引用。浏览器通常会对

元素进行缩进。该元素也有一个属性 cite，值为 URL 用于规定引用的来源。如果标记是不需要段落分隔的短引用，请使用 。在 HTML 4.01 中，

标签定义一段长引用，而在 HTML5 中，

标签定义摘自另一个源的块引用。

　　 标签定义被删除文字。 和

　　 标签对那些不正确、不准确或者没有用的文本进行标识。 标签不应该用来定义替换的或者删除的文本，如果要定义替换的或者删除的文本，请使用 和

　　 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。在 HTML 中， 元素已废弃，原被用来定义下划线，而在 HTML5 中重新定义了 元素。提示：请尽量避免使用 为文本加下划线，用户会把它混淆为一个超链接。注意：HTML5 规范建议开发者尽量使用其他元素替代 元素。

　　 ^{标签定义上标。}上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。

　　 _{标签定义下标文本。}下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。

　　 标签定义缩写。当把鼠标移至带有 标签的缩写词/首字母缩略词上时， 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。 标签用来表示一个缩写词或者首字母缩略词。通过对缩写词语进行标记，就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

　　

标签定义文档作者或拥有者的联系信息。

如果

元素位于 元素内部，则它表示该文档作者/所有者的联系信息，如果

元素位于

元素内部，则它表示该文章作者/所有者的联系信息。

元素的文本通常呈现为斜体，大多数浏览器会在该元素的前后添加换行，或可用
换行显示。不应该使用

标签来描述邮政地址，除非这些信息是联系信息的组成部分。

元素通常被包含在

元素的其他信息中。

　　(4)、链接标签

　　 标签定义超链接，用于从一个页面链接到另一个页面。 元素最重要的属性是 href 属性，它指定链接的目标。如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。通常在当前浏览器窗口中显示被链接页面，除非规定了其他 Target 属性。可以使用 CSS 来改变链接的样式。

　　HTML 使用超级链接与网络上的另一个文档相连，几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当你把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在 标签中使用 href 属性来描述链接的地址，默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带上下划线；点击链接时，链接显示为红色并带上下划线。跳转 "链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接，使用 Target 属性，可以定义被链接的文档在何处显示。

　　 标签的 target 属性。target="_blank" 定义在新窗口显示目标网页。target="_self" 定义在当前窗体打开目标网页，此为默认值，这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。target="_top" 定义在当前窗体打开链接，并替换当前的整个窗体(框架页)。假如你的页面被固定在框架之内，可用 _top 值跳出框架。用 top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。框架网页中在上部窗口中显示目标网页。target="_parent" 这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集，如果这个引用是在窗口或者在*框架中，那么它与目标 self 等效，框架网页中当前整个窗口位置显示目标网页。

　　去掉超链接的下划线，并定义颜色（默认定义为黑色）：a{color:#000;text-decoration:none}　　定义鼠标移动到超链接上的颜色，a:hover{color:red}

　　图像超链接：

　　本文本链接：

本文本 指向本网站中的一个页面的链接。

。相对路径，如 htef="/abc/"，代表本站内超文本。

　　HTML 链接的 id 属性。也可用class，id 是代表唯一的，而 class 是一个集，也就是所有 class 名称一样的都可被定义。id 属性可用于创建在一个 HTML 文档书签标记。用 id 命名那么这个书签就是唯一的。在 HTML 文档中插入ID：超链接。在 HTML 文档中创建一个链接到 "超链接(id="tips"）"：跳转。或者，从另一个页面创建一个链接到 "超链接(id="tips"）部分"：点我跳转。

　　电子邮件链接：电子邮件 当前系统需要安装 EMAIL 客户端程序才能使用，可用 火狐/IE 测试，会跳转链接到一个邮件。

　　 标签定义页面中所有链接的默认地址或默认目标。该标签作为 HTML 文档中所有的链接标签的默认链接。在 HTML 中， 标签没有结束标签，且为为元信息标签。在一个文档中，最多能使用一个 元素。 标签必须位于

元素内部，而且 标签需要排在 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 元素中的信息了。如果使用了 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。 可定义页面中所有的超链接都从新窗口打开，如其中有不需要在新窗口打开的，可在 标签内自行定义：链接。

 1  2  3  4      5      6      7  8  9 
10 跳转11 12 

　　上面代码中，图像是默认链接的 demo.com 中一张名为 images 的图片，点击超链接跳转到该网站，并且在新窗口打开目标页面。

　　

(H5) 标签定义导航链接的部分，并不是所有的 HTML 文档都要使用到

元素。

元素只是作为标注一个导航链接的区域，在不同设备上(手机或者PC)可以制定导航链接是否显示，以适应不同屏幕的需求。

　　(5)、图像标签

　　HTML 图像是通过 标签来定义的。图像的名称和尺寸是以属性的形式提供的，添加动态图片和添加静态图片格式是一样的，只是图像文件格式可能会有所不同。注意：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。通过在 标签中嵌套 标签，可以给图像添加到另一个文档的链接，浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。在 HTML 中， 标签没有结束标签。

　　 标签有两个必需的属性：src 和 alt。 要在页面上显示图像，就需要使用源属性(src)，src 指 "source（来源）"，源属性的值是图像的 URL 地址，URL 指存储图像的位置。如果从另一个文件夹中添加图像，需要选择图片的路径：。如果从另一个网站中添加图像，需要选择网站图片的路径，假如名为 "head.gif" 的图像位于 www.demo.com 的 images 目录中，那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

　　注意：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个像素。像素不同可以定义其处在不同的位置，但是这样设置会增加本行的高度。不建议这样定义，但可用在特殊地方。

　　

　　

　　 标签定义图像映射内部的区域。注意： 元素永远嵌套在

　　 标签属性，href 属性规定区域的目标 URL。alt 属性规定区域的替代文本，如果使用 href 属性，则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为（default(默认)、circle、rect、poly）规定区域的形状。target 属性规定在何处打开目标 URL。media 属性规定目标 URL 是为何种媒介/设备优化的，默认为：all。在 HTML5 中增加了一个新属性 rel ，他的值为（alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag)）规定当前文档与目标 URL 之间的关系。

　　图像映像的语法：

1 2 

　　 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等：rect : 矩形，coords 对应的坐标为左上角和右下角。circle : 圆，coords 对应的是圆心(x，y)，和半径 r。poly：多边形，coords 对应的是每个点的坐标。

　　下面列出了每种形状的适当值：

　　圆形：shape="circle"，coords="x,y,r" 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

　　矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一对坐标是矩形的左上角的顶点坐标，另一对坐标是对角的顶点坐标(右下角)，("0,0" 是图像左上角的坐标)，请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

　　多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标；定义多边形则需要更多数量的顶点。

　　用 HTML 语言创建图像映射时，我们需要确定图像区域中的点坐标，用以下几种方法可以实现：

　　　　①：可以利用系统自带的画图工具确定坐标。

　　　　②：可以用 PS 确定坐标。按 Ctrl+r 快捷键，右键选定显示距离为像素，默认是厘米。

　　　　③：采用逆向思维把图像转换成图像映射，可以利用以下代码实现：

1 
2     3 

　　之所以图片代码前引用一段 url 是为了鼠标停留在图片上时，可以在浏览器窗口的状态栏中看到返回值出现的点坐标，小手指点在哪里，对应的就是像素点的纵横坐标值，记下这个值，把它应用到创建图像映射的语法中，就能实现区域取值了。注意：某些浏览器不支持此功能不能查看坐标返回值，比如 360浏览器，可以使用 IE 浏览器记录。

　　 (H5) 标签定义图形，比如图表和其他图像，标签只是图形容器，你必须使用脚本来绘制图形。 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。注意： 标签只是图形容器，必须使用脚本来绘制图形。 元素中的任何文本将会被显示在不支持 的浏览器中。width 和 height 属性规定画布的宽度和高度。

　　

(H5) 标签规定独立的流内容（图像、图表、照片、代码等等）。

元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响。提示：

元素被用来为

元素定义标题。

　　

(H5) 标签为

元素定义标题。

元素应该被置于

元素的第一个或最后一个子元素的位置。

　　 (H5) 标签可以设置多张图片，主要被用来处理响应式图片。 元素类似于

1 2     3     4     5 

　　注意：火狐浏览器支持 picture 标签。360 和 IE 不支持 picture 标签，需要搭载 JS 环境让 IE 浏览器识别 picture 标签。

　　(6)、多媒体标签

　　

　　

　　

　　

　　 (H5) 标签为媒介元素（比如

　　 (H5) 标签为媒体元素（比如

　　(7)、表单标签

　　HTML 表单用于搜集不同类型的用户输入，表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，如：文本域、下拉列表、单选框、复选框等等。

　　表单使用表单标签

来设置，多数情况下被用到的表单标签是输入标签。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下：

　　　　①：文本字段通过 标签来定义，当用户要在表单中键入字母、数字等内容时，就会用到文本字段输入。

　　　　②：密码字段通过 来定义。注意：密码字段字符不会明文显示，而是以星号或圆点替代。

　　　　③：单选框通过 来定义。当用户从若干给定的的选择中选取其一时，就会用到单选框。

　　　　④：复选框通过 来定义。用户需要从若干给定的选择中选取一个或若干选项。

　　　　⑤：提交按钮通过 来定义。

　　　　⑥：下拉列表框通过

标签下的 标签来定义。BMW（宝马） 标签则是定义下拉列表框中的内容。

　　其他：①：预选下拉列表框和下拉列表框格式是一样的，只需在作为预选值的标签中添加 selected(选择)：Audi（奥迪）。

　　②：多行文本输入使用标签 定义，其中 rows 为行，cols 为列，可用于设定文本框的大小，也可以不设定，这不影响文本框输入文本的多少，只是会影响文本框显示的大小。更好的方法是通过 CSS 来定义文本域的宽和高。

　　

标签用于创建供用户输入的 HTML 表单。

元素包含一个或多个如下的表单元素：<button> <select><option></option> <optgroup></optgroup></select></button>

。注意：表单本身并不可见。HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。该标签的属性 action 是必需的，规定当提交表单时，向何处发送表单数据，其值为服务器地址，可能的值：绝对 RUL，指向其他站点，如：action="www.demo.com/index.html"，相对 URL，指向站点内的文件，如：action="index.html"。

　　

属性两个最重要的属性：action 和 method， action 用于规定当提交表单时向何处发送表单数据。而 method 规定用于发送表单数据的 HTTP 方法，默认使用 GET 方式。accept-charset 属性规定服务器可处理的表单数据字符集。name 属性规定表单的名称，可用于在 JS 中引用元素，或者在表单提交之后引用表单数据。enctype 属性规定在向服务器发送表单数据之前如何对其进行编码，适用于 method="post" 的情况。target 属性可用于规定在何处打开 action URL。autocomplete 属性值为（on、off）用于规定是否启用表单的自动完成功能。novalidate 属性：如果使用该属性，则提交表单时不进行验证。

　　 标签定义一个输入控件，规定了用户可以在其中输入数据的输入字段。 元素在

元素中使用，用来声明允许用户输入数据的 input 控件，输入字段可通过多种方式改变，取决于 type 属性。注意： 元素是空的，它只包含标签属性。可以使用 元素来定义 元素的标注。可以使用 CSS 来定义 元素的对齐方式。在 HTML5 中, 添加了几个新属性，并且添加了对应的值。在 HTML 中， 标签没有结束标签。

　　 元素属性：type 属性规定要显示的 元素的类型，他的类型有：text（默认，单行的文本字段，宽度为20个字符）、button(按钮)、radio(单选按钮)、checkbox(复选框)、password(密码)、submit(提交按钮)、image(图像作为提交按钮)、reset(重置按钮)、hidden(隐藏输入字段)、file（定义文件选择字段和 "浏览..." 按钮，供文件上传）。以下都为 HTML5 新增加的 type 属性值：search(用于输入搜索字符串)、url(用于输入 URL 的字段)、email(用于 e-mail 地址)、tel(用于输入电话号码)、color(拾色器)、number(用于输入数字的字段)、range(用于精确值不重要的输入数字的控件，比如 slider 控件)、time(用于输入时间的控件，不带时区)、month(month 和 year 控件，不带时区)、week(week 和 year 控件，不带时区)、date(date 控件，包括年、月、日，不包括时间)、 datetime(date 和 time 控件，包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区)、 datetime-local(date 和 time 控件，包括年、月、日、时、分、秒、几分之一秒，不带时区)。　　value 属性规定 元素的值。　　name 属性规定 元素的名称。　　src 属性规定显示为提交按钮的图像的 URL，只针对 type="image"。　　alt 属性定义图像输入的替代文本，只针对 type="image"。　　checked 属性规定在页面加载时应该被预先选定的 元素，只针对 type="checkbox" 或者 type="radio"。　　readonly 属性规定输入字段是只读的。　　disabled 属性规定应该禁用的 元素。　　size 属性规定以字符数计的 元素的可见宽度。　　maxlength 属性规定 元素中允许的最大字符数。　　accept 属性值为(audio/* video/* image/* MIME_type)用于规定通过文件上传来提交的文件的类型，只针对 type="file"。

　　下面是 HTML5 为 元素新添加的属性：placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。required 属性规定必需在提交表单之前填写输入字段。autocomplete 属性值为（on、off）用于规定 元素输入字段是否应该启用自动完成功能。autofocus 属性规定当页面加载时 元素应该自动获得焦点。multiple 属性规定允许用户输入到 元素的多个值。pattern 属性规定用于验证 元素的值的正则表达式。step 属性规定 元素的合法数字间隔。list 属性值为 datalist_id，该属性引用

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• HTML 基础_html/css_WEB-ITno...

• HTML 基础- 4个实例

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• html中怎么清除li黑点
• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html的name和value是什么意思
• html如何给背景图片设置透明度
• html中怎么让列表横向排列
• html5怎么创建跳转页尾超链接
• 十分钟搞懂form标签中的GET和POST提交方式

• 404 not found是什么意思
• DOM是什么意思
• url是什么意思？
• 如何改变图片大小
• html是什么
• html如何创建电子邮件链接
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
• 如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作

  

");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});